/* =========================================================================
   EMR Tech — capa "cine" (fase 1 del plano-secuencia).

   Se carga DESPUÉS de site.css y sólo cambia lo necesario para que el
   escenario 3D pase de estar encerrado en un div del hero a ser el fondo
   de toda la primera mitad de la página.

   Todo cuelga de .cine en <html>, que pone un script en línea en el <head>
   y que escenario.js quita si el 3D no se pudo construir. Sin esa clase,
   esta hoja no hace nada y la página se ve igual que index.html.
   ========================================================================= */

/* Los chips del stack arrancan con desplazamientos al azar (site.js) antes de
   acomodarse, y algunos se salen por la derecha: en teléfono la página se
   podía arrastrar de lado.

   Se corta en la propia lista y no en <html>: cualquier overflow en la raíz
   —"hidden" o "clip"— le rompe el anclaje a las secciones sticky, que es
   justo de lo que vive todo el recorrido. Aquí sólo se recortan los chips
   mientras vuelan a su sitio.
   Nota: index.html arrastra el mismo defecto y necesita esta misma línea. */
.chips{overflow:hidden}

/* ------------------------------------------------- el escenario, al fondo */

/* Sin modo cine no se construye nada dentro: el div tiene que quedar inerte.
   Si sigue activo, su velo (el ::after de abajo, al 55% de opacidad) oscurece
   el fondo de toda la página en teléfono sin que haya un 3D que lo justifique:
   medido en 390px, el fondo salía más oscuro que en la portada clásica. */
html:not(.cine):not(.viaje) #escenario{display:none}

#escenario{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;              /* el scroll y los clics pasan de largo */
  contain:layout paint style;       /* su repintado no invalida el resto */
}
#escenario canvas{display:block;width:100%;height:100%}

/* Viñeta fija: pega el 3D al fondo oscuro de la marca. */
#escenario::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 95% at 50% 42%,transparent 38%,rgba(7,7,12,.72) 100%);
}

/* Velo direccional: oscurece el lado donde vive el texto. Su opacidad la
   maneja escenario.js plano por plano con la variable --scrim. */
#escenario::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  opacity:var(--scrim,.55);
  transition:opacity .25s linear;
  background:linear-gradient(100deg,
    rgba(7,7,12,.97) 0%,
    rgba(7,7,12,.80) 30%,
    rgba(7,7,12,.30) 58%,
    rgba(7,7,12,.10) 78%,
    rgba(7,7,12,.42) 100%);
}

/* El contenido ya va encima: site.css pone main y .pie en z-index 1, y la
   nav (150) y la barra de progreso (200) están muy por arriba.

   Lo que sí hay que mover es el fondo ambiental. Viene después de #escenario
   en el DOM y con el mismo z-index, así que pintaba ENCIMA del 3D: la malla
   de puntos quedaba como suciedad sobre la escena. Mandado detrás, los blobs
   siguen tiñendo el fondo del escritorio, que es justo lo que aportan. */
.cine .ambiente{z-index:-1}

/* ----------------------------------------------------------------- hero */

/* El 3D ya ocupa toda la ventana: la columna visual del hero sale de la
   rejilla y el texto se queda en una sola columna legible. */
.cine .hero-vis{display:none}

/* El hero deja de medir una pantalla y pasa a medir DOS, porque ya no es
   una pantalla: es un plano con duración. El retroceso de la cámara necesita
   ese recorrido propio; con 100svh el texto de "qué construimos" entraba
   encima del hero a media maniobra. El texto se queda clavado mientras la
   cámara se aleja y sale cuando el escritorio se abre. */
.cine .hero{
  grid-template-columns:minmax(0,min(620px,54vw));
  min-height:180svh;
  align-items:start;
  padding-top:0;
  padding-bottom:0;
}
.cine .hero-txt{
  position:sticky; top:0;
  height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px 0 70px;
}
.cine .scroll-hint{bottom:auto;top:calc(100svh - 56px)}

/* A t=0 la cámara está dentro de la pantalla: el H1 se lee sobre el editor
   de código, así que necesita algo más de peso y una sombra que lo despegue. */
.cine .hero h1{text-shadow:0 2px 34px rgba(7,7,12,.85)}
.cine .hero .lead{text-shadow:0 1px 20px rgba(7,7,12,.8)}

