/* ==========================================================================
   Pagina de caso (proyecto-*.html)

   Hoja EXTRA que solo carga la pagina de caso. Va entre sections.css y
   responsive.css: la especificidad es casi plana, asi que el orden manda y
   responsive.css tiene que seguir siendo el ultimo.

   Sus media queries NO viven aca sino en responsive.css, junto con las del
   resto del sitio (regla dura #2).

   Vale la misma regla de escala: cada medida se escribe calc(N * var(--s)).
   Los colores salen medidos del export del Figma, no estimados.
   ========================================================================== */

.page-caso {
  /* Paleta de LIGIER, no la de mangoo: la pagina del caso se viste con la
     marca del cliente y solo el nav, la cita y el footer quedan en el azul de
     mangoo. Los tres tonos son los de la gota del logo. */
  --lig-navy:  #2D378F;
  --lig-azul:  #4A9FD8;
  --lig-verde: #72B9A2;
  --lig-fondo: #EDF4F8;   /* fondo unico de toda la pagina */

  background: var(--lig-fondo);
}

/* Palabras clave dentro del bloque azul, en el celeste de la gota de Ligier.
   Es #9DC9E8 y no --lig-azul: sobre el marino, el azul medio queda oscuro y
   deja de leerse como enfasis. Contraste medido: 8.1:1. */
