/* ==========================================================================
   Optima AI — hoja de estilos única
   Traducción fiel del design system aprobado en Claude Design
   (namespace original: OptimaAIDesignSystem_f3b15f)

   Orden del archivo:
     1. Tipografías
     2. Tokens
     3. Base
     4. Layout
     5. Componentes
     6. Secciones
     7. Responsive
   ========================================================================== */

/* 1. Tipografías ---------------------------------------------------------- */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens --------------------------------------------------------------- */

:root {
  /* «only light», no «light» a secas: la diferencia es la que hace que funcione.
     `light` solo declara que el sitio soporta el modo claro, y Chrome en Android
     igualmente le aplica su oscurecido automático. `only light` es la exclusión
     explícita que documenta Chrome: «este sitio solo existe en claro, no lo
     transformes».
     Importa porque ese oscurecido automático deja la página peor que clara: el
     logo es un PNG y no se invierte con el resto, así que su texto oscuro
     desaparece sobre el fondo ya oscurecido, y las fotografías quedan apagadas.
     Una primera versión de esta línea decía solo `light` y no surtió efecto en
     un Android real. */
  color-scheme: only light;

  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-alt: 'Poppins', ui-sans-serif, system-ui, sans-serif;

  --color-blue: #1A16FF;
  --color-violet: #6A00FF;
  --color-magenta: #FF00B8;
  --color-ink: #0A0614;
  --white: #FFFFFF;
  --gray-950: #0A0614;
  --gray-800: #211C30;
  --gray-700: #3A3547;
  --gray-500: #6B6578;
  --gray-400: #9891A3;
  --gray-300: #C7C2D1;
  --gray-200: #E4E1EC;
  --gray-100: #F3F0FF;
  --gray-50: #FAF8FF;

  --surface-page: var(--white);
  --surface-alt: var(--gray-50);
  --surface-tint: var(--gray-100);
  --surface-ink: var(--gray-950);
  --surface-card: var(--white);

  --text-primary: var(--gray-950);
  --text-secondary: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-faint: var(--gray-400);
  --text-inverse: var(--white);
  --text-inverse-muted: var(--gray-300);

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-on-ink: rgba(255, 255, 255, .14);

  --accent-blue: var(--color-blue);
  --accent-violet: var(--color-violet);
  --accent-magenta: var(--color-magenta);
  --accent-empresas: var(--color-blue);
  --accent-empresas-tint: #EEF0FF;
  --accent-senior: var(--color-magenta);
  --accent-senior-tint: #FEECF8;

  --gradient-brand: linear-gradient(120deg, var(--color-blue) 0%, var(--color-violet) 55%, var(--color-magenta) 100%);
  --gradient-brand-soft: linear-gradient(120deg, rgba(26, 22, 255, .10) 0%, rgba(106, 0, 255, .10) 55%, rgba(255, 0, 184, .10) 100%);
  --gradient-empresas: linear-gradient(135deg, var(--color-blue), var(--color-violet));
  --gradient-senior: linear-gradient(135deg, var(--color-violet), var(--color-magenta));
  --focus-ring: var(--color-violet);

  --text-eyebrow: 13px;
  --text-sm: 15px;
  --text-base: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  /* Escala de titulares.
     La original venía de las carátulas de Claude Design, donde los titulares de
     ejemplo eran cortos. Con el texto real —el de Empresas tiene 84 caracteres—
     esos cuerpos daban titulares de cinco y seis líneas: a partir de cuatro un
     titular deja de leerse de un golpe y se lee como párrafo, que es justo lo
     que no debe hacer.
     Reducidos entre un 14% y un 25%, más en la parte alta de la escala: los
     cuerpos grandes son los que se descontrolan en pantallas anchas. */
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: clamp(34px, 4.1vw, 52px);
  --text-5xl: clamp(40px, 5.1vw, 66px);
  --text-6xl: clamp(48px, 6.6vw, 92px);

  /* 1.05 era el interlineado de un display enorme. Al bajar los cuerpos, las
     líneas quedaban pegadas: un titular más pequeño necesita algo más de aire
     proporcional, no menos. */
  --leading-tight: 1.08;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  --container-max: 1240px;
  --container-pad: clamp(24px, 5vw, 64px);
  --section-pad-y: clamp(72px, 10vw, 144px);
  /* Alto de la cabecera fija más un respiro. Sin esto, cada enlace de ancla
     deja su destino tapado bajo la barra. La altura la manda el botón de CTA
     (45px) más el relleno del nav: 90px sin comprimir, 74px comprimido. */
  --header-offset: 104px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(10, 6, 20, .04);
  --shadow-sm: 0 4px 16px rgba(10, 6, 20, .05);
  --shadow-md: 0 12px 32px rgba(10, 6, 20, .07);
  --shadow-lg: 0 24px 64px rgba(10, 6, 20, .10);
  --shadow-focus: 0 0 0 3px rgba(106, 0, 255, .25);

  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --duration-fast: 150ms;
  --duration-base: 260ms;
  --duration-slow: 420ms;
}

