/* ============================================================================
   TEMPLUM — Recorrido cinematico de portada
   Sustituye al hero de texto. De .cifras hacia abajo la pagina no cambia.

   Se carga DESPUES de templum.css y no redeclara ni un color: consume los
   tokens del sistema (--negro, --marfil, --oro, --acabado-oro). Aqui solo
   viven las variables de animacion.

   Geometria: composicion/ENTREGA.md, direccion C-h2.
   Coreografia: prompts/scroll-cinematico.md (sin paneles ni carrusel).

   Equivalencias con esos dos documentos, por si hay que leerlos contra esto:
     .stage      -> .escenario      .world       -> .mundo
     .back-stack -> .fondo          .shade       -> .sombra
     .hero-title -> .titulo-cine    .intro-copy  -> .entrada-cine
     .puerta-img -> .portico        .arbusto-*   -> .monolito-*
   ==========================================================================*/

:root {
  /* Largo del recorrido. Todo el motor lo lee de aqui: acortarlo en una media
     query reescala los tramos solos, no hay que tocar el JavaScript.         */
  --recorrido-scroll: 3000px;

  /* Camara ------------------------------------------------------------- */
  --mx: 0; --my: 0;
  --fondo-escala: .76;
  --fondo-x: 0px; --fondo-y: 0px; --fondo-opacidad: 1;

  /* Capas de fondo. Los valores de arranque son los de C-h2: cumplen la
     regla de la sangre (>= 2200 px en pantalla). Ver ENTREGA.md §4.        */
  --montanas-y: 0px;   --montanas-escala: 1.25; --montanas-opacidad: .72;
  --casa-y: 210px;     --casa-opacidad: .84;
  --casa-desenfoque: 1.6px; --casa-saturacion: .88; --casa-brillo: 1.06;

  --desenfoque: 0px; --fondo-brillo: 1;

  /* Sombra de oro durante el cruce ------------------------------------- */
  --sombra-opacidad: 1; --sombra-z: 0;
  --sombra-alfa-alto: 0; --sombra-alfa-medio: 0; --sombra-alfa-bajo: 0;

  /* Velo: iguala la temperatura de las seis fotografias. Su borde inferior
     es ademas la costura con la seccion siguiente.                         */
  --velo-cierre: .62;

  /* Titulo -------------------------------------------------------------- */
  --titulo-y: 0px; --titulo-escala: 1; --titulo-opacidad: 1;
  --titulo-tam: min(7.92vw, 14.1vh);

  /* Portico -------------------------------------------------------------
     La composicion aprobada es 16:9, y en ella la cornisa cae justo donde
     termina el titulo. Si el portico se mide solo en vw, en una ventana mas
     ancha que alta (2.2:1, que es lo normal en un portatil maximizado) crece
     hasta comerse el titulo. Asi que se mide por ALTURA, con el vw como tope:
     a 16:9 los dos terminos coinciden y sale el numero aprobado —1020px sobre
     1920—, y en cualquier otra proporcion manda el que no rompe el encuadre. */
  --portico-alto: min(78.06vh, 43.8vw);
  /* Solo la deriva del raton, en px. El centrado NO vive aqui: ver `.portico`. */
  --portico-deriva: 0px; --portico-y: 0px;
  --portico-bajo: .7vh; --portico-escala: 1.02;
  --portico-opacidad: 1; --portico-vis: visible;

  /* Monolitos ----------------------------------------------------------- */
  --mono-izq-x: -50%; --mono-izq-y: 0px; --mono-izq-escala: 1;
  --mono-der-x: -50%; --mono-der-y: 0px; --mono-der-escala: 1;
  --mono-opacidad: 1;

  /* Textos --------------------------------------------------------------- */
  --entrada-y: 0px;  --entrada-opacidad: 1;
  --hacienda-y: 36px; --hacienda-opacidad: 0; --hacienda-vis: hidden;
}

/* ------------------------------------------------------ Barra sobre la escena
   Mientras dura el recorrido la barra va a cristal: la banda semiopaca corta
   el cielo por arriba y rompe el encuadre. El texto se sostiene con sombra
   propia, mas el oscurecido superior del velo.                              */