/* ------------------------------------------------ fundido entre subtítulos

   Los dos bloques de texto se cruzan bajo la batuta del guion (escenario.js
   fija --txt-hero y --txt-construimos). El valor por defecto es 1: si el
   script no corre, el texto se ve, pase lo que pase. */
.cine .hero-txt{opacity:var(--txt-hero,1)}
.cine .etapas-sticky{opacity:var(--txt-construimos,1)}
.sin-hero .hero-txt{pointer-events:none}
.sin-construimos .etapas-sticky{pointer-events:none}

/* ------------------------------------------------------- qué construimos */

/* Antes: dos columnas (riel | tarjetas). Ahora el centro-derecha del cuadro
   es del objeto 3D, así que el riel se queda arriba a la izquierda y la
   tarjeta activa baja a ser un pie de foto abajo a la derecha. */
.cine .etapas-grid{
  display:block; position:relative;
  min-height:76vh;
}
.cine .etapas-izq{max-width:min(420px,42vw)}
.cine .etapas-izq .h-sec{font-size:clamp(26px,3.4vw,42px)}
.cine .etapas-izq>.lead{display:none}
.cine .riel{margin-top:30px}

.cine .etapas-der{
  position:absolute; right:0; bottom:0;
  width:min(430px,40vw);
  min-height:0;
}
.cine .etapa{
  position:absolute; right:0; bottom:0; left:auto; top:auto;
  width:100%;
  padding:24px 26px;
  border-radius:20px;
  background:linear-gradient(160deg,rgba(11,11,20,.80),rgba(11,11,20,.62));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.75);
}
.cine .etapa::before{border-radius:20px}
.cine .etapa h3{font-size:clamp(21px,2.3vw,28px)}
.cine .etapa>p{font-size:15px;margin-top:11px;max-width:40ch}

/* Los dibujitos CSS de cada disciplina los sustituye el objeto 3D. */
.cine .etapa-vis{display:none}

/* La pista de scroll no debe tapar al robot ni a la placa. */
.cine .scroll-hint{left:auto;right:28px}

/* ------------------------------------------------------------- casos ----

   La pista horizontal de tarjetas desaparece: el recorrido lateral ahora lo
   hace la cámara sobre el escritorio. Las tarjetas pasan a ser pies de foto,
   una a la vez, con la misma gramática que las etapas.

   El transform lleva !important porque site.js sigue escribiendo el suyo en
   línea para mover la pista; así no hace falta tocar producción. */
.cine .casos-sticky{display:block;position:sticky;top:0;height:100svh;overflow:hidden;
  opacity:var(--txt-casos,1)}
.sin-casos .casos-sticky{pointer-events:none}

.cine .casos-head{
  position:absolute; top:11vh; left:50%;
  transform:translateX(-50%);
  width:100%; max-width:var(--ancho); padding:0 24px;
  margin-bottom:0;
}
.cine .casos-head .h-sec{font-size:clamp(26px,3.4vw,42px);max-width:9ch}

.cine .casos-pista{
  position:absolute; inset:0; left:50%;
  transform:translateX(-50%) !important;
  width:100%; max-width:var(--ancho);
  display:block; gap:0; padding:0 24px;
  will-change:auto;
}
.cine .caso{
  position:absolute; right:24px; bottom:11vh;
  width:min(440px,40vw); min-height:0;
  display:block; padding:24px 26px; border-radius:20px;
  background:linear-gradient(160deg,rgba(11,11,20,.80),rgba(11,11,20,.62));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.75);
  opacity:0; transform:translateY(30px) scale(.97); pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.cine .caso.on{opacity:1;transform:none;pointer-events:auto}
.cine .caso:hover{transform:none}
.cine .caso h3{font-size:clamp(20px,2.2vw,27px);margin-top:14px}
.cine .caso-desc{font-size:15px;max-width:40ch}
.cine .caso-tag{margin-bottom:0}

/* La destacada traía tres cifras que apilaban y el pie de foto crecía hasta
   tapar el objeto 3D. Aquí van en un solo renglón y más chicas. */
.cine .caso-stats{display:flex;flex-wrap:nowrap;gap:18px;margin-top:16px;padding-top:14px}
.cine .caso-stats dt{font-size:clamp(17px,1.6vw,21px)}
.cine .caso-stats dd{font-size:11.5px}

.cine .casos-barra{position:absolute;left:24px;bottom:11vh;margin:0;width:min(200px,24vw)}