/* 3. Base ----------------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-offset);
  /* El fondo del lienzo, que es lo que se ve al pasarse del final del documento.
     En iOS el scroll rebota: se puede arrastrar mas alla del ultimo pixel y el
     hueco muestra este color. Sin esta linea el fondo de <body> —blanco— se
     propagaba al lienzo, y como el pie es oscuro parecia que la pagina seguia
     con una franja blanca vacia despues del pie.
     Se usa la tinta de marca, que ademas es el color ya declarado en
     <meta name="theme-color">, asi que el rebote queda a juego con la barra del
     navegador en vez de cortar en blanco. */
  background: var(--surface-ink);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--surface-page);
  line-height: var(--leading-normal);
}
/* Nada de overflow-x en <body>: crearía un contenedor de scroll y rompería la
   cabecera sticky. Cada sección que asoma la filigrana recorta por su cuenta. */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  /* Nada de hyphens:auto en titulares. Partir "quie-ren" o "digi-tal" a mitad
     de un titular se lee mal y resta profesionalidad; en un titular la palabra
     salta entera a la línea siguiente. La escala tipográfica de más abajo ya
     garantiza que la palabra más larga del sitio ("acompañamiento") cabe hasta
     en 320px, así que break-word solo actúa como último recurso teórico.
     text-wrap:balance reparte las líneas de forma pareja y evita que la última
     quede con una sola palabra colgando. */
  overflow-wrap: break-word;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: var(--color-violet); text-decoration: none; }
a:hover { color: var(--color-magenta); }
button { font-family: inherit; }
/* height:auto es obligatorio: como los <img> declaran width/height para reservar
   sitio, sin esto el atributo height actua como estilo de presentacion y, al
   fijar el CSS solo el ancho, la imagen sale estirada en vertical. */
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--color-violet); color: #fff; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.oa-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 14px 22px;
  background: var(--surface-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
}
.oa-skip:focus { left: 0; color: #fff; }

.oa-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .oa-marquee__track { animation: none !important; }
  /* Las líneas de fondo son pura decoración: a quien pide menos movimiento no
     se le dejan quietas de adorno, se retiran del todo. */
  .oa-bubbles { display: none; }
  * { transition-duration: 1ms !important; }
}

@keyframes oa-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* 4. Layout --------------------------------------------------------------- */

.oa-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  min-width: 0;
}

.oa-section { padding: var(--section-pad-y) 0; }
.oa-section--alt { background: var(--surface-alt); }
.oa-section--ink { background: var(--surface-ink); }
.oa-section--hero { padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 5vw, 80px); position: relative; overflow: hidden; clip-path: inset(0); }

.oa-rule { height: 1px; background: var(--border-subtle); border: 0; margin: 0; }

/* Rejillas reutilizables del diseño aprobado */
.oa-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 32px); }
.oa-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); }
/* Bloque de titulo a la izquierda, parrafo a la derecha. Centrado y no `end`:
   alineando por el pie, el parrafo quedaba muy por debajo del titular y el par
   se leia como dos cosas sueltas en vez de como una unidad. Centrado, el
   parrafo acompana al titulo. Las cinco secciones del sitio que usan esta
   rejilla siguen el mismo patron, asi que el cambio es coherente en todas.
   Por debajo de 1024px pasa a una sola columna y esto deja de aplicar. */
.oa-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.oa-split--hero { grid-template-columns: 1.05fr 1fr; margin-top: clamp(40px, 4vw, 64px); }
.oa-split--media { grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 88px); align-items: center; }
.oa-split--aside { grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 88px); align-items: start; }
.oa-split--aside-wide { grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 88px); align-items: start; }

/* 5. Componentes ---------------------------------------------------------- */

/* 5.1 Botón --------------------------------------------------------------- */
.oa-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  background-image: var(--gradient-brand);
  color: #fff;
  text-align: center;
  transition: transform var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.oa-btn:hover { color: #fff; opacity: .88; transform: translateY(-1px); }
.oa-btn--lg { padding: 17px 34px; font-size: 16px; }

.oa-btn--secondary {
  background-image: none;
  background: var(--surface-page);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}
.oa-btn--secondary:hover { color: var(--text-primary); }

.oa-btn--ghost {
  background-image: none;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid transparent;
}
.oa-btn--ghost:hover { color: var(--text-primary); }

.oa-btn--inverse {
  background-image: none;
  background: var(--white);
  color: var(--surface-ink);
  border: none;
}
.oa-btn--inverse:hover { color: var(--surface-ink); }

.oa-btn[disabled], .oa-btn[aria-disabled='true'] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.oa-btn-row {
  display: flex;
  gap: 14px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.oa-btn-row--center { justify-content: center; margin-top: clamp(32px, 3.5vw, 48px); }

/* 5.2 Badge --------------------------------------------------------------- */
.oa-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-tint);
  color: var(--text-secondary);
}
.oa-badge--empresas { background: var(--accent-empresas-tint); color: var(--color-blue); }
.oa-badge--senior { background: var(--accent-senior-tint); color: var(--color-magenta); }
.oa-badge--ink { background: rgba(255, 255, 255, .1); color: #fff; }

/* 5.3 Card ---------------------------------------------------------------- */
.oa-card {
  min-width: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-sm);
}
.oa-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}
.oa-card--empresas .oa-card__icon { background: var(--accent-empresas-tint); color: var(--color-blue); }
.oa-card--senior .oa-card__icon { background: var(--accent-senior-tint); color: var(--color-magenta); }