.con-recorrido .barra:not(.es-solida) {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Un resguardo degradado, no una banda: se comporta como el margen de
   seguridad de un rotulo de cine. Sostiene el texto sobre cualquier parte de
   la escena —cielo claro o piedra al sol— sin cortarla por arriba. Va mas
   alto que la barra a proposito: si terminara justo en sus 76px se veria el
   canto del degradado cruzando el encuadre.                                 */
.con-recorrido .barra::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; z-index: -1;
  height: 210px; pointer-events: none;
  background: linear-gradient(180deg,
              rgba(10, 9, 8, .80) 0%, rgba(10, 9, 8, .34) 42%, rgba(10, 9, 8, 0) 100%);
  transition: opacity var(--transicion);
}
.con-recorrido .barra.es-solida::after { opacity: 0; }
.con-recorrido .barra:not(.es-solida) .menu a,
.con-recorrido .barra:not(.es-solida) .nombre {
  text-shadow: 0 2px 16px rgba(10, 9, 8, .85), 0 0 34px rgba(10, 9, 8, .6);
}
.con-recorrido .barra:not(.es-solida) .marca img {
  filter: drop-shadow(0 2px 14px rgba(10, 9, 8, .9));
}

/* --------------------------------------------------------------- Andamio */
.recorrido {
  position: relative;
  height: calc(100svh + var(--recorrido-scroll));
  background: var(--negro);
}

/* Modo paralaje: una pantalla y ya. La composicion no se atraviesa, solo
   deriva con el raton. Lo activa data-modo="paralaje" en el HTML.           */
.recorrido--paralaje { height: 100svh; }
.recorrido--paralaje .escenario { cursor: default; }
.recorrido--paralaje .pista-arrastre { display: none; }

/* Sin min-height: si el escenario fuera mas alto que el viewport, el portico
   y el texto de entrada —que se anclan a su base— caerian bajo el pliegue.  */
.escenario {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden; isolation: isolate;
  background: var(--negro);
  cursor: grab;
  touch-action: pan-y;          /* el gesto vertical nativo se conserva */
}
.escenario.esta-arrastrando { cursor: grabbing; }

/* El scroll suave de templum.css pelea con el arrastre: cada window.scrollTo
   encolaria una animacion y el gesto se sentiria con retraso. Solo mientras
   se arrastra, se desactiva.                                               */
html.esta-arrastrando { scroll-behavior: auto; }

.mundo { position: absolute; inset: 0; overflow: hidden; background: var(--negro); }

/* `max-width: none` NO es opcional. templum.css declara `img { max-width:100% }`
   para el resto de la pagina, y aqui recortaria en seco toda capa declarada
   por encima del 100 %: la casa al 150 % se quedaria en 100 % y perderia la
   sangre, y el portico dejaria de poder ensancharse a 105vw para cruzarse.
   Es exactamente el fallo que describe ENTREGA.md §4, por otra puerta.      */
.mundo img {
  position: absolute; display: block; max-width: none;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
  will-change: transform, opacity, filter;
}

/* ----------------------------------------------------------- Las 6 capas */

/* z 0 — Cielo */
.cielo {
  inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  filter: blur(var(--desenfoque)) brightness(var(--fondo-brillo));
}

/* z 1 — La camara. Todo lo que vive dentro se acerca; portico y monolitos
   tienen su propio movimiento porque estan fuera.                          */
.fondo {
  position: absolute; top: 0; bottom: 0; left: -3vw; right: -3vw; z-index: 1;
  opacity: var(--fondo-opacidad);
  transform-origin: 50% 100%;
  transform: translate3d(var(--fondo-x), var(--fondo-y), 0) scale(var(--fondo-escala));
  will-change: transform, opacity;
}

/* z 1 — Montanas. 112 % x 2035 x 1.25 x 0.76 = 2165 px en pantalla. */
.montanas {
  top: auto; bottom: 0; left: 48%; width: 112%; height: auto; z-index: 1;
  opacity: var(--montanas-opacidad);
  transform: translate3d(-50%, var(--montanas-y), 0) scale(var(--montanas-escala));
  filter: blur(var(--desenfoque)) brightness(var(--fondo-brillo));
}

