/* hielo.css · Fase 9 (05/10/2026). Se carga sin bloquear el primer pintado:
   <link rel="stylesheet" href="/hielo.css" media="print" onload="this.media='all'"> + <noscript>.
   Si tarda o falla, la web funciona igual: solo falta la decoración y la animación del menú. */
/* ============ FASE 9: HIELO EN EL HERO DE LA HOME + MENÚ HAMBURGUESA (05/10/2026) ============
   Elegido por Leo en el lab (_sandbox/animaciones): hero 5 «Invierno Igloo» (nieve, velocidad 0.9) con la escarcha
   de cristal de la variante 3 en lugar del copo;
   menú: icono copo + entrada en cascada con nieve. Valores ya horneados (duraciones = base / 0,9).
   Reglas: solo transform y opacity · el H1 (LCP) no se anima · CLS 0 (todo absoluto y aria-hidden)
   · prefers-reduced-motion: todo quieto en su estado final · nada depende del hover. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);}
@keyframes ig-in{from{opacity:0;}}
.hero-hielo>.wrap{position:relative;z-index:1;}
.ig-deco{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
/* Nieve: 2 capas (lejana y media). Cada capa es un elemento con un mosaico de copos que solo se desplaza.
   Se desvanece arriba y abajo y es más tenue sobre la columna del texto. */
/* js/hielo.js pone .ig-pausa si el hero no se ve o la pestaña está oculta */
.ig-pausa .ig-deco,.ig-pausa .ig-deco *{animation-play-state:paused!important;}
.ig-snow{position:absolute;inset:0;animation:ig-in 1400ms var(--ease-out) both;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 78%,transparent),linear-gradient(to right,rgba(0,0,0,.45) 0%,rgba(0,0,0,.45) 45%,#000 70%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 78%,transparent),linear-gradient(to right,rgba(0,0,0,.45) 0%,rgba(0,0,0,.45) 45%,#000 70%);
  mask-composite:intersect;}
.ig-snow .sway{position:absolute;inset:0;animation:ig-sway var(--sd) ease-in-out infinite alternate;}
.ig-snow .layer{position:absolute;left:-24px;right:-24px;top:0;display:block;height:calc(100% + var(--t));background-size:var(--t) var(--t);
  will-change:transform;animation:ig-fall var(--d) linear infinite;}
@keyframes ig-fall{from{transform:translateY(calc(-1 * var(--t)));}to{transform:translateY(0);}}
@keyframes ig-sway{from{transform:translateX(calc(-1 * var(--sw)));}to{transform:translateX(var(--sw));}}
.ig-snow .s1{--sd:10s;--sw:6px;} .ig-snow .s2{--sd:7.8s;--sw:11px;}
.ig-snow .far{--t:263px;--d:44.4s;background-image:
    radial-gradient(circle at 85px 40px,rgba(240,248,255,0.52) 0 1.0px,transparent 1.8px),
    radial-gradient(circle at 141px 96px,rgba(240,248,255,0.65) 0 0.7px,transparent 1.4px),
    radial-gradient(circle at 10px 114px,rgba(240,248,255,0.53) 0 0.7px,transparent 1.4px),
    radial-gradient(circle at 112px 217px,rgba(240,248,255,0.57) 0 0.7px,transparent 1.4px),
    radial-gradient(circle at 165px 249px,rgba(240,248,255,0.62) 0 0.9px,transparent 1.8px),
    radial-gradient(circle at 257px 12px,rgba(240,248,255,0.59) 0 1.0px,transparent 2.0px),
    radial-gradient(circle at 38px 31px,rgba(240,248,255,0.74) 0 0.8px,transparent 1.6px),
    radial-gradient(circle at 48px 153px,rgba(240,248,255,0.61) 0 1.0px,transparent 1.8px),
    radial-gradient(circle at 144px 17px,rgba(240,248,255,0.56) 0 0.7px,transparent 1.4px);}
