/* ==========================================================================
   EXVI SOLUTIONS - SISTEMA VISUAL BASE
   Manual de Identidad v2.0
   Arquitectura: primitivos de marca (fijos) + tokens de rol (flippean por modo)
   Los componentes solo consumen tokens de rol, por eso son mode-agnostic.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FUENTE (self-hosted, subset latin)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/outfit-300.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/outfit-400.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/outfit-500.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/outfit-600.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   2. VARIABLES
   -------------------------------------------------------------------------- */
:root {
  /* --- Capa 1: primitivos de marca (NUNCA cambian, son el puente entre modos) --- */
  --color-azul-exvi: #0061ff;
  --color-naranja: #ff5f18;
  --color-azul-profundo: #002d6a;
  --color-noche: #03111a;
  --color-blanco: #ffffff;
  --color-gris: #ced0d2;
  /* Azules que simulan transparencia cuando un card cae sobre un arco */
  --color-azul-sim-oscuro: #0a1e30;
  --color-azul-sim-claro: #edf2fc;

  /* --- Tipografia --- */
  --font-marca: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --peso-light: 300;
  --peso-regular: 400;
  --peso-medium: 500;
  --peso-semibold: 600;

  /* Escala fluida (mobile-first, crece con el viewport) */
  --fs-display: clamp(2.5rem, 6vw + 1rem, 4.5rem);
  --fs-h1: clamp(2rem, 4vw + 0.5rem, 3.25rem);
  --fs-h2: clamp(1.5rem, 2.4vw + 0.6rem, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.4vw + 0.6rem, 1.5rem);
  --fs-body: clamp(1.0625rem, 0.4vw + 0.97rem, 1.125rem);
  --fs-caption: clamp(0.9375rem, 0.2vw + 0.9rem, 1rem);
  --fs-label: 0.75rem;

  /* Tracking segun tabla del Manual */
  --ls-display: -0.03em;
  --ls-h1: -0.02em;
  --ls-h2: -0.01em;
  --ls-h3: 0;
  --ls-body: 0;
  --ls-caption: 0.01em;
  --ls-label: 0.05em;

  /* Line-height */
  --lh-tight: 1.08;
  --lh-base: 1.3;
  --lh-loose: 1.65;

  /* --- Radius (Manual: 8 chicos / 12 medianos / 16 grandes) --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  /* Isla: radio de frontera de modo (paneles claros full-bleed). Mayor que
     --radius-lg porque a ancho completo 16px no se lee como esquina. */
  --radius-isla: clamp(1.5rem, 3.5vw, 3rem);

  /* --- Espaciado (base 4px) --- */
  --space-2xs: 0.25rem; /* 4 */
  --space-xs: 0.5rem;   /* 8 */
  --space-sm: 1rem;     /* 16 */
  --space-md: 1.5rem;   /* 24 */
  --space-lg: 2.5rem;   /* 40 */
  --space-xl: 4rem;     /* 64 */
  --space-2xl: 6rem;    /* 96 */
  --space-3xl: 8rem;    /* 128 */

  /* Ritmo vertical entre secciones. El hueco real entre dos secciones es el
     doble (padding inferior de una + superior de la siguiente), por eso un
     valor moderado ya respira. Bajado de 4/9vw/8 para cerrar el exceso de
     aire sin apretar. */
  --ritmo-seccion: clamp(3.25rem, 6vw, 5.5rem);
  --ancho-contenedor: 75rem; /* 1200px */
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Header fijo: alto en reposo (sobre el hero) y compacto (con scroll) */
  --header-alto: 4.75rem;
  --header-alto-compacto: 3.75rem;

  /* --- Movimiento (techo de 600ms en interacciones primarias) --- */
  --dur-rapida: 150ms;
  --dur-base: 250ms;
  --dur-lenta: 400ms;
  --dur-reveal: 700ms; /* entradas al hacer scroll, mas pausadas */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   3. TOKENS DE MODO (remapean los roles; los componentes leen estos)
   -------------------------------------------------------------------------- */
.modo-oscuro {
  --fondo: var(--color-noche);
  --texto-principal: var(--color-blanco);
  --texto-secundario: var(--color-gris);
  --borde: rgba(206, 208, 210, 0.16);
  --card-transparente-fondo: rgba(0, 97, 255, 0.1);
  --card-transparente-borde: rgba(0, 97, 255, 0.32);
  --card-simulado-fondo: var(--color-azul-sim-oscuro);
  --arco-opacidad: 0.1; /* techo del rango 5-10% en oscuro */
  --punto-azul-tenue: rgba(0, 97, 255, 0.4);
  --punto-naranja-tenue: rgba(255, 95, 24, 0.4);
  /* Campos de formulario */
  --campo-fondo: rgba(255, 255, 255, 0.04);
  --campo-borde-hover: rgba(206, 208, 210, 0.38);
  --campo-anillo: rgba(0, 97, 255, 0.35);
  --campo-anillo-error: rgba(255, 95, 24, 0.3);
  /* Naranja sobre Noche pasa AA (6.3:1), puede ser texto de error */
  --campo-error-texto: var(--color-naranja);
}

.modo-claro {
  --fondo: var(--color-blanco);
  --texto-principal: var(--color-azul-profundo);
  /* Gris no pasa contraste como texto secundario sobre blanco.
     Se usa Azul Profundo al 72%: 5.7:1 sobre blanco y 5.5:1 sobre el panel
     mas palido (#f0f6ff), cumple WCAG AA en ambos fondos. */
  --texto-secundario: rgba(0, 45, 106, 0.72);
  --borde: var(--color-gris);
  --card-transparente-fondo: rgba(0, 97, 255, 0.06);
  --card-transparente-borde: rgba(0, 97, 255, 0.2);
  --card-simulado-fondo: var(--color-azul-sim-claro);
  --arco-opacidad: 0.08; /* rango 4-9% en claro */
  --punto-azul-tenue: rgba(0, 97, 255, 0.35);
  --punto-naranja-tenue: rgba(255, 95, 24, 0.35);
  /* Campos de formulario */
  --campo-fondo: var(--color-blanco);
  --campo-borde-hover: rgba(0, 45, 106, 0.45);
  --campo-anillo: rgba(0, 97, 255, 0.22);
  --campo-anillo-error: rgba(255, 95, 24, 0.28);
  /* Naranja sobre blanco NO pasa AA como texto (3.05:1).
     El error en claro se lee en Azul Profundo; el color lo dan borde y punto. */
  --campo-error-texto: var(--color-azul-profundo);
}

/* --------------------------------------------------------------------------
   4. RESET MINIMO
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-marca);
  font-weight: var(--peso-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-body);
  background-color: var(--color-noche);
  color: var(--color-blanco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

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

/* --------------------------------------------------------------------------
   5. BASE TIPOGRAFICA
   -------------------------------------------------------------------------- */
.display,
h1,
h2,
h3 {
  color: var(--texto-principal);
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--peso-medium);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-base);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--peso-medium);
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-base);
}

p {
  color: var(--texto-principal);
  max-width: 60ch;
  text-wrap: pretty;
}

.texto-secundario {
  color: var(--texto-secundario);
}

.caption {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color: var(--texto-secundario);
}

.label {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: var(--peso-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--texto-secundario);
}

/* --------------------------------------------------------------------------
   6. ACCESIBILIDAD: focus, skip-link, movimiento reducido
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-naranja);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 999;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-azul-exvi);
  color: var(--color-blanco);
  font-weight: var(--peso-medium);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   7. LAYOUT
   -------------------------------------------------------------------------- */
.seccion {
  position: relative;
  background-color: var(--fondo);
  padding-block: var(--ritmo-seccion);
  overflow: hidden; /* contiene los arcos cortados por el borde */
  /* El ancla aterriza el contenido a un gap fijo bajo el header, no el borde
     de la seccion. Se cancela el padding-block superior (= --ritmo-seccion) y
     se deja --space-md de aire. Sin esto, scroll-margin y padding se sumaban
     y el contenido caia demasiado abajo. */
  scroll-margin-top: calc(
    var(--header-alto-compacto) + var(--space-md) - var(--ritmo-seccion)
  );
}

/* Las islas de inicio se traslapan con la seccion oscura de arriba (margen
   negativo + zona de overlap), lo que sube su contenido ~140px respecto a una
   seccion normal. Ese offset es estructural (geometria, no texto): constante en
   mobile y desktop. Se devuelve para que el ancla aterrice al mismo gap. */
.isla-inicio {
  scroll-margin-top: calc(
    var(--header-alto-compacto) + var(--space-md) - var(--ritmo-seccion) + 140px
  );
}

.contenedor {
  position: relative;
  z-index: 1; /* contenido siempre por encima de los arcos */
  width: 100%;
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* contenido ocupa 50-70%, el resto respira (Manual: composicion) */
.medida {
  max-width: 42rem;
}

/* --------------------------------------------------------------------------
   7b. FRONTERAS DE MODO: la isla clara sube sobre el mar oscuro (parallax)
   El oscuro es el sustrato continuo (body). En la entrada dark -> claro la
   isla MONTA sobre lo oscuro (solape) y SUBE al cruzar la frontera: el solape
   estatico era invisible sobre el Noche, el movimiento es lo que revela los
   dos planos a distinta profundidad. Full bleed (no encajona el contenido).
   El solape (= radio) cae en el respiro inferior vacio de la seccion oscura,
   por encima de su firma (ritmo/2 > radio), asi nunca la tapa.
   Solo se redondea el borde EXTERIOR de cada corrida: top de la primera
   (.isla-inicio), bottom de la ultima (.isla-fin). Los limites internos del
   mismo grupo quedan al ras. Reusable en las cuatro fronteras.
   overflow: hidden de .seccion recorta los arcos contra el borde curvo. ----- */
.isla-inicio {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--radius-isla));
  border-top-left-radius: var(--radius-isla);
  border-top-right-radius: var(--radius-isla);
}

.isla-fin {
  border-bottom-left-radius: var(--radius-isla);
  border-bottom-right-radius: var(--radius-isla);
}

/* Sello de costuras internas de isla: la corrida clara (varias .modo-claro
   seguidas) monta sobre el Noche del body. En alta densidad, el redondeo
   sub-pixel deja un hueco < 1px en cada costura interna por donde se asoma el
   oscuro = "linea divisoria". Cada clara que sigue a otra clara se mete 1px
   debajo (invisible entre dos blancos) y tapa el hueco. Cubre las cuatro
   costuras internas de las dos islas. Las fronteras claro<->oscuro NO se tocan
   (ahi el borde es intencional, con su radio). */
.modo-claro + .modo-claro {
  margin-top: -1px;
}

/* El parallax: la isla entra ~140px mas abajo y sube a su sitio mientras
   cruza la frontera. Solo transform (sin reflow, sin CLS, compositor puro).
   CSS scroll-driven, sin JS ni GSAP. Firefox (aun sin soporte) cae a estatico,
   el sitio nunca se rompe. Con prefers-reduced-motion no se anima. */
