/* Funeraria Nueva Luz · inicio (v2, Halo). Lo que es solo de index.html. Va después de halo.css.
   Todo se ve por defecto. Ganchos de movimiento: ver los atributos data-* del HTML (data-hero-*, data-frio-*,
   data-servicio / data-icono, data-planes*, data-plan, data-foto / data-arco / data-luz, data-ir, data-pie-halo). */

/* Ritmo vertical común y contenido por encima de los resplandores */
.urg, .frio, .sv, .pl, .ins, .vis { position: relative; }
.urg > .contenedor, .sv > .contenedor, .pl > .contenedor, .pl__vista, .ins > .contenedor, .vis > .contenedor, .frio__in { position: relative; z-index: 1; }
.pie { isolation: isolate; }
.pie__halo { z-index: -1; }
.titulo-seccion, .urg__titulo, .sv__titulo, .pl__titulo, .ins__titulo, .vis__titulo { font-family: var(--f-titulo); font-weight: 400; letter-spacing: -.014em; line-height: 1.04; color: var(--marfil); text-wrap: balance; }

/* ===== 1 · HERO ===== */
.hh { position: relative; overflow: clip; padding-block: 1rem 2.25rem;
  background: radial-gradient(70% 60% at 78% 30%, rgba(7, 26, 69, .9), rgba(5, 11, 31, 0) 70%); }
.hh__motas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hh__in { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1rem; }
/* Móvil: el texto se "disuelve" para ordenar sus piezas con el arco (el DOM conserva su orden lógico) */
.hh__texto { display: contents; }
.hh__titulo { order: -2; font-family: var(--f-titulo); font-weight: 400; color: var(--marfil);
  font-size: clamp(2rem, 1.1rem + 3.9vw, 3.4rem); line-height: 1.06; letter-spacing: -.014em; text-wrap: balance; }
/* B-2: en móvil el titular acaba en 3 líneas; se reserva su altura final para que la etiqueta "Celulares" no se mueva ni la pise durante la entrada */
@media (max-width: 719px) { .hh__titulo { min-height: calc(3 * 1.06em); } }
.hh__texto > .telefonos { order: -1; }
.hh__p { order: 1; color: var(--texto-suave); font-size: 1.05rem; }
.hh__wa { order: 2; }
.hh__texto > .baranda { order: 3; color: var(--oro-halo); margin-top: .75rem; }
.hh__eslogan { order: 4; color: var(--oro-halo); font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); }
.hh .telefono { color: var(--marfil); border-color: var(--oro-halo); background: rgba(226, 201, 143, .07); }
.hh .telefonos__titulo { color: var(--texto-suave); }
@media (hover: hover) and (pointer: fine) { .hh .telefono:hover { background: var(--oro-halo); color: var(--fondo); } }
/* Cursor de luz de la máquina de escribir (lo usa el JS; sin él no se ve) */
.tw-c { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.12em; background: var(--oro-halo); box-shadow: 0 0 8px 2px rgba(226, 201, 143, .75); }

/* Arco del hero: móvil, estrecho y alto (media cúpula + paredes) */
.arco--hero { order: -3; width: min(100%, 17rem); margin-inline: auto; --zoom-i: 1.28; --zoom-f: 1.12; }
.arco--hero .arco__marco { aspect-ratio: auto; height: 15rem; }
/* Encuadre: el ataúd (con sus manijas de los extremos) centrado y entero dentro del arco. El recorte móvil (<720 px) y el de escritorio (>=720 px) tienen el
   ataúd en otro lugar de la imagen (centro en 49,5 % y 46,7 % del ancho): object-position se calcula para cada uno (ver _herramientas/v2-encuadre.mjs). */
.arco--hero .arco__img { object-position: 46.7% 50%; }
.hh__anillos { --anillos-d: 34rem; z-index: 0; }
@media (max-height: 700px) { .arco--hero { order: 0; } .arco--hero .arco__marco { height: 13rem; } }
@media (min-width: 720px) { .arco--hero .arco__img { object-position: 44% 50%; } }
@media (min-width: 720px) and (max-width: 899px) { .arco--hero { width: min(100%, 24rem); } .arco--hero .arco__marco { height: 24rem; } .hh__anillos { --anillos-d: 44rem; } }