.oa-card__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* El design system usa aquí --border-subtle para el tono neutro, pero es un
     token de borde: sobre blanco da 1.2:1 y el texto desaparece. En el diseño
     nunca se vio porque ninguna tarjeta neutra llevaba eyebrow. */
  color: var(--text-muted);
}
.oa-card--empresas .oa-card__eyebrow { color: var(--color-blue); }
.oa-card--senior .oa-card__eyebrow { color: var(--color-magenta); }

.oa-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}
.oa-card__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Lista de vías de contacto dentro de una tarjeta: correo, WhatsApp… */
.oa-canales { display: grid; gap: 10px; margin-top: -4px; }
.oa-canales li { font-size: 15px; line-height: 1.4; }
.oa-canales a { font-weight: 500; }

/* 5.4 Marquee ------------------------------------------------------------- */
.oa-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.oa-marquee__track {
  display: flex;
  width: max-content;
  animation: oa-marquee 38s linear infinite;
}
.oa-marquee--slow .oa-marquee__track { animation-duration: 44s; }
.oa-marquee__item {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3vw, 56px);
  padding-right: clamp(28px, 3vw, 56px);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  color: rgba(255, 255, 255, .72);
  white-space: nowrap;
}
.oa-marquee__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-image: var(--gradient-brand);
  flex-shrink: 0;
}
.oa-marquee-band { background: var(--surface-ink); padding: clamp(28px, 3vw, 44px) 0; }

/* 5.5 PathCard ------------------------------------------------------------ */
.oa-path {
  min-width: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 3.4vw, 52px);
  box-shadow: var(--shadow-xs);
  color: inherit;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base);
}
.oa-path::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-out);
}
.oa-path--empresas::before { background-image: var(--gradient-empresas); }
.oa-path--senior::before { background-image: var(--gradient-senior); }

.oa-path:hover, .oa-path:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  color: inherit;
}
.oa-path--empresas:hover, .oa-path--empresas:focus-visible { border-color: var(--color-blue); }
.oa-path--senior:hover, .oa-path--senior:focus-visible { border-color: var(--color-magenta); }
.oa-path:hover::before, .oa-path:focus-visible::before { transform: scaleX(1); }

.oa-path__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.oa-path--empresas .oa-path__label { color: var(--color-blue); }
.oa-path--senior .oa-path__label { color: var(--color-magenta); }

