/* ==========================================================================
   Thinkhub — Estilos de la maqueta
   Estructura reescrita con flex/grid. Los VALORES (colores, tamaños, spacing)
   vienen del export de Figma; el LAYOUT es propio para que sea responsive.
   ========================================================================== */

/* --- Reset mínimo --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, p, figure, ul { margin: 0; padding: 0; }

ul { list-style: none; }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--c-white);
  background: var(--c-dark);
  -webkit-font-smoothing: antialiased;
}

/* --- Utilidades ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

.section {
  padding-inline: var(--gutter);
}

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

.caption--orange { color: var(--c-orange); }

/* Saltos de línea que el diseño fuerza sólo en ciertos breakpoints.
   `display:none` sobre un <br> anula el salto. */
.br--nomobile,
.br--notablet { display: inline; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Botones -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: 10px var(--sp-24);
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  font-weight: var(--fw-medium);
  border-radius: var(--r-button);
  /* El prototipo escala el botón a 1.1 en hover, sin mover ni cambiar opacidad. */
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.btn--primary:hover,
.btn--outline:hover { transform: scale(var(--hover-scale)); }

/* Los links de texto no escalan: bajan a opacidad 0.6. */
.btn--text:hover { opacity: var(--hover-op); }

.btn--primary {
  background: var(--grad-primary);
  color: var(--c-white);
}

.btn--outline {
  border: 1px solid currentColor;
  color: var(--c-white);
}

.btn--text {
  padding: 0;
  color: var(--c-orange);
}

/* Ícono arrow_outward del diseño (extraído del .fig). Va como mask para que
   tome el color del link en vez de tener uno propio. */
.btn--text::after {
  content: '';
  width: 12px;
  height: 12px;
  flex: none;
  background: currentColor;
  -webkit-mask: url('../img/icons/arrow-outward.svg') center / contain no-repeat;
  mask: url('../img/icons/arrow-outward.svg') center / contain no-repeat;
}

/* --- Navbar --------------------------------------------------------------- */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--navbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
  background: var(--surface-navbar);
  backdrop-filter: var(--blur-navbar);
  -webkit-backdrop-filter: var(--blur-navbar);
  color: var(--c-dark);
}

.navbar__logo { width: 156px; height: 42px; }

.navbar__links {
  display: flex;
  align-items: center;
  gap: 44px;
}

.navbar__links a {
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  font-weight: var(--fw-medium);
  transition: opacity var(--dur) var(--ease);
}

.navbar__links a:not(.btn):hover { opacity: var(--hover-op); }

.navbar__toggle { display: none; }

/* --- Navbar claro --------------------------------------------------------
   El componente tiene variantes `Color=Black` (texto #212224) y `Color=White`
   (texto #FFFFFF). Sólo la Home usa la oscura, porque su hero es claro; las
   demás páginas arrancan en oscuro y necesitan la clara. Sin esto el navbar
   quedaba #212224 sobre #212224: invisible. */
.navbar--light { color: var(--c-white); }
.navbar--light .navbar__toggle img { filter: invert(1); }

/* --- Header (hero) --------------------------------------------------------
   Fondo = video + gradiente encima. En Figma es un fill VIDEO sobre el frame,
   con un fill GRADIENT_LINEAR por arriba; acá el video va absoluto y el
   gradiente es un ::after, así el contenido queda en flujo normal. */
.header {
  position: relative;
  isolation: isolate;
  min-height: var(--header-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-56) var(--gutter);
  padding-top: calc(var(--navbar-h) + var(--sp-56));
  color: var(--c-dark);
  background: var(--c-lavender);
  overflow: hidden;
}

.header__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-header);
  pointer-events: none;
}

.header__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-120);
}

.header__title {
  max-width: 991px;
  font-size: var(--fs-header);
  line-height: var(--lh-header);
  font-weight: var(--fw-bold);
  /* El diseño usa letterSpacing 0 en todos los textos. No hay tracking. */
  letter-spacing: 0;
}

.header__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-36);
}

/* --- Nosotros ------------------------------------------------------------- */
.about {
  padding-block: var(--sp-100);
  background: var(--c-dark);
}