@media (min-width: 900px) {
  .hh { padding-block: 1.5rem 2rem; }
  .hh__in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 3.5rem; align-items: center; max-width: 80rem; }
  .hh__texto { display: flex; flex-direction: column; min-width: 0; }
  .hh__texto > * + * { margin-top: .9rem; }
  .hh__titulo { font-size: clamp(2.6rem, 1rem + 2.9vw, 3.8rem); }
  .hh__texto > .telefonos { margin-top: 1.25rem; }
  .hh__texto > .baranda { margin-top: 1.5rem; }
  .arco--hero { order: 0; width: 100%; margin: 0; }
  /* arco 4:5 como mucho: con la foto cubriendo el alto, un arco más estrecho que alto dejaría el ataúd (ancho ≈ 0,67 del alto) pegado a las paredes */
  .arco--hero { --zoom-i: 1.19; --zoom-f: 1.04; }
  .arco--hero .arco__img { object-position: 44.5% 50%; }
  .arco--hero .arco__marco { height: auto; aspect-ratio: 4 / 5; max-height: clamp(24rem, calc(100svh - 14.5rem), 44rem); }
  .hh__anillos { --anillos-d: min(54rem, 130%); }
}
@media (min-width: 900px) and (max-height: 820px) {
  .hh { padding-block: 1rem 1.5rem; }
  .hh__titulo { font-size: clamp(2.3rem, 1rem + 2.5vw, 3.2rem); }
  .hh__texto > * + * { margin-top: .7rem; }
  .hh__texto > .telefonos { margin-top: 1rem; }
  .hh__texto > .baranda { margin-top: 1.1rem; }
  .arco--hero .arco__marco { max-height: clamp(22rem, calc(100svh - 13rem), 36rem); }
}

/* ===== 2 · URGENTE ===== */
.urg { overflow: clip; padding-block: clamp(4.5rem, 11vw, 9rem);
  background: radial-gradient(60% 90% at 15% 50%, rgba(7, 26, 69, .85), rgba(5, 11, 31, 0) 70%); }
.urg__anillos { --anillos-d: min(130vw, 66rem); }
.urg__titulo { font-size: clamp(2.3rem, 1rem + 4.6vw, 4.6rem); }
.urg__p { color: var(--texto-suave); font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); }
.urgente { align-items: center; gap: 2.5rem 4.5rem; }
.urgente__acciones { gap: 1rem; }
/* Cada botón lleva un anillo de luz fino (<i class="anillo">, hoja aria-hidden); solo la opacidad de ese anillo cambia, el botón nunca se toca */
.urgente__acciones .btn { position: relative; isolation: isolate; min-height: 3.5rem; font-size: 1.08rem; }
.urgente__acciones .btn > .anillo { position: absolute; inset: -5px; border-radius: 9px; border: 1.5px solid var(--oro-halo); opacity: .5; pointer-events: none; }

/* ===== 3 · CUARTO FRÍO ===== */
.frio { overflow-x: clip; overflow-y: visible; padding-block: clamp(4rem, 10vw, 8rem) clamp(4rem, 9vw, 8rem); text-align: center; }
.frio__escena { position: relative; width: min(100%, 56rem); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; container-type: inline-size; }
.frio__resplandor { left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; }
.frio__anillos { --anillos-d: 100%; }
.frio__anillos > i:nth-child(1) { border-color: rgba(226, 201, 143, .62); border-width: 1.5px; box-shadow: 0 0 60px rgba(226, 201, 143, .14), inset 0 0 60px rgba(226, 201, 143, .08); }
.frio__anillos > i:nth-child(2) { border-color: rgba(226, 201, 143, .4); }
.frio__anillos > i:nth-child(3) { border-color: rgba(226, 201, 143, .3); }
.frio__anillos > i:nth-child(4) { border-color: rgba(226, 201, 143, .46); border-width: 1.5px; }
.frio__frase { position: relative; z-index: 1; max-width: 72%; margin: 0; font-family: var(--f-titulo); font-weight: 300; color: var(--marfil);
  font-size: clamp(2.2rem, 10vw, 6.4rem); font-size: clamp(2.2rem, 11.5cqi, 7.2rem); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; hyphens: manual; }