.oa-path__title {
  font-size: var(--text-2xl);
  color: var(--text-primary);
  margin-top: 20px;
  letter-spacing: -0.03em;
  max-width: 22ch;
  /* 1.05 es para display grande; un titular de tarjeta a 32px y varias líneas
     necesita aire o las líneas se pisan. */
  line-height: var(--leading-snug);
}
.oa-path__copy {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-top: 18px;
  line-height: var(--leading-relaxed);
  max-width: 420px;
}
.oa-path__list { margin: 32px 0 0; display: grid; gap: 0; }
.oa-path__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--text-sm);
  color: var(--text-primary);
  padding: 13px 0;
  border-top: 1px solid var(--border-subtle);
}
.oa-path__bullet { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.oa-path--empresas .oa-path__bullet { background: var(--color-blue); }
.oa-path--senior .oa-path__bullet { background: var(--color-magenta); }

.oa-path__cta {
  margin-top: auto;
  padding-top: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  font-weight: 600;
}
.oa-path--empresas .oa-path__cta { color: var(--color-blue); }
.oa-path--senior .oa-path__cta { color: var(--color-magenta); }
.oa-path__arrow { transition: transform var(--duration-base) var(--ease-out); }
.oa-path:hover .oa-path__arrow, .oa-path:focus-visible .oa-path__arrow { transform: translateX(5px); }

/* 5.6 SectionHeading ------------------------------------------------------ */
.oa-heading { min-width: 0; }
.oa-heading--center { text-align: center; margin: 0 auto; max-width: 720px; }

.oa-heading__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.oa-heading--center .oa-heading__meta { justify-content: center; }

.oa-heading__index {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.oa-heading__dash { width: 28px; height: 1px; background: var(--border-default); flex-shrink: 0; }
.oa-heading__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.oa-heading__title {
  font-size: var(--text-4xl);
  color: var(--text-primary);
  letter-spacing: -0.03em;
  max-width: 720px;
}
.oa-heading--center .oa-heading__title { margin: 0 auto; }
.oa-heading__lead {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-top: 24px;
  max-width: 620px;
  line-height: var(--leading-relaxed);
}
.oa-heading--center .oa-heading__lead { margin-left: auto; margin-right: auto; }

/* Variante sobre fondo tinta */
.oa-heading--ink .oa-heading__index { color: rgba(255, 255, 255, .45); }
.oa-heading--ink .oa-heading__dash { background: rgba(255, 255, 255, .3); }
.oa-heading--ink .oa-heading__eyebrow { color: rgba(255, 255, 255, .7); }
.oa-heading--ink .oa-heading__title { color: #fff; }
.oa-heading--ink .oa-heading__lead { color: var(--text-inverse-muted); }

/* Anchos de título tal y como los fija el diseño */
.w-12ch { max-width: 12ch; }
.w-14ch { max-width: 14ch; }
.w-16ch { max-width: 16ch; }
.w-18ch { max-width: 18ch; }
.w-19ch { max-width: 19ch; }
.w-20ch { max-width: 20ch; }

/* 5.7 Accordion ----------------------------------------------------------- */
.oa-accordion { min-width: 0; border-top: 1px solid var(--border-subtle); }
.oa-accordion__item { border-bottom: 1px solid var(--border-subtle); }

.oa-accordion__trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 26px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.oa-accordion__q {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
  transition: color var(--duration-fast);
}
.oa-accordion__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
  margin-top: 4px;
}
.oa-accordion__icon span {
  position: absolute;
  top: 10px;
  left: 0;
  width: 22px;
  height: 1.5px;
  background: var(--text-muted);
}
.oa-accordion__icon span:last-child {
  transform: rotate(90deg);
  transition: transform var(--duration-base) var(--ease-out);
}

.oa-accordion__panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  /* visibility retira la respuesta cerrada del lector de pantalla y del tabulador;
     se retrasa hasta el final para no cortar la animación de cierre. */
  visibility: hidden;
  transition: max-height var(--duration-slow) var(--ease-out),
              opacity var(--duration-base),
              visibility 0s linear var(--duration-slow);
}
.oa-accordion__panel p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 640px;
  padding-bottom: 28px;
}

.oa-accordion__item.is-open .oa-accordion__panel {
  /* Holgado a propósito: a 320px de ancho, la respuesta más larga ronda los
     300px, y un tope justo la recortaría en silencio. */
  max-height: 640px;
  opacity: 1;
  visibility: visible;
  transition: max-height var(--duration-slow) var(--ease-out),
              opacity var(--duration-base),
              visibility 0s;
}
.oa-accordion__item.is-open .oa-accordion__icon span:last-child { transform: rotate(0deg); }
.oa-accordion__item.is-open .oa-accordion__q { color: var(--color-violet); }
.oa-accordion__item.is-open .oa-accordion__icon span { background: var(--color-violet); }

.oa-accordion--empresas .oa-accordion__item.is-open .oa-accordion__q { color: var(--color-blue); }
.oa-accordion--empresas .oa-accordion__item.is-open .oa-accordion__icon span { background: var(--color-blue); }
.oa-accordion--senior .oa-accordion__item.is-open .oa-accordion__q { color: var(--color-magenta); }
.oa-accordion--senior .oa-accordion__item.is-open .oa-accordion__icon span { background: var(--color-magenta); }

/* 5.8 Tabs ---------------------------------------------------------------- */
.oa-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
}
.oa-tabs__btn {
  border: none;
  cursor: pointer;
  padding: 11px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  color: var(--text-muted);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.oa-tabs__btn[aria-selected='true'] {
  background: var(--surface-page);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

/* 5.9 Formulario ---------------------------------------------------------- */
.oa-field { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-body); }
.oa-field__label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.oa-field input,
.oa-field textarea,
.oa-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  outline: none;
  background: var(--surface-page);
  color: var(--text-primary);
  transition: border var(--duration-fast), box-shadow var(--duration-fast);
}
.oa-field textarea { resize: vertical; min-height: 120px; }
.oa-field input:focus,
.oa-field textarea:focus,
.oa-field select:focus {
  border-color: var(--color-violet);
  box-shadow: var(--shadow-focus);
}
.oa-field__error {
  font-size: 13px;
  color: var(--color-magenta);
  font-weight: 500;
  display: none;
}
.oa-field.has-error input,
.oa-field.has-error textarea,
.oa-field.has-error select { border-color: var(--color-magenta); }
.oa-field.has-error .oa-field__error { display: block; }