/* z 3 — Casa. 150 % x 2035 x 0.95 x 0.76 = 2204 px en pantalla.
   El filtro no es decoracion: portico y hacienda son la misma piedra y sin
   perspectiva aerea se leen en el mismo plano. Ver ENTREGA.md §5.           */
.casa {
  top: auto; bottom: 0; left: 48%; width: 150%; height: auto; z-index: 3;
  opacity: var(--casa-opacidad);
  transform: translate3d(-50%, var(--casa-y), 0) scale(.95);
  filter: blur(var(--casa-desenfoque))
          saturate(var(--casa-saturacion))
          brightness(var(--casa-brillo))
          contrast(.94);
}

/* z 4 — Portico de travertino. Se atraviesa acercandose, no levantandolo: el
   vano crece hasta ser mas grande que la pantalla y las jambas se van por los
   bordes. Por eso el origen esta en el centro del VANO (50% 56%) y no en el
   de la imagen: si se escalara desde el centro geometrico, la puerta se iria
   hacia abajo mientras la cruzas.                                           */
.portico {
  left: 50%; bottom: var(--portico-bajo);
  width: calc(var(--portico-alto) * 1.2099);   /* 1061 / 877 de la imagen */
  height: auto; z-index: 4;
  opacity: var(--portico-opacidad);
  visibility: var(--portico-vis);
  /* Sin `filter` aqui. Con un blur encima y la escala del cruce, Chrome
     descarta la capa entera y el portico desaparece de golpe a mitad del
     recorrido. La profundidad de campo ya la lleva el fondo; el portico es
     el sujeto y va en foco.                                                 */
  /* -52.45% y no -50%. El recorte no esta centrado en su propia imagen: el eje
     de simetria del porticon cae en el 52.45% de la caja, 26 px a la derecha
     del centro de un archivo de 1061. Centrando la CAJA, la piedra se iba ese
     2.45% de su ancho a la derecha —unos 19 px en un portatil— y la escena
     entera se leia torcida.

     El 52.45% sale de casar el perfil de luminancia de la imagen con su propio
     espejo. NO de la caja alfa: esa da 53.91% y es un valor falso, porque la
     jamba derecha esta cortada por el borde del archivo (la piedra llega a
     x=1057 de 1061) y eso sesga el centro del recuadro hacia la derecha.

     Se corrige en un solo sitio: el JS ya solo escribe la deriva del raton en
     px y no vuelve a declarar el -50%, que era donde se podia desincronizar.

     El origen de la escala va al mismo 52.45%, que es el centro del vano: es
     por donde tiene que entrar la camara al cruzar el umbral.               */
  transform: translate3d(calc(-52.45% + var(--portico-deriva)), var(--portico-y), 0)
             scale(var(--portico-escala));
  transform-origin: 52.45% 56%;
}

/* z 6 — Monolitos. Vienen recortados a la pieza, asi que se colocan con
   `left` y giran sobre su propio centro, no sobre el del lienzo.            */
.monolito {
  bottom: -40px; width: clamp(150px, 14.3vw, 340px); height: auto; z-index: 6;
  opacity: var(--mono-opacidad);
  transform-origin: 50% 52%;
}
.monolito-izq {
  left: 15%;
  transform: translate3d(var(--mono-izq-x), var(--mono-izq-y), 0) scale(var(--mono-izq-escala));
}
.monolito-der {
  left: 85%;
  transform: translate3d(var(--mono-der-x), var(--mono-der-y), 0) scale(var(--mono-der-escala));
}

/* z 7 — Velo. Sin esto ninguna combinacion de las seis fotografias se ve
   bien: es lo que iguala la temperatura de color. El ultimo alto lleva el
   cierre, que funde la escena en tinta justo donde empieza .cifras.         */
.velo {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background:
    radial-gradient(112% 80% at 50% 40%, rgba(0, 0, 0, 0) 36%, rgba(10, 9, 8, .50) 100%),
    linear-gradient(180deg, rgba(10, 9, 8, .46) 0%, rgba(10, 9, 8, 0) 17%,
                    rgba(10, 9, 8, 0) 54%, rgba(10, 9, 8, var(--velo-cierre)) 100%),
    linear-gradient(180deg, rgba(201, 162, 75, .09) 0%, rgba(201, 162, 75, 0) 46%);
}