@keyframes isla-sube {
  from {
    transform: translateY(140px);
  }
  to {
    transform: translateY(0);
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .isla-inicio {
      animation: isla-sube linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
  }
}

/* --------------------------------------------------------------------------
   8. COMPONENTE: arcos geometricos de fondo (esquinas, secciones generales)
   Dos anillos concentricos (el outline del icono de Exvi), esquinas opuestas
   (sup-der + inf-izq). Capa de fondo, nunca interactiva.
   Nota: el hero NO usa este componente; tiene su propio arco de marco en SVG.
   -------------------------------------------------------------------------- */
.arcos {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Cada arco es un SVG inline con los dos anillos del outline del icono de
   Exvi (proporcion interior/exterior = 0.69, tomada de icono-exvi.svg).
   vector-effect mantiene el stroke fino y nitido a cualquier tamano.
   --par-x / --par-y los mueve el parallax de mouse (main.js); en reposo, 0. */
.arco {
  position: absolute;
  width: clamp(22rem, 50vw, 42rem);
  aspect-ratio: 1;
  opacity: var(--arco-opacidad);
}

.arco circle {
  fill: none;
  stroke: var(--color-azul-exvi);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.arco--sup-der {
  top: 0;
  right: 0;
  transform: translate(
    calc(25% + var(--par-x, 0px)),
    calc(-25% + var(--par-y, 0px))
  );
}

.arco--inf-izq {
  bottom: 0;
  left: 0;
  transform: translate(
    calc(-18% + var(--par-x, 0px)),
    calc(32% + var(--par-y, 0px))
  );
}

/* --------------------------------------------------------------------------
   9. COMPONENTE: cards (el elemento mas reconocible de Exvi)
   solido = info principal | transparente = info secundaria
   simulado = misma lectura que transparente pero opaco, para cuando
   un card cae sobre un arco y el traslape se nota.
   -------------------------------------------------------------------------- */
.card-solido,
.card-transparente,
.card-simulado {
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.card-solido {
  background-color: var(--color-azul-exvi);
  color: var(--color-blanco);
}

.card-solido h2,
.card-solido h3,
.card-solido p {
  color: var(--color-blanco);
}

.card-transparente {
  background-color: var(--card-transparente-fondo);
  border: 1px solid var(--card-transparente-borde);
  color: var(--texto-principal);
  /* glass: el desenfoque solo se percibe cuando algo pasa detras (arcos,
     variacion de fondo); sobre fondo plano no cambia nada y no cuesta */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.card-simulado {
  background-color: var(--card-simulado-fondo);
  border: 1px solid var(--card-transparente-borde);
  color: var(--texto-principal);
}

/* --------------------------------------------------------------------------
   10. COMPONENTE: barra de acento vertical (3px)
   naranja = categoria/seccion (default) | azul = contenido secundario
   -------------------------------------------------------------------------- */
.barra-acento {
  padding-left: var(--space-sm);
  border-left: 3px solid var(--color-naranja);
}

.barra-acento--azul {
  border-left-color: var(--color-azul-exvi);
}

/* --------------------------------------------------------------------------
   11. COMPONENTE: subrayado de enfasis horizontal (2.5px)
   Se aplica sobre el span inline de la frase clave.
   naranja = cierre/CTA (default) | azul = enfasis interno
   Regla del Manual: nunca los dos colores de subrayado en la misma pieza.
   -------------------------------------------------------------------------- */
.subrayado-enfasis {
  background-image: linear-gradient(var(--color-naranja), var(--color-naranja));
  background-repeat: no-repeat;
  background-size: 100% 2.5px;
  background-position: 0 100%;
  padding-bottom: 0.12em;
}

.subrayado-enfasis--azul {
  background-image: linear-gradient(
    var(--color-azul-exvi),
    var(--color-azul-exvi)
  );
}

/* --------------------------------------------------------------------------
   12. COMPONENTE: firma de cierre (esquina inferior de cada seccion)
   Variante puntos: azul / azul tenue / naranja tenue.
   Variante logo: logo miniatura + punto naranja.
   La seccion contenedora debe ser .seccion (position: relative).
   -------------------------------------------------------------------------- */
.firma-cierre {
  position: absolute;
  right: var(--gutter);
  /* Centrada en el hueco entre secciones: el hueco lo forman el padding
     inferior de esta seccion y el superior de la siguiente (ambos = ritmo),
     asi que el punto medio cae justo en el borde. La firma queda equidistante
     del contenido de arriba y del de abajo. */
  bottom: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Resguardo en transiciones de isla, cada caso distinto: */

/* cede-a-isla: la siguiente seccion es una isla que SUBE y solapa la franja
   inferior (radius-isla). La firma se queda arriba para no quedar tapada. */
.cede-a-isla .firma-cierre {
  bottom: calc(var(--radius-isla) + var(--space-sm));
}

/* isla-fin: la firma va SOBRE la isla blanca. Baja a la banda recta del borde
   inferior; los puntos quedan a la izquierda de la curva de la esquina, asi
   que pueden bajar sin que el redondeo los corte. Mas notorio en mobile. */
.isla-fin .firma-cierre {
  bottom: var(--space-lg);
}

.firma-cierre__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.firma-cierre__punto--azul {
  background-color: var(--color-azul-exvi);
}

.firma-cierre__punto--azul-profundo {
  background-color: var(--color-azul-profundo);
}

.firma-cierre__punto--azul-tenue {
  background-color: var(--punto-azul-tenue);
}

.firma-cierre__punto--naranja {
  background-color: var(--color-naranja);
}

.firma-cierre__punto--naranja-tenue {
  background-color: var(--punto-naranja-tenue);
}

.firma-cierre__logo {
  width: 22px;
  height: auto;
}

/* --------------------------------------------------------------------------
   13. ANIMACIONES (reveal al hacer scroll, via Intersection Observer)
   El estado base oculta; .es-visible revela. Stagger por --reveal-delay.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.es-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   14. COMPONENTE: botones (terna canonica, version unica del sitio)
   primario = solido Azul Exvi con relleno deslizante en hover
   secundario = contorno | terciario = texto
   El focus visible lo da la regla global de :focus-visible (naranja).
   Estados: idle, hover, focus, active, disabled, loading (.esta-cargando).
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-marca);
  font-weight: var(--peso-medium);
  /* un escalon sobre el body: el boton es accion, no prosa */
  font-size: clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
  line-height: 1;
  padding: 0.9em 1.55em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease-out),
    color var(--dur-rapida) var(--ease-out),
    border-color var(--dur-rapida) var(--ease-out),
    filter var(--dur-rapida) var(--ease-out),
    transform var(--dur-rapida) var(--ease-out);
}

.btn__icono {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  transition: transform var(--dur-rapida) var(--ease-out);
}

/* Primario: relleno de Azul Profundo que entra desde la izquierda en hover.
   Solo texto: el CTA convence por la especificidad de la frase, no por
   decoracion. (El swap de flecha naranja se retiro: esa forma de naranja
   esta fuera de la lista cerrada del Manual.) */
.btn-primario {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--color-azul-exvi);
  color: var(--color-blanco);
}
.btn-primario::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-azul-profundo);
  transform: translateX(-101%);
  transition: transform var(--dur-base) var(--ease-out);
}
.btn-primario:hover::before {
  transform: translateX(0);
}
.btn-primario:active {
  transform: scale(0.98);
}
.btn-primario[disabled],
.btn-primario[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
  transform: none;
}

/* Fondo opaco (no transparente): asi el arco de fondo no se transparenta por
   debajo. --card-simulado-fondo es opaco en los dos modos (azul muy claro en
   claro, azul profundo en oscuro). El texto se queda en texto-principal:
   Azul Exvi como texto sobre Noche da 3.8:1 y falla WCAG AA. */
.btn-secundario {
  background-color: var(--card-simulado-fondo);
  color: var(--texto-principal);
  border-color: var(--borde);
  transition: background-color var(--dur-rapida) var(--ease-out),
    border-color var(--dur-rapida) var(--ease-out),
    transform var(--dur-rapida) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
/* Hover tipo card: borde azul + lift + sombra, consistente con las cards de caso */
.btn-secundario:hover {
  border-color: var(--color-azul-exvi);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -18px rgba(0, 45, 106, 0.4);
}
.btn-secundario:active {
  transform: translateY(0);
}
.btn-secundario[disabled],
.btn-secundario[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.btn-terciario {
  background-color: transparent;
  color: var(--texto-secundario);
  padding-inline: 0;
  border-radius: 0;
}
.btn-terciario:hover {
  color: var(--texto-principal);
}

.btn.esta-cargando {
  pointer-events: none;
  opacity: 0.85;
}
.btn.esta-cargando .btn__icono {
  display: none;
}
.btn.esta-cargando::before {
  content: "";
  width: 1.05em;
  height: 1.05em;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   15. COMPONENTE: cierre-punto (firma del sitio)
   El punto del icono de Exvi cierra la frase clave de cada seccion. Aterriza
   con un pequeno rebote y un pulso de anillo, despues de que la frase entra.
   Se dispara cuando un ancestro con .reveal recibe .es-visible.
   Reutilizable: <span class="cierre-punto" aria-hidden="true"> al final.
   -------------------------------------------------------------------------- */
.cierre-punto {
  position: relative;
  display: inline-block;
  width: 0.26em;
  height: 0.26em;
  margin-left: 0.05em;
  border-radius: 50%;
  background-color: var(--color-naranja);
  vertical-align: baseline;
  transform: scale(0);
}
.es-visible .cierre-punto {
  animation: cierre-punto-aparece var(--dur-lenta) var(--ease-out)
    var(--cierre-punto-delay, 1.05s) forwards;
}
.es-visible .cierre-punto::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--color-naranja);
  opacity: 0;
  animation: cierre-punto-pulso 0.65s var(--ease-out)
    var(--cierre-punto-delay, 1.05s) forwards;
}
@keyframes cierre-punto-aparece {
  0% {
    transform: scale(0);
  }
  72% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes cierre-punto-pulso {
  0% {
    transform: scale(0.5);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cierre-punto {
    transform: scale(1);
    animation: none;
  }
  .es-visible .cierre-punto::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   16. SECCION: hero (modo oscuro). Concepto: "La brecha se cierra".
   Una columna, tipografia protagonista en escala Display.
   Jerarquia de peso: lineas 1-2 en Light (el setup), linea 3 en Semibold
   (la promesa). El punch vive en "Nosotros cerramos esa brecha".
   Secuencia (CSS puro, sin GSAP). Los pasos se encadenan con traslapes
   cortos para que se lea como un solo movimiento continuo:
   0.00s  linea 1 sube por mascara (900ms)
   0.35s  linea 2 sube (900ms), traslapada con la 1
   1.40s  linea 3 sube DESFASADA a la derecha: la brecha es visible en la
          propia frase que promete cerrarla
   1.80s  la linea 3 se desliza a su lugar (700ms) con un rebote leve:
          aterriza con peso, cerrando la brecha
   2.10s  el subrayado naranja se traza DURANTE el deslizamiento, como si
          la frase lo arrastrara al entrar
   2.50s  el punto naranja cae como punto final: ese es el golpe
   2.80s  subhead y CTA entran
   Perillas: --beat-delay y --beat-dur (inline), --cierre-punto-delay,
   --hero-desfase. Critico para inline en head en fase de optimizacion.
   -------------------------------------------------------------------------- */
.hero {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: var(--space-2xl);
  --cierre-punto-delay: 1.15s;
  --hero-desfase: clamp(1.25rem, 5vw, 3rem);
}

.hero__eyebrow {
  margin-bottom: var(--space-md);
}

.hero__titulo {
  /* Escala propia: la linea mas larga (36 caracteres) cabe en una sola
     linea dentro del contenedor de 1200px. En mobile envuelve natural. */
  font-size: clamp(2.1rem, 1rem + 3.3vw, 3.8rem);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--texto-principal);
}
/* el contenedor del titulo no hace fade; los beats suben por mascara */
.hero__titulo.reveal {
  opacity: 1;
  transform: none;
}

.hero__beat {
  display: block;
  overflow: hidden;
  /* aire para descendentes (y, p, j) que el lh apretado puede cortar */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.hero__beat-inner {
  display: block;
  /* lineas parejas al envolver en pantallas chicas */
  text-wrap: balance;
  transform: translateY(110%);
  transition: transform var(--beat-dur, 900ms) var(--ease-out);
  transition-delay: var(--beat-delay, 0ms);
}
.hero__titulo.es-visible .hero__beat-inner {
  transform: translateY(0);
}

/* El setup en Light: las lineas 1-2 preparan, no compiten con la promesa */
.hero__beat--suave {
  font-weight: var(--peso-light);
}

/* La brecha: la linea de cierre entra desfasada y se desliza a su lugar
   mientras termina de subir. La frase que promete cerrar la brecha es la
   que la cierra. */
.hero__beat--desfase {
  transform: translateX(var(--hero-desfase));
  /* easing con rebote leve: la linea aterriza con peso fisico */
  transition: transform 0.7s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.hero__titulo.es-visible .hero__beat--desfase {
  transform: translateX(0);
  transition-delay: 0.8s;
}

/* el respiro: la brecha se siente antes de leer que se cierra */
.hero__beat--cierre {
  margin-top: 0.35em;
}

/* Subrayado de enfasis animado (variante hero del componente del Manual).
   Grosor proporcional al Display con piso de 2.5px (la medida canonica). */
.hero__frase-clave {
  background-image: linear-gradient(var(--color-naranja), var(--color-naranja));
  background-repeat: no-repeat;
  background-size: 0% max(2.5px, 0.045em);
  background-position: 0 100%;
  padding-bottom: 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.45s var(--ease-out);
}
.hero__titulo.es-visible .hero__frase-clave {
  background-size: 100% max(2.5px, 0.045em);
  transition-delay: 0.95s;
}

.hero__subhead {
  margin-top: var(--space-md);
  max-width: 48ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  font-weight: var(--peso-light);
  line-height: var(--lh-base);
  color: var(--texto-secundario);
}

.hero__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* La firma del hero baja a la orilla, no al ritmo de seccion */
.hero .firma-cierre {
  bottom: clamp(1rem, 4vh, 2.5rem);
}

/* El arco inferior del hero se corta SOLO contra el borde izquierdo del
   viewport (borde real y visible). Antes tambien lo cortaba el borde
   inferior de la seccion, que es invisible contra el Noche de El Problema,
   y el anillo se veia roto a media pantalla al scrollear. Completo en
   vertical y algo mas chico para caber en viewports bajos.
   Regla del sitio: en corridas de secciones del mismo modo, los arcos solo
   se cortan contra bordes visibles (viewport o cambio de modo). */
.hero .arco--inf-izq {
  width: clamp(18rem, 40vw, 34rem);
  bottom: clamp(1.25rem, 4vh, 3rem);
  transform: translate(calc(-52% + var(--par-x, 0px)), var(--par-y, 0px));
}

/* Mobile: el bloque se centra verticalmente en el viewport visible. El
   padding superior incluye el alto del header (la barra fija come espacio
   visual arriba), asi el centro optico cae apenas abajo del centro real y
   el texto respira parejo. El subrayado se retira: al envolver la frase en
   dos lineas la raya queda flotando a media frase; el desfase y el punto
   cargan solos el concepto. */
@media (max-width: 700px) {
  .hero {
    align-items: center;
    padding-block: calc(var(--header-alto) + var(--space-md)) calc(var(--space-xl) + 2rem);
  }

  .hero__titulo {
    font-size: clamp(1.75rem, 1rem + 3.9vw, 3.8rem);
  }

  .hero__frase-clave {
    background-image: none;
    padding-bottom: 0;
  }
}

/* Pantallas chicas: el CTA ocupa el ancho completo (mejor target tactil,
   se ve intencional en vez de encogido) */
@media (max-width: 480px) {
  .hero__cta .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__beat-inner,
  .hero__beat--desfase {
    transform: none;
    transition: none;
  }
  .hero__frase-clave {
    background-size: 100% max(2.5px, 0.045em);
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   17. COMPONENTE: campos de formulario (canonicos)
   Estructura:
   <div class="campo">
     <label class="campo__label" for="x">Etiqueta</label>
     <input class="campo__input" id="x" placeholder=" ">
     <p class="campo__error" id="x-error">Mensaje</p>  (solo en error)
   </div>
   Estados: idle, hover, focus, filled (via :placeholder-shown, siempre dar
   placeholder aunque sea " "), error (.campo--error + aria-describedby +
   aria-invalid), exito (.campo--exito), disabled.
   Select: envolver en .campo__select para el chevron.
   -------------------------------------------------------------------------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.campo__label {
  font-size: var(--fs-caption);
  font-weight: var(--peso-medium);
  letter-spacing: var(--ls-caption);
  color: var(--texto-principal);
}

.campo__input {
  width: 100%;
  min-height: 44px; /* touch target */
  padding: 0.7em 0.9em;
  background-color: var(--campo-fondo);
  color: var(--texto-principal);
  border: 1px solid var(--borde);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-rapida) var(--ease-out),
    box-shadow var(--dur-rapida) var(--ease-out);
}

.campo__input::placeholder {
  color: var(--texto-secundario);
  opacity: 1;
}

.campo__input:hover:not(:disabled):not(:focus-visible) {
  border-color: var(--campo-borde-hover);
}

/* Focus: borde azul + anillo. Reemplaza el outline global con un estado
   visible equivalente (regla: nunca quitar outline sin reemplazo). */
.campo__input:focus-visible {
  outline: none;
  border-color: var(--color-azul-exvi);
  box-shadow: 0 0 0 3px var(--campo-anillo);
}

/* Filled: el borde se queda firme cuando ya hay contenido */
.campo__input:not(:placeholder-shown):not(:focus-visible) {
  border-color: var(--campo-borde-hover);
}

textarea.campo__input {
  min-height: 8rem;
  resize: vertical;
  line-height: var(--lh-base);
}

/* Select con chevron propio (SVG inline via mask, hereda color por modo) */
.campo__select {
  position: relative;
}
.campo__select .campo__input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6em;
  cursor: pointer;
}
.campo__select::after {
  content: "";
  position: absolute;
  right: 0.95em;
  top: 50%;
  width: 0.85em;
  height: 0.85em;
  transform: translateY(-50%);
  pointer-events: none;
  background-color: var(--texto-secundario);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    center / contain no-repeat;
}

/* Error: borde naranja + mensaje con punto naranja.
   El input lleva aria-invalid="true" y aria-describedby al id del mensaje. */
.campo--error .campo__input {
  border-color: var(--color-naranja);
}
.campo--error .campo__input:focus-visible {
  border-color: var(--color-naranja);
  box-shadow: 0 0 0 3px var(--campo-anillo-error);
}

.campo__error {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color: var(--campo-error-texto);
}
.campo__error::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-naranja);
  transform: translateY(-1px);
}

/* Exito: borde azul firme. El mensaje de exito del formulario completo
   vive a nivel de formulario, no por campo. */
.campo--exito .campo__input {
  border-color: var(--color-azul-exvi);
}

.campo__input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   18. SECCION: header / nav. Concepto: "el nav que cruza la brecha".
   Header fixed que viaja por todas las secciones. main.js detecta que
   seccion queda debajo de la barra y alterna modo-oscuro / modo-claro en el
   propio header, asi el nav cambia de modo con la pagina. El punto naranja
   del logo es lo unico que nunca cambia (regla del Manual).
   Estados (los escribe main.js):
     (reposo)         transparente, conviviendo con el hero
     .header--solido  fondo del modo activo + borde inferior + alto compacto
     .esta-abierto    panel mobile abierto (fuerza modo oscuro)
   Indicador de link activo: el punto naranja (tercera aparicion del gesto
   que ata el sitio: icono, cierre del hero, nav).
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-alto);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: height var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.header--solido {
  height: var(--header-alto-compacto);
  background-color: var(--fondo);
  border-bottom-color: var(--borde);
}

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  height: 100%;
}

/* Logo: letras en currentColor (siguen el modo), puntos en naranja fijo */
.header__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--texto-principal);
  transition: color var(--dur-base) var(--ease-out);
}

.header__logo-svg {
  height: 1.9rem;
  width: auto;
}

.logo-exvi__letras {
  fill: currentColor;
}