.oa-form { display: grid; gap: 22px; }
.oa-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.oa-form__note { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.oa-form__status {
  display: none;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: var(--accent-empresas-tint);
  color: var(--color-blue);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}
.oa-form__status.is-visible { display: block; }

/* 5.10 Imágenes ----------------------------------------------------------- */
.oa-figure {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 28px;
  background: var(--surface-tint);
  box-shadow: var(--shadow-md);
}
.oa-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Reserva de espacio: evita saltos de layout mientras carga la foto */
.oa-figure--hero { aspect-ratio: 4 / 3; max-height: 400px; }
.oa-figure--tall { aspect-ratio: 5 / 4; max-height: 480px; }
.oa-figure--wide { aspect-ratio: 16 / 9; }
/* Hueco vertical: la columna de texto que lleva al lado es alta, y un formato
   apaisado quedaba corto frente a ella. El tope de 600px evita que la imagen
   estire la sección más de lo que ocupa el texto. */
.oa-figure--retrato { aspect-ratio: 4 / 5; max-height: 600px; }

/* Marca de agua tenue del isotipo, tal y como la usa el diseño */
.oa-watermark {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.oa-watermark--hero {
  right: -12%;
  top: -14%;
  width: clamp(420px, 52vw, 760px);
  opacity: .05;
}
.oa-watermark--cta {
  left: -10%;
  bottom: -38%;
  width: clamp(360px, 42vw, 620px);
  opacity: .07;
  filter: brightness(0) invert(1);
}

.oa-tint { position: absolute; inset: 0; pointer-events: none; }
.oa-tint--brand { background: var(--gradient-brand-soft); }
.oa-tint--senior { background: linear-gradient(120deg, rgba(255, 0, 184, .07), rgba(106, 0, 255, .05)); }

/* 5.11 Burbujas de fondo --------------------------------------------------
   Campo de burbujas que sube muy despacio por detrás del contenido en las
   secciones más blancas. Es decoración pura: no lleva contenido, no recibe
   clics y desaparece para quien pide menos movimiento.

   Cada burbuja son dos capas anidadas, y esa separación es intencionada:
   la de fuera sube y se funde, la de dentro se balancea de lado. Combinar
   ambos movimientos en un solo elemento obligaría a recalcular la posición
   en cada fotograma; separados, cada capa anima solo su propio `transform`
   y el trabajo se queda en la GPU.

   El aro iridiscente es un degradado cónico recortado con una máscara en
   forma de anillo: reproduce el borde azul-magenta de una pompa real sin
   necesidad de imágenes. El interior lleva un tinte lavanda muy tenue,
   porque sobre blanco una burbuja blanca sería invisible.

   Los retardos son negativos a propósito: así al cargar la página el campo
   ya está repartido, en vez de arrancar vacío y llenarse poco a poco.      */
.oa-bubbles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* El clip-path acompaña al overflow y no es redundante: en iOS Safari
     `overflow: hidden` NO recorta de forma fiable los descendientes con
     `transform`, y estas burbujas arrancan en `bottom: -18%` —un 18% de la
     altura de la sección por debajo de ella—. Cuando el recorte falla, ese
     sobrante se suma al alto del documento y la página sigue desplazándose
     después del pie; en Android y en escritorio no ocurre.
     Donde el recorte ya funcionaba, esto no cambia nada: recorta la misma caja. */
  clip-path: inset(0);
  pointer-events: none;
  opacity: .85;
}

/* Sin `will-change`: el navegador ya promueve por su cuenta un `transform`
   animado, y declararlo obligaría a mantener una capa de composición por
   elemento. Con hasta 21 burbujas por página (42 capas contando el balanceo)
   eso era memoria gastada a cambio de nada. */
.oa-bubble {
  position: absolute;
  bottom: -18%;
  animation-name: oa-subir;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.oa-bubble__ball {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, 0) 36%),
    radial-gradient(circle at 50% 52%, rgba(106, 0, 255, .085), rgba(26, 22, 255, .04) 66%, rgba(255, 255, 255, 0) 80%);
  animation-name: oa-vaiven;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Aro iridiscente: cónico recortado a un anillo de 1.5px. */
.oa-bubble__ball::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    var(--color-blue), var(--color-violet) 25%, var(--color-magenta) 50%,
    var(--color-violet) 75%, var(--color-blue));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  opacity: .55;
}

.oa-bubble--1 {
  left: 6%;
  width: 84px;
  height: 84px;
  animation-duration: 62s;
  animation-delay: -9s;
}
.oa-bubble--1 .oa-bubble__ball {
  animation-duration: 13s;
  --vaiven: 14px;
}

.oa-bubble--2 {
  left: 18%;
  width: 34px;
  height: 34px;
  animation-duration: 46s;
  animation-delay: -23s;
}
.oa-bubble--2 .oa-bubble__ball {
  animation-duration: 9s;
  --vaiven: 10px;
}

.oa-bubble--3 {
  left: 31%;
  width: 120px;
  height: 120px;
  animation-duration: 78s;
  animation-delay: -41s;
}
.oa-bubble--3 .oa-bubble__ball {
  animation-duration: 17s;
  --vaiven: 18px;
}

.oa-bubble--4 {
  left: 47%;
  width: 46px;
  height: 46px;
  animation-duration: 54s;
  animation-delay: -15s;
}
.oa-bubble--4 .oa-bubble__ball {
  animation-duration: 11s;
  --vaiven: 12px;
}