.frio__ot { font-style: italic; color: var(--oro-halo); font-weight: 300; }
.cifras { margin: clamp(2rem, 5vw, 4rem) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1rem; max-width: 72rem; }
.cifra { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding-inline: .5rem; }
.cifra:last-child { grid-column: 1 / -1; margin-top: 1.1rem; }
.cifra__pre { position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: .1rem; text-align: center; }
.cifra__n { font-family: var(--f-titulo); font-weight: 400; color: var(--oro-halo); font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.2rem); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifra__mon { font-size: .62em; vertical-align: .32em; margin-right: .04em; }
.cifra__t, .cifra__pre { font-size: 1rem; color: var(--texto-suave); letter-spacing: .06em; text-transform: lowercase; font-weight: 500; }
@media (min-width: 900px) {
  .cifras { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .cifra:last-child { grid-column: auto; margin-top: 0; }
  .cifra__pre { bottom: auto; top: -.95rem; }
  .cifra { padding-block: .6rem; }
  .cifra + .cifra { border-left: 1px solid rgba(226, 201, 143, .4); }
  .cifra__n { font-size: clamp(2.6rem, .8rem + 3vw, 4.4rem); }
  .cifra__t, .cifra__pre { font-size: 1.05rem; }
}

/* ===== 4 · SERVICIOS ===== */
.sv { padding-block: clamp(4rem, 9vw, 8rem) clamp(4rem, 8vw, 6rem); }
.sv__cab { max-width: 44rem; }
.sv__titulo { font-size: clamp(2.5rem, 1rem + 4.6vw, 4.4rem); }
.sv__p { color: var(--texto-suave); font-size: clamp(1.15rem, 1rem + .5vw, 1.3rem); }
.sv__lista { margin-top: clamp(2.5rem, 6vw, 4.5rem); display: grid; gap: 0; }
.sv__item { display: flex; align-items: center; gap: 1.4rem; padding-block: 1.4rem; border-top: 1px solid rgba(226, 201, 143, .3); min-width: 0; }
.sv__item:last-child { border-bottom: 1px solid rgba(226, 201, 143, .3); }
.sv__txt { min-width: 0; overflow-wrap: anywhere; font-family: var(--f-titulo); font-size: clamp(1.25rem, 1.05rem + 1vw, 1.5rem); line-height: 1.3; color: var(--marfil); }
.sv__ico { position: relative; flex: none; width: 5rem; height: 5rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(226, 201, 143, .45); }
.sv__ico::before { content: ""; position: absolute; inset: -.45rem; border-radius: 50%; border: 1px solid rgba(226, 201, 143, .14); }
.sv__ico svg { position: relative; width: 3.1rem; height: 3.1rem; fill: none; stroke: var(--oro-halo); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sv__aura { position: absolute; inset: -1.1rem; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(226, 201, 143, .26), rgba(226, 201, 143, 0)); opacity: .5; }
.sv__accion { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
/* Texto al 400 % (~195 px): el ícono se achica y el texto puede partir una palabra larga en vez de empujar la página */
@media (max-width: 300px) { .sv__item { gap: .9rem; } .sv__ico { width: 3.6rem; height: 3.6rem; } .sv__ico svg { width: 2.3rem; height: 2.3rem; } }
@media (min-width: 900px) {
  .sv__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem 3rem; }
  .sv__item { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding-block: 1.75rem 0; border-bottom: 0 !important; }
  .sv__ico { width: 6rem; height: 6rem; }
  .sv__ico svg { width: 4rem; height: 4rem; }
}

/* ===== 5 · PLANES ===== */
.pl { overflow-x: clip; padding-block: clamp(4.5rem, 9vw, 8rem) clamp(3.5rem, 7vw, 6rem); }
.pl__resplandor { left: 50%; top: 62%; width: min(160vw, 90rem); aspect-ratio: 1; translate: -50% -50%; opacity: .7; }
.pl__titulo { font-size: clamp(2.3rem, 1rem + 4.2vw, 4.2rem); max-width: 20ch; }
.pl__p { color: var(--texto-suave); font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem); max-width: 52ch; }
.pl__vista { margin-top: clamp(1.5rem, 4vw, 3rem); padding-block: 2.75rem 2rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: rgba(226, 201, 143, .5) transparent; scroll-padding-inline: var(--gutter); }
.pl__pista { display: flex; gap: 1rem; width: max-content; padding-inline: var(--gutter); }
.plan { position: relative; flex: none; width: min(78vw, 20rem); display: flex; flex-direction: column; align-items: center; text-align: center; scroll-snap-align: center;
  padding: 3.4rem 1.5rem 1.6rem; border: 1px solid rgba(226, 201, 143, .38); border-radius: 999px 999px .6rem .6rem;
  background: radial-gradient(120% 55% at 50% 0, rgba(226, 201, 143, .1), rgba(226, 201, 143, 0) 70%), rgba(7, 26, 69, .5); }