.logo-exvi__punto {
  fill: var(--color-naranja);
}

/* Panel: en desktop es el grupo de links en linea; en mobile, overlay */
.header__panel {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-left: auto;
}

.header__links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Regular a 15px: Outfit Medium en cuerpos chicos se empasta; el peso se
   reserva para el estado activo via color, no via grosor (cero reflow). */
.header__link {
  position: relative;
  display: inline-block;
  padding: 0.4em 0.1em;
  font-size: 0.9375rem;
  font-weight: var(--peso-regular);
  letter-spacing: var(--ls-body);
  color: var(--texto-secundario);
  transition: color var(--dur-rapida) var(--ease-out);
}

.header__link:hover {
  color: var(--texto-principal);
}

/* El punto naranja: tenue en hover, solido en la seccion activa */
.header__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.2em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-naranja);
  opacity: 0;
  transform: translateX(-50%) scale(0);
  transition: transform var(--dur-rapida) var(--ease-out),
    opacity var(--dur-rapida) var(--ease-out);
}

.header__link:hover::after {
  opacity: 0.45;
  transform: translateX(-50%) scale(1);
}

.header__link.es-activo {
  color: var(--texto-principal);
}

.header__link.es-activo::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* CTA compacto: misma terna canonica, escala de nav */
.header__cta {
  padding: 0.62em 1.1em;
  font-size: 1rem;
}

.header__cta--panel,
.header__panel-firma {
  display: none;
}

/* Boton de menu (solo mobile): dos lineas que se cruzan en X */
.header__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--texto-principal);
  cursor: pointer;
}

/* Lineas de 2px en posiciones de pixel entero. Con 1.5px la segunda linea
   caia en medio pixel y el navegador la difuminaba (se veia "apagada"). */
.header__menu-icono {
  position: relative;
  display: block;
  width: 22px;
  height: 12px;
}
.header__menu-icono::before,
.header__menu-icono::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}
.header__menu-icono::before {
  top: 0;
}
.header__menu-icono::after {
  bottom: 0;
}
.esta-abierto .header__menu-icono::before {
  transform: translateY(5px) rotate(45deg);
}
.esta-abierto .header__menu-icono::after {
  transform: translateY(-5px) rotate(-45deg);
}

/* Panel abierto: el header se planta en oscuro aunque debajo haya una isla
   clara (Manual: el menu es momento Exvi). Se remapean solo los tokens que
   el header consume. */
.header.esta-abierto {
  --fondo: var(--color-noche);
  --texto-principal: var(--color-blanco);
  --texto-secundario: var(--color-gris);
  --borde: rgba(206, 208, 210, 0.16);
  background-color: var(--color-noche);
}

/* El scroll del documento se bloquea mientras el panel esta abierto */
body.sin-scroll {
  overflow: hidden;
}

@media (max-width: 860px) {
  .header__nav {
    gap: var(--space-sm);
  }

  .header__logo-svg {
    height: 1.65rem;
  }

  .header__cta--barra {
    display: none;
  }

  .header__menu-btn {
    display: inline-flex;
  }

  /* Overlay de pantalla completa, siempre Noche. Vive detras de la barra
     del header (z negativo dentro del stacking context del header) para que
     logo y boton queden encima. */
  .header__panel {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-lg);
    margin: 0;
    padding: calc(var(--header-alto) + var(--space-lg)) var(--gutter) var(--space-xl);
    background-color: var(--color-noche);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-base);
  }

  .esta-abierto .header__panel {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--dur-base) var(--ease-out);
  }

  .header__links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  /* Anclas en escala grande: el menu es un momento de marca, no una lista */
  .header__link {
    font-size: var(--fs-h2);
    font-weight: var(--peso-medium);
    letter-spacing: var(--ls-h2);
    color: var(--color-blanco);
    padding: 0.15em 0;
  }

  .header__link::after {
    left: calc(100% + 0.45em);
    top: 50%;
    bottom: auto;
    width: 0.22em;
    height: 0.22em;
    transform: translateY(-50%) scale(0);
  }
  .header__link:hover::after {
    transform: translateY(-50%) scale(1);
  }
  .header__link.es-activo::after {
    transform: translateY(-50%) scale(1);
  }

  /* Entrada escalonada de los items al abrir */
  .header__links li,
  .header__cta--panel {
    opacity: 0;
    transform: translateY(0.8rem);
    transition: opacity var(--dur-lenta) var(--ease-out),
      transform var(--dur-lenta) var(--ease-out);
  }
  .esta-abierto .header__links li:nth-child(1) { transition-delay: 60ms; }
  .esta-abierto .header__links li:nth-child(2) { transition-delay: 120ms; }
  .esta-abierto .header__links li:nth-child(3) { transition-delay: 180ms; }
  .esta-abierto .header__links li:nth-child(4) { transition-delay: 240ms; }
  .esta-abierto .header__cta--panel { transition-delay: 320ms; }

  .esta-abierto .header__links li,
  .esta-abierto .header__cta--panel {
    opacity: 1;
    transform: none;
  }

  .header__cta--panel {
    display: inline-flex;
    margin-top: var(--space-sm);
    padding: 0.9em 1.55em;
    font-size: var(--fs-body);
  }

  .header__panel-firma {
    position: absolute;
    right: var(--gutter);
    bottom: clamp(1.5rem, 6vh, 3rem);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header,
  .header__panel,
  .header__links li,
  .header__cta--panel {
    transition: none;
  }
  .header__links li,
  .header__cta--panel {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   19. SECCION: el problema (modo oscuro). Concepto: "Los sintomas y el
   diagnostico". Layout: dos columnas editoriales en desktop (ancla sticky
   con label + H2 a la izquierda, flujo de contenido a la derecha); en
   mobile se apilan a la izquierda.
   Las tres frases del prospecto en cards transparentes; cuando el
   diagnostico entra al viewport (main.js agrega .problema--diagnosticado),
   los sintomas se atenuan en cascada: el reframe sintoma -> causa.
   Sin arcos: el contraste con el hero (que si los tiene) hace el fondo
   plano intencional, y evita el traslape card-sobre-arco del Manual.
   Cierre como pregunta con la firma retorica del sitio: Light atenuado
   (el accidente) vs Semibold pleno (la decision) + subrayado naranja.
   -------------------------------------------------------------------------- */
.problema {
  /* atenuacion compartida: blanco al 55% sobre Noche ~= 5.9:1, cumple AA */
  --atenuado: 0.55;
}

.problema__eyebrow {
  margin-bottom: var(--space-md);
}

/* H2 con la firma de peso del sitio: la percepcion en Light, el veredicto
   en Semibold con linea propia. Escala calibrada para que la primera frase
   quepa en una linea junto a las cards en desktop. */
.problema__titulo {
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 1.9rem);
  text-wrap: balance;
}

.problema__titulo-suave {
  display: block;
  font-weight: var(--peso-light);
}

.problema__titulo-firme {
  display: block;
  font-weight: var(--peso-semibold);
}

.problema__sintomas {
  display: flex;
  flex-direction: column;
  /* mobile: las tres cards centradas, mismo ancho, con aire a los lados */
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

/* Cards con presencia de cita: escala H3, mismo ancho las tres, texto
   centrado. Bloques con estructura, no etiquetas sueltas. */
.problema__sintoma {
  width: min(92%, 24rem);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--fs-h3);
  line-height: var(--lh-base);
  text-align: center;
}

/* Desktop: grid compartido por bandas. Fila 1: H2 a la izquierda y cards
   a la derecha, alineados como un solo grid. Despues, bandas a ancho
   completo: diagnostico centrado (momento manifiesto), prosa en dos
   columnas, pregunta de cierre centrada. Cada banda usa el ancho con
   intencion y el aire queda ENTRE bandas: espacio acotado = respiro,
   no vacio. En mobile todo se apila. */
@media (min-width: 861px) {
  .problema__grid {
    display: grid;
    /* columnas con ancho propio y el par centrado como unidad: la fila
       H2 + cards ya no carga a la izquierda */
    grid-template-columns: minmax(0, 32rem) minmax(0, 26rem);
    justify-content: center;
    column-gap: var(--space-2xl);
    align-items: center;
  }

  /* los hijos del flujo participan directo en el grid */
  .problema__flujo {
    display: contents;
  }

  .problema__ancla {
    grid-column: 1;
  }

  .problema__sintomas {
    grid-column: 2;
    margin-top: 0;
    align-items: flex-start;
  }

  .problema__sintoma {
    width: min(100%, 26rem);
  }

  .problema__diagnostico,
  .problema__agitacion,
  .problema__cierre {
    grid-column: 1 / -1;
  }

  /* banda manifiesto: mas grande y con mas aire al tener todo el ancho */
  .problema__diagnostico {
    margin-top: var(--space-2xl);
    max-width: 30ch;
    font-size: clamp(2rem, 1rem + 2.4vw, 3.2rem);
  }

  /* prosa en el eje central, bajo el diagnostico */
  .problema__agitacion {
    max-width: 52ch;
    margin-top: var(--space-xl);
  }

  .problema__cierre {
    margin-top: var(--space-2xl);
  }
}

/* Arcos de la seccion en par canonico (esquinas opuestas), cortados SOLO
   por los bordes laterales del viewport: los bordes contra hero y La
   Diferencia son invisibles (misma regla de bordes visibles del sitio).
   El sup-der baja a la altura de la prosa para no encimarse al H2; el
   glass de las cards lo desenfoca al pasar detras. El inf-izq acompana
   la banda del cierre, completo en vertical y con aire respecto al borde
   inferior invisible. Sin parallax: ese gesto es del hero. */
.problema .arco--sup-der {
  top: clamp(5rem, 16vh, 11rem);
  width: clamp(16rem, 34vw, 30rem);
  transform: translate(45%, 0);
}

.problema .arco--inf-izq {
  bottom: clamp(5rem, 14vh, 10rem);
  width: clamp(13rem, 28vw, 24rem);
  transform: translate(-55%, 0);
}

/* El gesto de la seccion: los sintomas se apagan cuando aparece el
   diagnostico. Recalibrado para que la causalidad se vea: el disparo
   (main.js) coincide con la entrada del diagnostico, el apagado arranca
   un beat despues (350ms) y cae en cascada con un fade lento de 900ms.
   Se lee como intercambio: aparece la causa, se retiran los sintomas.
   Solo sobre cards ya reveladas (.es-visible) para no pisar el estado
   oculto del reveal si el usuario llega con scroll rapido. */
.problema--diagnosticado .problema__sintoma.es-visible {
  opacity: var(--atenuado);
  transition: opacity 900ms var(--ease-suave);
}
.problema--diagnosticado .problema__sintoma.es-visible:nth-child(1) {
  transition-delay: 350ms;
}
.problema--diagnosticado .problema__sintoma.es-visible:nth-child(2) {
  transition-delay: 500ms;
}
.problema--diagnosticado .problema__sintoma.es-visible:nth-child(3) {
  transition-delay: 650ms;
}

/* El diagnostico: centro de gravedad de la seccion. Una sola frase, un
   solo peso, centrada: el momento manifiesto. */
.problema__diagnostico {
  margin-top: var(--space-xl);
  margin-inline: auto;
  max-width: 30ch;
  font-size: clamp(1.85rem, 1.15rem + 2.5vw, 2.85rem);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--ls-h1);
  line-height: 1.15;
  color: var(--texto-principal);
  text-align: center;
  text-wrap: balance;
}

.problema__agitacion {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  margin-inline: auto;
  text-align: center;
}

.problema__agitacion p {
  color: var(--texto-secundario);
}

/* Cierre: el ultimo golpe. Centrado y por encima de la escala H2; el
   accidente debil (Light atenuado), la decision firme (Semibold). */
.problema__cierre {
  margin-top: var(--space-xl);
  margin-inline: auto;
  max-width: 26ch;
  font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.5rem);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-base);
  text-align: center;
  text-wrap: balance;
}

.problema__cierre-suave {
  font-weight: var(--peso-light);
  color: rgba(255, 255, 255, var(--atenuado));
}

.problema__cierre-firme {
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
}

/* Subrayado de cierre trazandose (misma tecnica que el hero). La frase
   "por decision" es corta y no envuelve, asi que se queda en mobile. */
.problema__frase-clave {
  background-image: linear-gradient(var(--color-naranja), var(--color-naranja));
  background-repeat: no-repeat;
  background-size: 0% max(2.5px, 0.045em);
  background-position: 0 100%;
  padding-bottom: 0.1em;
  transition: background-size 0.45s var(--ease-out);
}
.problema__cierre.es-visible .problema__frase-clave {
  background-size: 100% max(2.5px, 0.045em);
  transition-delay: 0.45s;
}

@media (prefers-reduced-motion: reduce) {
  .problema__frase-clave {
    background-size: 100% max(2.5px, 0.045em);
    transition: none;
  }
  /* Con movimiento reducido main.js no agrega .problema--diagnosticado:
     la version estatica conserva los sintomas a contraste completo. */
  .problema--diagnosticado .problema__sintoma.es-visible {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   20. SECCION: la diferencia (modo oscuro). Concepto: "El mapa es el icono".
   El icono de Exvi se separa en sus partes y se vuelve el mapa del mercado:
   un anillo = Pensar (branding), otro anillo = Ejecutar (marketing), y el
   punto naranja aterriza en la interseccion: ahi esta Exvi.
   Tres tiempos verticales sobre eje central: H2, las dos mitades del
   mercado (cards con su anillo asomando hacia el centro), y la resolucion
   (Venn convergente + cierre). El gap entre cards en desktop ES la brecha.
   Sin arcos de fondo: los anillos del Venn son el elemento geometrico de
   la seccion. Coreografia completa en IO + CSS (una sola transicion de
   estado, separado -> unido; no requiere scrubbing ni GSAP).
   -------------------------------------------------------------------------- */
.diferencia {
  --atenuado: 0.55; /* mismo valor AA que El Problema */
}

.diferencia__intro {
  text-align: center;
}

.diferencia__eyebrow {
  margin-bottom: var(--space-md);
}

/* H2 con la firma de peso del sitio. Centrado y un paso por encima de la
   escala del H2 de El Problema: esta seccion pide mas presencia. */
.diferencia__titulo {
  margin-inline: auto;
  max-width: 24ch;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
  line-height: var(--lh-base);
}

.diferencia__titulo-suave {
  display: block;
  font-weight: var(--peso-light);
}

.diferencia__titulo-firme {
  display: block;
  font-weight: var(--peso-semibold);
}

/* --- Las dos mitades del mercado --- */
.diferencia__mitades {
  display: grid;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

@media (min-width: 861px) {
  .diferencia__mitades {
    grid-template-columns: repeat(2, minmax(0, 26rem));
    /* el gap es la brecha del mercado: generoso a proposito */
    column-gap: clamp(3rem, 8vw, 6.5rem);
  }
}

.diferencia__mitad {
  position: relative;
  overflow: hidden; /* recorta el anillo que asoma por la esquina */
  width: min(100%, 26rem);
  margin-inline: auto;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  text-align: center;
}

.diferencia__mitad-label {
  margin-bottom: var(--space-xs);
}

/* Verbo display con entrada por mascara (la firma tipografica del hero).
   Escala protagonista dentro de la card: el verbo ES el contenido; el
   parrafo solo lo aterriza. Padding inferior para el descendente de la
   j de "Ejecutan." que el lh apretado corta. */
.diferencia__verbo {
  overflow: hidden;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 2.9rem);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  color: var(--texto-principal);
  max-width: none;
  padding-bottom: 0.1em;
}

.diferencia__verbo-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 700ms var(--ease-out);
  /* hereda el stagger de la card y entra un beat despues de ella */
  transition-delay: calc(var(--reveal-delay, 0ms) + 260ms);
}

.diferencia__mitad.es-visible .diferencia__verbo-inner {
  transform: translateY(0);
}

.diferencia__mitad-texto {
  margin-top: var(--space-xs);
  margin-inline: auto;
  max-width: 34ch;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--texto-secundario);
}

