/* ============================================================
   FACOMT — cierre inmersivo "¿Empezamos?"
   Hoja aparte: no toca assets/facomt.css. De ahí sólo toma el
   color de marca, la tipografía y las píldoras.

   La escena ya NO es un SVG dibujado a mano: son nueve piezas
   fotográficas en WebP con alfa (assets/img/cierre/) apiladas en
   un escenario de proporción fija 1672:941 —la misma del render de
   referencia— y colocadas en % de ese escenario. Así el acomodo es
   el mismo en cualquier ancho: se escala, no se recompone.

   El scroll no anima pieza por pieza: le escribe --e (0 a 1) a cada
   .pieza y el CSS de abajo decide qué gesto hace con ese número.
   El guion de tiempos vive en maqueta.js, en una sola tabla.
   ============================================================ */

.ctam{
  /* --- el fondo, muestreado del render de referencia ---
     No es un color plano: va de marfil cálido en la orilla izquierda
     a verde grisáceo en la derecha y abajo. Plano se ve de plantilla. */
  --ct-marfil :#f4f2e9;
  --ct-claro  :#eef3ea;
  --ct-medio  :#e0e9df;
  --ct-hondo  :#c5d9cd;
  --ct-fondo  :#a9c3b6;

  /* Cuánto cae cada pieza antes de asentarse. Una sola perilla:
     todas caen lo mismo, así se lee como una sola maqueta armándose
     y no como diez animaciones distintas. */
  --ct-caida  :clamp(46px,5.2vw,96px);

  /* Ancho de la escena respecto al escenario. Arriba de 900 px la
     escena va a sangre; abajo se agranda para que no quede una
     estampilla en medio de la pantalla. */
  --ct-ancho  :100%;

  /* La losa trae su propio reflejo abajo, medio traslúcido. Si la
     escena se clava justo en el canto del escenario, ese reflejo se
     queda a media pantalla y deja una franja muerta debajo. Se baja
     la escena para que el reflejo se salga por el canto, igual que en
     el render de referencia. */
  --ct-baja   :7%;

  --ctam-pantallas:3;
  position:relative;
  height:calc(var(--ctam-pantallas) * 100vh);
  background:var(--ct-medio);
}
/* En pantallas altas y angostas la escena, a ancho de pantalla, queda
   como una estampilla con medio metro de aire arriba: es un paisaje
   16:9 metido en un formato vertical. Se agranda y se recorta por los
   lados —se pierde la casita de la orilla izquierda, no la vialidad ni
   la ciudad, que son el argumento— y el dicho baja para cerrar el hueco. */
@media (max-width:900px){ .ctam{--ct-ancho:132%} }
@media (max-width:600px){ .ctam{--ct-ancho:166%; --ctam-pantallas:2.5} }

.ctam__escenario{
  position:sticky;top:0;
  height:100vh;height:100svh;
  /* REGLA DURA del proyecto: la escena se sale por los lados a
     propósito, así que su contenedor manda overflow:hidden o mete
     scroll horizontal. */
  overflow:hidden;
  /* El dicho va ARRIBA, en el aire que deja la maqueta. Centrado caía
     encima del arbolado y las torres. */
  /* minmax(0,1fr): la escena se sale por los lados a propósito (en
     móvil va más ancha que la pantalla). Sin esto la columna del grid
     crece con ella y empuja al dicho fuera de cuadro. */
  display:grid;grid-template-columns:minmax(0,1fr);align-content:start;
  padding-block:clamp(64px,10vh,118px) 0;
  background:
    radial-gradient(78% 62% at 6% 40%,  var(--ct-marfil) 0%, rgba(244,242,233,0) 66%),
    radial-gradient(86% 54% at 48% 2%,  var(--ct-claro)  0%, rgba(238,243,234,0) 72%),
    linear-gradient(116deg,
      var(--ct-claro) 0%, var(--ct-medio) 34%,
      var(--ct-hondo) 70%, var(--ct-fondo) 100%);
}

/* ---------- el dicho ---------- */
.ctam__dicho{position:relative;z-index:2;text-align:center;isolation:isolate}
/* Halo, no tarjeta. El dicho se traslapa con la punta de las torres y
   con los cerros, y el contraste no puede depender de qué parte de la
   maqueta le toque atrás. Un degradado que se desvanece separa el texto
   sin meter una caja que rompa lo inmersivo.
   Va medido en px/%, NO en % del bloque: con porcentajes se encoge
   cuando el texto se acorta, y justo entonces es cuando el titular
   queda más expuesto. Con el texto corto se caía a 2.35:1. */
.ctam__dicho::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(150%,1100px);height:max(210%,420px);
  background:radial-gradient(58% 54% at 50% 50%,
    rgba(240,243,234,.97) 0%, rgba(240,243,234,.84) 46%, transparent 74%);
}
.ctam__dicho h2{
  margin:.5em 0 .3em;
  font-size:clamp(2rem,5vw,3.7rem);
  line-height:1.06;font-weight:300;letter-spacing:-.03em;
  max-width:18ch;margin-inline:auto;
}
.ctam__botones{
  display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,16px);
  justify-content:center;margin-top:clamp(20px,2.6vw,30px);
}