/* ----------------------------------------------------------- proceso ----

   La maqueta de divs la sustituye la lámina 3D en atril. La lista de pasos
   se queda en su columna izquierda: es la única sección donde el texto es el
   que avanza y el objeto el que se transforma, así que la cámara casi no se
   mueve y el sujeto va al centro-derecha. */
.cine .proceso-sticky{opacity:var(--txt-proceso,1)}
.sin-proceso .proceso-sticky{pointer-events:none}
.cine .proceso-grid{display:block;position:relative;min-height:74vh}
.cine .proceso-izq{max-width:min(470px,44vw)}
.cine .proceso-der{display:none}

/* ------------------------------------------------------------- cierre ---

   DEFECTO HEREDADO, no es del modo cine: site.css le da display:flex a
   .form-ok, y eso gana al atributo hidden del HTML. Resultado: el panel
   "¡Mensaje recibido!" cubre el formulario de contacto (546x458) desde que
   carga la página, sin que nadie haya enviado nada. index.html lo arrastra
   igual y necesita esta misma línea. */
.form-ok[hidden]{display:none}

/* El pie crece para que el logo tenga cielo propio: con su altura original
   (455px) el logo caía sobre la sección de contacto en vez de sobre el pie. */
.cine .pie{min-height:92svh;padding-top:clamp(200px,30vh,340px)}

/* =========================================================== EL VIAJE ====

   Teléfono. La página va montada sobre una pista 3D por la que se avanza,
   y la gramática es la de un juego de celular: el mundo arriba, el texto
   abajo en un panel que se lee de un vistazo.

   Por eso casi todo lo que sigue hace lo mismo con cada sección: clavar su
   titular arriba y su tarjeta abajo, y dejar libre la franja de en medio,
   que es donde la cámara planta el objeto de cada estación.

   Todo cuelga de .viaje en <html>, que pone el script en línea del <head>
   y que escenario.js quita si el 3D no se pudo construir.
   ========================================================================= */

/* El velo, en vertical, va de abajo arriba: aquí el texto vive abajo. */
.viaje #escenario::after{
  background:linear-gradient(to top,
    rgba(7,7,12,.97) 0%,
    rgba(7,7,12,.93) 26%,
    rgba(7,7,12,.62) 48%,
    rgba(7,7,12,.20) 70%,
    rgba(7,7,12,.55) 100%);
}
.viaje #escenario::before{
  background:radial-gradient(130% 72% at 50% 32%,transparent 40%,rgba(7,7,12,.80) 100%);
}

/* Los blobs del fondo compiten con la pista: detrás. */
.viaje .ambiente{z-index:-1}

/* La caja del hero 3D ya no hace falta: el 3D es toda la ventana. */
.viaje .hero-vis{display:none}

/* --------------------------------------------------------------- hero --- */

/* El hero mide pantalla y media: la cámara necesita recorrido propio para
   atravesar la pantalla de código y salir a la pista. El texto se queda
   clavado abajo mientras eso pasa. */
.viaje .hero{
  min-height:168svh;
  padding-top:0;
  padding-bottom:0;
  align-items:start;
}
.viaje .hero-txt{
  position:sticky; top:0;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:104px 0 13vh;
}

/* El hero es la única sección cuyo texto ocupa la pantalla entera, y
   justo detrás está la pantalla de código del arranque, bien legible: las
   dos letras se pelean y no se lee ninguna. El velo general no sirve aquí
   porque está cargado abajo, que es donde vive el texto en las demás
   secciones. Así que este bloque lleva el suyo propio.

   Va en z-index -1, o sea por detrás del texto de su propia caja pero por
   delante del 3D. El contenido en flujo se pinta después, así que el texto
   sigue encima sin tener que tocarle el z-index a nada. */
.viaje .hero-txt{position:relative}
.viaje .hero-txt::before{
  content:''; position:absolute; z-index:-1;
  /* -18px y no más: es justo el margen lateral del hero en teléfono, así
     que el velo llega al borde de la pantalla sin pasarse. Con -24px la
     página medía 396px de ancho en una pantalla de 390 y se podía arrastrar
     de lado, que es justo el defecto que vengo arreglando. */
  inset:-6vh -18px -4vh;
  background:linear-gradient(180deg,
    rgba(7,7,12,.10) 0%,
    rgba(7,7,12,.82) 16%,
    rgba(7,7,12,.90) 70%,
    rgba(7,7,12,.55) 100%);
}
.viaje .hero h1{text-shadow:0 2px 30px rgba(7,7,12,.9)}
.viaje .hero .lead{text-shadow:0 1px 18px rgba(7,7,12,.85)}
.viaje .scroll-hint{display:none}