/* Anillo de la card: cada mitad sostiene UNO de los anillos del Venn,
   asomando por la esquina interior (hacia la brecha). Es el hilo que
   conecta las cards con la resolucion: estos anillos son los que despues
   convergen abajo. Opacidad apenas arriba del techo de arcos de fondo
   porque vive dentro de un card transparente que ya aporta velo. */
.diferencia__anillo-card {
  position: absolute;
  bottom: 0;
  width: clamp(8rem, 13vw, 11rem);
  aspect-ratio: 1;
  opacity: 0.14;
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-suave);
}

.diferencia__anillo-card circle {
  fill: none;
  stroke: var(--color-azul-exvi);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.diferencia__mitad--piensan .diferencia__anillo-card {
  right: 0;
  transform: translate(48%, 48%);
}

.diferencia__mitad--ejecutan .diferencia__anillo-card {
  left: 0;
  transform: translate(-48%, 48%);
}

/* Hover: el anillo deriva hacia el centro de la seccion (las mitades se
   buscan). Sin lift: las cards no son clickables y levantar es lenguaje
   de boton; el premio a la atencion es la deriva, no la elevacion. */
@media (hover: hover) and (pointer: fine) {
  .diferencia__mitad--piensan:hover .diferencia__anillo-card {
    transform: translate(calc(48% + 5px), 48%);
  }
  .diferencia__mitad--ejecutan:hover .diferencia__anillo-card {
    transform: translate(calc(-48% - 5px), 48%);
  }
}

/* --- La resolucion: el Venn --- */
/* No usa el reveal generico: main.js (initVenn) le pone .es-visible hasta
   que ~55% del diagrama esta en viewport. Solo fade: la unica trayectoria
   que debe leerse es la convergencia de los anillos. */
.diferencia__resolucion {
  margin-top: clamp(var(--space-lg), 5vw, var(--space-xl));
  text-align: center;
  opacity: 0;
  transition: opacity 500ms var(--ease-suave);
}

.diferencia__resolucion.es-visible {
  opacity: 1;
}

.diferencia__venn {
  width: min(100%, 52rem);
  margin-inline: auto;
}

.diferencia__venn svg {
  width: 100%;
  height: auto;
  overflow: visible; /* el pulso del punto puede salir del viewBox */
}

/* Dos composiciones del mismo mapa: apaisada en desktop, vertical en
   mobile. En pantallas angostas el ancho limita: el Venn apaisado a 390px
   renderiza anillos de ~140px. La composicion vertical usa la altura
   (la dimension que mobile si tiene) y los anillos suben a ~300px. */
.venn__svg--vertical {
  display: none;
}

@media (max-width: 700px) {
  .venn__svg--apaisado {
    display: none;
  }
  .venn__svg--vertical {
    display: block;
  }
  .diferencia__venn {
    width: min(100%, 22rem);
  }
  /* Ritmo parejo en mobile: el SVG vertical ya trae aire interno abajo,
     asi que cards->Venn y Venn->cierre se igualan en space-lg y el cierre
     no suma el space-xl de escritorio (se veia desbalanceado: Venn pegado
     a las cards y el texto lejos). */
  .diferencia__resolucion {
    margin-top: var(--space-lg);
  }
  .diferencia__cierre {
    margin-top: var(--space-sm);
  }
}

/* Anillos del mapa: elemento de contenido, no de fondo. Mas presentes que
   los arcos decorativos pero por debajo del texto. */
.venn__grupo circle {
  fill: none;
  stroke: var(--color-azul-exvi);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0.6;
}

.venn__label {
  font-family: var(--font-marca);
  font-size: 26px; /* unidades del viewBox: ~30px en desktop, ~14px a 390px */
  font-weight: var(--peso-medium);
  letter-spacing: 0.04em;
  fill: var(--texto-secundario);
}

/* Convergencia: cada grupo (anillo + rotulo) llega desde su lado y se
   encuentra con el otro. Tempo recalibrado para narrar, no para despachar:
   900ms de trayectoria (dos cosas que se encuentran, no un fade), el
   punto aterriza en 1.05s cuando los anillos ya se tocaron, y el rotulo
   Exvi confirma al final. Es entrada, no interaccion primaria, por eso
   puede exceder el techo de 600ms. */
.venn__grupo {
  opacity: 0;
  transition: transform 900ms var(--ease-out), opacity 550ms var(--ease-suave);
}

.venn__grupo--pensar {
  transform: translateX(-72px);
}

.venn__grupo--ejecutar {
  transform: translateX(72px);
}

/* En la composicion vertical la convergencia es por el eje Y */
@media (max-width: 700px) {
  .venn__grupo--pensar {
    transform: translateY(-72px);
  }
  .venn__grupo--ejecutar {
    transform: translateY(72px);
  }
}

.diferencia__resolucion.es-visible .venn__grupo {
  transform: none;
  opacity: 1;
}

/* El punto aterriza en la interseccion cuando los anillos ya se tocaron
   (~800ms), con el mismo rebote y pulso del cierre-punto del sitio.
   transform-box: fill-box porque el scale debe ocurrir sobre el centro
   del circulo SVG, no sobre el origen del viewBox. */
.venn__punto {
  fill: var(--color-naranja);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}

.diferencia__resolucion.es-visible .venn__punto {
  animation: cierre-punto-aparece var(--dur-lenta) var(--ease-out) 1.05s forwards;
}

.venn__pulso {
  fill: none;
  stroke: var(--color-naranja);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.diferencia__resolucion.es-visible .venn__pulso {
  animation: venn-pulso 0.65s var(--ease-out) 1.1s forwards;
}

@keyframes venn-pulso {
  0% {
    transform: scale(0.6);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* El rotulo Exvi confirma despues del aterrizaje del punto */
.venn__label--exvi {
  font-weight: var(--peso-semibold);
  fill: var(--color-blanco);
  opacity: 0;
  transition: opacity 400ms var(--ease-suave) 1.45s;
}

.diferencia__resolucion.es-visible .venn__label--exvi {
  opacity: 1;
}

/* --- Cierre: la afirmacion --- */
.diferencia__cierre {
  margin-top: var(--space-xl);
  margin-inline: auto;
  /* una sola idea, seguida: en desktop cabe en una linea (38 caracteres);
     en mobile envuelve balanceado */
  max-width: 38ch;
  font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.5rem);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-base);
  text-align: center;
  text-wrap: balance;
  /* el punto cae despues del subrayado: reveal (0.7s, traslapado) ->
     subrayado (0.45s en t+0.45) -> punto en t+0.9 */
  --cierre-punto-delay: 0.9s;
}

.diferencia__cierre-suave {
  font-weight: var(--peso-light);
  color: rgba(255, 255, 255, var(--atenuado));
}

.diferencia__cierre-firme {
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
}

/* Subrayado de cierre trazandose (misma tecnica que hero y El Problema).
   "las dos" es corta y no envuelve: se queda tambien en mobile. */
.diferencia__frase-clave {
  background-image: linear-gradient(var(--color-naranja), var(--color-naranja));
  background-repeat: no-repeat;
  background-size: 0% max(2.5px, 0.045em);
  background-position: 0 100%;
  padding-bottom: 0.1em;
  transition: background-size 0.45s var(--ease-out);
}

.diferencia__cierre.es-visible .diferencia__frase-clave {
  background-size: 100% max(2.5px, 0.045em);
  transition-delay: 0.45s;
}

.diferencia__apoyo {
  margin-top: var(--space-lg);
  margin-inline: auto;
  max-width: 46ch;
  text-align: center;
  color: var(--texto-secundario);
}

/* Movimiento reducido: el mapa ya resuelto, estatico. El delay de las
   animaciones/transiciones no se anula con la regla global, por eso los
   estados finales se fijan explicitos. */
@media (prefers-reduced-motion: reduce) {
  .diferencia__verbo-inner {
    transform: none;
    transition: none;
  }
  .diferencia__resolucion {
    opacity: 1;
    transition: none;
  }
  .venn__grupo {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .venn__punto {
    transform: scale(1);
    animation: none;
  }
  .venn__pulso {
    display: none;
  }
  .venn__label--exvi {
    opacity: 1;
    transition: none;
  }
  .diferencia__frase-clave {
    background-size: 100% max(2.5px, 0.045em);
    transition: none;
  }
}
/* --------------------------------------------------------------------------
   18. SECCION: como trabajamos (modo claro, primera isla), v2
   Dos fases con el MISMO peso visual (DEC es el corazon del negocio, no el
   hermano menor). Ambas en glass (card-transparente). La barra de acento es
   el unico diferenciador: SAE solida (la base se cierra, naranja), DEC se
   desvanece hacia abajo (el rumbo no termina, azul). Un puente las conecta.
   Registro documental. Todo CSS + reveal generico (IO), sin GSAP.
   -------------------------------------------------------------------------- */
.como__intro {
  max-width: 38rem;
  margin-bottom: clamp(var(--space-lg), 5vw, var(--space-xl));
}

/* El arco inferior de esta isla NO debe cortarse contra la costura interna
   con Lo Que Cambia (borde invisible: ambas claras). Se contiene en vertical:
   sangra solo a la izquierda (borde visible del viewport) y su base queda por
   encima del borde inferior de la seccion, asi el overflow no lo recorta en
   la costura. (como no tiene parallax de mouse: no necesita --par-x/--par-y.) */
.como .arco--inf-izq {
  bottom: clamp(3rem, 8vw, 7rem);
  transform: translateX(-18%);
}

.como__eyebrow {
  margin-bottom: var(--space-md);
}

.como__titulo-suave,
.como__titulo-firme {
  display: block;
}
/* contraste solo por peso, ambos en Azul Profundo pleno: la firma retorica
   del sitio es el peso, no la opacidad (el 65% se veia lavado). */
.como__titulo-suave {
  font-weight: var(--peso-light);
  color: var(--color-azul-profundo);
}
.como__titulo-firme {
  font-weight: var(--peso-semibold);
  color: var(--color-azul-profundo);
}

/* --- Las dos fases (peso parejo) --- */
.como__fases {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-md);
}

.como__fase {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-md), 3vw, var(--space-lg));
  /* sitio para la barra de acento a la izquierda */
  padding-left: calc(clamp(var(--space-md), 3vw, var(--space-lg)) + var(--space-md));
}

/* Barra de acento = cerrado vs continuo, con cards de igual peso.
   SAE: solida (la base se cierra). DEC: se desvanece abajo (no termina). */
.como__fase::before {
  content: "";
  position: absolute;
  left: var(--space-md);
  top: clamp(var(--space-md), 3vw, var(--space-lg));
  bottom: clamp(var(--space-md), 3vw, var(--space-lg));
  width: 3px;
  border-radius: var(--radius-pill);
}
.como__fase--sae::before {
  background-color: var(--color-naranja);
}
.como__fase--dec::before {
  background-color: var(--color-azul-exvi);
}

.como__fase-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.como__fase-rotulo {
  font-size: var(--fs-h3);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--ls-h3);
  line-height: 1.1;
  color: var(--texto-principal);
}
.como__fase-sub {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color: var(--texto-secundario);
}

.como__fase-linea {
  font-weight: var(--peso-medium);
  color: var(--texto-principal);
}

.como__incluye {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block: var(--space-2xs);
}
/* piso de lectura mobile: cuerpo 17px (el caption se sentia chico) */
.como__incluye li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--texto-principal);
}
.como__incluye li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.como__fase--sae .como__incluye li::before {
  background-color: var(--color-naranja);
}
.como__fase--dec .como__incluye li::before {
  background-color: var(--color-azul-exvi);
}

/* ritmo + remate anclados al fondo: las dos cards alinean su pie en desktop */
.como__fase-ritmo {
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--borde);
  font-size: var(--fs-caption);
  color: var(--texto-secundario);
}
.como__ritmo-dato {
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
}

.como__fase-remate {
  font-size: var(--fs-caption);
  color: var(--texto-secundario);
}

/* --- El puente: la base entrega al rumbo. Se traza al entrar. --- */
.como__puente {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-2xs);
}
.como__puente-linea {
  display: block;
  width: 2px;
  height: 0;
  background-color: var(--color-azul-exvi);
  transition: height var(--dur-lenta) var(--ease-out);
}
.como__puente.es-visible .como__puente-linea {
  height: 2rem;
}

/* --- Puente verbal + cierre (firma del sistema) --- */
.como__handoff {
  margin-top: var(--space-lg);
  margin-inline: auto;
  max-width: 44ch;
  text-align: center;
}

.como__cierre {
  margin-top: var(--space-lg);
  margin-inline: auto;
  max-width: 40ch;
  font-size: clamp(1.5rem, 1rem + 1.7vw, 2.25rem);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-base);
  text-align: center;
  text-wrap: balance;
  --cierre-punto-delay: 0.9s;
}
.como__cierre-suave,
.como__cierre-firme {
  display: block;
}
.como__cierre-suave {
  font-weight: var(--peso-light);
  color: var(--color-azul-profundo);
}
.como__cierre-firme {
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
}
/* subrayado de cierre trazandose: naranja, consistente con las oscuras */
.como__frase-clave {
  background-image: linear-gradient(var(--color-naranja), var(--color-naranja));
  background-repeat: no-repeat;
  background-size: 0% max(2.5px, 0.045em);
  background-position: 0 100%;
  padding-bottom: 0.1em;
  transition: background-size 0.45s var(--ease-out);
}
.como__cierre.es-visible .como__frase-clave {
  background-size: 100% max(2.5px, 0.045em);
  transition-delay: 0.45s;
}

/* --- Desktop: las dos fases en fila, el puente se traza horizontal --- */
@media (min-width: 861px) {
  .como__fases {
    flex-direction: row;
    align-items: stretch;
  }
  .como__fase {
    flex: 1;
  }
  .como__puente {
    flex: 0 0 auto;
    width: clamp(2rem, 5vw, 4rem);
    padding-block: 0;
  }
  .como__puente-linea {
    width: 0;
    height: 2px;
    transition: width var(--dur-lenta) var(--ease-out);
  }
  .como__puente.es-visible .como__puente-linea {
    width: 100%;
    height: 2px;
  }
}