/* ---------- la escena ----------
   Clavada al canto de abajo del escenario: en flujo normal empujaba el
   bloque y ya no cabían el titular y la maqueta juntos.

   El tope de 112vh es para las pantallas más anchas que 16:9 (una
   laptop con mucha barra de navegador): ahí la escena, a ancho
   completo, saldría más alta que la ventana y le comería la cabeza a
   las torres. Con el tope se recorta cielo vacío, que no estorba. */
.ctam__escena{
  position:absolute;left:50%;bottom:calc(-1 * var(--ct-baja));z-index:1;
  width:min(var(--ct-ancho), calc(112vh * 1672 / 941));
  aspect-ratio:1672/941;
  transform:translateX(-50%);
}
@media (max-height:560px){ .ctam__escena{opacity:.5} }

/* Pantalla alta y angosta: la escena deja de ir clavada al canto de
   abajo y se cuelga del dicho, y el grupo entero se centra. Clavada
   abajo quedaba una franja muerta de media pantalla entre el titular
   y la maqueta — un paisaje 16:9 no llena un formato vertical. */
@media (max-width:900px){
  .ctam__escenario{
    align-content:center;
    padding-block:clamp(70px,9vh,110px) clamp(16px,3vh,40px);
  }
  .ctam__escena{
    position:relative;left:auto;bottom:auto;transform:none;
    width:var(--ct-ancho);
    margin:clamp(16px,3vh,40px) calc((100% - var(--ct-ancho)) / 2) 0;
  }
}

/* La cámara se acerca junto con el armado. Nada de rotateX/rotateY:
   las piezas son fotos, no geometría — al girarlas en 3D se ven como
   una lámina inclinada y se pierde la ilusión de maqueta. */
.ctam__camara{
  position:absolute;inset:0;
  --z:.955; --ty:18px;
  transform:scale(var(--z)) translateY(var(--ty));
  will-change:transform;
}

/* ---------- cómo entra cada pieza ----------
   --e lo escribe el JS a partir del scroll. El gesto lo decide el CSS,
   así se retoca una entrada sin tocar el guion de tiempos. */
.pieza{
  --e:0;
  position:absolute;
  left:calc(var(--x) * 1%);
  top:calc(var(--y) * 1%);
  width:calc(var(--w) * 1%);
  height:auto;
  opacity:var(--e);
  will-change:transform,opacity;
}
.pieza--volteada{transform:scaleX(-1)}

/* La losa es lo primero que llega: es el suelo. Sube, no cae. */
.pieza--sube{transform:translateY(calc((1 - var(--e)) * var(--ct-caida)))}
/* El paisaje de atrás baja poco: está lejos, se mueve menos. */
.pieza--fondo{transform:translateY(calc((var(--e) - 1) * var(--ct-caida) * .45))}
/* Todo lo que se construye cae desde arriba y se asienta. */
.pieza--cae{transform:translateY(calc((var(--e) - 1) * var(--ct-caida)))}
.pieza--cae.pieza--volteada{
  transform:scaleX(-1) translateY(calc((var(--e) - 1) * var(--ct-caida)));
}
/* La vialidad no cae: se tiende de izquierda a derecha, como una
   carpeta que se está colocando. */
.pieza--tiende{
  clip-path:inset(-8% calc((1 - var(--e)) * 100%) -8% -8%);
  transform:translateY(calc((var(--e) - 1) * var(--ct-caida) * .3));
}

/* El dicho NO se anima. Se probó con una entrada atada al scroll y el
   titular quedaba invisible mientras la banda se asomaba: el visitante
   veía un degradado vacío y hasta que se pegaba el escenario aparecía
   el llamado. Es el llamado a la acción — está desde el primer cuadro.
   Lo que se arma son las piezas. */

@media (prefers-reduced-motion:reduce){
  .ctam{height:auto}
  .ctam__escenario{position:static;height:auto;padding-block:var(--seccion) 0}
  /* margin en todos los lados: en angosto la escena trae margen
     horizontal negativo, y aquí va a ancho de bloque. */
  .ctam__escena{position:relative;left:auto;bottom:auto;transform:none;
    width:var(--ct-ancho);
    margin:clamp(24px,4vw,56px) calc((100% - var(--ct-ancho)) / 2) 0}
  .ctam__camara{transform:none}
  .pieza{--e:1;opacity:1;transform:none}
  .pieza--volteada{transform:scaleX(-1)}
  .pieza--tiende{clip-path:none}
}

@media print{
  .ctam__escena{display:none !important}
  .ctam{height:auto;background:none}
  .ctam__escenario{position:static;height:auto;padding-block:24px;background:none}
}