.ig-snow .mid{--t:331px;--d:30s;background-image:
    radial-gradient(circle at 225px 142px,rgba(240,248,255,0.73) 0 1.4px,transparent 2.6px),
    radial-gradient(circle at 150px 99px,rgba(240,248,255,0.76) 0 1.7px,transparent 3.2px),
    radial-gradient(circle at 81px 190px,rgba(240,248,255,0.81) 0 1.5px,transparent 2.9px),
    radial-gradient(circle at 241px 95px,rgba(240,248,255,0.59) 0 1.8px,transparent 3.4px),
    radial-gradient(circle at 138px 251px,rgba(240,248,255,0.70) 0 1.3px,transparent 2.5px),
    radial-gradient(circle at 13px 221px,rgba(240,248,255,0.72) 0 1.7px,transparent 3.2px),
    radial-gradient(circle at 290px 104px,rgba(240,248,255,0.73) 0 1.6px,transparent 3.1px);}
/* Escarcha de cristal (variante 3 del lab): ramas de hielo a 60° que crecen una vez. El SVG lleva su animación dentro
   (assets/escarcha.svg, metido aquí como data URI desde la Fase 21 para que no sea una petición más) y se usa dos veces: grande arriba a la derecha (tras el formulario) y pequeña abajo a la izquierda. */