.oa-bubble--5 {
  left: 62%;
  width: 26px;
  height: 26px;
  animation-duration: 42s;
  animation-delay: -31s;
}
.oa-bubble--5 .oa-bubble__ball {
  animation-duration: 8s;
  --vaiven: 8px;
}

.oa-bubble--6 {
  left: 74%;
  width: 96px;
  height: 96px;
  animation-duration: 70s;
  animation-delay: -56s;
}
.oa-bubble--6 .oa-bubble__ball {
  animation-duration: 15s;
  --vaiven: 16px;
}

.oa-bubble--7 {
  left: 88%;
  width: 58px;
  height: 58px;
  animation-duration: 58s;
  animation-delay: -6s;
}
.oa-bubble--7 .oa-bubble__ball {
  animation-duration: 12s;
  --vaiven: 11px;
}

@keyframes oa-subir {
  from { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  to   { transform: translateY(-115vh); opacity: 0; }
}

@keyframes oa-vaiven {
  from { transform: translateX(calc(var(--vaiven) * -1)); }
  to   { transform: translateX(var(--vaiven)); }
}

/* La sección hospedadora recorta las burbujas y mantiene el texto por encima. */
/* Segunda barrera de recorte, por el mismo motivo iOS de `.oa-bubbles`. */
.oa-section--fondo { position: relative; overflow: hidden; clip-path: inset(0); }
.oa-section--fondo > .oa-wrap { position: relative; z-index: 1; }

/* 6. Secciones ------------------------------------------------------------ */

/* 6.1 Cabecera ------------------------------------------------------------ */
.oa-header { position: sticky; top: 0; z-index: 50; }

.oa-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 11px 24px;
  background: var(--surface-ink);
  color: var(--text-inverse-muted);
  font-family: var(--font-body);
  font-size: 13px;
  /* Se pliega al hacer scroll, como en el diseño. Con display:none el
     documento pegaba un tirón de 44px; colapsando la altura, se desliza. */
  max-height: 80px;
  overflow: hidden;
  transition: max-height var(--duration-base) var(--ease-out),
              padding var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}
.oa-header.is-scrolled .oa-selector {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}
.oa-selector__links { display: flex; gap: 14px; }
.oa-selector__links a {
  color: #fff;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.oa-selector__links a:hover { color: #fff; border-bottom-color: #fff; }

.oa-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 22px var(--container-pad);
  font-family: var(--font-body);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: padding var(--duration-base) var(--ease-out), border-color var(--duration-base);
}
.oa-header.is-scrolled .oa-nav { padding-top: 14px; padding-bottom: 14px; border-bottom-color: var(--border-subtle); }

.oa-nav__logo { flex-shrink: 0; display: block; }
.oa-nav__logo img {
  height: 26px;
  width: auto;
  transition: height var(--duration-base) var(--ease-out);
}
.oa-header.is-scrolled .oa-nav__logo img { height: 22px; }

.oa-nav__links { display: flex; gap: clamp(18px, 2.2vw, 34px); align-items: center; }
.oa-nav__links a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  opacity: .72;
  transition: opacity var(--duration-fast), color var(--duration-fast);
}
.oa-nav__links a:hover { opacity: 1; color: var(--color-violet); }
.oa-nav__links a[aria-current='page'] { color: var(--color-violet); opacity: 1; }