.u-celeste { color: #9DC9E8; }

/* El degrade de los titulares recorre la gota: marino -> azul -> verde. */
.caso-degrade {
  background-image: linear-gradient(100deg,
    var(--lig-navy) 0%, var(--lig-navy) 26%,
    var(--lig-azul) 58%, var(--lig-verde) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* background-clip: text pinta el degrade SOLO dentro de la caja del
     elemento. Con el line-height ajustado de los titulares, las astas y las
     colas de las letras sobresalen de esa caja y quedan sin pintar: el titulo
     se ve cortado arriba. El padding agranda la caja de pintura y el margen
     negativo devuelve el alto, asi que el layout no se mueve ni un pixel. */
  padding-block: .24em;
  margin-block: -.24em;
}
/* Si el navegador no recorta el fondo al texto, el color transparente dejaria
   el titulo invisible. Esta guarda lo devuelve al marino. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .caso-degrade { color: var(--lig-navy); background-image: none; }
}

/* ------------------------------------------------------------------ HERO -- */
/* El hero ocupa la pantalla entera y su contenido va centrado en ese alto:
   asi entra solo, sin que asome la seccion de abajo.
   El padding queda como piso para pantallas muy bajas, donde el contenido mide
   mas que 100vh y tiene que poder crecer. */
.caso-hero {
  position: relative;
  overflow: clip;                  /* clip y no hidden: no crea contenedor de scroll */
  min-height: 100vh;
  min-height: 100svh;              /* descuenta la barra del navegador movil */
  display: grid;
  align-content: center;           /* centra sin encoger el contenedor */
  padding: calc(var(--nav-h) + 40 * var(--s)) 0 calc(96 * var(--s));
  text-align: center;
}

/* El volver acompaña todo el recorrido, igual que el nav: queda fijo a la
   altura de la barra y al margen del contenedor.

   La fila es de ancho completo y esta por delante del contenido, asi que sin
   pointer-events: none se comeria los clicks de toda la franja. El boton los
   vuelve a habilitar solo para si mismo. */
.caso-hero__fila-volver {
  position: fixed;
  top: calc(var(--nav-h) / 2);
  left: 0;
  right: 0;
  /* POR ENCIMA del nav (100), no debajo. La barra ocupa toda la franja
     superior aunque su pastilla este centrada, asi que con z-index menor el
     .nav__inner se comia el click del boton: se veia, pero no se podia tocar.
     No se pisan visualmente —el boton va a la izquierda y la pastilla al
     centro— y la fila no captura nada porque tiene pointer-events: none. */
  z-index: 101;
  transform: translateY(-50%);     /* centra el boton en el alto del nav */
  text-align: left;                /* el hero centra; esta fila no */
  pointer-events: none;
}
.caso-hero__fila-volver .caso-volver { pointer-events: auto; }

/* La gota gigante saliendo por el borde derecho. Va detras de todo y muy
   tenue: es marca de agua, no ilustracion. */
/* Se dimensiona por el ALTO y no por el ancho: el hero mide una pantalla, asi
   que atarla al viewport es lo unico que garantiza que la cubra de arriba a
   abajo en cualquier proporcion de ventana. Sale por arriba y por abajo a
   proposito, para que no se le vean las puntas. */
.caso-hero__gota {
  position: absolute;
  top: -16vh;
  /* Solo se ve la mitad: la otra queda fuera por el borde derecho. El corrimiento
     va en vh y no en --s porque el alto manda el tamaño — el SVG mide 1544x1597,
     asi que la mitad de su ancho es 0.4834 del alto, o sea 64vh de los 132. */
  right: -64vh;
  height: 132vh;
  width: auto;
  /* Apenas visible: en el diseño se lee como un cambio de tono del fondo, no
     como una figura. El SVG ya trae opacidad .5 propia, asi que este valor la
     multiplica. */
  opacity: .5;
  pointer-events: none;
}

.caso-hero__inner {
  position: relative;              /* por delante de la gota */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Volver: solo la flecha. La posicion la resuelve .caso-hero__fila-volver, que
   es quien se ancla al alto del nav; el boton solo se dibuja. */
.caso-volver {
  display: inline-grid;
  place-items: center;
  width: calc(52 * var(--s));
  height: calc(52 * var(--s));
  border-radius: 50%;
  background: rgb(255 255 255 / .80);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95),
              inset 0 0 0 1px rgb(0 60 120 / .07),
              0 8px 24px rgb(0 40 90 / .09);
  color: var(--blue-strong);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.caso-volver svg { width: calc(22 * var(--s)); height: calc(22 * var(--s)); }
.caso-volver:hover { background: #fff; color: var(--lig-navy); }

.caso-hero__chip { margin-top: calc(50 * var(--s)); }

.caso-hero__logo {
  width: calc(240 * var(--s));
  height: auto;
  margin-top: calc(30 * var(--s));
}

.caso-hero__lead {
  /* Se descuenta el padding que .caso-degrade agrega para poder pintar el
     degrade: sin esto la bajada baja 7px de mas. */
  margin-top: calc(46 * var(--s) - .24em);
  font-family: var(--font-text);
  font-size: calc(38 * var(--s));
  font-weight: 800;
  line-height: 1.42;
}

/* Bajada al contenido: circulo lavanda con la flecha, con un rebote suave que
   invita a scrollear. Se apaga con prefers-reduced-motion. */
.caso-hero__scroll {
  display: grid;
  place-items: center;
  width: calc(52 * var(--s));
  height: calc(52 * var(--s));
  margin-top: calc(66 * var(--s));
  border-radius: 50%;
  background: #DDE2F2;
  color: var(--lig-navy);
  transition: transform var(--t) var(--ease-out), background var(--t) var(--ease);
  animation: casoRebote 2.6s var(--ease) infinite;
}
/* El <span> intermedio tiene que centrar el como grid: como es inline, el
   svg se alineaba a la linea base en vez de al centro del circulo, y su
   width en % se resolvia contra un ancho indefinido —el del propio span, que
   depende del svg— asi que tampoco tomaba el tamaño pedido. Va en unidades
   de la escala, que no depende de nadie. */
.caso-hero__scroll span {
  display: grid;
  place-items: center;
}
/* El icono es 16x20, mas alto que ancho: cuadrarlo lo deformaba. */
.caso-hero__scroll svg {
  display: block;
  width: calc(17 * var(--s));
  height: calc(21 * var(--s));
}
.caso-hero__scroll:hover { transform: translateY(calc(4 * var(--s))); background: #CDD5EC; }
@keyframes casoRebote {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(7 * var(--s))); }
}

/* ----------------------------------------------------------------- CINTA -- */
/* Dos cintas de texto en sentidos opuestos. El ancho lo dan las copias que
   arma el JS; aca solo el aspecto. */
.caso-cinta {
  padding: calc(40 * var(--s)) 0 calc(260 * var(--s));
  overflow: clip;
}

.caso-cinta__fila {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.caso-cinta__fila + .caso-cinta__fila { margin-top: calc(10 * var(--s)); }

/* transform-gpu y will-change: la cinta se mueve en cada frame y sin esto el
   navegador repinta el texto en vez de componer la capa. */
.caso-cinta__tren {
  display: inline-flex;
  align-items: center;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.caso-cinta__bloque {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
}

.caso-cinta__frase {
  font-family: var(--font-display);
  font-size: calc(76 * var(--s));
  line-height: 1.16;
  /* Tenue a proposito: es una textura de fondo entre dos secciones, no un
     titulo. Si compitiera con el H2 de abajo, ensuciaria la jerarquia. */
  color: #B9CBDA;
}

.caso-cinta__sep {
  margin: 0 calc(34 * var(--s));
  font-size: calc(40 * var(--s));
  color: var(--lig-navy);
}

/* ------------------------------------------------------------------- APP -- */
.caso-app {
  padding-bottom: calc(120 * var(--s));
  overflow: clip;
}

.caso-app__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2-center);
  /* En tokens.css hay --fs-h2-center pero NO un --lh-h2-center: la variable no
     existe, la declaracion quedaba invalida y el line-height terminaba
     heredado y muy corto (24px para un cuerpo de 47). Se usa la misma
     proporcion que --lh-h2 sobre --fs-h2 (0.954). */
  line-height: calc(54 * var(--s));
  text-align: center;
}

/* ---- Galeria que se abre al pasar por encima ------------------------------
   El efecto es una transicion de flex-grow: todos los paneles comparten el
   ancho disponible y el activo se lleva la mayor parte. No hace falta ninguna
   libreria — flex reparte y la transicion interpola.

   Se anima flex-grow y no width porque asi los OTROS paneles se acomodan
   solos: fijando anchos habria que recalcular los cuatro restantes en cada
   cambio, y cualquier redondeo dejaria un hueco al final de la fila. */
/* El panel abierto NO se define por un reparto proporcional sino por la
   relacion de las placas (718x640 = 1.122): se le fija el ancho exacto que le
   corresponde a la altura de la fila, y los cerrados se reparten lo que sobra.
   Con un reparto por flex-grow el ancho dependia del ancho del contenedor y en
   cuanto cambiaba —otro breakpoint, otra cantidad de paneles— el abierto se
   iba de relacion y cover empezaba a recortar la imagen. Asi no puede pasar. */
.caso-galeria {
  --galeria-alto: calc(820 * var(--s));
  display: flex;
  gap: calc(16 * var(--s));
  margin-top: calc(56 * var(--s));
  height: var(--galeria-alto);
}

.caso-panel {
  position: relative;
  flex: 1 1 0;                     /* cerrado: se reparte lo que sobra */
  min-width: 0;                    /* sin esto el contenido impone un piso */
  padding: 0;
  border: 0;
  border-radius: calc(26 * var(--s));
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 calc(10 * var(--s)) calc(30 * var(--s)) rgb(45 55 143 / .10);
  transition: flex-grow var(--t-slow) var(--ease-out),
              flex-basis var(--t-slow) var(--ease-out),
              box-shadow var(--t) var(--ease);
}
/* 1.122 es 718/640, la relacion con la que se exportan las placas. */
.caso-panel.is-abierto {
  flex: 0 0 calc(var(--galeria-alto) * 1.122);
  box-shadow: 0 calc(20 * var(--s)) calc(48 * var(--s)) rgb(45 55 143 / .18);
}

.caso-panel img {
  display: block;
  width: 100%;
  height: 100%;
  /* cover con el foco arriba: los recortes son de alto distinto y lo que
     interesa de cada pantalla esta en el encabezado. */
  object-fit: cover;
  object-position: center top;
}

/* Velo al pie del panel abierto: el rotulo se apoya sobre capturas de
   contenido variable y sin esto compite con el texto de la pantalla. */
.caso-panel::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: calc(120 * var(--s));
  background: linear-gradient(180deg, transparent, rgb(237 244 248 / .92));
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  pointer-events: none;
}
.caso-panel.is-abierto::after { opacity: 1; }

/* El rotulo aparece solo en el panel abierto: en los cerrados no entra y
   girarlo en vertical lo volveria ilegible a este ancho. */
.caso-panel__pie {
  position: absolute;
  z-index: 1;                      /* por encima del velo */
  left: calc(22 * var(--s));
  bottom: calc(18 * var(--s));
  padding: calc(8 * var(--s)) calc(18 * var(--s));
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / .92);
  font-family: var(--font-text);
  font-size: calc(16 * var(--s));
  font-weight: 700;
  color: var(--lig-navy);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(calc(8 * var(--s)));
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.caso-panel.is-abierto .caso-panel__pie { opacity: 1; transform: none; }

.caso-panel:focus-visible { outline: calc(3 * var(--s)) solid var(--blue-strong); outline-offset: calc(3 * var(--s)); }

/* --------------------------------------------------------------- CONTEXTO -- */
/* Panel con las cuatro esquinas redondeadas y metido en el contenedor, no de
   ancho completo. */
/* De borde a borde: sin max-width ni margen lateral. Las esquinas redondeadas
   se quedan, apoyadas contra el fondo de la pagina. */
.caso-desafio {
  position: relative;
  overflow: clip;
  padding: calc(260 * var(--s)) 0 calc(230 * var(--s));
  border-radius: calc(56 * var(--s));
  background: var(--lig-navy);
  color: #fff;
}

/* El render 3D de la helice, en diagonal por la mitad derecha del panel, tal
   como en el diseño. No lleva rotacion: el render YA viene inclinado a 27.66
   grados, y rotarlo por CSS ademas lo dejaria en otro angulo.
   El transform queda libre para el JS, que la desplaza con el scroll. */
.caso-desafio__helice {
  position: absolute;
  top: calc(-230 * var(--s));
  right: calc(-150 * var(--s));
  width: calc(1270 * var(--s));
  height: auto;
  pointer-events: none;
  /* Los extremos del render estan cortados; el degrade los disuelve para que
     no se vea donde termina la pieza. */
  -webkit-mask-image: linear-gradient(105deg, transparent 0, #000 16%, #000 82%, transparent 100%);
          mask-image: linear-gradient(105deg, transparent 0, #000 16%, #000 82%, transparent 100%);
}

.caso-desafio__inner { position: relative; }

/* El chip del home es azul sobre gris; sobre el panel marino hay que
   invertirlo o desaparece. */
.chip--sobre-azul {
  background: #3D5BC8;
  color: #fff;
}

/* Las laminas se apilan en la misma celda para que el alto del bloque sea el
   de la mas larga y el cambio no mueva a las cifras de abajo. */
.caso-desafio__laminas {
  display: grid;
  max-width: calc(1000 * var(--s));
}

.caso-desafio__lamina {
  grid-area: 1 / 1;
  opacity: 0;
  /* La que sale no debe recibir clicks ni quedar debajo del cursor. */
  pointer-events: none;
  transform: translateY(calc(10 * var(--s)));
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.caso-desafio__lamina.is-activa {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.caso-desafio__texto {
  margin: calc(30 * var(--s)) 0 0;
  font-family: var(--font-display);
  font-size: calc(36 * var(--s));
  line-height: 1.42;
}

.caso-desafio__nav {
  display: flex;
  gap: calc(12 * var(--s));
  margin-top: calc(46 * var(--s));
}
.caso-desafio__nav[hidden] { display: none; }

.caso-flecha {
  display: grid;
  place-items: center;
  width: calc(40 * var(--s));
  height: calc(40 * var(--s));
  border: calc(1.4 * var(--s)) solid rgb(255 255 255 / .5);
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.caso-flecha svg { width: 50%; }
.caso-flecha:hover { background: rgb(255 255 255 / .16); border-color: #fff; }

.caso-cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: calc(110 * var(--s)) 0 0;
  padding-left: 0;
  list-style: none;
  text-align: center;
}
/* Las lineas divisorias van solo ENTRE las columnas, por eso se cuelgan de la
   2a y la 3a. Van en un pseudo-elemento y no en border-left porque el borde
   toma el alto completo de la celda; asi se le puede dar un largo propio y
   centrarlo. */
.caso-cifra { position: relative; }
.caso-cifra + .caso-cifra::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: calc(64 * var(--s));
  background: rgb(255 255 255 / .28);
}

.caso-cifra__num {
  font-family: var(--font-display);
  font-size: calc(52 * var(--s));
  line-height: 1;
  /* Cal Sans no tiene cifras tabulares: sin esto el numero baila de ancho
     mientras el contador sube y arrastra al rotulo de abajo. */
  font-variant-numeric: tabular-nums;
}

.caso-cifra__label {
  margin-top: calc(18 * var(--s));
  font-family: var(--font-text);
  font-size: calc(15 * var(--s));
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* Blanco pleno: sobre el marino el texto es chico y no sobra contraste para
     bajarle la opacidad. */
  color: #fff;
}

/* ------------------------------------------------------------------ CITA -- */
/* Sobre el fondo CLARO, fuera del panel, y en el azul de MANGOO: es la voz del
   estudio, no la del cliente. */
/* La cita se queda sola en la pantalla: la seccion mide un alto de viewport y
   el texto va centrado en esa altura. Con padding fijo no alcanzaba —en
   pantallas altas la cita quedaba con la seccion de arriba o la de abajo
   asomando— y este es el unico modo de garantizarlo a cualquier alto.
   El padding queda como piso para pantallas muy bajas, donde 100vh es menos
   que el propio texto. */
.caso-cita {
  /* Sin fondo propio: hereda el de la pagina. */
  color: var(--blue);
}

/* El track es la unica perilla del efecto: cuanto mas alto, mas scroll dura
   el encendido con la cita quieta. 100vh de pin + el recorrido. */
.caso-cita__track {
  --cita-run: 230vh;
  height: calc(100vh + var(--cita-run));
}

/* La trama cubre el alto pinneado y queda DETRAS del texto. El sticky ya es
   un elemento posicionado, asi que sirve de referencia para el absolute. */
.caso-cita__puntos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  color: #9FB6CE;                  /* el mismo tono que la palabra apagada */
  opacity: .5;
  pointer-events: none;
  /* Se disuelve hacia los bordes: sin esto la trama corta en seco contra las
     secciones de arriba y de abajo. */
  -webkit-mask-image: radial-gradient(ellipse 62% 52% at 50% 50%, #000 35%, transparent 78%);
          mask-image: radial-gradient(ellipse 62% 52% at 50% 50%, #000 35%, transparent 78%);
}

/* Por delante de la trama. */
.caso-cita__inner { position: relative; z-index: 1; }

.caso-cita__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;                  /* descuenta la barra del navegador movil */
  display: grid;
  align-content: center;           /* centra la fila sin encoger el contenedor */
}

/* Solo se anula el margen VERTICAL que el navegador le da al <blockquote>.
   Con 'margin: 0' a secas se mataba tambien el 'margin: 0 auto' del
   .container y el bloque se iba 61px a la izquierda; y con 'padding: 0' se
   perdian sus banquinas laterales. */
.caso-cita__inner { margin-block: 0; }

.caso-cita__inner p {
  /* Mismos tokens que el bloque de "Nuestro Estandar" del home: el JS
     interpola cada palabra entre apagada y encendida segun el scroll. */
  --hl-dim: #9FB6CE;
  --hl-lit: var(--blue);
  max-width: calc(1180 * var(--s));
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: calc(40 * var(--s));
  line-height: 1.42;
  text-align: center;
  color: var(--hl-dim);
}
.caso-cita .hl__word { transition: color 220ms var(--ease); }
/* Las comillas se dibujan solas para no meterlas en el texto: asi el contenido
   queda limpio para copiar y para los lectores de pantalla. */
.caso-cita__inner p::before { content: '\201C'; }
.caso-cita__inner p::after  { content: '\201D'; }

/* ------------------------------------------------------------- TELEFONOS -- */
/* Sin fondo propio: de aca hasta el pie es todo el color de la pagina. Antes
   habia un gris apenas mas claro que dejaba una franja visible detras del
   footer. */
.caso-telefonos {
  padding-bottom: calc(110 * var(--s));
  overflow: clip;
}

/* Sangra a ancho completo: en el diseño los telefonos se cortan contra los
   tres bordes. */
.caso-telefonos__escena {
  margin: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
/* Los DOS bordes se disuelven contra el fondo. El render viene cortado en seco
   y su propio fondo (#F8F8F8) es mas claro que el de la pagina (#EDF4F8), asi
   que cualquier canto recto se lee como una franja a lo ancho de la pantalla.
   Antes solo hacia falta arriba, porque la seccion iba pintada del gris claro;
   al unificar el fondo aparecio tambien abajo. */
.caso-telefonos__escena img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 17%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 17%, #000 84%, transparent 100%);
}

/* --------------------------------------------------------- OTROS PROYECTOS */
.caso-otros {
  padding-top: calc(40 * var(--s));
}

/* El footer trae del home un degrade que arranca en --panel: alla es la
   continuacion del bloque gris de la seccion de contacto. En la pagina de caso
   ese bloque no existe, asi que ese tramo quedaba como un rectangulo mas claro
   detras del pie. Sin fondo propio, hereda el de la pagina. */
.page-caso .footer { background: none; }