.ig-frost{position:absolute;display:block;aspect-ratio:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260'%3E%3Cstyle%3Epath%7Bfill:none;stroke:%23e3f3ff;stroke-linecap:round;transform-box:view-box;transform-origin:0 0;animation:g 1.1s cubic-bezier(.23,1,.32,1) both%7D.fg0%7Banimation-delay:.12s%7D.fg1%7Banimation-delay:.32s%7D.fg2%7Banimation-delay:.52s%7D@keyframes g%7Bfrom%7Bopacity:0;transform:scale(.3)%7D%7D@media (prefers-reduced-motion:reduce)%7Bpath%7Banimation:none%7D%7D%3C/style%3E%3Cpath class='fg0' stroke-width='1.7' d='M0 0L204 51M0 0L177 177M0 0L48 194'/%3E%3Cpath class='fg1' stroke-width='1.15' d='M34 8L87 -46M34 8L55 82M68 17L114 -31M68 17L86 81M102 25L142 -16M102 25L118 80M136 34L164 5M136 34L147 72M170 42L192 19M170 42L179 74M30 30L114 7M30 30L7 114M59 59L132 39M59 59L39 132M88 88L156 70M88 88L70 156M118 118L164 105M118 118L105 164M147 147L187 137M147 147L137 187M8 32L80 53M8 32L-45 84M16 65L76 82M16 65L-28 108M24 97L72 111M24 97L-11 131M32 129L71 140M32 129L4 157M40 162L69 170M40 162L19 182'/%3E%3Cpath class='fg2' stroke-width='0.8' d='M47 -5L40 -31M47 -5L73 1M60 -19L54 -40M60 -19L82 -14M74 -33L70 -46M74 -33L87 -29M39 27L65 33M39 27L21 46M44 45L64 50M44 45L30 60M50 64L62 67M50 64L41 73M79 5L73 -17M79 5L102 11M91 -7L86 -25M91 -7L109 -2M102 -19L99 -30M102 -19L113 -16M72 33L94 38M72 33L57 48M77 49L93 53M77 49L66 60M82 65L94 68M82 65L73 74M112 15L107 -2M112 15L129 19M122 5L117 -11M122 5L138 9M132 -6L128 -16M132 -6L143 -3M106 39L125 44M106 39L92 54M110 53L125 57M110 53L99 64M114 67L123 69M114 67L107 74M143 27L139 14M143 27L156 30M150 20L147 10M150 20L159 22M157 12L155 6M157 12L163 14M139 43L151 47M139 43L130 53M141 53L150 55M141 53L135 60M144 63L151 64M144 63L139 68M176 36L172 25M176 36L187 39M181 31L179 22M181 31L190 33M187 25L185 19M187 25L193 26M172 50L183 53M172 50L164 58M174 58L183 60M174 58L168 64M177 66L182 67M177 66L172 70M51 24L59 -8M51 24L74 47M72 18L78 -6M72 18L90 36M93 12L98 -4M93 12L105 25M24 51L46 73M24 51L-6 59M18 72L34 88M18 72L-3 78M12 93L23 104M12 93L-2 97M77 54L83 31M77 54L94 71M95 49L101 29M95 49L110 64M114 44L117 31M114 44L123 54M54 77L74 97M54 77L28 84M49 95L63 109M49 95L30 100M44 114L55 124M44 114L30 118M105 84L111 63M105 84L121 99M122 79L127 62M122 79L135 92M139 75L143 61M139 75L149 85M84 105L101 122M84 105L61 112M79 122L94 137M79 122L60 128M75 139L84 148M75 139L63 142M129 115L134 98M129 115L141 127M141 112L144 99M141 112L150 121M153 108L155 100M153 108L159 114M115 129L125 140M115 129L100 133M112 141L120 150M112 141L100 144M108 153L115 160M108 153L99 155M157 145L161 132M157 145L166 154M167 142L170 132M167 142L175 149M177 139L179 132M177 139L182 144M145 157L154 166M145 157L132 161M142 167L150 176M142 167L131 170M139 177L144 182M139 177L132 179M26 38L44 20M26 38L32 62M44 43L57 30M44 43L48 60M62 48L72 38M62 48L65 62M-5 45L0 68M-5 45L-28 39M-19 58L-14 78M-19 58L-38 53M-32 71L-29 83M-32 71L-44 68M31 69L45 55M31 69L36 88M46 73L57 62M46 73L50 88M61 78L70 69M61 78L64 90M5 76L10 97M5 76L-17 69M-6 86L-2 101M-6 86L-21 82M-17 97L-14 109M-17 97L-29 94M36 100L48 89M36 100L40 116M48 104L58 94M48 104L51 117M60 107L67 101M60 107L62 116M15 106L19 121M15 106L0 101M6 114L10 128M6 114L-7 110M-2 123L0 131M-2 123L-11 120M42 132L52 122M42 132L45 146M52 135L59 128M52 135L54 145M61 138L66 133M61 138L63 144M25 136L28 148M25 136L13 133M18 143L20 153M18 143L9 141M11 150L12 157M11 150L4 148M48 164L55 156M48 164L50 174M55 166L60 160M55 166L56 173M62 168L66 164M62 168L63 173M35 167L38 178M35 167L24 164M30 172L32 180M30 172L22 170M24 177L26 183M24 177L19 176'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;}
.ig-frost-grande{right:0;top:0;width:clamp(180px,26vw,380px);opacity:.34;transform:scaleX(-1);}
.ig-frost-peq{left:0;bottom:0;width:clamp(140px,17vw,250px);opacity:.34;transform:scaleY(-1);}
@media(max-width:680px){
  .ig-frost-grande{width:190px;opacity:.26;}
  .ig-frost-peq{width:130px;opacity:.22;}
}

/* El icono de la hamburguesa (☰ → copo) está en styles.css: así no cambia al llegar este archivo. */
/* Entrada: fundido + enlaces en cascada (35 ms entre cada uno) y copos azules muy tenues cayendo detrás.
   Al cerrar desaparece al momento: lo que responde al usuario tiene que ser rápido. */
.mobile-menu{position:relative;overflow:hidden;}
.mobile-menu a{position:relative;z-index:1;transition:background-color 120ms ease;}
.mobile-menu a:active{background:var(--ice);}
@keyframes mm-item{from{opacity:0;transform:translateY(-10px);}}
.mobile-menu.open{animation:ig-in 180ms ease-out both;}
.mobile-menu.open>*{animation:mm-item 280ms var(--ease-out) both;}
.mobile-menu.open>*:nth-child(1){animation-delay:30ms;} .mobile-menu.open>*:nth-child(2){animation-delay:65ms;}
.mobile-menu.open>*:nth-child(3){animation-delay:100ms;} .mobile-menu.open>*:nth-child(4){animation-delay:135ms;}
.mobile-menu.open>*:nth-child(5){animation-delay:170ms;} .mobile-menu.open>*:nth-child(6){animation-delay:205ms;}
.mobile-menu.open>*:nth-child(7){animation-delay:240ms;} .mobile-menu.open>*:nth-child(8){animation-delay:275ms;}
.mobile-menu.open::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 263px);z-index:0;pointer-events:none;opacity:.55;
  background-size:263px 263px;background-image:
    radial-gradient(circle at 85px 40px,rgba(30,115,190,0.52) 0 1.0px,transparent 1.8px),
    radial-gradient(circle at 141px 96px,rgba(30,115,190,0.65) 0 0.7px,transparent 1.4px),
    radial-gradient(circle at 10px 114px,rgba(30,115,190,0.53) 0 0.7px,transparent 1.4px),
    radial-gradient(circle at 112px 217px,rgba(30,115,190,0.57) 0 0.7px,transparent 1.4px),
    radial-gradient(circle at 165px 249px,rgba(30,115,190,0.62) 0 0.9px,transparent 1.8px),
    radial-gradient(circle at 257px 12px,rgba(30,115,190,0.59) 0 1.0px,transparent 2.0px),
    radial-gradient(circle at 38px 31px,rgba(30,115,190,0.74) 0 0.8px,transparent 1.6px),
    radial-gradient(circle at 48px 153px,rgba(30,115,190,0.61) 0 1.0px,transparent 1.8px),
    radial-gradient(circle at 144px 17px,rgba(30,115,190,0.56) 0 0.7px,transparent 1.4px);
  animation:ig-in 600ms ease-out both,mm-fall 30s linear infinite;}