/* --- Movimiento reducido: estados finales fijos, sin trazo --- */
@media (prefers-reduced-motion: reduce) {
  .como__puente-linea {
    width: 2px;
    height: 2rem;
    transition: none;
  }
  .como__frase-clave {
    background-size: 100% max(2.5px, 0.045em);
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   SECCION: Lo que cambia (isla clara media). Concepto "el antes se tacha".
   Resultados (no proceso): 4 cambios de estado, cada uno en una linea
   Antes/Ahora con el contraste de peso DENTRO de la oracion. La firma de la
   seccion es el tachon naranja que se traza sobre el "antes" (misma mecanica
   que el subrayado de cierre). Sin cards, sin glass, sin bullets, sin arcos:
   separacion clara de Como Trabajamos. Ledger angosto alineado a la izquierda;
   solo el cierre centrado. Todo CSS + reveal generico (IO), sin GSAP.
   -------------------------------------------------------------------------- */
.cambio__intro {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: clamp(var(--space-lg), 5vw, var(--space-xl));
}

/* Arcos de la seccion: isla media, las dos costuras (con Como arriba y con
   Casos abajo) son bordes invisibles. Los arcos NO deben acercarse a ellas:
   sangran solo hacia los lados (bordes visibles del viewport) y quedan
   contenidos en vertical con holgura arriba y abajo. Sin parallax de mouse
   aqui: no usan --par-x/--par-y. */
.cambio .arco--sup-der {
  top: clamp(3rem, 10vw, 8rem);
  right: 0;
  transform: translateX(30%);
}
.cambio .arco--inf-izq {
  bottom: clamp(3rem, 10vw, 8rem);
  left: 0;
  transform: translateX(-24%);
}

.cambio__eyebrow {
  margin-bottom: var(--space-md);
}

/* contraste solo por peso, ambos Azul Profundo pleno (consistente con la otra
   isla: el 65% se ve lavado en titulos) */
.cambio__titulo-suave,
.cambio__titulo-firme {
  display: block;
}
.cambio__titulo-suave {
  font-weight: var(--peso-light);
  color: var(--color-azul-profundo);
}
.cambio__titulo-firme {
  font-weight: var(--peso-semibold);
  color: var(--color-azul-profundo);
}

/* --- El ledger de cambios --- */
.cambio__lista {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-lg), 5vw, var(--space-xl));
  max-width: 46rem; /* medida legible, centrada en el contenedor */
  margin-inline: auto;
}

.cambio__fila {
  display: grid;
  gap: var(--space-xs);
  /* perilla del punch: cuanto se lee el "antes" antes de tacharse */
  --cambio-beat: 0.85s;
}

.cambio__rotulo {
  /* hereda .label (12px uppercase, secundario) */
  color: var(--texto-secundario);
}

/* el texto grande carga el argumento (Manual): el cambio es la linea display */
.cambio__estado {
  font-size: clamp(1.25rem, 0.9rem + 1.4vw, 1.6rem);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-h3);
  max-width: 22ch; /* fuerza el quiebre Antes / Ahora en dos lineas limpias */
}

.cambio__antes,
.cambio__ahora {
  display: block;
}

/* "antes": Light, atenuado, con el tachon naranja que se traza al entrar.
   Misma mecanica que el subrayado de cierre pero a media altura (line-through).
   Las frases son cortas a proposito: una sola linea, el tachon nunca cae
   entre dos renglones. */
.cambio__antes {
  width: fit-content; /* el tachon se ajusta al texto, no al ancho del bloque */
  font-weight: var(--peso-light);
  color: var(--texto-secundario);
  background-image: linear-gradient(var(--color-naranja), var(--color-naranja));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 55%; /* perilla: altura del tachon (centro x-height) */
  transition: background-size var(--dur-lenta) var(--ease-out);
}
.cambio__fila.es-visible .cambio__antes {
  background-size: 100% 2px;
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--cambio-beat));
}

/* "ahora": Semibold, color pleno. Es el estado que queda; aterriza al mismo
   tiempo que cae el tachon (el cambio es un solo gesto). Reserva su espacio
   en reposo via opacity/transform, sin reflow. */
.cambio__ahora {
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-lenta) var(--ease-out),
    transform var(--dur-lenta) var(--ease-out);
}
.cambio__fila.es-visible .cambio__ahora {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--cambio-beat));
}

/* el ejemplo se asienta despues del cambio */
.cambio__ejemplo {
  max-width: 52ch;
  opacity: 0;
  transition: opacity var(--dur-lenta) var(--ease-out);
}
.cambio__fila.es-visible .cambio__ejemplo {
  opacity: 1;
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--cambio-beat) + 0.3s);
}

/* --- Cierre (afirmacion, firma del sistema): callback al hero --- */
.cambio__cierre {
  margin-top: clamp(var(--space-xl), 7vw, var(--space-2xl));
  margin-inline: auto;
  max-width: 40ch;
  font-size: clamp(1.5rem, 1rem + 1.7vw, 2.25rem);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-base);
  text-align: center;
  text-wrap: balance;
  --cierre-punto-delay: 0.9s;
}
.cambio__cierre-suave,
.cambio__cierre-firme {
  display: block;
}
.cambio__cierre-suave {
  font-weight: var(--peso-light);
  color: var(--color-azul-profundo);
}
.cambio__cierre-firme {
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
}
.cambio__frase-clave {
  background-image: linear-gradient(var(--color-naranja), var(--color-naranja));
  background-repeat: no-repeat;
  background-size: 0% max(2.5px, 0.045em);
  background-position: 0 100%;
  padding-bottom: 0.1em;
  transition: background-size 0.45s var(--ease-out);
}
.cambio__cierre.es-visible .cambio__frase-clave {
  background-size: 100% max(2.5px, 0.045em);
  transition-delay: 0.45s;
}

/* --- Desktop: el rotulo pasa a riel izquierdo del cambio --- */
@media (min-width: 861px) {
  .cambio__fila {
    grid-template-columns: 10rem 1fr;
    column-gap: var(--space-lg);
    align-items: start;
  }
  .cambio__rotulo {
    grid-row: 1 / 3;
    padding-top: 0.35em; /* alinea optico con la primera linea del cambio */
  }
  .cambio__estado,
  .cambio__ejemplo {
    grid-column: 2;
  }
  .cambio__estado {
    max-width: none; /* en desktop el quiebre lo da el ancho de la columna */
  }
}

/* --- Movimiento reducido: estados finales fijos, sin trazo --- */
@media (prefers-reduced-motion: reduce) {
  .cambio__antes {
    background-size: 100% 2px;
    transition: none;
  }
  .cambio__ahora {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cambio__ejemplo {
    opacity: 1;
    transition: none;
  }
  .cambio__frase-clave {
    background-size: 100% max(2.5px, 0.045em);
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   BANDA DE CLIENTES (oscuro, entre Hero y El Problema). Prueba alta.
   Marquee: una sola fila en loop continuo. Una linea = poco alto (sin hueco en
   desktop grande) y en mobile la misma fila, sin acomodo de grilla. Puro CSS:
   pausa al hover, y reduced-motion lo detiene mostrando un juego centrado.
   -------------------------------------------------------------------------- */
.logos {
  padding-block: clamp(2.5rem, 5.5vw, 4rem);
  /* knob de tamano de los logos */
  --logo-base: clamp(2rem, 1.2rem + 2vw, 3rem);
  /* knob del espacio entre logos (vive en el margen de cada uno) */
  --logo-gap: clamp(2.5rem, 6.5vw, 6rem);
}

.logos__intro {
  /* anula el max-width:60ch global de <p>: asi el centrado es real */
  max-width: none;
  text-align: center;
  /* legibilidad en Outfit chico: tamano comodo, peso medium (no semibold) */
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  font-weight: var(--peso-medium);
  letter-spacing: 0.015em;
  color: var(--texto-secundario);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

/* Marquee full-bleed (fuera del contenedor) para desvanecerse contra los
   bordes del viewport. La mascara difumina los extremos: los logos entran y
   salen suave, nunca se cortan en seco. */
.logos__marquee {
  position: relative;
  overflow: hidden;
  padding-block: 0.85rem; /* headroom vertical: el logo mas alto (beatbite) no toca el borde de recorte */
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* La pista lleva DOS juegos identicos de logos. La animacion la desplaza -50%
   (= el ancho de un juego) y reinicia: como el juego B queda exactamente donde
   estaba el A, el loop es continuo y sin salto. Clave: el espacio entre logos
   vive en margin-inline-end de CADA logo (incluido el ultimo de cada juego),
   no en gap; asi el ancho de un juego es multiplo exacto y el -50% cae justo. */
.logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logos-marquee 65s linear infinite;
  will-change: transform;
}
.logos__marquee:hover .logos__track {
  animation-play-state: paused;
}
@keyframes logos-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* silueta blanca: brightness(0) lleva a negro, invert(1) a blanco; aplana
   tanto los logos ya blancos como los de color (Palma) al mismo tratamiento */
.logos__logo {
  flex: 0 0 auto;
  width: auto;
  margin-inline-end: var(--logo-gap);
  filter: brightness(0) invert(1);
  opacity: 0.58;
  transition: opacity var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .logos__logo:hover {
    opacity: 1;
  }
}

/* Altura optica por logo (factor sobre --logo-base): las muy anchas bajan,
   las compactas suben, para que el peso visual quede parejo. */
.logos__logo--jetrix   { height: calc(var(--logo-base) * 0.95); }
.logos__logo--palma    { height: calc(var(--logo-base) * 0.82); }
.logos__logo--iris     { height: calc(var(--logo-base) * 1.15); }
.logos__logo--beatbite { height: calc(var(--logo-base) * 1.28); }
.logos__logo--parallax { height: calc(var(--logo-base) * 0.6); }
.logos__logo--ulta     { height: calc(var(--logo-base) * 0.98); }
.logos__logo--cypasa   { height: calc(var(--logo-base) * 0.82); }

/* Movimiento reducido: sin scroll. Un solo juego, centrado y estatico
   (el duplicado se oculta), con espacio uniforme y sin mascara. */
@media (prefers-reduced-motion: reduce) {
  .logos__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(2rem, 5vw, 3rem);
  }
  .logos__logo {
    margin-inline-end: 0;
  }
  .logos__logo--dup {
    display: none;
  }
  .logos__marquee {
    -webkit-mask: none;
    mask: none;
  }
}

/* --------------------------------------------------------------------------
   SECCION: Casos preview (claro, isla-fin). Concepto "La prueba".
   El peso visual del sitio. Los TRES casos son cards (lenguaje unico): Jetrix
   es la card destacada (full-bleed, layout editorial horizontal en desktop)
   que carga el peso por tamano y composicion, no por estar suelta. Palma y
   CYPASA, dos cards compactas en grid. El MEDIO se nota en la imagen: los dos
   sitios web (Jetrix, Palma) son screenshots; CYPASA, foto fisica. Card
   clickable por link estirado (un enlace real, foco visible sobre la card).
   Imagen a sangre arriba, glass + sombra en reposo. Un solo arco a la derecha,
   recortado solo por el borde visible (el borde superior es costura interna).
   Cierre como afirmacion centrada + subrayado naranja. Todo CSS + reveal
   generico (IO). Sin GSAP.
   -------------------------------------------------------------------------- */
.casos__intro {
  max-width: 46rem;
  margin-bottom: clamp(var(--space-lg), 5vw, var(--space-xl));
}
.casos__eyebrow {
  margin-bottom: var(--space-md);
}
.casos__titulo {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-tight);
}
.casos__titulo-suave,
.casos__titulo-firme {
  display: block;
}
.casos__titulo-suave {
  font-weight: var(--peso-light);
  color: var(--color-azul-profundo);
}
.casos__titulo-firme {
  font-weight: var(--peso-semibold);
  color: var(--color-azul-profundo);
}

/* Un solo arco, a la derecha y centrado en vertical: recorta solo contra el
   borde derecho del viewport. No toca el borde superior (costura interna con
   Lo que cambia) ni la zona del boton abajo. */
.casos .arco--sup-der {
  top: 50%;
  right: 0;
  transform: translate(38%, -50%);
}

/* --- Card de caso (base comun a destacado y compactos) --- */
.caso {
  position: relative;
  /* Reveal (opacity + transform) y hover (translate + borde + sombra) viven en
     UNA sola declaracion, pero en propiedades DISTINTAS: el reveal usa
     transform, el hover usa la propiedad translate. Asi no se pisan y cada uno
     tiene su duracion. (El bug anterior: el transition del hover borraba la
     opacidad de la lista del reveal y por eso las cards aparecian de golpe.) */
  transition: opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    translate var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.caso__link {
  color: inherit;
}
/* El enlace del titulo se estira sobre toda la card: clic en cualquier punto
   navega al caso, pero solo hay un enlace real en el arbol (a11y). */
.caso__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.caso:has(.caso__link:focus-visible) {
  outline: 2px solid var(--color-naranja);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}
.caso__link:focus-visible {
  outline: none;
}

.caso__visual {
  position: relative;
  overflow: hidden;
}
.caso__visual img {
  display: block;
  width: 100%;
  height: auto;
}

.caso__sector {
  margin-bottom: var(--space-xs);
}
.caso__cliente {
  font-size: var(--fs-h3);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--ls-h3);
  line-height: 1.1;
  color: var(--texto-principal);
}
.caso__resultado {
  margin-top: var(--space-2xs);
  font-weight: var(--peso-medium);
  color: var(--texto-principal);
}
.caso__cta {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--fs-caption);
  font-weight: var(--peso-medium);
  letter-spacing: var(--ls-caption);
  color: var(--texto-secundario);
  transition: color var(--dur-base) var(--ease-out);
}

/* --- Las tres cards comparten: imagen a sangre arriba, sombra en reposo --- */
.caso--destacado,
.caso--compacto {
  padding: 0; /* anula el padding del card-transparente: imagen al borde */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 34px -20px rgba(0, 45, 106, 0.32);
  /* Sobre la isla clara el glass no aporta (no pasa nada detras del texto) y
     al trasladar la card en hover remuestreaba el backdrop y se veia borroso.
     Se quita el desenfoque; el fondo tenue del card-transparente se queda. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.caso--destacado .caso__visual,
.caso--compacto .caso__visual {
  border-bottom: 1px solid var(--borde);
}
.caso--compacto .caso__visual img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.caso--destacado .caso__cuerpo,
.caso--compacto .caso__cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
}
/* "Ver caso" al pie SOLO en las compactas: alinea entre las dos cards aunque
   el resultado tenga otro largo. En la destacada el bloque va centrado y el
   CTA sigue al resultado (sin hueco). */
.caso--compacto .caso__cta {
  margin-top: auto;
  padding-top: var(--space-sm);
}

.caso--destacado {
  margin-bottom: var(--space-md);
}

.casos__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* --- Hover (solo punteros finos): lift + borde azul + sombra mas profunda.
   El lift usa la propiedad translate (no transform) para no chocar con el
   reveal, que usa transform. La transicion vive en .caso, aqui solo el estado.
   Sin zoom de imagen (se veia borrosa), sin movimiento magnetico. --- */
@media (hover: hover) {
  .caso--destacado:hover,
  .caso--compacto:hover {
    translate: 0 -4px;
    border-color: var(--color-azul-exvi);
    box-shadow: 0 20px 46px -22px rgba(0, 45, 106, 0.46);
  }
  .caso:hover .caso__cta {
    color: var(--color-azul-exvi);
  }
}

/* --- Cierre (firma del sistema): afirmacion centrada + subrayado naranja --- */
.casos__cierre {
  margin-top: clamp(var(--space-lg), 5vw, var(--space-xl));
  margin-inline: auto;
  max-width: 40ch;
  font-size: clamp(1.5rem, 1rem + 1.7vw, 2.25rem);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-base);
  text-align: center;
  text-wrap: balance;
  --cierre-punto-delay: 0.9s;
}
.casos__cierre-suave,
.casos__cierre-firme {
  display: block;
}
.casos__cierre-suave {
  font-weight: var(--peso-light);
  color: var(--color-azul-profundo);
}
.casos__cierre-firme {
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
}
.casos__frase-clave {
  background-image: linear-gradient(var(--color-naranja), var(--color-naranja));
  background-repeat: no-repeat;
  background-size: 0% max(2.5px, 0.045em);
  background-position: 0 100%;
  padding-bottom: 0.1em;
  transition: background-size 0.45s var(--ease-out);
}
.casos__cierre.es-visible .casos__frase-clave {
  background-size: 100% max(2.5px, 0.045em);
  transition-delay: 0.45s;
}

.casos__accion {
  margin-top: var(--space-lg);
  text-align: center;
}

/* --- Desktop: la destacada pasa a banda editorial DENTRO de la card.
   Texto izquierda (centrado vertical), imagen a sangre a la derecha. --- */
@media (min-width: 861px) {
  .caso--destacado {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: stretch;
    margin-bottom: clamp(var(--space-lg), 4vw, var(--space-xl));
  }
  .caso--destacado .caso__cuerpo {
    order: 1;
    justify-content: center;
    padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
  }
  .caso--destacado .caso__visual {
    order: 2;
    border-bottom: 0;
    border-left: 1px solid var(--borde);
  }
  .caso--destacado .caso__resultado {
    font-size: var(--fs-h3);
    line-height: var(--lh-base);
  }

  .casos__grid {
    flex-direction: row;
  }
  .casos__grid > .caso {
    flex: 1;
  }
}

/* --- Movimiento reducido: subrayado fijo --- */
@media (prefers-reduced-motion: reduce) {
  .casos__frase-clave {
    background-size: 100% max(2.5px, 0.045em);
    transition: none;
  }
}


/* ==========================================================================
   PAGINA: /casos (overview). Concepto "El expediente".
   Hero corto oscuro + isla clara con un card horizontal por caso.
   Reusa tokens y componentes del sistema. Pegar al final de style.css.
   (Reemplaza la version anterior de este bloque por completo.)
   ========================================================================== */

/* --- Hero corto (oscuro): NO es el hero full-height del home --- */
.casos-hero {
  display: flex;
  align-items: center;
  /* despeja el header fijo (alto en reposo) */
  padding-top: calc(var(--header-alto) + clamp(2.5rem, 8vw, 5rem));
  /* aire generoso antes de que la isla clara suba: el hero respira en las dos
     pantallas (la isla sube radius-isla encima, asi que el colchon es real) */
  padding-bottom: clamp(6rem, 14vw, 12rem);
}

.casos-hero__eyebrow {
  margin-bottom: var(--space-md);
}

.casos-hero__titulo {
  /* misma escala viva que el titulo del hero del home (misma familia) */
  font-size: clamp(2.1rem, 1rem + 3.3vw, 3.8rem);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--texto-principal);
}
.casos-hero__suave,
.casos-hero__firme {
  display: block;
}
.casos-hero__suave {
  font-weight: var(--peso-light);
}
.casos-hero__firme {
  font-weight: var(--peso-semibold);
}