.plan__halo { position: absolute; top: 1.35rem; left: 50%; translate: -50% 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.5px solid var(--oro-halo); box-shadow: 0 0 14px 2px rgba(226, 201, 143, .4); }
.plan__nombre { font-family: var(--f-titulo); font-weight: 400; font-size: 2rem; line-height: 1.1; color: var(--marfil); }
.plan__inscripcion { margin: .9rem auto 0; font-size: 1rem; color: var(--texto-suave); }
.plan__mensual { margin: 1.1rem auto 0; font-size: 1rem; color: var(--texto-suave); }
.plan__cifra { display: block; font-family: var(--f-titulo); font-size: 2.9rem; line-height: 1; color: var(--oro-halo); font-variant-numeric: tabular-nums; margin-bottom: .2rem; }
.plan__efectivo { margin: 1.4rem auto 0; padding-top: 1.2rem; width: 100%; border-top: 1px solid rgba(226, 201, 143, .3); font-size: 1.05rem; line-height: 1.4; color: var(--marfil); }
.plan__acciones { margin-top: auto; padding-top: 1.6rem; width: 100%; display: flex; flex-direction: column; gap: .6rem; }
/* Premium: brillo dorado sutil, sin etiquetas */
.plan--premium { border-color: var(--oro-halo);
  background: radial-gradient(120% 60% at 50% 0, rgba(226, 201, 143, .22), rgba(226, 201, 143, 0) 70%), rgba(7, 26, 69, .62);
  box-shadow: 0 0 0 1px rgba(226, 201, 143, .22), 0 0 60px rgba(226, 201, 143, .16); }
.plan--premium::after { content: ""; position: absolute; inset: .45rem; border: 1px solid rgba(226, 201, 143, .28); border-radius: inherit; pointer-events: none; }
.plan--premium .plan__halo { box-shadow: 0 0 22px 5px rgba(226, 201, 143, .6); background: rgba(226, 201, 143, .35); }
@media (min-width: 900px) {
  .pl__vista { scroll-snap-type: x proximity; scroll-padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); }
  .pl__pista { gap: 1.5rem; padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); }
  .plan { width: 21rem; scroll-snap-align: start; padding-inline: 1.8rem; }
}

/* ===== 6 · INSTALACIONES ===== */
.ins { overflow-x: clip; padding-block: clamp(4rem, 9vw, 8rem); }
.ins__rejilla { display: grid; gap: 3.5rem; }
.ins__titulo { font-size: clamp(2.3rem, 1rem + 4.2vw, 4.2rem); }
.ins__texto { color: var(--texto-suave); }
.ins__texto .texto-grande { font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem); }
.ins__fotos { display: flex; flex-direction: column; gap: 2.75rem; }
.ins__fig { width: min(100%, 17rem); margin: 0; }
.ins__fig--b { align-self: flex-end; }
.ins__fig .arco { --arco-ratio: 3 / 4; }
.ins__fig .arco__img { object-position: 50.7% 50%; }      /* sujeto: las puertas de madera (centro en 50,4 % de la foto) */
.ins__fig--b .arco__img { object-position: 59.6% 50%; }   /* sujeto: el mostrador (centro en 55,6 %) */
.ins__pie { margin-top: 1.1rem; text-align: center; font-family: var(--f-titulo); font-style: italic; font-size: 1.15rem; color: var(--oro-halo); }
@media (min-width: 900px) {
  .ins__rejilla { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 5rem; align-items: center; }
  .ins__fotos { flex-direction: row; gap: 3rem; justify-content: flex-end; align-items: flex-start; }
  .ins__fig { width: auto; flex: 1 1 0; max-width: 18rem; }
  .ins__fig--b { align-self: auto; margin-top: 5rem; }
}