/* Fase 11: el bloque «Aerotermia» cuenta como una fila más; sus 2 subfilas entran igual al pulsar + */
.mm-sub:not([hidden]) a{animation:mm-item 240ms var(--ease-out) both;}
.mm-sub:not([hidden]) a+a{animation-delay:40ms;}
@keyframes mm-fall{from{transform:translateY(-263px);}to{transform:translateY(0);}}


/* Botones (CTA) · elegido por Leo en el lab: se hunden al pulsar, brillo de hielo al pasar el ratón (solo con ratón)
   y un aro de hielo cada 6 s en el botón de envío de los formularios (empieza a los 3 s, nunca durante la carga).
   .btn llevaba «transition: all»; aquí se concreta qué cambia, que es más fluido. */
.btn{transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease,box-shadow 200ms ease,color 200ms ease;}
.btn:active,.mobile-bar a:active{transform:scale(.97);transition-duration:100ms;}
.mobile-bar a{transition:transform 160ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .btn-primary{position:relative;overflow:hidden;}
  .btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(219,240,252,.45),transparent);transform:translateX(-130%) skewX(-20deg);}
  .btn-primary:hover::after{transform:translateX(330%) skewX(-20deg);transition:transform 650ms cubic-bezier(.77,0,.175,1);}
}
form button[type=submit].btn-primary{position:relative;}
form button[type=submit].btn-primary::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--sky);
  pointer-events:none;opacity:0;animation:cta-aro 6s var(--ease-out) 3s 3 both;animation-play-state:paused;}
/* máx. 3 aros y solo mientras el botón está a la vista: js/hielo.js pone .aro-on (en pausa no gasta repeticiones) */
form button[type=submit].btn-primary.aro-on::before,.io-no form button[type=submit].btn-primary::before{animation-play-state:running;}
@keyframes cta-aro{0%,70%{opacity:0;transform:scale(1);}74%{opacity:.7;transform:scale(1);}96%,100%{opacity:0;transform:scale(1.06,1.28);}}

@media (prefers-reduced-motion: reduce){
  .ig-deco,.ig-deco *,.mobile-menu,.mobile-menu *,.mobile-menu::before,.btn::before,.btn::after{animation:none!important;}
  .btn,.btn::after,.mobile-bar a{transition:none!important;}
}