/* Sombra de oro: solo durante el cruce, para que el foco este en el umbral */
.sombra {
  position: absolute; inset: 0; z-index: var(--sombra-z); pointer-events: none;
  opacity: var(--sombra-opacidad);
  background: linear-gradient(180deg,
    rgba(201, 162, 75, var(--sombra-alfa-alto))  0%,
    rgba(201, 162, 75, var(--sombra-alfa-medio)) 48%,
    rgba(201, 162, 75, var(--sombra-alfa-bajo))  100%);
}

/* ------------------------------------------------------------- El titulo
   Se APOYA en la cornisa del portico: en la composicion aprobada su base cae
   exactamente donde empieza la piedra. Como el portico ahora se mide por
   altura, el titulo se coloca por resta —fondo del escenario menos portico
   menos su propia caja— y la relacion se mantiene en cualquier proporcion de
   ventana en vez de romperse en las anchas.                                 */
.titulo-cine {
  position: absolute; left: 50%; z-index: 3;
  top: calc(99.26vh - var(--portico-alto) - var(--titulo-tam) * .78);
  width: min(94vw, 1780px); margin: 0;
  font-family: var(--serif);
  font-size: var(--titulo-tam);
  font-weight: 900; line-height: .78; letter-spacing: .06em;
  /* En versalitas por CSS, no en el marcado: Google y los lectores de
     pantalla siguen leyendo «Templum», no «TEMPLUM» deletreado.            */
  text-transform: uppercase;
  /* Centra la TINTA, no la caja de avance. Medido con `measureText` sobre la
     Playfair 900 real: el avance de «TEMPLUM» son 694.53 px a 114 px de cuerpo
     y la tinta 684.02, o sea sobran 10.51 px por detras —la letra-espacio que
     queda tras la ultima M, mas su aire lateral—. La mitad, 5.26 px, es el
     desplazamiento que vuelve a centrar la mancha: .046em.

     No fiarse aqui de medir el render a ojo ni por deteccion de color: el
     `drop-shadow` dorado de 34 px rodea la palabra de un halo que cualquier
     umbral cuenta como letra, y lo cuenta distinto a cada lado porque el cielo
     no tiene el mismo tono a izquierda y derecha. Por ahi salen desviaciones
     fantasma de mas de 10 px que no existen.                                */
  text-indent: .046em;
  text-align: center;
  /* El mismo oro grabado de la landing anterior: un degradado estable que da
     el metal, y encima una franja de luz que barre. Lo unico que se mueve es
     el brillo; el metal no cambia. `destello` vive en templum.css.          */
  background-image:
    linear-gradient(102deg, transparent 38%, rgba(255, 252, 240, .60) 47%,
                    rgba(255, 252, 240, .16) 53%, transparent 61%),
    linear-gradient(180deg, #fbf0cf 0%, #e8ce8b 24%, #c9a24b 50%,
                    #8a6a2a 74%, #e2c078 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: -70% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 34px rgba(201, 162, 75, .22));
  animation: destello-marca 4.6s ease-in-out infinite;
  transform: translate3d(-50%, var(--titulo-y), 0) scale(var(--titulo-escala));
  opacity: var(--titulo-opacidad);
  will-change: transform, opacity;
}

/* El `destello` de templum.css tarda 4.4s en cruzar la palabra y espera otros
   3.6s: tan lento que no se lee como un golpe de luz, y tan espaciado que
   cuando vuelve ya no lo estabas mirando. Este invierte el reparto: el
   reflejo cruza en 1.2s y luego espera 3.4s. El barrido es 3.7 veces mas
   rapido y el ciclo entero pasa de 8s a 4.6s.
   El de templum.css se queda como estaba: es del wordmark del hero de texto. */
@keyframes destello-marca {
  0%         { background-position: -70% 0, 0 0; }
  26%, 100%  { background-position: 180% 0, 0 0; }
}

/* -------------------------------------------------------- Texto de entrada
   Dos bloques que nunca coinciden. `.saludo` es lo unico que se ve al entrar
   —la marca y el lema, sin nada mas que los estorbe—; `.tras-la-puerta` entra
   al otro lado del umbral, con la hacienda ya revelada, y es donde se explica
   la firma y se pide el contacto.
   Comparten caja y borde inferior: uno se funde donde el otro aparece.      */
/* El `+ 36px` es exactamente lo que medía la cejilla de lugares que vivía
   encima del lema —20.7px de línea más 16 de margen— antes de retirarla. El
   bloque está anclado por abajo, así que al quitarla el lema no se movía: solo
   crecía el hueco entre el pórtico y él, y quedaba hundido contra el canto.
   Sumando aquí lo que se fue, el lema recupera la altura óptica que tenía el
   grupo de dos líneas. Los topes del clamp suben lo mismo.                   */
.entrada-cine {
  position: absolute; left: 50%; z-index: 9;
  bottom: clamp(76px, calc(6.85vh + 36px), 132px);
  width: min(680px, calc(100vw - 40px));
  text-align: center;
  transform: translateX(-50%);
}

.saludo {
  position: relative;
  transform: translateY(var(--entrada-y));
  opacity: var(--entrada-opacidad);
  will-change: transform, opacity;
}

.tras-la-puerta {
  position: absolute; left: 50%; bottom: 0; width: 100%;
  transform: translate(-50%, var(--hacienda-y));
  opacity: var(--hacienda-opacidad);
  /* `visibility` y no solo opacidad: mientras no se ha cruzado la puerta, sus
     tres enlaces y el boton de contacto no deben poder recibir el foco del
     teclado ni un clic a ciegas.                                            */
  visibility: var(--hacienda-vis);
  will-change: transform, opacity;
}
/* El texto cae sobre travertino a pleno sol, que es casi tan claro como el
   marfil. Una sombra no basta: hace falta que el fondo BAJE de luminancia
   detras de las letras. Es un velo propio, elipse difuminada sin canto duro,
   para que se lea sin que parezca una caja pegada encima de la fotografia.
   Sobre el, el marfil queda por encima de 10:1.                             */
/* Cada bloque lleva su propio velo, para que se funda con el.
   La caja se estira muy por fuera del texto y el degradado llega a cero
   bastante antes de su borde. Si el ultimo alto se dejara en el 100 %, la
   elipse alcanzaria las esquinas con alfa todavia visible y se veria el
   rectangulo recortado sobre la piedra.                                     */
.saludo::before,
.tras-la-puerta::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -84px -180px -104px;
  background: radial-gradient(ellipse 56% 52% at 50% 50%,
              rgba(10, 9, 8, .88) 0%, rgba(10, 9, 8, .76) 40%,
              rgba(10, 9, 8, .38) 66%, rgba(10, 9, 8, 0) 88%);
}