.casos-hero__dek {
  margin-top: var(--space-md);
  max-width: 46ch;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
}

/* --- Lista de casos: cada caso es una card horizontal editorial --- */
.casos-lista {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-lg), 5vw, var(--space-xl));
}

/* La card carga el limite: el hover (lift + borde azul + sombra) actua sobre
   TODA la card, asi se ve donde empieza y termina la zona clickable.
   Reveal (transform/opacity) y hover (translate/borde/sombra) viven en UNA
   declaracion pero en propiedades distintas, para que el hover no borre la
   opacidad del reveal (misma leccion que la card destacada del home).
   Glass apagado: sobre la isla clara no pasa nada detras y al trasladar se
   remuestreaba borroso. */
.caso-fila {
  position: relative;
  padding: 0; /* anula el padding de card-transparente: imagen a sangre */
  overflow: hidden;
  box-shadow: 0 12px 34px -20px rgba(0, 45, 106, 0.32);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    translate var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.caso-fila__visual {
  position: relative;
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--borde); /* mobile: imagen arriba */
}
.caso-fila__visual img {
  display: block;
  width: 100%;
  height: auto;
}

.caso-fila__cuerpo {
  padding: var(--space-md);
}

.caso-fila__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
/* indice de expediente: catalogacion discreta, no ranking */
.caso-fila__indice {
  font-size: var(--fs-caption);
  font-weight: var(--peso-medium);
  letter-spacing: var(--ls-caption);
  color: var(--texto-secundario);
  font-variant-numeric: tabular-nums;
}

/* Contraste de peso (firma del sitio): identidad firme (Semibold) / resultado
   en Light. La identidad es el ancla, el resultado es la declaracion. */
.caso-fila__cliente {
  font-size: clamp(1.75rem, 1rem + 2.4vw, 2.6rem);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--ls-h2);
  line-height: 1.05;
  color: var(--texto-principal);
}
.caso-fila__link {
  color: inherit;
}
/* enlace estirado: clic en toda la card navega, un solo enlace real (a11y) */
.caso-fila__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.caso-fila:has(.caso-fila__link:focus-visible) {
  outline: 2px solid var(--color-naranja);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}
.caso-fila__link:focus-visible {
  outline: none;
}

.caso-fila__resultado {
  margin-top: var(--space-sm);
  max-width: 30ch;
  font-size: clamp(1.2rem, 0.8rem + 1vw, 1.6rem);
  font-weight: var(--peso-light);
  line-height: var(--lh-base);
  color: var(--color-azul-profundo);
}

/* Subidas de tamano: contexto y CTA pasan de caption a body (se leian chicos) */
.caso-fila__contexto {
  margin-top: var(--space-md);
  max-width: 46ch;
  font-size: var(--fs-body);
  color: var(--texto-secundario);
}

.caso-fila__cta {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: var(--fs-body);
  font-weight: var(--peso-medium);
  color: var(--texto-secundario);
  transition: color var(--dur-base) var(--ease-out);
}

/* Hover (solo punteros finos): la card entera se levanta, borde azul, sombra
   mas profunda; el CTA pasa a azul. Sin zoom de imagen, sin magnetico. */
@media (hover: hover) {
  .caso-fila:not(.caso-fila--muestra):hover {
    translate: 0 -4px;
    border-color: var(--color-azul-exvi);
    box-shadow: 0 20px 46px -22px rgba(0, 45, 106, 0.46);
  }
  .caso-fila:hover .caso-fila__cta {
    color: var(--color-azul-exvi);
  }
}

/* --- Desktop: card horizontal, imagen a sangre que alterna de lado --- */
@media (min-width: 861px) {
  .caso-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .caso-fila__cuerpo {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
  }
  .caso-fila__visual {
    order: 2;
    border-bottom: 0;
    border-left: 1px solid var(--borde);
  }
  /* Area de imagen uniforme (16:9): todas las cards igualan tamano y la captura
     ancha del sitio (Jetrix) no pierde izquierda ni derecha. Sangre real, sin barras. */
  .caso-fila__visual {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
  .caso-fila__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* filas pares: imagen a la izquierda, texto a la derecha */
  .caso-fila:nth-child(even) .caso-fila__cuerpo {
    order: 2;
  }
  .caso-fila:nth-child(even) .caso-fila__visual {
    order: 1;
    border-left: 0;
    border-right: 1px solid var(--borde);
  }
}

/* --- Card de muestra (Vidriotech): exhibicion sin pagina de detalle.
   No clickable, asi que no levanta en hover (no debe leerse como boton) y el
   cursor queda normal (no hay enlace). El placeholder se sustituye por <img>
   cuando llegue el asset. --- */
.caso-fila--muestra {
  cursor: default;
}

.caso-fila__placeholder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(220px, 30vw, 320px);
  padding: var(--space-lg);
  text-align: center;
  font-size: var(--fs-caption);
  line-height: var(--lh-base);
  color: var(--texto-secundario);
  background-color: var(--card-simulado-fondo);
}

/* --- Logo de Vidriotech en la tira de clientes (altura optica). Es un logo
   ancho (~4.5:1), por eso baja como los demas anchos (parallax). --- */
.logos__logo--vidriotech { height: calc(var(--logo-base) * 0.84); }

/* ==========================================================================
   PAGINA: /casos/jetrix (y base para casos/* de detalle).
   Hero corto oscuro con visual + isla clara (ficha, problema, dos fases,
   galeria, resultado + testimonial, cierre). Reusa tokens y componentes.
   ========================================================================== */

/* --- Hero de caso: como el de /casos pero con visual al lado --- */
.caso-hero__grid {
  display: grid;
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
}
.caso-hero__migas {
  margin-bottom: var(--space-md);
  font-size: var(--fs-caption);
  color: var(--texto-secundario);
}
.caso-hero__migas a { color: inherit; }
.caso-hero__migas a:hover { color: var(--texto-principal); }
.caso-hero__sep { margin-inline: var(--space-2xs); opacity: 0.6; }

.caso-hero__titulo {
  margin-top: var(--space-sm);
  font-size: clamp(2.1rem, 1rem + 3.3vw, 3.8rem);
  letter-spacing: var(--ls-display);
  /* Mas abierto que --lh-tight (1.08): el titulo de caso puede ser una frase
     larga de varias lineas y a 1.08 se apelmaza. 1.15 respira sin soltarse. */
  line-height: 1.15;
  color: var(--texto-principal);
}
.caso-hero__suave,
.caso-hero__firme { display: block; }
.caso-hero__suave { font-weight: var(--peso-light); }
/* Separa el remate Semibold del arranque Light: marca los dos tiempos */
.caso-hero__firme { margin-top: 0.15em; font-weight: var(--peso-semibold); }
.caso-hero__dek {
  margin-top: var(--space-md);
  max-width: 46ch;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
}
.caso-hero__visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
}
.caso-hero__visual img { display: block; width: 100%; height: auto; }

@media (min-width: 861px) {
  .caso-hero__grid { grid-template-columns: 1fr 1.15fr; align-items: stretch; }
  .caso-hero__texto { display: flex; flex-direction: column; justify-content: center; }
  .caso-hero__visual img { height: 100%; object-fit: cover; }
}

/* --- Ficha rapida: tira escaneable de datos (buena para lectura veloz y GEO) --- */
/* Tira de datos, no caja: dos hairlines. Mobile = filas compactas clave/valor
   (una linea, parejas). Desktop = tres columnas centradas. */
.caso-ficha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: var(--space-2xs) 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  margin-bottom: clamp(var(--space-2xl), 8vw, var(--space-3xl));
}
.caso-ficha__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
}
.caso-ficha__item + .caso-ficha__item { border-top: 1px solid var(--borde); }
.caso-ficha__k {
  flex: 0 0 auto;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--texto-secundario);
}
.caso-ficha__v {
  font-size: var(--fs-body);
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
  text-align: right;
}
@media (min-width: 680px) {
  .caso-ficha { grid-template-columns: repeat(3, 1fr); padding: var(--space-md) 0; }
  .caso-ficha__item {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: var(--space-2xs);
    padding: var(--space-sm) var(--space-md);
  }
  .caso-ficha__item + .caso-ficha__item { border-top: 0; border-left: 1px solid var(--borde); }
  .caso-ficha__v { text-align: center; }
}

/* --- Bloques de seccion del caso --- */
.caso-bloque { margin-bottom: clamp(var(--space-2xl), 9vw, var(--space-3xl)); }
.caso-bloque__titulo {
  font-size: var(--fs-h2);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-tight);
  color: var(--texto-principal);
  margin-bottom: var(--space-md);
}
.caso-bloque__titulo .suave { font-weight: var(--peso-light); }
.caso-prosa { max-width: 60ch; }
.caso-prosa p { font-size: var(--fs-body); line-height: var(--lh-base); color: var(--texto-secundario); }
.caso-prosa p + p { margin-top: var(--space-md); }

/* --- Dos fases (reusa el lenguaje del puente de Como trabajamos:
   la linea se traza al entrar, vertical en mobile, horizontal en desktop) --- */
.caso-fases { display: flex; flex-direction: column; }
.caso-fase {
  flex: 1;
  padding: var(--space-lg);
  border: 1px solid var(--borde);
  border-radius: var(--radius-lg);
  background-color: var(--card-transparente-fondo);
}
.caso-fase__k {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-azul-exvi);
  margin-bottom: var(--space-xs);
}
.caso-fase__t {
  font-size: var(--fs-h3);
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
  margin-bottom: var(--space-sm);
}
.caso-fase__p { font-size: var(--fs-body); line-height: var(--lh-base); color: var(--texto-secundario); }
.caso-puente { display: flex; align-items: center; justify-content: center; padding-block: var(--space-2xs); }
.caso-puente-linea {
  display: block;
  width: 2px;
  height: 0;
  background-color: var(--color-azul-exvi);
  transition: height var(--dur-lenta) var(--ease-out);
}
.caso-puente.es-visible .caso-puente-linea { height: 2rem; }
@media (min-width: 861px) {
  .caso-fases { flex-direction: row; align-items: stretch; }
  .caso-puente { flex: 0 0 auto; width: clamp(2rem, 5vw, 4rem); padding-block: 0; }
  .caso-puente-linea { width: 0; height: 2px; transition: width var(--dur-lenta) var(--ease-out); }
  .caso-puente.es-visible .caso-puente-linea { width: 100%; height: 2px; }
}

/* --- Resultado: frase grande en Light antes del testimonial --- */
/* Bloques de cierre narrativo (punto de partida, resultado): centrados, para
   marcar los extremos del relato frente al trabajo, que va alineado a la izquierda. */
.caso-bloque--centrado { text-align: center; }
.caso-bloque--centrado .caso-prosa { margin-inline: auto; max-width: 62ch; }

.caso-resultado {
  max-width: 38ch;
  margin-inline: auto;
  margin-bottom: clamp(var(--space-xl), 6vw, var(--space-2xl));
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  font-weight: var(--peso-light);
  line-height: var(--lh-base);
  color: var(--color-azul-profundo);
  text-align: center;
}

/* --- Galeria de output: rejilla editorial, marcos redondeados --- */
.caso-galeria { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.caso-galeria__item {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--borde);
  background-color: var(--card-transparente-fondo);
}
.caso-galeria__item img { display: block; width: 100%; height: auto; object-fit: cover; object-position: top; }
/* Items regulares a una sola proporcion (4:5): el membrete A4, mas largo, se
   recorta por abajo y queda parejo con el resto. Los anchos van a su natural. */