.about__title {
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  font-weight: var(--fw-bold);
  max-width: 718px;
  margin-bottom: var(--sp-64);
}

.about__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-72);
  align-items: start;
}

.about__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-64);
  max-width: 820px;
}

/* La imagen lleva la textura halftone en modo screen, igual que en Figma. */
.about__media {
  width: 100%;
  aspect-ratio: 820 / 393;
  border-radius: var(--r-media);
  background:
    url('../img/halftone-texture.png') center / cover no-repeat,
    url('../img/nosotros.jpg') center / cover no-repeat;
  background-blend-mode: screen, normal;
}

.about__text {
  font-size: var(--fs-paragraph-l);
  line-height: var(--lh-paragraph-l);
}

/* --- Soluciones ----------------------------------------------------------- */
.solutions {
  padding-block: var(--sp-120) var(--sp-100);
  background: var(--c-light);
  color: var(--c-dark);
  border-radius: var(--r-section) var(--r-section) 0 0;
}

.solutions__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-72);
  margin-bottom: var(--sp-72);
}

.solutions__lead {
  max-width: 654px;
  font-size: var(--fs-solutions);
  line-height: var(--lh-solutions);
  font-weight: var(--fw-medium);
}

/* Cards circulares que se solapan 26px. El solape va entre pares, así que el
   margen negativo tiene que ir sólo en las cards que siguen a otra — con
   `margin: 0 -26px` en todas, cada par se solapaba 52 y los bordes exteriores
   se comían 26 más.
   Desktop: una fila de 4 → 4×320 − 3×26 = 1202px. */
.solutions__list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin-bottom: var(--sp-72);
}

.solutions__list > .solution-card + .solution-card { margin-left: -26px; }

.solution-card {
  position: relative;
  flex: 0 0 var(--card-size);
  width: var(--card-size);
  height: var(--card-size);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--sp-26);
  padding: var(--sp-24);
  text-align: center;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.solution-card--featured { border-color: var(--c-border-hi); }

/* --- Hover de la card (variante State=Hover del componente) ---------------
   Default: transparente, borde #C4C6C5, título 32px en #212224.
   Hover:   relleno #FF5800, sin borde, y el título se cambia por la
            descripción a 24px en #E8E9DD. */
.solution-card__title,
.solution-card__desc {
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* La descripción se apila sobre el título para que el cruce sea un fundido
   y la card no cambie de alto. */
.solution-card__desc {
  position: absolute;
  left: var(--sp-24);
  right: var(--sp-24);
  margin: 0;
  /* La variante Hover del componente usa 24px, no el Paragraph M de 28px. */
  font-size: 24px;
  line-height: 26px;
  font-weight: var(--fw-medium);
  color: var(--c-light);
  opacity: 0;
  pointer-events: none;
}

.solution-card:hover,
.solution-card:focus-within {
  background-color: var(--c-orange);
  border-color: var(--c-orange);
}

.solution-card:hover .solution-card__title,
.solution-card:focus-within .solution-card__title { opacity: 0; }

.solution-card:hover .solution-card__desc,
.solution-card:focus-within .solution-card__desc { opacity: 1; }

.solution-card:hover .solution-card__num,
.solution-card:focus-within .solution-card__num { color: var(--c-light); }

.solution-card:hover .btn--text,
.solution-card:focus-within .btn--text { color: var(--c-white); }

.solution-card__num {
  color: var(--c-orange);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

/* En desktop el diseño aplica Subtittle/Tablet a estos títulos (no Subtittle/Desktop);
   en tablet y mobile sí coincide con el token, y se reemplaza más abajo. */
.solution-card__title {
  font-size: 28px;
  line-height: 24px;
  font-weight: var(--fw-medium);
}

.solution-card--featured .solution-card__title {
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  color: var(--c-orange);
}

.solutions__cta { display: flex; justify-content: center; }

/* --- Puntos decorativos --------------------------------------------------- */
.dots {
  padding: var(--sp-100) var(--gutter) 0;
  background: var(--c-light);
}

/* Las filas son SPACE_BETWEEN con ancho fijo: Figma guarda un stackSpacing de 72
   pero NO lo aplica, porque space-between reparte el sobrante. La separación real
   entre centros es ~73.3px en desktop. Poner además `gap: 72px` sumaba al reparto
   y hacía desbordar la fila; por eso la grilla se veía mal. */
.dots__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-36);
}