/* ===== 7 · UBICACIÓN ===== */
.vis { overflow-x: clip; padding-block: clamp(4rem, 9vw, 8rem) clamp(4.5rem, 9vw, 8rem); }
.vis__anillos { --anillos-d: min(120vw, 64rem); left: 50%; }
.vis__rejilla { display: grid; gap: 3rem; }
.vis__foto { margin: 0; width: min(100%, 20rem); margin-inline: auto; }
.vis__foto .arco { --arco-ratio: 6 / 5; }   /* sujeto: el cuerpo central del edificio, que no cabe entero en un arco vertical */
.vis__foto .arco__img { object-position: 63.5% 50%; }
.vis__datos { min-width: 0; }
.vis__datos > * + * { margin-top: 1.4rem; }
.vis__titulo { font-size: clamp(2.3rem, 1rem + 4.2vw, 4.2rem); }
.vis__dir { font-family: var(--f-titulo); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.25; color: var(--marfil); }
.vis__datos > p { color: var(--texto-suave); }
.vis__datos .ir { max-width: 36rem; }
.vis__mapa { margin-top: clamp(3rem, 6vw, 5rem); margin-inline: 7px; width: auto; }
@media (min-width: 900px) {
  .vis__rejilla { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5.5rem; align-items: center; }
  .vis__foto { width: min(100%, 22rem); }
}

/* ===== Móvil: nada se desborda ===== */
@media (max-width: 899px) {
  .pie__rejilla > * { min-width: 0; }
}

/* ===== MOVIMIENTO (v2). Todo lo oculto cuelga de html.js-anim, que la pone un script de <head> solo si no hay
   reduced-motion y la quita js/halo.js si GSAP no carga (o a los 3,5 s si la coreografía no arrancó). ===== */

/* Hero: la entrada corre por animaciones CSS desde el primer pintado (no dependen del JS ni de lo que haga el hilo principal).
   Las de aura, anillos, filete y luz usan fill-mode "backwards": al terminar el elemento vuelve a su estado base (todo visible)
   y GSAP puede escribir en línea (salida por scroll) sin que la animación lo pise. El H1 espera a SplitText (respaldo a 1,6 s). */