.caso-galeria__item:not(.caso-galeria__item--ancho) img { aspect-ratio: 4 / 5; }
.caso-galeria__cap { padding: var(--space-sm) var(--space-md); font-size: var(--fs-caption); color: var(--texto-secundario); }
@media (min-width: 680px) {
  .caso-galeria { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .caso-galeria__item--ancho { grid-column: 1 / -1; }
}

/* --- Testimonial: inset oscuro sobre isla clara (canonico para todo el sitio).
   Panel noche con comilla azul Exvi grande: lo separa del resto y lo lee como
   voz del cliente, no como una card mas. Centrado. --- */
.testimonial {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(var(--space-lg), 5vw, var(--space-2xl)) clamp(var(--space-lg), 6vw, var(--space-2xl));
  text-align: center;
  background-color: var(--color-noche);
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 64px -34px rgba(0, 45, 106, 0.55);
}
.testimonial::before {
  content: "\201C";
  display: block;
  font-weight: var(--peso-semibold);
  font-size: clamp(3.5rem, 2rem + 5vw, 5.5rem);
  line-height: 0.7;
  color: var(--color-azul-exvi);
  opacity: 0.6;
  margin-bottom: var(--space-xs);
}
.testimonial__cita {
  font-size: clamp(1.4rem, 1.05rem + 1.3vw, 1.95rem);
  font-weight: var(--peso-light);
  line-height: var(--lh-base);
  color: var(--color-blanco);
  text-wrap: balance;
}
.testimonial__autor { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.testimonial__monograma {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: var(--color-azul-exvi);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: var(--peso-semibold);
  letter-spacing: 0.02em;
}
.testimonial__nombre { font-size: var(--fs-body); font-weight: var(--peso-medium); color: var(--color-blanco); }
.testimonial__rol { font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.62); }

/* ==========================================================================
   CASO PALMA AI - variantes para caso de un solo arco (SAE)
   Reusa todo el sistema de caso. Solo anade lo que el arco simple necesita.
   ========================================================================== */

/* Galeria apaisada: spreads de entregable horizontales (brandbook, slides).
   La galeria base recorta a 4:5 (vertical) para piezas tipo post; los spreads
   de marca son landscape y se recortarian mal forzados a vertical. */
.caso-galeria--apaisada .caso-galeria__item:not(.caso-galeria__item--ancho) img {
  aspect-ratio: 16 / 10;
}

/* Resultado con remate en Semibold: el contraste de peso tambien cierra el
   arco, no solo los titulos. El resto de la frase queda en Light (heredado). */
.caso-resultado .firme { font-weight: var(--peso-semibold); }

/* Aire entre la prosa que introduce el trabajo y la galeria. En Jetrix la
   galeria iba directa bajo el h2; aqui la antecede un parrafo y sin esto
   quedan pegados. */
.caso-prosa + .caso-galeria { margin-top: clamp(var(--space-lg), 4vw, var(--space-xl)); }

/* Pieza de marca (logo) en galeria: se muestra completa, no recortada. Un logo
   cuadrado forzado a 4:5 cover pierde el wordmark por los lados. Aqui va contain
   sobre blanco, encuadrado como tarjeta de asset. Reusable en cualquier caso. */
.caso-galeria__item--marca img {
  object-fit: contain;
  background: var(--color-blanco);
  padding: clamp(var(--space-md), 4vw, var(--space-lg));
}

/* ==========================================================================
   SECCION: Equipo (oscuro). "Las personas detras de la direccion."
   Tres retratos 4/5 en card-transparente. Tratamiento firma: la foto va en
   monocromo en reposo y a color pleno al hover (mismo gesto que el marquee de
   logos: la prueba cobra vida al interactuar). En touch va a color desde el
   inicio. Cards no clickables: sin lift.
   Mobile: tarjeta horizontal (foto al lado). Desktop: retrato arriba, 3 col.
   ========================================================================== */
.equipo__intro {
  max-width: 46rem;
  margin-bottom: clamp(var(--space-lg), 5vw, var(--space-xl));
}
.equipo__eyebrow {
  margin-bottom: var(--space-md);
}
.equipo__titulo {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-tight);
}
.equipo__titulo-suave,
.equipo__titulo-firme {
  display: block;
}
.equipo__titulo-suave {
  font-weight: var(--peso-light);
}
.equipo__titulo-firme {
  font-weight: var(--peso-semibold);
}

/* Grid: una columna en mobile (tarjetas horizontales), tres en desktop. */
.equipo__grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* Mobile: foto al lado del texto para no apilar tres retratos altos. */
.equipo__persona {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
}

.equipo__foto {
  flex: 0 0 auto;
  width: clamp(7rem, 28vw, 9rem);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-azul-sim-oscuro); /* fallback mientras carga */
}
.equipo__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  /* tratamiento firma: monocromo en reposo */
  filter: grayscale(1) contrast(1.02);
  transition: filter var(--dur-lenta) var(--ease-out),
    transform var(--dur-lenta) var(--ease-out);
}
/* Color pleno + acercamiento solo donde hay hover real (desktop). */
@media (hover: hover) and (pointer: fine) {
  .equipo__persona:hover .equipo__foto img,
  .equipo__persona:focus-within .equipo__foto img {
    filter: grayscale(0) contrast(1);
    transform: scale(1.04);
  }
}
/* Touch: sin hover, la foto se muestra a color desde el inicio. */
@media (hover: none) {
  .equipo__foto img {
    filter: none;
  }
}

.equipo__nombre {
  font-size: var(--fs-h3);
  font-weight: var(--peso-semibold);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-2xs);
}
.equipo__rol {
  display: block;
  margin-bottom: var(--space-sm);
}
.equipo__linea {
  color: var(--texto-secundario);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  max-width: 26rem;
}

/* Cierre como afirmacion (mismo patron que hero/diferencia): contraste de
   peso, subrayado naranja que se traza al revelar, punto naranja al final. */
.equipo__cierre {
  margin-top: clamp(var(--space-xl), 7vw, calc(var(--space-xl) + var(--space-md)));
  margin-inline: auto;
  max-width: 42ch;
  font-size: clamp(1.5rem, 1rem + 1.7vw, 2.25rem);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-base);
  text-align: center;
  text-wrap: balance;
  --cierre-punto-delay: 0.9s;
}
.equipo__cierre-suave,
.equipo__cierre-firme {
  display: block;
}
.equipo__cierre-suave {
  font-weight: var(--peso-light);
  color: var(--texto-secundario);
}
.equipo__cierre-firme {
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
}
.equipo__frase-clave {
  background-image: linear-gradient(var(--color-naranja), var(--color-naranja));
  background-repeat: no-repeat;
  background-size: 0% max(2.5px, 0.045em);
  background-position: 0 100%;
  padding-bottom: 0.1em;
  transition: background-size 0.45s var(--ease-out);
}
.equipo__cierre.es-visible .equipo__frase-clave {
  background-size: 100% max(2.5px, 0.045em);
  transition-delay: 0.45s;
}

/* Un solo arco a la derecha, centrado en vertical (como Casos): recorta solo
   contra el borde derecho del viewport. */
.equipo .arco--sup-der {
  top: 50%;
  right: 0;
  transform: translate(25%, -50%);
}

/* Respiro de la firma: el cierre centrado baja bastante, asi que esta seccion
   reserva mas padding inferior para que la firma quede equidistante (no pegada
   al cierre) y se levanta un poco mas que el resguardo base de cede-a-isla para
   dejar aire respecto a la isla que sube (Testimoniales). Scope solo Equipo. */
.equipo {
  padding-bottom: calc(var(--ritmo-seccion) + var(--space-lg));
}
.equipo.cede-a-isla .firma-cierre {
  bottom: calc(var(--radius-isla) + var(--space-md));
}

/* Desktop: retrato completo arriba, datos abajo, tres columnas. */
@media (min-width: 800px) {
  .equipo__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--space-md), 2.5vw, var(--space-lg));
  }
  .equipo__persona {
    flex-direction: column;
    align-items: stretch;
  }
  .equipo__foto {
    width: 100%;
  }
  .equipo__datos {
    margin-top: var(--space-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .equipo__foto img {
    transition: filter var(--dur-base) var(--ease-out);
  }
  .equipo__persona:hover .equipo__foto img,
  .equipo__persona:focus-within .equipo__foto img {
    transform: none;
  }
  .equipo__frase-clave {
    background-size: 100% max(2.5px, 0.045em);
    transition: none;
  }
}

/* ==========================================================================
   SECCION: Testimoniales (claro, isla-inicio). "Una voz adelante, tres que la
   respaldan." Sube como isla sobre Equipo (cede-a-isla) y entrega a FAQ.
   Jerarquia: una cita DESTACADA en el panel inset Noche canonico (.testimonial,
   reusado verbatim de las paginas de caso) + tres de APOYO en card-transparente,
   en claro, para no oscurecer la isla ni romper la transicion oscuro->claro.
   Monograma CSS por persona, sin foto. Sin carrusel: reveal escalonado (IO).
   ========================================================================== */
.testi__intro {
  max-width: 46rem;
  margin-bottom: clamp(var(--space-lg), 5vw, var(--space-xl));
}
.testi__eyebrow {
  margin-bottom: var(--space-md);
}
.testi__titulo {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-tight);
}
.testi__titulo-suave,
.testi__titulo-firme {
  display: block;
}
.testi__titulo-suave {
  font-weight: var(--peso-light);
  color: var(--color-azul-profundo);
}
.testi__titulo-firme {
  font-weight: var(--peso-semibold);
  color: var(--color-azul-profundo);
}

/* Destacada: el panel inset canonico ya trae su estilo (.testimonial). Aqui
   solo se resetea el margen de figure y se da el aire dentro de la isla. */
.testi__destacada {
  margin-block: 0 clamp(var(--space-lg), 4vw, var(--space-xl));
}

/* Apoyo: tres voces en claro. card-transparente como base (el componente mas
   reconocible del sitio); el monograma reusa el lenguaje del canonico (circulo
   azul Exvi, iniciales blancas) en contexto claro. */
.testi__apoyo {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.testi-cita {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.testi-cita__texto {
  font-size: var(--fs-body);
  font-weight: var(--peso-regular);
  line-height: var(--lh-base);
  color: var(--texto-principal);
  text-wrap: pretty;
}
/* Comilla discreta: eco del panel canonico en azul Exvi, pequena, para que se
   lea como cita sin competir con la destacada. */
.testi-cita__texto::before {
  content: "\201C";
  color: var(--color-azul-exvi);
  font-weight: var(--peso-semibold);
  font-size: 1.6em;
  line-height: 0;
  margin-right: 0.06em;
  vertical-align: -0.35em;
}
.testi-cita__autor {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: auto; /* alinea autores al fondo cuando las cards igualan altura */
}
.testi-cita__monograma {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: var(--color-azul-exvi);
  color: var(--color-blanco);
  font-size: var(--fs-caption);
  font-weight: var(--peso-semibold);
  letter-spacing: 0.02em;
}
.testi-cita__nombre {
  display: block;
  font-size: var(--fs-body);
  font-weight: var(--peso-medium);
  line-height: var(--lh-tight);
  color: var(--texto-principal);
}
.testi-cita__rol {
  display: block;
  font-size: var(--fs-caption);
  color: var(--texto-secundario);
}

/* Cierre como afirmacion (mismo patron que casos/equipo). */
.testi__cierre {
  margin-top: clamp(var(--space-lg), 5vw, var(--space-xl));
  margin-inline: auto;
  max-width: 40ch;
  font-size: clamp(1.5rem, 1rem + 1.7vw, 2.25rem);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-base);
  text-align: center;
  text-wrap: balance;
  --cierre-punto-delay: 0.9s;
}
.testi__cierre-suave,
.testi__cierre-firme {
  display: block;
}
.testi__cierre-suave {
  font-weight: var(--peso-light);
  color: var(--color-azul-profundo);
}
.testi__cierre-firme {
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
}
.testi__frase-clave {
  background-image: linear-gradient(var(--color-naranja), var(--color-naranja));
  background-repeat: no-repeat;
  background-size: 0% max(2.5px, 0.045em);
  background-position: 0 100%;
  padding-bottom: 0.1em;
  transition: background-size 0.45s var(--ease-out);
}
.testi__cierre.es-visible .testi__frase-clave {
  background-size: 100% max(2.5px, 0.045em);
  transition-delay: 0.45s;
}

/* Un solo arco a la derecha, centrado en vertical (como Casos/Equipo). */
.testi .arco--sup-der {
  top: 50%;
  right: 0;
  transform: translate(25%, -50%);
}

/* Desktop: las tres de apoyo en fila de 3 columnas. */
@media (min-width: 800px) {
  .testi__apoyo {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--space-md), 2.5vw, var(--space-lg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .testi__frase-clave {
    background-size: 100% max(2.5px, 0.045em);
    transition: none;
  }
}

/* ==========================================================================
   SECCION: FAQ (claro, isla-fin). "Las preguntas que ya traes." Cierra la
   corrida clara y entrega a Contacto. Acordeon nativo <details>/<summary>
   EXCLUSIVO via atributo name compartido: abrir una cierra las demas, cero JS.
   GEO: respuesta directa primero, texto real, espejo del schema FAQPage.
   ========================================================================== */
.faq__intro {
  max-width: 46rem;
  margin-bottom: clamp(var(--space-lg), 5vw, var(--space-xl));
}
.faq__eyebrow { margin-bottom: var(--space-md); }
.faq__titulo {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-tight);
}
.faq__titulo-suave,
.faq__titulo-firme { display: block; }
.faq__titulo-suave {
  font-weight: var(--peso-light);
  color: var(--color-azul-profundo);
}
.faq__titulo-firme {
  font-weight: var(--peso-semibold);
  color: var(--color-azul-profundo);
}

/* Lista: ancho de lectura comodo, centrada. */
.faq__lista {
  max-width: 52rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Item = tarjeta FAQ sobre card-transparente. El padding lo llevan summary y
   respuesta (no el item) para que toda la fila de la pregunta sea clickable. */
.faq__item {
  padding: 0;
  overflow: hidden;
}

.faq__pregunta {
  list-style: none; /* quita el triangulo nativo (Firefox) */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  font-size: var(--fs-h3);
  font-weight: var(--peso-medium);
  line-height: var(--lh-base);
  color: var(--color-azul-profundo);
  transition: color var(--dur-rapida) var(--ease-out);
}
.faq__pregunta::-webkit-details-marker { display: none; } /* Safari */
.faq__item:hover .faq__pregunta { color: var(--color-azul-exvi); }
.faq__pregunta:focus-visible {
  outline: 2px solid var(--color-naranja);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Marcador: signo + en azul Exvi que se vuelve - al abrir. Dos barras con
   pseudo-elementos; al abrir, la vertical rota a horizontal y se desvanece. */
.faq__marcador {
  position: relative;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
}
/* Marcador + -> -: dos barras. En CERRADO ninguna gira (cruz nitida y pareja:
   la horizontal y la vertical se definen con sus propias medidas, sin rotacion
   que las haga ver de distinto grosor por el antialiasing). Al ABRIR, la
   vertical gira 90deg y se acuesta sobre la horizontal => queda un solo guion.
   Solo rotacion, transiciona limpio en ambos sentidos. */
.faq__marcador::before,
.faq__marcador::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-azul-exvi);
  border-radius: 2px;
}
.faq__marcador::before { /* horizontal, fija */
  width: 1.05rem;
  height: 2px;
  transform: translate(-50%, -50%);
}
.faq__marcador::after { /* vertical en cerrado (= +) */
  width: 2px;
  height: 1.05rem;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-suave);
}
.faq__item[open] .faq__marcador::after { /* gira a horizontal (= -) */
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Respuesta. */
.faq__respuesta {
  padding: 0 var(--space-md) var(--space-md);
  color: var(--texto-secundario);
}
.faq__respuesta p {
  max-width: 60ch;
  line-height: var(--lh-loose);
}

/* Apertura/cierre REAL (alto animado) sin JS, via ::details-content. El
   interpolate-size permite transicionar hacia/desde auto; content-visibility
   con allow-discrete mantiene el contenido a la vista durante el colapso para
   que la animacion se vea en los dos sentidos. Navegadores sin soporte caen al
   abrir/cerrar instantaneo (nunca se rompe). Scope a .faq. */
.faq {
  interpolate-size: allow-keywords;
}
.faq__item::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition: block-size var(--dur-lenta) var(--ease-out),
    opacity var(--dur-base) var(--ease-out),
    content-visibility var(--dur-lenta) allow-discrete;
}
.faq__item[open]::details-content {
  block-size: auto;
  opacity: 1;
}

/* Puente al formulario: salida hacia el CTA. Subrayado nativo (consistente al
   partirse en dos lineas, a diferencia del gradiente) fino y desplazado, mas
   una flecha que empuja al hover. Lee como accion, no como hipervinculo
   clasico. La flecha es inline-block: no recibe el subrayado del enlace. */
.faq__puente {
  margin-top: clamp(var(--space-lg), 5vw, var(--space-xl));
  text-align: center;
  color: var(--color-azul-profundo);
  font-size: var(--fs-body);
}
.faq__puente a {
  color: var(--color-azul-exvi);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--color-azul-exvi) 35%, transparent);
  text-underline-offset: 0.28em;
  transition: text-decoration-color var(--dur-rapida) var(--ease-out);
}
.faq__puente a::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.3em;
  transition: transform var(--dur-rapida) var(--ease-out);
}
.faq__puente a:hover,
.faq__puente a:focus-visible {
  text-decoration-color: var(--color-azul-exvi);
}
.faq__puente a:hover::after {
  transform: translateX(3px);
}