/* -------------------------------------------------------- construimos --- */

.viaje .etapas-sticky{align-items:stretch}
.viaje .etapas-grid{
  display:block; position:relative;
  width:100%; height:100svh;
}
.viaje .etapas-izq{
  position:absolute; left:0; right:0;
  top:calc(86px + 2vh);
  max-width:none;
  padding-left:inherit; padding-right:inherit;
}
.viaje .etapas-izq .h-sec{font-size:clamp(23px,6.4vw,32px)}
/* Van sobre la pista, que brilla: sin sombra se emborronan contra ella. */
.viaje .h-sec,.viaje .eyebrow{text-shadow:0 2px 26px rgba(7,7,12,.92)}
/* El párrafo de entrada se va, igual que en modo cine. Medido en 390px
   ocupaba tres renglones justo en la banda donde la cámara planta el objeto,
   y el titular ya dice lo mismo en una línea. */
.viaje .etapas-izq>.lead{display:none}

.viaje .etapas-der{
  position:absolute; left:0; right:0; bottom:6.5vh;
  min-height:0;
}
.viaje .etapa{
  position:absolute; left:0; right:0; bottom:0; top:auto;
  width:auto; min-height:0;
  padding:20px 22px; border-radius:20px;
  background:linear-gradient(160deg,rgba(11,11,20,.88),rgba(11,11,20,.72));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 22px 52px -26px rgba(0,0,0,.85);
}
.viaje .etapa::before{border-radius:20px}
.viaje .etapa h3{font-size:clamp(20px,5.4vw,26px);margin-top:8px}
.viaje .etapa>p{font-size:14.5px;margin-top:9px;max-width:none}
/* Los dibujitos CSS los sustituye el objeto 3D de la estación. */
.viaje .etapa-vis{display:none}

/* -------------------------------------------------------------- casos --- */

.viaje .casos-sticky{display:block;position:sticky;top:0;height:100svh;overflow:hidden}
.viaje .casos-head{
  position:absolute; top:calc(86px + 2vh); left:0; right:0;
  margin-bottom:0;
}
.viaje .casos-head .h-sec{font-size:clamp(23px,6.4vw,32px)}

/* La pista horizontal desaparece: el recorrido lateral lo hace la cámara
   avanzando por la suya. Las tarjetas pasan a ser pies de foto, una a la
   vez, encendidas por escenario.js igual que en escritorio.

   El transform lleva !important porque site.js sigue escribiendo el suyo
   en línea para mover la pista; así no hace falta tocar producción. */