html.js-anim [data-hero-titulo]:not(.is-listo), html.js-anim [data-maquina]:not(.is-listo) { visibility: hidden; }
html.js-anim [data-hero-luz] { animation: luz-abre 2.4s var(--ease-luz) backwards; }
html.js-anim [data-hero-img] { animation: img-zoom 4.2s var(--ease-luz) both; }
html.js-anim [data-hero-aura] { animation: aura-entra 2.2s var(--ease-luz) backwards, aura-respira 8s var(--ease-respira) infinite; }
html.js-anim .hh__anillos { animation: anillos-respira 11s var(--ease-respira) infinite; }
html.js-anim .hh__anillos > i { animation: anillo-entra 2.4s var(--ease-luz) backwards; }
html.js-anim .hh__anillos > i:nth-child(1) { animation-delay: .5s; }
html.js-anim .hh__anillos > i:nth-child(2) { animation-delay: .8s; }
html.js-anim .hh__anillos > i:nth-child(3) { animation-delay: 1.2s; }
html.js-anim .hh__anillos > i:nth-child(4) { animation-delay: 1.7s; }
html.js-anim .hh__p { animation: fundido-entra 1.1s var(--ease-luz) .9s backwards; }
html.js-anim .hh__motas { animation: fundido-entra 3s var(--ease-luz) 1.2s backwards; }
html.js-anim .arco--hero::after { animation: fundido-entra 1.2s var(--ease-luz) backwards; }
@keyframes luz-abre { from { clip-path: circle(18% at 58% 22%); } to { clip-path: circle(135% at 58% 22%); } }
@keyframes img-zoom { from { scale: var(--zoom-i, 1.28); } to { scale: var(--zoom-f, 1.12); } }
@keyframes aura-entra { from { opacity: 0; } }
@keyframes anillo-entra { from { opacity: 0; scale: .9; } }
@keyframes fundido-entra { from { opacity: 0; } }
@keyframes aura-respira { 0%, 100% { scale: .96; } 50% { scale: 1.05; } }
@keyframes anillos-respira { 0%, 100% { scale: .985; } 50% { scale: 1.02; } }
/* Filete del marco del hero: hoja propia (opacity), en lugar de animar box-shadow */
.arco--hero .arco__marco { box-shadow: none;
  background: radial-gradient(circle at 58% 26%, rgba(240, 218, 160, .62), rgba(150, 108, 52, .5) 34%, rgba(14, 34, 78, .92) 72%, #050B1F); }   /* Impacto (auditoría 2): fondo cálido desde el primer pintado, antes de que la foto llegue */
.arco--hero::after { content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none; border: 1px solid var(--oro-600); border-radius: 999px 999px 7px 7px; }
.hh__anillos > i:nth-child(1) { border-color: rgba(226, 201, 143, .36); }
.hh__anillos > i:nth-child(2) { border-color: rgba(226, 201, 143, .28); }
.hh__anillos > i:nth-child(3) { border-color: rgba(226, 201, 143, .24); }
.hh__anillos > i:nth-child(4) { border-color: rgba(226, 201, 143, .34); }


/* Cuarto frío: la escena queda fija (sticky, sin pin de ScrollTrigger) mientras la frase se enciende */
/* "cuarto frío": oro más claro solo aquí y un velo de noche local detrás (las líneas finas de los anillos que cruzan la palabra quedan atenuadas,
   no atraviesan las letras); sigue siendo dorado y cálido, no blanco */
.frio__ot { color: #F2DDA4; background: rgba(5, 11, 31, .4); box-shadow: 0 0 .3em .12em rgba(5, 11, 31, .4); border-radius: .25em;
  padding-inline: .1em; margin-inline: -.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-shadow: 0 0 .5em rgba(226, 201, 143, .32); }
.cifra__n[data-count] { display: inline-block; min-width: 3ch; text-align: center; }
html.js-anim .frio__pista { height: 230svh; }
html.js-anim .frio__escena { position: sticky; top: 0; height: 100svh; aspect-ratio: auto; }
html.js-anim .frio__anillos { --anillos-d: min(100%, 92svh); }
@media (min-width: 900px) { html.js-anim .frio__pista { height: 300svh; } }

/* Planes: en escritorio con ratón la vista deja de ser un scroller y la pista se desplaza con la sección fija */
.pl--pin .pl__vista { overflow: visible; scroll-snap-type: none; }
.plan__brillo { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.plan__brillo > i { position: absolute; top: -10%; bottom: -10%; left: 0; width: 55%; transform: translateX(-130%);
  background: linear-gradient(100deg, rgba(226, 201, 143, 0), rgba(226, 201, 143, .3) 50%, rgba(226, 201, 143, 0)); }
.plan > :not(.plan__brillo):not(.plan__halo) { position: relative; z-index: 1; }

/* Instalaciones y fachada: la foto se mueve dentro del arco (parallax interno), sin tocar el marco */
.arco--foto .arco__clip, .arco--hero .arco__clip { overflow: hidden; }

/* Cuarto frío en móvil: la frase se acerca más al borde del anillo para ganar presencia */
@media (max-width: 899px) { .frio__frase { max-width: 88%; font-size: clamp(2.2rem, 12.8cqi, 7.2rem); } }

/* ===== Ronda de correcciones (Fase 4, paso 3) ===== */
/* H1 y eslogan: respaldo del navegador, independiente del JS; a los 1,6 s se ven aunque GSAP no haya llegado */
html.js-anim [data-hero-titulo]:not(.is-listo), html.js-anim [data-maquina]:not(.is-listo) { animation: sin-js-visible 0s 1.6s forwards; }
@keyframes sin-js-visible { to { visibility: visible; } }
/* Las dos respiraciones infinitas se pausan con el hero fuera de pantalla (clase del IntersectionObserver de las motas) */
.hh.is-fuera [data-hero-aura], .hh.is-fuera .hh__anillos { animation-play-state: paused; }
/* Cuarto frío: brillo detrás de "cuarto frío" (lo crea y coloca el JS; solo opacity y transform) */
.frio__brillo { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(226, 201, 143, .17), rgba(226, 201, 143, .06) 55%, rgba(226, 201, 143, 0)); }
/* En móvil los anillos desbordan los lados (la escena se siente más grande) y las cifras suben al hueco que deja la escena al soltarse */
@media (max-width: 899px) {
  html.js-anim .frio__anillos { --anillos-d: min(135vw, 88svh); }
  html.js-anim .cifras { margin-top: -14svh; }
}
@media (min-width: 900px) { html.js-anim .cifras { margin-top: -8svh; } }