/* Un arco suave a la derecha, centrado en vertical (como Casos/Equipo). */
.faq .arco--sup-der {
  top: 50%;
  right: 0;
  transform: translate(25%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .faq__item::details-content { transition: none; }
  .faq__marcador::after { transition: none; }
  .faq__puente a::after { transition: none; }
}

/* --------------------------------------------------------------------------
   26. SECCION: contacto (oscuro). Concepto: "El paso a traves de la brecha".
   Cierre del embudo. Layout partido: argumento a la izquierda, formulario en
   panel inset solido a la derecha (en mobile apilado). Reusa el componente
   .campo (ya definido) y la terna de botones. El cierre-punto cae en el exito.
   -------------------------------------------------------------------------- */
.contacto__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-areas:
    "intro"
    "panel"
    "whats";
}
.contacto__intro {
  grid-area: intro;
}
.contacto__panel {
  grid-area: panel;
}

/* --- Izquierda: el argumento --- */
.contacto__eyebrow {
  margin-bottom: var(--space-md);
}

.contacto__titulo {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.contacto__titulo-suave {
  display: block;
  font-weight: var(--peso-light);
  color: var(--texto-secundario);
}
.contacto__titulo-firme {
  display: block;
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
}

/* Subrayado naranja en "tu marca", trazandose cuando el H2 revela
   (misma tecnica que hero/problema). */
.contacto__frase-clave {
  background-image: linear-gradient(var(--color-naranja), var(--color-naranja));
  background-repeat: no-repeat;
  background-size: 0% max(2.5px, 0.045em);
  background-position: 0 100%;
  padding-bottom: 0.1em;
  transition: background-size 0.45s var(--ease-out);
}
.contacto__titulo.es-visible .contacto__frase-clave {
  background-size: 100% max(2.5px, 0.045em);
  transition-delay: 0.5s;
}

.contacto__subhead {
  margin-top: var(--space-md);
  max-width: 34rem;
  color: var(--texto-secundario);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
}

/* WhatsApp: CTA secundario, subordinado al formulario. En mobile va debajo del
   form (grid-area whats) y centrado; en desktop vuelve a la columna izquierda
   alineado a la izquierda. */
.contacto__secundario {
  grid-area: whats;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
}
.contacto__secundario-texto {
  color: var(--texto-secundario);
  font-size: var(--fs-caption);
}

/* --- Derecha: panel del formulario --- */
/* Inset solido (opaco) para que se lea como un objeto y los arcos no se
   transparenten por debajo. radius-lg: contenedor grande (Manual). */
.contacto__panel {
  background-color: var(--card-simulado-fondo);
  border: 1px solid var(--card-transparente-borde);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.contacto__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
/* display:flex gana sobre el atributo [hidden]; lo reponemos para que el form
   se oculte al mostrar el estado de exito. */
.contacto__form[hidden] {
  display: none;
}

/* El error del componente .campo es display:flex por defecto. Aqui se oculta
   salvo que el campo este en estado de error (formulario.js agrega .campo--error). */
.campo:not(.campo--error) .campo__error {
  display: none;
}

/* Fix de contraste del dropdown: el menu nativo de <option> hereda colores del
   sistema operativo; sin esto, en modo oscuro las opciones salen claro sobre
   claro y no se leen. Se pintan con los tokens de modo (oscuro: Noche/blanco;
   claro: blanco/azul profundo). */
.campo__select option {
  background-color: var(--fondo);
  color: var(--texto-principal);
}
/* La opcion vacia ("Elige una opcion") se ve como placeholder, en secundario;
   al elegir una opcion real, el texto pasa a principal. */
.campo__select .campo__input:invalid {
  color: var(--texto-secundario);
}

/* Honeypot: fuera de pantalla, sin foco, invisible para personas y lectores. */
.contacto__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Submit a ancho completo del panel */
.contacto__submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2xs);
}

/* Spinner propio del submit. No usa .esta-cargando para no chocar con el
   relleno ::before del boton primario; es un span aparte. */
.contacto__submit-spinner {
  display: none;
  width: 1.05em;
  height: 1.05em;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
.contacto__submit.es-cargando {
  pointer-events: none;
}
.contacto__submit.es-cargando .contacto__submit-spinner {
  display: inline-block;
}

.contacto__privacidad {
  margin-top: var(--space-2xs);
  line-height: var(--lh-base);
}
.contacto__privacidad a {
  color: var(--texto-principal);
  text-decoration: underline;
  text-decoration-color: var(--borde);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--dur-rapida) var(--ease-out);
}
.contacto__privacidad a:hover,
.contacto__privacidad a:focus-visible {
  text-decoration-color: var(--color-azul-exvi);
}

/* Error a nivel formulario (envio fallido). Recovery: dice que hacer. */
.contacto__form-error {
  margin-top: var(--space-xs);
  padding: var(--space-sm);
  border: 1px solid var(--color-naranja);
  border-radius: var(--radius-sm);
  color: var(--texto-principal);
  font-size: var(--fs-caption);
  line-height: var(--lh-base);
}
.contacto__form-error[hidden] {
  display: none;
}

/* --- Estado de exito --- */
/* Ocupa el panel cuando el form se oculta. */
.contacto__exito {
  place-items: center;
  min-height: 16rem;
  text-align: center;
  opacity: 0;
  transition: opacity var(--dur-lenta) var(--ease-out);
  --cierre-punto-delay: 0.3s;
}
.contacto__exito:not([hidden]) {
  display: grid;
}
.contacto__exito[hidden] {
  display: none;
}
.contacto__exito.es-visible {
  opacity: 1;
}
.contacto__exito-titulo {
  font-size: var(--fs-h3);
  line-height: var(--lh-base);
  text-wrap: balance;
}
.contacto__exito-suave {
  display: block;
  font-weight: var(--peso-light);
  color: var(--texto-secundario);
}
.contacto__exito-firme {
  display: block;
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
}

/* El cierre-punto del exito no debe animarse con el .es-visible del panel (que
   ocurre al hacer scroll, antes de enviar). Se reinicia y solo anima cuando el
   propio bloque de exito recibe .es-visible (formulario.js, al mostrarlo). Asi
   el gesto cae en el momento del envio, no antes. Estas reglas van despues de
   las globales de .cierre-punto, asi que ganan por orden de cascada. */
.contacto__exito .cierre-punto {
  animation: none;
  transform: scale(0);
}
.contacto__exito .cierre-punto::after {
  animation: none;
}
.contacto__exito.es-visible .cierre-punto {
  animation: cierre-punto-aparece var(--dur-lenta) var(--ease-out)
    var(--cierre-punto-delay) forwards;
}
.contacto__exito.es-visible .cierre-punto::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--color-naranja);
  opacity: 0;
  animation: cierre-punto-pulso 0.65s var(--ease-out)
    var(--cierre-punto-delay) forwards;
}

/* Desktop: dos columnas, argumento + panel alineados arriba. */
@media (min-width: 861px) {
  .contacto__grid {
    /* El form toma una columna fija comoda y el argumento el resto, asi la
       grid llena el ancho del contenedor en vez de ir centrada y angosta. Sus
       bordes coinciden con los de las demas secciones. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
    /* Tres filas: el argumento y el WhatsApp se quedan pegados arriba
       (min-content) y la tercera (1fr) absorbe el alto del form, que es mas
       alto que la columna izquierda. Sin esta fila, el panel inflaba las filas
       de arriba y dejaba el WhatsApp flotando a media altura. */
    grid-template-rows: min-content min-content 1fr;
    grid-template-areas:
      "intro panel"
      "whats panel"
      ".     panel";
    column-gap: var(--space-2xl);
    row-gap: var(--space-lg);
    align-items: start;
  }
  .contacto__intro {
    padding-top: var(--space-sm);
  }
  .contacto__secundario {
    align-items: flex-start;
    text-align: left;
  }
}

/* Mobile chico: panel con menos padding */
@media (max-width: 480px) {
  .contacto__panel {
    padding: var(--space-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contacto__exito {
    transition: none;
  }
  .contacto__exito .cierre-punto {
    transform: scale(1);
    animation: none;
  }
  .contacto__frase-clave {
    background-size: 100% max(2.5px, 0.045em);
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   27. PAGINA: /gracias.html (oscuro). Aterrizaje del formulario y fallback del
   redirect de Web3Forms cuando el visitante no tiene JS. Sin scripts.
   -------------------------------------------------------------------------- */
.gracias {
  display: flex;
  align-items: center;
  min-height: 100svh;
}
.gracias__contenido {
  text-align: center;
  max-width: 42rem;
}
.gracias__logo {
  display: inline-block;
  margin-bottom: var(--space-lg);
  color: var(--texto-principal);
}
.gracias__logo-svg {
  width: clamp(8rem, 22vw, 11rem);
  height: auto;
}
.gracias__titulo {
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.gracias__titulo-suave {
  display: block;
  font-weight: var(--peso-light);
  color: var(--texto-secundario);
}
.gracias__titulo-firme {
  display: block;
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
}
.gracias__punto {
  animation: cierre-punto-aparece var(--dur-lenta) var(--ease-out) 0.4s forwards;
}
.gracias__texto {
  margin-top: var(--space-md);
  margin-inline: auto;
  max-width: 32rem;
  color: var(--texto-secundario);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
}
.gracias__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Arco inf-izq de Contacto: se reposiciona fuera de vista. Por defecto asoma
   hacia abajo (translate Y 32%) y, al ser la ultima seccion antes del footer,
   ese asomo se cortaba contra el footer y se leia como un anillo truncado.
   Contacto conserva su arco sup-der.
   -------------------------------------------------------------------------- */
.contacto .arco--inf-izq {
  display: none;
}

/* --------------------------------------------------------------------------
   FOOTER: "La firma del sitio"
   Desktop: marca a la izquierda (logo + frase, Light/Semibold), navegacion +
   redes a la derecha. Microcopy con 2026 y el punto naranja como orillas y los
   enlaces de legal/contacto centrados. Mobile: todo centrado, navegacion en
   columna ordenada, y una barra final con 2026 a la izquierda y el punto a la
   derecha. Una sola linea de division full-bleed. Sin arco propio.
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  background-color: var(--fondo);
  margin-top: var(--space-lg); /* respiro tras la firma de Contacto */
  border-top: 1px solid var(--borde); /* linea superior full-bleed */
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}

/* --- Fila superior: marca (izq) | navegacion + redes (der) --- */
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg) var(--space-2xl);
}

.footer__logo {
  display: inline-block;
  color: var(--texto-principal); /* las letras del logo leen currentColor */
  border-radius: var(--radius-sm);
}
.footer__logo-svg {
  display: block;
  width: clamp(8.5rem, 15vw, 11rem);
  height: auto;
}
.footer__posicion {
  margin-top: var(--space-md);
  max-width: 24ch;
  font-size: var(--fs-h3);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-h3);
}
.footer__posicion-firme {
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
}
.footer__posicion-suave {
  font-weight: var(--peso-light);
  color: var(--texto-secundario);
}

.footer__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-md);
}
/* Links: hover con subrayado naranja que crece (perceptible, dentro del sistema) */
.footer__link {
  color: var(--texto-secundario);
  font-size: var(--fs-body);
  text-decoration: none;
  padding: 0.35rem var(--space-2xs);
  border-radius: var(--radius-sm);
  background-image: linear-gradient(var(--color-naranja), var(--color-naranja));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: var(--space-2xs) calc(100% - 0.2rem);
  transition: color var(--dur-rapida) var(--ease-out),
    background-size var(--dur-base) var(--ease-out);
}
.footer__link:hover {
  color: var(--texto-principal);
  background-size: calc(100% - var(--space-xs)) 2px;
}

.footer__redes {
  display: flex;
  gap: var(--space-xs);
}
.footer__red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--texto-secundario);
  border: 1px solid var(--borde);
  transition: color var(--dur-rapida) var(--ease-out),
    border-color var(--dur-rapida) var(--ease-out),
    transform var(--dur-rapida) var(--ease-out);
}
.footer__red svg {
  width: 20px;
  height: 20px;
}
.footer__red:hover {
  color: var(--texto-principal);
  border-color: var(--color-azul-exvi);
  transform: translateY(-2px);
}
.footer__red:active {
  transform: translateY(0);
}

/* --- Microcopy: 2026 (orilla izq, delgado) | legal centrado | punto (orilla der) --- */
.footer__base-wrap {
  margin-top: var(--space-xl);
}
.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
}
.footer__copy {
  margin: 0;
  white-space: nowrap;
  font-weight: var(--peso-light); /* mas delgado */
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs) var(--space-xl);
}
.footer__link-min {
  color: var(--texto-secundario);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-decoration: none;
  padding-block: 0.35rem;
  background-image: linear-gradient(var(--color-naranja), var(--color-naranja));
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  background-position: 0 calc(100% - 0.2rem);
  transition: color var(--dur-rapida) var(--ease-out),
    background-size var(--dur-base) var(--ease-out);
}
.footer__link-min:hover {
  color: var(--texto-principal);
  background-size: 100% 1.5px;
}
.footer__punto {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-naranja);
}

/* --- Mobile: todo centrado, navegacion ordenada en columna, barra final --- */
@media (max-width: 719px) {
  .footer__top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xl);
  }
  .footer__logo-svg {
    width: clamp(10rem, 42vw, 13rem); /* algo mas grande en mobile */
  }
  .footer__posicion {
    margin-top: var(--space-md);
    max-width: none;
    text-align: center;
  }
  .footer__fila {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }
  .footer__nav {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }

  /* legal centrado en columna (arriba) + barra final: 2026 izq, punto der */
  .footer__legal {
    order: -1;
    flex-basis: 100%;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .footer__punto {
    margin-left: auto;
  }
}

/* --------------------------------------------------------------------------
   PAGINAS LEGALES (terminos-condiciones, aviso-privacidad)
   Encabezado oscuro (modo dominante) + cuerpo claro de lectura. Sin GSAP.
   Reusa header, footer, arcos, label y barra-acento del sistema.
   -------------------------------------------------------------------------- */
.legal-hero {
  padding-top: calc(var(--header-alto) + var(--space-xl));
  padding-bottom: var(--space-2xl);
}
.legal-hero__eyebrow {
  margin-bottom: var(--space-md);
}
.legal-hero__titulo {
  font-size: var(--fs-h1);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  color: var(--texto-principal);
}
.legal-hero__fecha {
  margin-top: var(--space-md);
}

/* Cuerpo: medida de lectura comoda */
.legal-doc {
  max-width: 46rem;
}
.legal-doc > h2:first-child {
  margin-top: 0;
}
.legal-doc h2 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
  font-size: var(--fs-h3);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-base);
  color: var(--texto-principal);
}
.legal-doc h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-body);
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
}
.legal-doc p {
  margin-top: var(--space-sm);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--texto-secundario);
}
.legal-doc strong {
  font-weight: var(--peso-semibold);
  color: var(--texto-principal);
}
.legal-doc a {
  color: var(--color-azul-exvi);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--dur-rapida) var(--ease-out);
}
.legal-doc a:hover {
  color: var(--color-azul-profundo);
}
.legal-doc ul,
.legal-doc ol {
  margin-top: var(--space-sm);
  padding-left: var(--space-md);
}
.legal-doc li {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--texto-secundario);
}
.legal-doc li + li {
  margin-top: var(--space-2xs);
}
.legal-doc address {
  font-style: normal;
}