.oa-nav__cta {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background-image: var(--gradient-brand);
  color: #fff;
  white-space: nowrap;
}
.oa-nav__cta:hover { color: #fff; opacity: .9; }

/* El menú lleva su propia copia del CTA para el desplegable móvil.
   En escritorio manda el CTA suelto de la derecha, así que esta se oculta. */
.oa-nav__links .oa-nav__cta { display: none; }

.oa-nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-page);
  cursor: pointer;
  padding: 0;
  position: relative;
  flex-shrink: 0;
}
.oa-nav__burger span {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-fast);
}
.oa-nav__burger span:nth-child(1) { top: 16px; }
.oa-nav__burger span:nth-child(2) { top: 21px; }
.oa-nav__burger span:nth-child(3) { top: 26px; }
.oa-nav__burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.oa-nav__burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.oa-nav__burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* 6.2 Hero ---------------------------------------------------------------- */
.oa-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.oa-hero__eyebrow span:first-child { width: 32px; height: 1px; background: var(--border-default); flex-shrink: 0; }
.oa-hero__eyebrow span:last-child {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.oa-hero__eyebrow--empresas span:first-child { background: var(--color-blue); }
.oa-hero__eyebrow--empresas span:last-child { color: var(--color-blue); }
.oa-hero__eyebrow--senior span:first-child { background: var(--color-magenta); }
.oa-hero__eyebrow--senior span:last-child { color: var(--color-magenta); }

.oa-hero__title {
  font-size: var(--text-6xl);
  letter-spacing: -0.045em;
  max-width: 15ch;
  font-weight: 500;
}
.oa-hero__title--sub {
  font-size: var(--text-5xl);
  letter-spacing: -0.045em;
  font-weight: 500;
  /* Era el único titular sin medida máxima, y por eso el de Empresas se
     estiraba sin control. Va en ch y no en px porque lo que hay que limitar
     son los caracteres por línea, no los píxeles: así el límite acompaña al
     cuerpo de letra en lugar de pelearse con él. Más holgado que el hero
     principal (15ch) porque estos titulares son más largos. */
  max-width: 22ch;
}
.oa-hero__grad {
  background-image: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}
.oa-hero__lead {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 52ch;
}

.oa-facts { min-width: 0; border-top: 1px solid var(--border-subtle); padding-top: 24px; }
.oa-facts__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.oa-facts__term {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 128px;
}
.oa-facts__desc { font-size: 14px; color: var(--text-muted); line-height: 1.5; }

/* 6.3 Lista de pasos ------------------------------------------------------ */
.oa-steps { margin-top: clamp(48px, 5vw, 80px); }
.oa-steps--tight { margin-top: clamp(40px, 4vw, 64px); }
.oa-step {
  display: grid;
  grid-template-columns: auto 1.1fr 1.4fr;
  gap: clamp(20px, 4vw, 64px);
  align-items: baseline;
  padding: clamp(24px, 2.6vw, 36px) 0;
  border-top: 1px solid var(--border-subtle);
}
.oa-steps--tight .oa-step { padding: clamp(20px, 2.2vw, 30px) 0; }
.oa-section--ink .oa-step { border-top-color: var(--border-on-ink); }

.oa-step__n {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.oa-section--ink .oa-step__n { color: rgba(255, 255, 255, .4); }
.oa-step--empresas .oa-step__n { color: var(--color-blue); }
.oa-step--senior .oa-step__n { color: var(--color-magenta); }

.oa-step__title {
  min-width: 0;
  font-size: var(--text-2xl);
  color: var(--text-primary);
  letter-spacing: -0.03em;
  font-weight: 500;
  line-height: var(--leading-snug);
}
.oa-steps--tight .oa-step__title { font-size: var(--text-xl); letter-spacing: -0.02em; }
.oa-section--ink .oa-step__title { color: #fff; }

.oa-step__copy {
  min-width: 0;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.oa-section--ink .oa-step__copy { color: var(--text-inverse-muted); }

/* 6.4 Lista con viñetas grandes ------------------------------------------- */
.oa-list { min-width: 0; border-top: 1px solid var(--border-default); }
.oa-list--subtle { border-top-color: var(--border-subtle); }
.oa-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
}
.oa-list--subtle li { border-bottom-color: var(--border-subtle); }
.oa-list--dense li { padding: 18px 0; }
.oa-list__bullet { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: var(--color-violet); }
.oa-list--empresas .oa-list__bullet { background: var(--color-blue); }
.oa-list--senior .oa-list__bullet { background: var(--color-magenta); }

/* 6.5 Cita ---------------------------------------------------------------- */
.oa-quote {
  margin: clamp(40px, 4vw, 64px) 0 0;
  padding-left: clamp(20px, 2vw, 32px);
  border-left: 2px solid var(--color-blue);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--text-primary);
  max-width: 22ch;
  line-height: 1.15;
}
.oa-quote--senior { border-left-color: var(--color-magenta); }

/* 6.6 Rejilla de pilares sobre tinta -------------------------------------- */
.oa-pillars {
  margin-top: clamp(40px, 4vw, 64px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.oa-pillars li {
  min-width: 0;
  padding-top: 20px;
  border-top: 1px solid var(--border-on-ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* 6.7 Bloques varios ------------------------------------------------------ */
.oa-pullquote {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border-default);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  max-width: 26ch;
  line-height: var(--leading-snug);
}
.oa-body-lg {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-top: 28px;
  line-height: var(--leading-relaxed);
  max-width: 50ch;
}
.oa-body {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 54ch;
  min-width: 0;
}
.oa-body--ink { color: var(--text-inverse-muted); }
/* --text-faint (#9891A3) da 3.0:1 sobre blanco. Se reserva para lo ornamental
   (el ordinal de sección) y la letra pequeña real pasa a --text-muted, 5.6:1. */
.oa-disclaimer { margin-top: 28px; font-size: 13px; color: var(--text-muted); }
.oa-disclaimer--ink { margin-top: 32px; color: rgba(255, 255, 255, .62); }

.oa-cta-title {
  font-size: var(--text-5xl);
  color: #fff;
  letter-spacing: -0.045em;
  font-weight: 500;
  max-width: 20ch;
  margin: 0 auto;
}
.oa-cta-title--sm {
  font-size: var(--text-4xl);
  letter-spacing: -0.04em;
  max-width: 24ch;
}
.oa-cta-note { margin-top: 28px; font-size: 14px; color: rgba(255, 255, 255, .5); }
.oa-center { text-align: center; }

/* 6.8 Pie ----------------------------------------------------------------- */
.oa-footer {
  background: var(--surface-ink);
  color: var(--text-inverse-muted);
  padding: clamp(64px, 7vw, 104px) var(--container-pad) 36px;
  font-family: var(--font-body);
}
.oa-footer__inner { max-width: var(--container-max); margin: 0 auto; }
.oa-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: clamp(40px, 6vw, 96px);
  padding-bottom: clamp(48px, 5vw, 72px);
  border-bottom: 1px solid var(--border-on-ink);
}
.oa-footer__brand { min-width: 0; }
.oa-footer__brand img { height: 26px; width: auto; }
.oa-footer__claim {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: #fff;
  margin-top: 28px;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  max-width: 320px;
}
.oa-footer__desc { font-size: 14px; margin-top: 16px; line-height: var(--leading-relaxed); max-width: 320px; }
.oa-footer__cols { min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.oa-footer__col { min-width: 0; }
.oa-footer__col h2 {
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.oa-footer__col li { font-size: 14px; margin-bottom: 12px; }
.oa-footer__col a { color: var(--text-inverse-muted); transition: color var(--duration-fast); }
.oa-footer__col a:hover { color: #fff; }
.oa-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 28px;
  font-size: 13px;
}
.oa-footer__bottom a { color: var(--text-inverse-muted); }
.oa-footer__bottom a:hover { color: #fff; }

/* 7. Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
  .oa-nav__links, .oa-nav__cta { display: none; }
  .oa-nav__burger { display: block; }
  :root { --header-offset: 96px; }

  .oa-nav__links.is-open {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--container-pad) 24px;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
    /* En apaisado las seis entradas no caben: que el menú se desplace en vez
       de desbordar fuera de la pantalla. */
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .oa-nav__links.is-open a {
    opacity: 1;
    padding: 16px 0;
    font-size: 17px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .oa-nav__links.is-open .oa-nav__cta {
    display: inline-flex;
    justify-content: center;
    margin-top: 20px;
    border-bottom: none;
    padding: 14px 24px;
  }
  .oa-nav { position: relative; }

  .oa-split--hero, .oa-split--media, .oa-split--aside, .oa-split--aside-wide, .oa-split {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .oa-grid-3 { grid-template-columns: 1fr 1fr; }
  .oa-pillars { grid-template-columns: repeat(3, 1fr); }
  .oa-footer__top { grid-template-columns: 1fr; }
  .oa-step { grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 32px); }
  .oa-step__copy { grid-column: 2; }
  .oa-figure--hero, .oa-figure--tall { max-height: none; }
}

@media (max-width: 768px) {
  .oa-grid-2, .oa-grid-3 { grid-template-columns: 1fr; }
  .oa-pillars { grid-template-columns: 1fr 1fr; }
  .oa-form__row { grid-template-columns: 1fr; }
  .oa-footer__cols { grid-template-columns: 1fr; gap: 36px; }

  .oa-hero__title, .oa-hero__title--sub { max-width: none; }
  .oa-quote { max-width: none; font-size: var(--text-2xl); }
  .oa-cta-title, .oa-cta-title--sm { max-width: none; }
  .oa-path__title, .oa-path__copy { max-width: none; }

  .oa-selector { flex-direction: column; gap: 10px; text-align: center; padding: 12px 20px; }
  .oa-btn-row .oa-btn { flex: 1 1 100%; }
  .oa-watermark--hero { opacity: .035; right: -30%; }
  .oa-facts__row { grid-template-columns: 1fr; gap: 4px; }
  .oa-facts__term { min-width: 0; }
}

@media (max-width: 560px) {
  /* La escala tipográfica del diseño se fijó sobre lienzos de escritorio: sus
     mínimos (40/52/64px) desbordan una pantalla de 375px. Se prolonga la misma
     curva hacia abajo en lugar de romper los titulares. */
  :root {
    /* En un ancho fijo, el número de líneas es ancho / anchura-de-carácter: al
       reducir el cuerpo caben más caracteres por línea y el titular ocupa menos
       líneas, no más. El de Empresas pasaba de siete líneas a 39px; a ~30px
       baja a cuatro. */
    /* Fluido y no fijo: dentro de una tarjeta con 26px de relleno, a 375px solo
       quedan ~275px utiles, y ahi un cuerpo fijo de 26px daba cinco lineas. */
    --text-2xl: clamp(22px, 6vw, 26px);
    --text-3xl: 28px;
    --text-4xl: clamp(26px, 6.6vw, 33px);
    --text-5xl: clamp(28px, 7.4vw, 37px);
    --text-6xl: clamp(31px, 8.4vw, 44px);
    /* Cuanto más pequeño el cuerpo, más interlineado proporcional necesita. */
    --leading-tight: 1.18;
  }

  .oa-pillars { grid-template-columns: 1fr; }
  .oa-card { padding: 26px; }
  .oa-step { grid-template-columns: 1fr; gap: 10px; }
  .oa-step__copy { grid-column: 1; }
  .oa-list li { font-size: var(--text-base); }
}

@media print {
  .oa-header, .oa-marquee-band, .oa-btn-row { display: none; }
  [data-reveal] { opacity: 1; transform: none; }
}