/* Aqui vivia `.entrada-cine .lugar`, la cejilla «Puebla · Tlaxcala · Morelos».
   Se retiro con su marcado: la regla queda anotada y no muerta por si alguna
   vez vuelve una cejilla al plano de entrada. La clase `.lugar` sigue en uso
   en las fichas, con otro estilo; esta era solo la del hero.                 */

/* Es la frase que sostiene sola el plano de entrada, asi que pesa como un
   titular y no como un pie. Desde que no lleva cejilla encima, es lo unico
   que se ve al entrar.                                                      */
.entrada-cine .lema {
  margin: 0;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.55rem, 3vw, 3rem);
  line-height: 1.16; letter-spacing: .02em;
  color: #fbf7ef;
  text-shadow: 0 2px 6px rgba(10, 9, 8, .9), 0 3px 28px rgba(10, 9, 8, .85);
}
.entrada-cine .frase {
  max-width: 580px; margin: 0 auto;
  font-size: clamp(1.02rem, 1.22vw, 1.32rem); line-height: 1.46;
  color: #f4efe4;
  text-shadow: 0 1px 3px rgba(10, 9, 8, .9), 0 2px 20px rgba(10, 9, 8, .8);
}

/* Las pildoras son marfil solido: el mismo #efe9dc de las superficies de la
   pagina, que es tambien el valor alto del travertino. Por eso la piedra de
   la fotografia y la interfaz se leen como un solo material.               */