.dots__row:last-child { margin-bottom: 0; }

.dots__row span {
  flex: none;
  border-radius: 50%;
  background: var(--c-orange);
}

.dots__row--lg span { width: 8px; height: 8px; }
.dots__row--md span { width: 6px; height: 6px; }
.dots__row--sm span { width: 4px; height: 4px; }

/* --- Clientes ------------------------------------------------------------- */
.clients {
  padding-block: var(--sp-100);
  background: var(--c-light);
  color: var(--c-dark);
  text-align: center;
}

/* --- Marquesina de clientes ----------------------------------------------
   En el diseño la tira NO entra en el frame: mide 2254px en 1440 (1.57×), y en
   mobile 1085 en 375 (2.89×). Además en tablet y mobile el contenedor arranca
   en x negativo (−191 y −159), o sea centrado y desbordando por los dos lados.
   Eso es una marquesina, no un wrap.

   Figma no anima esto, así que la velocidad no está en el archivo: se fija en
   px/s (constante entre breakpoints) y la duración se deriva del ancho real de
   la tira, así los tres se mueven al mismo ritmo aparente. */
.clients__viewport {
  overflow: hidden;
  display: flex;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.clients__list {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(120px * var(--logo-scale));
  padding: calc(80px * var(--logo-scale)) 0;
  padding-inline-end: calc(120px * var(--logo-scale));
  animation: clients-marquee var(--marquee-dur) linear infinite;
}

.clients__viewport:hover .clients__list { animation-play-state: paused; }

@keyframes clients-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

/* Cada logo trae su medida del diseño, no una altura común: el equilibrio
   óptico ya viene resuelto ahí. */
.clients__list img {
  width: calc(var(--logo-w) * var(--logo-scale));
  height: auto;
  max-width: 100%;
}

/* Los logos usan el hover secundario (0.4). */
/* Atenuado del resto al apuntar uno (hover secundario, 0.4). Va sobre el
   viewport para que abarque las dos copias de la tira. */
.clients__list li { transition: opacity var(--dur) var(--ease); }
.clients__viewport:hover li { opacity: var(--hover-op-soft); }
.clients__viewport li:hover { opacity: 1; }

.clients__list img[alt="Modelo"]        { --logo-w: 158.35px; }
.clients__list img[alt="Camuzzi"]       { --logo-w: 165.83px; }
.clients__list img[alt="Rappi"]         { --logo-w: 144.42px; }
.clients__list img[alt="UCA"]           { --logo-w: 171.78px; }
.clients__list img[alt="La Serenísima"] { --logo-w: 164.94px; }
.clients__list img[alt="Santander"]     { --logo-w: 165.59px; }
.clients__list img[alt="Naranja X"]     { --logo-w: 165.63px; }
.clients__list img[alt="Sarkany"]       { --logo-w: 165.56px; }

/* --- Casos de éxito ------------------------------------------------------- */
/* `Cases` no tiene padding propio en el diseño: el padding vive en el
   encabezado (120/100) y en cada contenedor de caso. */
.cases {
  position: relative;
  background: var(--c-light);
  color: var(--c-dark);
  /* `overflow: hidden` acá anularía el position:sticky de las cards sin avisar.
     `clip` con overflow-y visible recorta el halo naranja igual pero deja
     funcionar el stack. */
  overflow-x: clip;
  overflow-y: visible;
}


/* El encabezado no es una línea de texto: en el diseño es un bloque de 837px de
   alto (`Case headlines container`, stackPrimarySizing FIXED) con el halo
   adentro y la caption abajo, separados por gap 72. Todo el bloque es
   STICKY_SCROLLS y queda fijo mientras las cards suben por delante.
   Padding: 120/56 arriba y 100 abajo en desktop. */
.cases__head {
  position: sticky;
  top: var(--case-stick-top);
  z-index: 0;
  height: var(--cases-head-h);
  padding: var(--cases-head-pt) 0 var(--cases-head-pb);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  isolation: isolate;
}

/* Halo radial. Es una elipse propia del encabezado, centrada al 50% en los tres
   breakpoints, con dos gradientes radiales superpuestos. El `top` es relativo
   al bloque, no a la sección. */
.cases__halo {
  position: absolute;
  z-index: -1;
  top: var(--halo-top);
  left: 50%;
  width: var(--halo-size);
  height: var(--halo-size);
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--grad-halo);
  pointer-events: none;
}