.viaje .casos-pista{
  position:absolute; inset:0;
  transform:none !important;
  display:block; gap:0; padding:0;
  will-change:auto;
}
.viaje .caso{
  position:absolute; left:0; right:0; bottom:6.5vh;
  width:auto; min-height:0; flex-basis:auto;
  display:block; padding:20px 22px; border-radius:20px;
  background:linear-gradient(160deg,rgba(11,11,20,.88),rgba(11,11,20,.72));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 22px 52px -26px rgba(0,0,0,.85);
  opacity:0; transform:translateY(24px) scale(.98); pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.viaje .caso.on{opacity:1;transform:none;pointer-events:auto}
.viaje .caso:hover{transform:none}
.viaje .caso h3{font-size:clamp(20px,5.4vw,26px);margin-top:12px}
.viaje .caso-desc{font-size:14.5px;max-width:none}
.viaje .caso-tag{margin-bottom:0}
/* Las tres cifras de la destacada apilaban y la tarjeta tapaba el objeto. */
.viaje .caso-stats{display:flex;flex-wrap:nowrap;gap:14px;margin-top:14px;padding-top:12px}
.viaje .caso-stats dt{font-size:clamp(16px,4.4vw,20px)}
.viaje .caso-stats dd{font-size:11px;margin-top:2px}
.viaje .casos-barra{position:absolute;left:0;right:0;bottom:2.6vh;margin:0 auto;width:min(180px,46vw)}

/* ------------------------------------------------------------ proceso --- */

.viaje .proceso-sticky{align-items:stretch}
.viaje .proceso-grid{
  display:block; position:relative;
  width:100%; height:100svh;
}
/* Esta sección es la más apretada de todas: la lista son siete pasos y no
   se puede recortar. El titular sube arriba del todo y la lista se queda
   abajo, y lo que quede en medio es para la lámina. */
.viaje .proceso-izq{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding-top:calc(86px + 2vh); padding-bottom:4.5vh;
  max-width:none;
}
.viaje .proceso-izq .h-sec{font-size:clamp(21px,5.6vw,28px)}
.viaje .pasos{
  margin-top:auto;   /* el antetítulo y el titular arriba, la lista abajo */

  /* site.js desliza la lista entera para seguir al paso activo, porque en
     escritorio la recorta el bloque de arriba. Aquí la lista ES el panel de
     abajo: al deslizarse se llevaba el panel con ella y el fondo acababa a
     media pantalla. Se queda quieta, y en vertical caben los siete pasos de
     una vez, que además deja ver el proceso completo de un vistazo.

     El !important es porque site.js escribe su transform en línea; así no
     hace falta tocar producción. */
  transform:none !important;
  max-height:none; overflow:visible;

  padding:14px 18px; border-radius:20px;
  background:linear-gradient(160deg,rgba(11,11,20,.88),rgba(11,11,20,.72));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 22px 52px -26px rgba(0,0,0,.85);
}
.viaje .pasos li{padding:6px 0;grid-template-columns:32px 1fr;gap:11px}
.viaje .pasos h4{font-size:15.5px}
.viaje .pasos p{font-size:13px}
.viaje .pasos li.on p{max-height:72px}
.viaje .proceso-der{display:none}

/* ------------------------------------- lo que viene después del viaje --- */

/* Stack, laboratorio, contacto y pie no son estaciones: son texto largo
   sobre la pista, que para entonces se está quedando atrás. Se les pone
   un panel propio para que se lean sin depender del velo. */
.viaje .stack>.wrap,
.viaje .lab>.wrap,
.viaje .contacto>.wrap,
.viaje .pie>.wrap{
  background:linear-gradient(180deg,rgba(9,9,16,.74),rgba(9,9,16,.88));
  border:1px solid var(--line);
  border-radius:22px;
  padding:26px 18px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}

/* El pie crece para que el logo tenga cielo propio, igual que en cine. */
.viaje .pie{min-height:86svh;padding-top:clamp(140px,22vh,240px)}

/* ----------------------------------------------- el marcador de parada --- */

/* Va en el <body> y no dentro de #escenario: ahí dentro quedaría por detrás
   del contenido, que site.css pone en z-index 1. Por debajo de la nav. */
.viaje-hud{
  position:fixed; right:9px; top:50%;
  transform:translateY(-50%);
  z-index:120;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  pointer-events:none;
}
.viaje-puntos{
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.viaje-puntos i{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.17);
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.viaje-puntos i.ido{background:rgba(43,212,238,.55)}
.viaje-puntos i.aqui{
  background:var(--cyan);
  transform:scale(1.5);
  box-shadow:0 0 0 4px rgba(43,212,238,.16);
}
.viaje-num{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700; font-size:12px; line-height:1;
  color:var(--cyan);
  text-shadow:0 1px 10px rgba(7,7,12,.9);
}
.viaje-num small{font-size:9.5px;color:var(--mut2);font-weight:600}

/* Sin modo viaje el marcador no existe, pero si quedara puesto por lo que
   sea, que no se vea en escritorio. */
html:not(.viaje) .viaje-hud{display:none}

/* ------------------------------------------------------------ respaldos */

/* Pantallas angostas y quien pide menos movimiento no entran en modo cine
   (escenario.js no construye nada), pero si la clase quedara puesta por
   cualquier motivo, aquí se deshacen los cambios de composición. */
@media (max-width:860px){
  .cine .hero{grid-template-columns:1fr}
  .cine .etapas-grid{min-height:0}
  .cine .etapas-der{position:relative;right:auto;bottom:auto;width:auto;min-height:440px}
  .cine .etapa{padding:38px}
  .cine .etapas-izq{max-width:none}
  .cine .etapas-izq>.lead{display:block}
}

@media (prefers-reduced-motion:reduce){
  #escenario{display:none}
  .cine .hero{grid-template-columns:1fr}
  .cine .etapas-izq{max-width:none}
  .cine .etapas-der{position:relative;right:auto;bottom:auto;width:auto;min-height:440px}
}