.entrada-cine .clases {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-top: 24px;
}
.entrada-cine .clases a {
  display: inline-flex; align-items: center; min-height: 42px;
  padding: 0 25px; border-radius: 999px;
  background: var(--marfil); color: var(--negro);
  font-family: var(--sans); font-size: .9rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35),
              inset 0 0 0 1px rgba(138, 106, 42, .22);
  transition: background var(--transicion), color var(--transicion);
}
.entrada-cine .clases a:hover { background: var(--oro-claro); }

.entrada-cine .asesor {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  font-family: var(--sans); font-size: .86rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--oro-claro); text-decoration: none;
  text-shadow: 0 1px 3px rgba(10, 9, 8, .9), 0 2px 20px rgba(10, 9, 8, .8);
}
.entrada-cine .asesor:hover { color: var(--marfil); }

/* ------------------------------------------------------- Pista de arrastre
   El gesto ya no es desplazar, es arrastrar. Se va con el mismo fundido que
   se lleva el titulo.                                                       */
.pista-arrastre {
  position: absolute; left: 50%; bottom: 22px; z-index: 9;
  translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: .62rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--marfil-2); pointer-events: none;
  opacity: var(--entrada-opacidad);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
}
.pista-arrastre i {
  width: 1px; height: 34px;
  background: linear-gradient(var(--oro), transparent);
  animation: cae 2.4s ease-in-out infinite;
  transform-origin: top;
}

/* ---------------------------------------------------------- Adaptaciones */
@media (max-width: 1100px) {
  :root { --recorrido-scroll: 2500px; }
  .monolito { width: clamp(120px, 16vw, 260px); }
}

/* ════════════════════════════════ Telefono: portada quieta y reencuadrada ══
   El recorrido se apaga —el motor lo detecta con la misma anchura— y la
   escena se recompone para vertical. No es la composicion aprobada encogida:
   es un encuadre distinto sobre las mismas seis capas. La camara se acerca
   (--fondo-escala 1.42 en vez de .76) para que la hacienda llene el ancho en
   vez de quedarse en una franja, el portico crece hasta sangrar por los
   lados, y los monolitos se retiran porque a esta anchura serian dos astillas
   que solo ensucian el borde.                                               */