/* La caption va ARRIBA, a la altura del padding-top (y=120 en desktop), y
   alineada a la izquierda. La elipse no participa del auto-layout: está
   posicionada por detrás. */
.cases__head > .caption { position: relative; z-index: 1; }

/* --- Stack de casos ------------------------------------------------------
   El encabezado y las 3 cards tienen `scrollBehavior: STICKY_SCROLLS` en el
   .fig: al bajar, cada card se pega y la siguiente sube por encima, apilándose.
   Eso es lo que explican los stackSpacing negativos (-547 de la sección y -300
   del contenedor): no son solapes estáticos, son el recorrido del sticky.

   La separación entre cards salió de medir posiciones absolutas: 131/73/319. */
/* La lista sube 547px sobre el encabezado (stackSpacing -547 de `Cases`): las
   cards arrancan sobre el halo, que queda de fondo mientras se apilan. */
.cases__list {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--cases-overlap) * -1);
  display: flex;
  flex-direction: column;
  gap: var(--case-gap);
}

.case-sticky {
  position: sticky;
  top: var(--case-stick-top);
}

/* Cada card se pega un poco más abajo que la anterior, así queda visible el
   borde superior de las que ya pasaron y se lee como una pila. */
.case-sticky:nth-child(1) { top: var(--case-stick-top); z-index: 1; }
.case-sticky:nth-child(2) { top: calc(var(--case-stick-top) + var(--case-stick-step)); z-index: 2; }
.case-sticky:nth-child(3) { top: calc(var(--case-stick-top) + var(--case-stick-step) * 2); z-index: 3; }

/* La card necesita fondo opaco al apilarse: con el glass translúcido del diseño
   se transparentarían unas sobre otras. El blur va sobre un pseudo-elemento
   para conservar el aspecto sin dejar pasar la card de abajo. */
.case-sticky .case-card { position: relative; isolation: isolate; }

.case-sticky .case-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--c-light);
}

.case-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-64);
  padding: var(--sp-36) var(--sp-36) var(--sp-60);
  background: var(--surface-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-radius: var(--r-card);
}

.case-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-32);
}

.case-card__logo {
  font-size: var(--fs-paragraph-m);
  font-weight: var(--fw-bold);
}

.case-card__grid {
  display: grid;
  grid-template-columns: 240px 240px 360px 320px;
  gap: var(--sp-36);
}

.case-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-28);
}

.case-field__label { opacity: 0.5; }

.case-field__value {
  font-size: var(--fs-paragraph-m);
  line-height: var(--lh-paragraph-m);
}

.case-field__value--sm {
  font-size: var(--fs-paragraph-xs);
  line-height: var(--lh-paragraph-xs);
}

.case-field__kpi {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.case-field__kpi strong {
  font-size: var(--fs-subheader);
  line-height: var(--lh-subheader);
  font-weight: var(--fw-bold);
}

.case-field__kpi span {
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  font-weight: var(--fw-medium);
}

/* --- Imagen de cierre ----------------------------------------------------- */
/* Alto del frame Image por breakpoint: 495 / 275 / 206. */
.closing {
  height: var(--closing-h);
  background:
    var(--grad-fade-light),
    url('../img/cierre.jpg') center / cover no-repeat;
}


/* --- Footer --------------------------------------------------------------- */
/* El color de texto va explícito, no heredado: /soluciones y las landings son
   páginas claras con footer oscuro, y sin esto el texto quedaba #212224 sobre
   #212224 (invisible). */
.footer {
  padding: var(--sp-100) var(--gutter) var(--sp-56);
  background: var(--c-dark);
  color: var(--c-white);
}

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-72);
  margin-bottom: var(--sp-100);
}