@media (max-width: 820px) {
  .recorrido { height: 100svh; }

  /* La escena se comprime en la mitad de arriba y el texto se sienta en un
     zocalo de tinta debajo. Es lo unico que resuelve las dos cosas a la vez.

     Intento 1: el portico a 52vh apoyado en el suelo y el texto encima. La
     hoja de bronce quedaba partida y fuera de pantalla.
     Intento 2: encogerlo y subirlo a 34vh del suelo. Peor: al separarlo del
     borde aparecio cielo por debajo y la puerta LEVITABA, con la hacienda
     levitando aparte y un hueco de cielo entre las dos. Dos recortes pegados.

     La regla que faltaba: en una escena montada con fotos, ninguna pieza puede
     terminar dentro del encuadre. O sangra por un borde o se esconde detras de
     otra pieza. Aqui el portico ocupa TODO el ancho —sangra por los lados— y su
     base se mete detras del zocalo de texto, asi que nunca se ve donde acaba.
     Apoyado, no flotando.                                                    */
  :root {
    /* 44vh y no 38: el recorte lleva alfa a los lados, asi que la piedra es
       mas estrecha que su caja. A 38vh la caja median 388px de un marco de
       390 —de borde a borde sobre el papel— pero la piedra solo llegaba a
       354 y se le veian los dos cantos con cielo detras. A 44vh la caja mide
       449 y la piedra 409: sangra de verdad.                                */
    --portico-alto: 44vh;
    --portico-bajo: 26vh;   /* la base entra 26vh detras del zocalo de texto  */
    --titulo-tam: min(13vw, 8.4vh);
  }

  /* En vertical, cada pieza se dimensiona por ALTURA y no por el ancho del
     escenario. Es lo unico que aguanta: los porcentajes del encuadre apaisado
     dependen de la proporcion de la ventana, asi que lo que cuadra en un
     telefono de 390 se desborda en una tableta de 800. Con la altura como
     patron, el reparto es el mismo en las dos.                              */
  .fondo { transform: none; }

  .casa {
    /* Va de 17vh a 41vh y la cornisa del portico entra en 26vh: asoman 9vh de
       hacienda por encima —el «templo arriba»— y las otras 15vh se esconden
       detras. Mide 128% de ancho para sangrar por los dos lados; si cupiera
       entera se le verian los cantos y volveria a levitar. La explanada, que
       es el borde inferior del recorte, cae en 41vh y queda tapada por el
       portico: si asomara se veria cielo por debajo del suelo.               */
    /* No asoma por encima de la cornisa: se ve SOLO por el vano, entre los
       barrotes. Asomando era otro recorte flotando —sobre la cornisa caben
       13vh, y esa franja de la foto es cielo, asi que lo unico que entraba era
       la linea del tejado: un edificio sin cuerpo ni base, una pestana de
       carton apoyada en la puerta—. Ensenar mas edificio obligaria a bajar la
       cornisa, o sea a encoger la puerta, que es de donde venia todo el lio.
       Asi la escena tiene tres planos honestos: cielo, puerta, y al fondo la
       hacienda entrevista. Nada empieza ni acaba en el aire.

       Arranca en 36vh —6vh por debajo del canto de la caja del portico, que
       lleva alfa y no empieza a pintar piedra hasta un poco mas abajo— y mide
       140% de ancho: su base cae en 72vh, ya dentro del zocalo, y a la vez es
       poco zoom como para que por el vano se reconozca la arqueria. Al 170%
       solo se veia una mancha ocre sin forma.                                */
    top: 36vh; bottom: auto; left: 50%;
    width: 140%; height: auto;
    opacity: 1;
    filter: blur(1.1px) saturate(.9) brightness(1.05) contrast(.95);
    transform: translateX(-50%);
  }

  /* `.mundo img` lleva especificidad 0,1,1 — hay que igualarla o el display
     de la regla base gana y estas capas se siguen pintando.                  */

  /* La sierra queda entera detras de la fachada a este encuadre: pintarla es
     pagar 339 KB por nada.                                                   */
  .mundo .montanas { display: none; }

  /* Dos astillas de piedra en los bordes no son dos monolitos: ensucian.    */
  .mundo .monolito { display: none; }

  /* Arriba, con el cielo entre el titulo y la fachada: apoyarlo en la cornisa
     lo bajaria hasta el medio de la pantalla, encima del texto.              */
  .titulo-cine {
    top: 9vh;
    /* Por encima del velo (z-index 7). Estando debajo, oscurecer el cielo
       oscurecia tambien la palabra y el contraste no se movia: 1.60 -> 1.86,
       cuando el minimo es 3. Sacandola arriba, el velo trabaja solo sobre el
       cielo y el oro conserva su brillo, que es de donde sale la separacion.
       En escritorio se queda debajo a proposito: alli forma parte de la escena
       y el velo la integra con la piedra.                                    */
    z-index: 8;
    /* El degradado de oro cae aqui sobre el trozo mas claro del cielo y medido
       da 1.05:1 —el minimo para texto grande es 3:1—, asi que en un telefono
       al sol la marca casi no existe. El `drop-shadow` que trae es oro sobre
       oro y no separa nada. Estas dos sombras en tinta son un halo, no un
       borde: siguen el perfil de la letra y la levantan del cielo sin tocar
       el degradado, que es lo que da el metal.                               */
    /* Nada de `text-shadow` aqui. Con `background-clip: text` el fondo se pinta
       en la fase de fondo y la sombra de texto en la del contenido, o sea
       DESPUES: en vez de quedar detras de la letra le queda encima, y una
       sombra en tinta sobre el oro lo apaga. Se veia bronce sucio. La
       separacion la dan la rampa de abajo y el velo, que si van donde deben.
       El `drop-shadow` del filtro base si es valido: ese cae fuera del glifo. */

    /* La rampa de escritorio baja hasta #8a6a2a en el 74%: sobre una pared de
       marmol funciona como sombra del relieve, pero sobre cielo ese tramo es
       casi tan oscuro como el fondo y la mitad inferior de la palabra se
       borra. Esta rampa mantiene el metal —tiene su valle y su reflejo— pero
       el punto mas oscuro no baja de #b08a3c, asi que ninguna franja de la
       letra se confunde con el cielo. El barrido del destello no cambia.     */
    background-image:
      linear-gradient(102deg, transparent 38%, rgba(255, 252, 240, .60) 47%,
                      rgba(255, 252, 240, .16) 53%, transparent 61%),
      linear-gradient(180deg, #fff6dd 0%, #f2dda6 26%, #e0c072 52%,
                      #b08a3c 76%, #f0d79b 100%);
  }

  /* Sin cruce, el velo no tiene que cerrar a tinta: solo asienta el texto.
     La primera parada sube de .46 a .62 y se estira hasta el 26%: es la banda
     de cielo donde cae la marca, y bajarle la luminancia es lo que la hace
     legible sin oscurecer la fachada, que empieza mas abajo.                 */
  .velo {
    --velo-cierre: .72;
    background:
      radial-gradient(112% 80% at 50% 40%, rgba(0, 0, 0, 0) 36%, rgba(10, 9, 8, .50) 100%),
      linear-gradient(180deg, rgba(10, 9, 8, .62) 0%, rgba(10, 9, 8, .18) 26%,
                      rgba(10, 9, 8, 0) 46%, rgba(10, 9, 8, var(--velo-cierre)) 100%),
      linear-gradient(180deg, rgba(201, 162, 75, .09) 0%, rgba(201, 162, 75, 0) 46%);
  }

  /* Sin cruce no hay «antes» y «despues»: los dos bloques se leen a la vez y
     en columna, con un solo velo debajo de todo.                            */
  .tras-la-puerta {
    position: static; width: auto;
    transform: none; opacity: 1; visibility: visible;
    margin-top: 16px;
  }
  .saludo::before, .tras-la-puerta::before { display: none; }

  /* El texto deja de flotar sobre la piedra y se sienta en un zocalo de tinta
     a todo el ancho. Ademas de resolver la lectura —el velo redondo anterior
     dejaba ver travertino a pleno sol por debajo de las letras— es la pieza
     que sostiene la escena: la base del portico se mete aqui detras, y por eso
     la puerta se apoya en algo en vez de terminar en el aire.                */
  .entrada-cine {
    left: 0; right: 0; bottom: 0;
    width: auto; transform: none;
    padding: 0 20px 22px;
  }
  .entrada-cine::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset: -56px 0 0;
    /* Arranca transparente y cierra en tinta plena: el corte no puede ser una
       linea recta o se lee como una banda pegada encima de la fotografia. */
    background: linear-gradient(180deg,
                rgba(10, 9, 8, 0) 0%, rgba(10, 9, 8, .62) 26%,
                rgba(10, 9, 8, .93) 52%, #0a0908 76%);
  }

  .escenario { cursor: default; }
  .pista-arrastre { display: none; }
}

@media (max-width: 640px) {
  /* Ya no hacen falta los 76px que dejaban sitio al boton flotante: sobre la
     portada ese boton se retira (ver `.en-portada` en templum.css), porque en
     la portada el contacto ya lo lleva el propio CTA y el disco solo tapaba su
     flecha. Con la esquina libre, el texto baja y respira.                   */
  .entrada-cine { padding-bottom: 18px; }
  /* Las tres clases tienen que caber en UNA fila. En dos, el zocalo crece
     hasta comerse la mitad de la puerta y la escena se queda sin sitio.     */
  .entrada-cine .clases { flex-wrap: nowrap; }
  .entrada-cine .clases a {
    min-height: 36px; padding: 0 11px;
    font-size: .70rem; letter-spacing: .08em; white-space: nowrap;
  }
  .entrada-cine .frase { font-size: .94rem; line-height: 1.38; }
  .entrada-cine .lema { font-size: clamp(1.35rem, 6.4vw, 1.9rem); }
}

@media (prefers-reduced-motion: reduce) {
  /* La composicion se sigue recorriendo, solo que sin inercia ni paralaje
     de puntero: el motor fuerza --mx/--my a 0 y salta a la posicion.        */
  .pista-arrastre i { animation: none; }
}