/* Se escala por ALTURA, no por ancho: las dos variantes del logo tienen
   viewBox distinto (603×162 la oscura, 889×236 la clara), así que fijar el
   ancho daría alturas distintas. */
.footer__logo {
  height: var(--footer-logo-h);
  width: auto;
  max-width: 100%;
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 23px;
  padding-top: var(--sp-32);
}

.footer__nav a {
  font-size: var(--fs-footer-nav);
  line-height: var(--lh-footer-nav);
  font-weight: var(--fw-medium);
  transition: opacity var(--dur) var(--ease);
}

.footer__nav a:hover { opacity: var(--hover-op); }

/* "Hablemos" lleva el gradiente aplicado al texto. */
.footer__nav a.is-gradient {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  padding-top: var(--sp-32);
}

/* En reposo van a 0.6 y el hover los lleva a 1: así está en el prototipo. */
.footer__links a {
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  font-weight: var(--fw-medium);
  opacity: var(--hover-op);
  transition: opacity var(--dur) var(--ease);
}

.footer__links a:hover { opacity: 1; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-36);
  color: var(--c-footer-text);
}

/* El legal del diseño es 8px con 1px de tracking, no un caption de 14px. */
.footer__legal {
  font-size: 8px;
  line-height: 8px;
  font-weight: var(--fw-medium);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Los íconos vienen en blanco con el hueco en el color del footer. */
.footer__social {
  display: flex;
  gap: var(--sp-24);
}

.footer__social img { width: 24px; height: 24px; }

.footer__social a { transition: opacity var(--dur) var(--ease); }
.footer__social a:hover { opacity: var(--hover-op); }

/* --- Footer claro --------------------------------------------------------
   El componente tiene dos variantes: `Color=Black` (fondo #212224) y
   `Color=White` (fondo #E8E9DD). No es sólo invertir el fondo — cambian tres
   cosas más:
     · el legal pasa de 8px/#C4C6C5 a 14px/#212224
     · los links secundarios pasan a oscuro
     · los íconos sociales intercambian sus DOS colores, no se filtran
   Se usa en /exitos, /nosotros y /hablemos. */
.footer--light {
  background: var(--c-light);
  /* Explícito: el footer no puede heredar el color de texto de la página,
     porque cada una tiene el suyo (/exitos es oscura, /nosotros termina
     oscura, /hablemos claro). Todo lo de adentro parte de acá. */
  color: var(--c-dark);
}

/* El logo NO se invierte con un filtro: `invert()` sobre el naranja da azul.
   La variante clara es otro SVG (iso #FF5800 + wordmark #212224) y se apunta
   desde el `src` de cada página, no desde acá. */

/* Los links heredan `color: inherit` del reset, así que con el color del
   contenedor alcanza — salvo los que tienen color propio. */
.footer--light .footer__nav a,
.footer--light .footer__links a { color: var(--c-dark); }

.footer--light .footer__bottom { color: var(--c-dark); }

/* En la variante clara el legal es 14px en #212224, no 8px en #C4C6C5. */
.footer--light .footer__legal {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: 1px;
  color: var(--c-dark);
}

/* ==========================================================================
   Responsive
   Los paddings y direcciones de flex de acá salen de los frames Tablet (800px)
   y Mobile (375px) del export, no de una escala inventada.
   ========================================================================== */

@media (max-width: 1100px) {
  /* En tablet «Agentes de la transformación» va sin salto. */
  .br--notablet { display: none; }

  /* En tablet la navbar NO es burger: el componente Device=Tablet mantiene los
     4 links con gap 44, igual que desktop. El burger es sólo de mobile. */
  .navbar { padding: 20px var(--gutter); }

  /* Nosotros: 84px 36px */
  .about { padding-block: var(--sp-84); }
  .about__grid { grid-template-columns: 1fr; gap: var(--sp-36); }
  .about__body { gap: var(--sp-56); }

  /* Soluciones: 100px 36px (simétrico, a diferencia de desktop) */
  .solutions { padding-block: var(--sp-100); }

  /* En tablet las 4 cards forman una grilla 2×2 de 320px con el mismo solape de
     26 en los dos ejes (614×614 en el diseño). No es una columna, y las cards
     NO bajan a 260: siguen en 320. */
  .solutions__list {
    display: grid;
    grid-template-columns: var(--card-size) calc(var(--card-size) - 26px);
    justify-content: center;
    margin-bottom: calc(var(--sp-72) - 26px);
  }
  .solutions__list > .solution-card + .solution-card { margin-left: 0; }
  .solution-card:nth-child(2n)   { margin-left: -26px; }
  .solution-card:nth-child(n+3)  { margin-top: -26px; }

  .solution-card__title {
    font-size: var(--fs-subtitle);
    line-height: var(--lh-subtitle);
  }

  /* Clientes: 80px 0 */
  .clients { padding-block: var(--sp-80); }

  .case-card { gap: var(--sp-36); }
  .case-card__grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer: 100px 36px 36px */
  .footer { padding: var(--sp-100) var(--gutter) var(--sp-36); }
  .footer__top { flex-direction: column; gap: var(--sp-56); }

}

@media (max-width: 640px) {
  /* En mobile el titular y la bajada de Nosotros fluyen sin salto forzado. */
  .br--nomobile { display: none; }
  .br--notablet { display: inline; }

  /* En mobile el logo va centrado (135×36) y aparece el burger a la derecha. */
  .navbar { padding: var(--sp-24); }
  .navbar__links { display: none; }
  .navbar__toggle { display: block; }
  .navbar__logo { width: 135px; height: 36px; margin-inline: auto; }
  .navbar__toggle { position: absolute; right: var(--sp-24); }

  /* El header no cambia de reglas acá: alto (--header-h), gap 120 y padding
     56/--gutter ya dan los valores del frame mobile (837px, gap 120, 56px 24px).

     El meta sigue en fila; el diseño oculta la categoría del medio. */
  .header__meta > .caption:nth-child(2) { display: none; }

  /* Nosotros: 64px 24px */
  .about { padding-block: var(--sp-64); }
  .about__body { gap: var(--sp-36); }

  /* Soluciones: 100px 24px. La bajada y el caption se apilan (gap 34). */
  .solutions { padding-block: var(--sp-100); }

  /* En mobile sí es una columna: 4 cards de 260 con 26 de solape vertical
     (327×962 en el diseño = 4×260 − 3×26). */
  .solutions__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--sp-72);
  }
  .solutions__list > .solution-card + .solution-card {
    margin-left: 0;
    margin-top: -26px;
  }
  .solution-card:nth-child(2n)  { margin-left: 0; }
  .solution-card:nth-child(n+3) { margin-top: -26px; }
  .solutions__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-34);
  }

  /* En mobile el contenedor de casos tiene gap POSITIVO (+96): las cards no se
     apilan, van separadas y sin sticky. */
  .case-sticky,
  .case-sticky:nth-child(1),
  .case-sticky:nth-child(2),
  .case-sticky:nth-child(3) { position: static; top: auto; }

  /* Case: padding 24, gap 24 */
  .case-card { padding: var(--sp-24); gap: var(--sp-24); }
  .case-card__grid { grid-template-columns: 1fr; gap: var(--sp-28); }
  .case-card__top { flex-direction: column; align-items: flex-start; gap: var(--sp-24); }

  /* Clientes: 44px 0, gap 36 */
  .clients { padding-block: var(--sp-44); }


  /* Footer: 48px 24px 56px, gap interno 64 */
  .footer { padding: var(--sp-48) var(--gutter) var(--sp-56); }
  .footer__top { gap: var(--sp-64); }

  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-24); }

}

/* Con movimiento reducido: el video se congela y el stack de casos deja de
   apilarse (las cards pasan a scrollear normalmente). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .header__media { display: none; }

  .cases__head,
  .case-sticky,
  .case-sticky:nth-child(1),
  .case-sticky:nth-child(2),
  .case-sticky:nth-child(3) { position: static; top: auto; }

  /* La marquesina se detiene y la tira queda scrolleable a mano. */
  .clients__list { animation: none; }
  .clients__viewport { overflow-x: auto; }
  .clients__list[aria-hidden="true"] { display: none; }
  .header {
    background: var(--c-lavender) url('../video/hero-poster.jpg') center / cover no-repeat;
  }
}