/* ═══════════════════════════════════════════════════════════════════════════
   TEMPUS GROUP · V1 · tokens.css
   Hoja de tokens, base y componentes del sistema de diseño.
   ───────────────────────────────────────────────────────────────────────────
   Qué hay aquí, en orden:
     0. Tipografías (Google Fonts)
     1. :root · colores, tipografía, escala fluida, espaciado, radios,
        sombras, anchos y movimiento
     2. Reset mínimo + base (body, títulos, párrafos, enlaces, foco)
     3. Botones  (.btn y variantes)
     4. Componentes base: .pastilla-hero · .capsula-cabecera · .tarjeta ·
        .fila-numerada · .tabla · .cifra · .filete · .banda · .banda--oscura
     5. Utilidades de contenedor y rejilla

   Reglas que no se negocian:
     · Ningún selector nombra una fuente ni un color en duro: todo sale de
       :root. Cambiar un token cambia toda la web (y el ajuste global de
       Elementor equivalente, ver DESIGN.md).
     · Un solo verde, el del logotipo (#50AFA4), en toda la web (David,
       22-10). Sobre claro da 2,62:1: que no haga de texto pequeño.
     · Escala fluida calculada de 360 → 1440 px con clamp(). Los
       line-heights van siempre sin unidad.
     · Contraste medido con WEBS KIT/contraste.py. Ver DESIGN.md.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 0 · TIPOGRAFÍAS ───────────────────────────────────────────────────────
   Manrope: grotesca geométrica, pesos 400 / 500 / 600 / 700 / 800. Encaja
   con el wordmark del logotipo (palo geométrico, bajo contraste, remates
   suaves) y a 800 da el «titular negrita» de la referencia Stripe.
   UNA SOLA FAMILIA EN TODA LA WEB. No hay monoespaciada: por decisión del
   cliente (David) no se usan antetítulos mono en versales, ni cuadraditos
   decorativos, ni títulos numerados. La única etiqueta permitida es la
   pastilla del hero (.pastilla-hero), en Manrope 500 caja baja.
   En Elementor: Ajustes del sitio → Tipografía → elegir «Manrope» del
   listado de Google Fonts. En la maqueta
   estática se cargan con este @import; en el <head> conviene añadir
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@500&display=swap');


/* ── 1 · TOKENS ────────────────────────────────────────────────────────── */
:root{
  /* ── Marca · oscuros casi negros, neutros (24-10: fuera los azules) ──── */
  --marino:#141413;            /* casi negro · tinta · fondos oscuros · 18,4:1 sobre blanco */
  --marino-2:#1E1E1C;          /* hover del botón secundario · superficies sobre marino */
  --marino-3:#2B2B28;          /* bordes y filetes sobre marino, rellenos de gráfico */
  /* David (22-10): TODOS los verdes son exactamente el del logotipo, #50AFA4.
     Los alias se mantienen para no tocar selectores; apuntan al mismo valor. */
  --turquesa:#50AFA4;          /* el del logotipo. Blanco encima 2,62:1 · marino encima 6,63:1 */
  --turquesa-logo:#50AFA4;
  --turquesa-antes:#50AFA4;
  --turquesa-hover:var(--marino); /* hover del botón: pasa a marino (no hay un segundo verde) */
  --turquesa-oscuro:#50AFA4;
  --turquesa-cifra:#50AFA4;
  --turquesa-claro:#E7F4F2;    /* lavado: el verde del logotipo al 14 % sobre blanco */
  --turquesa-velo:rgba(80,175,164,.14); /* el acento en transparencia, para hover de filas */

  /* ── Tinta y texto ───────────────────────────────────────────────────── */
  --tinta:var(--marino);       /* titulares y texto principal */
  --texto:#1E1D1A;             /* cuerpo de texto largo: marino rebajado, 14,5:1 */
  /* AAA (23-10): todo texto ≥ 7:1 sobre blanco, --aire y --gris-100 */
  --texto-2:#3A3935;           /* secundario · 11,56:1 blanco · 10,5:1 gris-100 */
  --texto-3:#4F4E4A;           /* terciario · 8,33:1 blanco · 7,57:1 gris-100 · el gris MÁS claro que pasa AAA */
  --texto-inverso:#FFFFFF;     /* sobre marino */
  --texto-inverso-2:#BEBDB8;   /* secundario sobre oscuro · 9,8:1 · 8,9:1 sobre marino-2 */
  --texto-sobre-verde:#0A0A09; /* texto de botón sobre el verde del logotipo · 7,55:1 */

  /* ── Grises cálidos · «lo de Stripe»: grises y tabla ─────────────────── */
  --gris-50:#F9F9F7;
  --gris-100:#F4F4F3;          /* la cápsula de cabecera (valor de Soluble) */
  --gris-200:#E9E8E5;
  --gris-300:#D9D8D3;
  --gris-400:#BDBCB6;          /* solo decorativo · 2,2:1 */
  --gris-500:#8A8984;          /* placeholders y texto deshabilitado · 3,5:1 (no para texto normal) */
  --gris-600:#6B6A65;          /* = --texto-3 */
  --gris-700:#55544F;          /* = --texto-2 */
  --gris-800:#3A3935;
  --gris-900:#1E1D1A;

  /* ── Superficies ─────────────────────────────────────────────────────── */
  --papel:#FFFFFF;             /* fondo por defecto */
  --aire:#F7F7F5;              /* bandas alternas · gris cálido mínimo */
  --superficie:#FFFFFF;        /* tarjetas, celdas, cápsulas sobre --aire */
  --superficie-2:var(--gris-100);

  /* ── Bordes y filetes ────────────────────────────────────────────────── */
  --borde:#E3E2DE;             /* filete estándar de tabla, tarjeta y lista */
  --borde-fuerte:#C9C8C2;      /* filete de cabecera de tabla, inputs */
  --borde-suave:rgba(20,20,19,.08);
  --filete-acento:var(--turquesa);

  /* ── Estados ─────────────────────────────────────────────────────────── */
  --ok:#50AFA4;                /* el verde del logotipo */
  --ok-fondo:#E6F3F1;
  --aviso:#6B4700;             /* AAA sobre blanco y sobre --aviso-fondo */
  --aviso-fondo:#FBF3E2;
  --error:#8F1C13;             /* AAA sobre blanco y sobre --error-fondo */
  --error-fondo:#FCEBE9;
  --foco:var(--marino);        /* el verde da 2,62:1 sobre claro: el anillo de foco va en marino (sobre oscuro, verde) */

  /* ── Tipografía ──────────────────────────────────────────────────────── */
  /* Referencia wafer.ai (23-10): titulares en DM Sans 500, H3 y texto en Space Grotesk */
  --f-titulos:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-texto:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Escala fluida 360 → 1440 px (interpolación lineal, root 16 px).
     Fórmula: slope=(max−min)/1080 · preferido = slope·100 vw + (min − slope·360)/16 rem */
  --t-display:clamp(2.5rem, 1.667rem + 3.704vw, 5rem);       /* 40 → 80 px */
  --t-h1:var(--t-h2);                                        /* 24-10: igual que H2 (60 y 52 duplicaban estilo) */
  --t-h2:clamp(2rem, 1.583rem + 1.852vw, 3.25rem);           /* 32 → 52 px · un único tamaño de titular de sección */
  --t-h3:clamp(1.25rem, 1.125rem + .556vw, 1.625rem);        /* 20 → 26 px */
  --t-lead:1.0625rem;                                        /* 17 px · entradillas a tamaño de párrafo (23-10) */
  --t-body:1.0625rem;                                        /* 17 px · párrafo (23-10) */
  --t-small:.875rem;                                         /* 14 px · etiquetas, botones, notas (24-10: antes 14 → 15) */
  --t-micro:.75rem;                                          /* 12 px · versales y créditos */
  --t-h2-s:clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);           /* 28 → 40 px · titular de fila / cifra pequeña */
  --t-gigante:clamp(4.5rem, 1rem + 10.5vw, 13.5rem);         /* 72 → 216 px · cifras y marca del pie */
  --t-cifra:clamp(3.5rem, 2.167rem + 5.926vw, 7.5rem);       /* 56 → 120 px */
  --t-nav:.875rem;                                           /* 14 px fijos (medida de Soluble) */

  /* Line-heights · sin unidad */
  --lh-display:1.0;
  --lh-h1:1.05;
  --lh-h2:1.1;
  --lh-h3:1.25;
  --lh-lead:1.5;               /* AAA 1.4.8: interlineado de párrafo ≥ 1,5 */
  --lh-body:1.6;
  --lh-small:1.5;
  --lh-cifra:.95;

  /* Letter-spacing · negativo en los titulares grandes, cero en el cuerpo,
     positivo en las versales (si no, se cierran) */
  --ls-display:-.035em;
  --ls-h1:-.03em;
  --ls-h2:-.025em;
  --ls-h3:-.015em;
  --ls-body:-.01em;            /* wafer.ai: texto con un pelo de tracking negativo */
  --ls-nav:-.01em;

  /* Pesos */
  --peso-regular:400;
  --peso-medio:500;
  --peso-semi:600;
  --peso-negrita:700;
  --peso-titular:500;          /* wafer.ai: titulares en DM Sans 500 (antes 800, el «titular negrita» de Stripe) */

  /* ── Espaciado fluido ────────────────────────────────────────────────── */
  --e-1:.25rem;                                          /* 4 */
  --e-2:.5rem;                                           /* 8 */
  --e-3:.75rem;                                          /* 12 */
  --e-4:1rem;                                            /* 16 */
  --e-5:clamp(1.25rem, 1.167rem + .370vw, 1.5rem);       /* 20 → 24 */
  --e-6:clamp(1.5rem, 1.333rem + .741vw, 2rem);          /* 24 → 32 */
  --e-7:clamp(2rem, 1.667rem + 1.481vw, 3rem);           /* 32 → 48 */
  --e-8:clamp(2.5rem, 2rem + 2.222vw, 4rem);             /* 40 → 64 */
  --e-9:clamp(3.5rem, 2.667rem + 3.704vw, 6rem);         /* 56 → 96 */
  --e-10:clamp(4.5rem, 3.333rem + 5.185vw, 8rem);        /* 72 → 128 */
  /* Sistema de espaciado de Alicia (23-10-2026) · diseño a 1920 px
     · rejilla 85 % en escritorio y portátil, 90 % en tablet y móvil (≤ 1024)
     · 20 px entre columnas · 88 px de relleno vertical de sección
     · 20 px entre título y párrafo; el resto, proporcional (40 / 60) */
  --seccion:88px;              /* relleno vertical de sección (64 en móvil) */
  --gap:20px;                  /* espacio entre columnas */
  --e-titulo:24px;             /* título → párrafo (23-10: de 20 a 24) */
  --e-cta:40px;                /* texto → botones / título → contenido corto (32 en móvil) */
  --e-bloque:60px;             /* cabecera de sección → contenido (40 en móvil) */
  --rejilla-r:.85;             /* ancho de la rejilla sobre el viewport */
  --gut:calc(100vw * (1 - var(--rejilla-r)) / 2);        /* margen lateral: 7,5 % · 5 % en tablet y móvil */
  /* --lat: margen interior de las secciones-tarjeta (sangradas 10 px como el hero):
     el contenido cae en la línea de la rejilla, con un mínimo de 20 px de aire */
  --lat:max(calc(var(--gut) - var(--cab-margen)), 20px);

  /* ── Radios ──────────────────────────────────────────────────────────── */
  --r-1:0;                   /* botones, chips, cápsula del hero (Soluble) */
  --r-2:0;                   /* cápsula de cabecera (Soluble) */
  --r-3:0;                   /* tarjetas, tarjeta del hero */
  --r-4:0;                  /* paneles grandes, imágenes */
  --r-pill:0;

  /* ── Sombras · suaves, difusas, teñidas de marino ────────────────────── */
  --sombra-1:0 1px 2px rgba(20,20,19,.04), 0 2px 8px rgba(20,20,19,.04);
  --sombra-2:0 2px 4px rgba(20,20,19,.04), 0 12px 32px -8px rgba(20,20,19,.10);
  --sombra-3:0 4px 8px rgba(20,20,19,.05), 0 24px 48px -12px rgba(20,20,19,.16);
  --sombra-foco:0 0 0 4px rgba(80,175,164,.35);

  /* ── Anchos ──────────────────────────────────────────────────────────── */
  --ancho-max:none;            /* cabecera, hero y bandas: a sangre, solo los 10 px de margen */
  --rejilla:calc(100vw - 2 * var(--gut)); /* ancho útil: 85 % (1632 px a 1920) · 90 % en tablet y móvil */
  --ancho-contenido:100%;      /* el contenedor ocupa todo; el margen lo pone --gut */
  --ancho-medio:1120px;        /* bloque de texto del hero (Soluble) */
  --ancho-texto:720px;         /* columna de lectura · ~64 ch a 17 px */
  --ancho-estrecho:560px;

  /* ── Cabecera cápsula (medidas de solublestudio.com, LEEME Heliox §4 bis) */
  --cab-alto:68px;
  --cab-margen:10px;           /* 10 px a los lados, 8 arriba */
  --cab-arriba:8px;
  --cab-fondo:var(--gris-100);
  --cab-radio:var(--r-2);
  --cab-logo:170px;            /* Juan (16:35): «no se lee GROUP»; David lo aprueba: 170 */

  /* ── Movimiento ──────────────────────────────────────────────────────── */
  --d-1:.18s;                  /* micro: color, opacidad */
  --d-2:.34s;                  /* medio: hover, subrayados, flecha */
  --d-3:.7s;                   /* entradas al scroll */
  --d-4:1.2s;                  /* contadores, arcos del mapa */
  --ease:cubic-bezier(.22,.61,.36,1);        /* salida suave, por defecto */
  --ease-suave:cubic-bezier(.32,.72,0,1);    /* larga y amortiguada, para entradas */
  --ease-entrada:cubic-bezier(.65,0,.35,1);  /* simétrica, para la flecha del botón */
  --ease-muelle:linear(0,.0018 1.2%,.0166 3.5%,.0722 7.4%,.1655 11.7%,.2891 16.3%,
      .4334 21.1%,.5859 25.8%,.7352 30.4%,.8716 34.9%,.9268 37.2%,.9743 39.5%,
      1.0141 41.9%,1.0464 44.5%,1.0674 46.7%,1.0819 49.2%,1.0879 52%,1.0854 55.3%,
      1.0759 59.2%,1.0576 64.6%,1.0339 71%,1.0113 79%,.9999 89%,1);
  --escalonado:70ms;           /* retardo entre elementos hermanos */
}
@media (max-width:1024px){:root{--rejilla-r:.9}}
@media (max-width:767px){:root{--seccion:64px;--e-cta:32px;--e-bloque:40px}}


/* ── 2 · RESET MÍNIMO + BASE ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--cab-alto) + var(--cab-arriba) + 16px);
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  background:var(--papel);
  color:var(--texto);
  font-family:var(--f-texto);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  font-weight:var(--peso-regular);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--f-titulos);
  color:var(--tinta);
  text-wrap:balance;
  font-variant-numeric:lining-nums;
}
h1,.h1{font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);font-weight:var(--peso-titular)}
h2,.h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-weight:var(--peso-titular)}
h3,.h3{font-family:var(--f-texto);font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:var(--peso-medio)} /* wafer.ai: H3 en Space Grotesk 500 */
h4,.h4{font-size:var(--t-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-h3);font-weight:var(--peso-semi)}
.display{font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--peso-titular);color:var(--tinta)}
.lead{font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--texto-2);font-weight:var(--peso-regular)}
.small,small{font-size:var(--t-small);line-height:var(--lh-small)}
.texto-2{color:var(--texto-2)}
.texto-3{color:var(--texto-3)}
.acento-texto{color:var(--tinta)}
p{margin:0;text-wrap:pretty}
p + p{margin-top:1.5em}       /* AAA 1.4.8: espacio entre párrafos ≥ 1,5 × */
ul,ol{margin:0;padding:0}
img,svg,video,picture{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
/* AAA: el verde no puede ser texto sobre claro; el enlace va en marino con subrayado verde */
a{color:var(--marino);text-decoration:underline;text-decoration-color:var(--turquesa);text-underline-offset:.18em;text-decoration-thickness:1px;transition:color var(--d-1) var(--ease),text-decoration-color var(--d-1) var(--ease)}
a:hover{color:var(--marino);text-decoration-color:currentColor}
strong,b{font-weight:var(--peso-negrita)}
hr{border:0;border-top:1px solid var(--borde);margin:var(--e-7) 0}
:focus-visible{outline:2px solid var(--foco);outline-offset:3px;border-radius:var(--r-1)}
::selection{background:var(--marino);color:#fff}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ── 3 · BOTONES ───────────────────────────────────────────────────────── */
/* Base: altura 44 (área táctil mínima; Soluble mide 43,6), radio 4, 14 px a
   peso 600 en versales con un pelo de tracking. La flecha, si la hay, va
   recortada en una ventana y entra desde la izquierda al pasar por encima
   (mecánica de Soluble). Todo botón tiene hover, active, focus y disabled. */
.btn{
  --btn-fondo:var(--turquesa);
  --btn-fondo-hover:var(--turquesa-hover);
  --btn-texto:var(--texto-sobre-verde); /* sobre el verde del logotipo: marino casi negro, ≥ 7:1 (AAA) */
  --btn-texto-hover:var(--btn-texto);
  --btn-borde:transparent;
  --btn-alto:44px;
  --btn-px:18px;
  --btn-tam:.875rem;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--btn-alto);padding:0 var(--btn-px);
  border:1px solid var(--btn-borde);border-radius:var(--r-1);
  background:var(--btn-fondo);color:var(--btn-texto);
  font-family:var(--f-texto);font-size:var(--btn-tam);font-weight:var(--peso-semi);
  line-height:1;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;
  white-space:nowrap;cursor:pointer;user-select:none;
  transition:background-color var(--d-2) var(--ease),color var(--d-2) var(--ease),
             border-color var(--d-2) var(--ease),transform var(--d-1) var(--ease),
             box-shadow var(--d-2) var(--ease);
}
.btn:hover{background:var(--btn-fondo-hover);color:var(--btn-texto-hover)}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:none;box-shadow:var(--sombra-foco)}
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--gris-200);color:var(--gris-500);border-color:transparent;
  cursor:not-allowed;transform:none;box-shadow:none;
}
/* La flecha: ventana de 13×13 que recorta; el svg entra desde la izquierda */
.btn__i{display:block;width:13px;height:13px;overflow:hidden;flex:0 0 auto}
.btn__i svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
  transform:translateX(-110%);transition:transform .55s var(--ease-entrada)}
.btn:hover .btn__i svg,.btn:focus-visible .btn__i svg{transform:none}
.btn:disabled .btn__i svg{transform:none}
@media (hover:none){.btn__i svg{transform:none}}

/* Variantes de color */
.btn--primario{--btn-fondo:var(--turquesa);--btn-fondo-hover:var(--turquesa-hover);--btn-texto:var(--texto-sobre-verde);--btn-texto-hover:#fff} /* verde con texto marino; hover marino con texto blanco */
.btn--secundario{--btn-fondo:var(--marino);--btn-fondo-hover:var(--marino-2);--btn-texto:#fff}
.btn--fantasma{--btn-fondo:transparent;--btn-fondo-hover:rgba(20,20,19,.06);--btn-texto:var(--marino);--btn-borde:var(--borde-fuerte)}
.btn--fantasma:hover{border-color:var(--marino)}
.btn--enlace{
  --btn-fondo:transparent;--btn-fondo-hover:transparent;--btn-texto:var(--marino);
  --btn-px:0;border-color:transparent;gap:8px;
}
.btn--enlace .btn__i svg{transform:none;transition:transform var(--d-2) var(--ease)}
.btn--enlace:hover .btn__i svg{transform:translateX(3px)}
.btn--enlace:hover{color:var(--btn-texto)}
.btn--enlace::after{content:"";position:absolute;left:0;right:100%;bottom:10px;height:1px;
  background:currentColor;transition:right var(--d-2) var(--ease)}
.btn--enlace:hover::after{right:0}
.btn--enlace:focus-visible{box-shadow:none;outline:2px solid var(--foco);outline-offset:4px}

/* Tamaños */
.btn--s{--btn-alto:36px;--btn-px:14px;--btn-tam:var(--t-small)}
.btn--m{--btn-alto:44px;--btn-px:18px;--btn-tam:.875rem}
.btn--l{--btn-alto:52px;--btn-px:24px;--btn-tam:.9375rem}
.btn--bloque{display:flex;width:100%}

/* Sobre fondo oscuro (dentro de .banda--oscura o con .btn--oscuro) */
.banda--oscura .btn--primario,.btn--oscuro.btn--primario{--btn-texto:var(--texto-sobre-verde);--btn-fondo-hover:#fff;--btn-texto-hover:var(--marino)} /* sobre marino el hover va a blanco */
.banda--oscura .btn--secundario,.btn--oscuro.btn--secundario{--btn-fondo:#fff;--btn-fondo-hover:var(--gris-200);--btn-texto:var(--marino)}
.banda--oscura .btn--fantasma,.btn--oscuro.btn--fantasma{--btn-texto:#fff;--btn-borde:rgba(255,255,255,.32);--btn-fondo-hover:rgba(255,255,255,.08)}
.banda--oscura .btn--fantasma:hover,.btn--oscuro.btn--fantasma:hover{border-color:#fff}
.banda--oscura .btn--enlace,.btn--oscuro.btn--enlace{--btn-texto:#fff}
.banda--oscura .btn--enlace:hover,.btn--oscuro.btn--enlace:hover{color:var(--turquesa)}
.banda--oscura .btn:disabled,.btn--oscuro:disabled{background:rgba(255,255,255,.08);color:rgba(255,255,255,.35)}
.banda--oscura .btn--enlace:focus-visible{outline-color:var(--turquesa)}

/* .btn-ing · botón «ingeniero» (23-10): esquinas vivas, poco relleno y la
   flecha en un cuadrado aparte, a 4 px. Es UN solo enlace con dos cajas.
   Negro sobre el gris del hero: texto blanco 21:1. Al pasar (solo color), verde del
   logotipo con texto casi negro (7,41:1). Alto 44 px (área táctil AAA). */
.btn-ing{
  --ing-fondo:#000;--ing-texto:#fff;--ing-alto:44px;
  display:inline-flex;align-items:stretch;gap:4px;min-height:var(--ing-alto);
  font-family:var(--f-texto);font-size:var(--t-small);font-weight:var(--peso-medio);line-height:1;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--ing-texto);
  white-space:nowrap;cursor:pointer;
}
.btn-ing__t,.btn-ing__i{display:flex;align-items:center;justify-content:center;background:var(--ing-fondo);color:var(--ing-texto);
  border-radius:0;transition:background-color var(--d-2) var(--ease),color var(--d-2) var(--ease)}
.btn-ing__t{padding:0 16px}
.btn-ing__i{width:var(--ing-alto);flex:0 0 auto;overflow:hidden}
.btn-ing__i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:square;stroke-linejoin:miter}
.btn-ing:hover,.btn-ing:focus-visible{color:var(--ing-texto)}
.btn-ing:hover .btn-ing__t,.btn-ing:hover .btn-ing__i,
.btn-ing:focus-visible .btn-ing__t,.btn-ing:focus-visible .btn-ing__i{--ing-fondo:var(--turquesa);--ing-texto:var(--texto-sobre-verde)}
.btn-ing:active{transform:translateY(1px)}
button.btn-ing{border:0;padding:0;background:none;font:inherit;font-family:var(--f-texto);font-size:var(--t-small);font-weight:var(--peso-medio);letter-spacing:.04em}
.btn-ing:disabled{cursor:not-allowed;transform:none}
.btn-ing:disabled .btn-ing__t,.btn-ing:disabled .btn-ing__i{--ing-fondo:var(--gris-200);--ing-texto:var(--texto-3)}
.btn-ing--bloque{display:flex;width:100%}
.btn-ing--bloque .btn-ing__t{flex:1 1 auto;justify-content:flex-start}
/* Dentro del menú: fuera el subrayado y el color de los enlaces del menú */
.nav .btn-ing{display:flex;align-items:stretch;color:var(--ing-texto);letter-spacing:.04em}
.nav .btn-ing::after{display:none}
.btn-ing:focus-visible{outline:2px solid var(--foco);outline-offset:3px;border-radius:0}

/* Grupo de botones */
.btns{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-4)}
.btns--centro{justify-content:center}


/* ── 4 · COMPONENTES BASE ──────────────────────────────────────────────── */

/* .pastilla-hero · LA ÚNICA ETIQUETA DE LA WEB ─────────────────────────
   Réplica de la pastilla de Soluble: fondo blanco, radio 4, relleno 5/10 y
   un cuadradito turquesa de 8×8. Texto en Manrope 500, caja baja, sin
   tracking. Va centrada encima del H1 del hero y en ningún otro sitio. */
.pastilla-hero{
  display:inline-flex;align-items:center;gap:12px;
  padding:8px 16px 8px 14px;border-radius:0; /* más aire (23-10): antes 5/10 y 8 de hueco · sin radio */
  background:var(--superficie);border:0;  /* sin filete (23-10) */
  font-family:"Manrope",system-ui,sans-serif;font-size:var(--t-small);line-height:1.4; /* la pastilla se queda en Manrope (23-10) */
  font-weight:var(--peso-medio);letter-spacing:0;color:var(--tinta);
}
.pastilla-hero{max-width:100%}
.pastilla-hero > span{min-width:0} /* el texto puede partir línea dentro de la pastilla (móvil) */
.pastilla-hero__sep{display:inline-block;margin:0 .7em;color:var(--texto-3)} /* inline-block: permite partir línea junto al punto */ /* separador con aire a los lados */
/* El cuadradito: 10 px, esquinas vivas, parpadea al cargar. Cuatro parpadeos
   (4,8 s) y se queda encendido: AAA 2.2.2 pide que lo que parpadea más de
   5 s se pueda detener. Con «reducir movimiento», quieto. */
.pastilla-hero::before{content:"";width:10px;height:10px;border-radius:0;background:var(--turquesa);flex:0 0 auto;
  animation:pastilla-parpadeo 1.2s steps(1,end) .8s 4}
@keyframes pastilla-parpadeo{0%{opacity:1}50%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.pastilla-hero::before{animation:none}}
.banda--oscura .pastilla-hero{background:rgba(255,255,255,.06);color:#fff}

/* .capsula-cabecera · valores de Soluble ──────────────────────────────── */
.capsula-cabecera{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:var(--cab-arriba) var(--cab-margen) 0;
}
.capsula-cabecera--estatica{position:relative}
.capsula-cabecera__in{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:var(--cab-alto);padding:0 8px 0 14px;
  background:var(--cab-fondo);border-radius:var(--cab-radio);
  max-width:var(--ancho-max);margin-inline:auto;
}
.capsula-cabecera__in::after{
  content:"";position:absolute;left:14px;right:8px;bottom:0;height:.5px;
  background:var(--borde-suave);pointer-events:none;
}
.capsula-cabecera__izq{display:flex;align-items:center;gap:40px;min-width:0}
.capsula-cabecera__logo{display:inline-flex;align-items:center;min-height:44px;flex:0 0 auto}
.capsula-cabecera__logo img,.capsula-cabecera__logo svg{width:var(--cab-logo);height:auto}
.nav{display:flex;align-items:center;gap:32px;list-style:none;flex-wrap:wrap}
.nav a{
  position:relative;display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--t-nav);line-height:1.4;letter-spacing:var(--ls-nav);font-weight:var(--peso-medio);
  text-transform:uppercase;color:var(--tinta);text-decoration:none;white-space:nowrap;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:12px;height:1.5px;
  background:var(--turquesa);transition:right var(--d-2) var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a:hover{color:var(--tinta)}
@media (max-width:900px){.nav{display:none}}

/* .tarjeta ────────────────────────────────────────────────────────────── */
.tarjeta{
  position:relative;display:flex;flex-direction:column;gap:var(--e-4);
  padding:var(--e-6);background:var(--superficie);
  border:1px solid var(--borde);border-radius:var(--r-3);
  transition:transform var(--d-2) var(--ease-suave),box-shadow var(--d-2) var(--ease-suave),border-color var(--d-2) var(--ease);
}
.tarjeta--elevada{box-shadow:var(--sombra-1)}
.tarjeta--interactiva{cursor:pointer}
.tarjeta--interactiva:hover{transform:translateY(-3px);box-shadow:var(--sombra-2);border-color:var(--borde-fuerte)}
.tarjeta--plana{background:var(--aire);border-color:transparent}
.tarjeta__media{margin:calc(var(--e-6) * -1) calc(var(--e-6) * -1) 0;overflow:hidden;
  border-radius:var(--r-3) var(--r-3) 0 0;aspect-ratio:16/10;background:var(--gris-200)}
.tarjeta__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-suave)}
.tarjeta--interactiva:hover .tarjeta__media img{transform:scale(1.04)}
.tarjeta__meta{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-4)}
.tarjeta__titulo{font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:var(--peso-negrita);color:var(--tinta)}
.tarjeta__pie{margin-top:auto;padding-top:var(--e-4);border-top:1px solid var(--borde);
  display:flex;justify-content:space-between;align-items:center;gap:var(--e-3)}
.tarjeta__hito{display:grid;gap:2px}
.tarjeta__hito dt{font-size:var(--t-small);line-height:var(--lh-small);color:var(--texto-3)}
.tarjeta__hito dd{margin:0;font-weight:var(--peso-semi);color:var(--tinta)}
.banda--oscura .tarjeta{background:var(--marino-2);border-color:rgba(255,255,255,.1)}
.banda--oscura .tarjeta--interactiva:hover{border-color:rgba(255,255,255,.24)}
.banda--oscura .tarjeta__pie{border-color:rgba(255,255,255,.12)}

/* .fila-numerada · 01, 02… con filete (referencia lista 01–05) ──────────
   El numeral es una referencia del cliente y se queda: Manrope, grande,
   peso 400, sin tracking. */
.filas-numeradas{list-style:none;border-top:1px solid var(--borde)}
.fila-numerada{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:var(--e-4) var(--e-6);padding:var(--e-5) 0;
  border-bottom:1px solid var(--borde);
  transition:background-color var(--d-2) var(--ease);
}
.fila-numerada__num{
  font-family:var(--f-titulos);font-size:var(--t-h2);line-height:1;font-weight:var(--peso-regular);
  letter-spacing:0;color:var(--gris-500);min-width:2.6ch;
  font-variant-numeric:tabular-nums lining-nums;align-self:center;
  transition:color var(--d-2) var(--ease);
}
.fila-numerada__titulo{font-family:var(--f-titulos);font-size:var(--t-h3);line-height:var(--lh-h3);
  letter-spacing:var(--ls-h3);font-weight:var(--peso-negrita);color:var(--tinta)}
.fila-numerada__accion{justify-self:end}
.fila-numerada__cuerpo{grid-column:2 / -1;color:var(--texto-2);max-width:var(--ancho-texto)}
.fila-numerada:hover .fila-numerada__num,.fila-numerada.is-activa .fila-numerada__num,
.fila-numerada[open] .fila-numerada__num{color:var(--turquesa-oscuro)}
/* Versión grande: el numeral en turquesa puro, permitido porque es ≥ 44 px (decorativo) */
.fila-numerada--grande .fila-numerada__num{font-weight:var(--peso-medio);
  font-size:var(--t-h1);line-height:1;letter-spacing:0;color:var(--turquesa)}
/* Como acordeón con <details>/<summary> */
details.fila-numerada{display:block}
details.fila-numerada summary{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:var(--e-4) var(--e-6);cursor:pointer;list-style:none}
details.fila-numerada summary::-webkit-details-marker{display:none}
details.fila-numerada .fila-numerada__cuerpo{padding-top:var(--e-4);padding-left:calc(2.6ch + var(--e-6))}
.fila-numerada__mas{width:20px;height:20px;position:relative;align-self:center}
.fila-numerada__mas::before,.fila-numerada__mas::after{content:"";position:absolute;top:50%;left:50%;
  background:var(--tinta);transform:translate(-50%,-50%);transition:transform var(--d-2) var(--ease)}
.fila-numerada__mas::before{width:14px;height:1.5px}
.fila-numerada__mas::after{width:1.5px;height:14px}
details[open] .fila-numerada__mas::after{transform:translate(-50%,-50%) rotate(90deg)}
@media (max-width:600px){
  .fila-numerada{grid-template-columns:auto 1fr;gap:var(--e-3) var(--e-4)}
  details.fila-numerada summary{grid-template-columns:auto 1fr auto;gap:var(--e-3) var(--e-4)}
  .fila-numerada__accion{grid-column:2}
  details.fila-numerada .fila-numerada__cuerpo{padding-left:0;grid-column:1 / -1}
}
.banda--oscura .filas-numeradas,.banda--oscura .fila-numerada{border-color:rgba(255,255,255,.14)}
.banda--oscura .fila-numerada__titulo{color:#fff}
.banda--oscura .fila-numerada__cuerpo{color:var(--texto-inverso-2)}
.banda--oscura .fila-numerada:hover .fila-numerada__num{color:var(--turquesa)}

/* .tabla · estilo Stripe: grises, filetes finos, sin bordes verticales ─── */
.tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla{
  width:100%;border-collapse:collapse;border-spacing:0;
  font-size:var(--t-small);line-height:var(--lh-small);
  font-variant-numeric:tabular-nums;
}
.tabla caption{text-align:left;font-size:var(--t-body);font-weight:var(--peso-negrita);
  color:var(--tinta);padding-bottom:var(--e-4)}
.tabla th,.tabla td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--borde)}
.tabla th:first-child,.tabla td:first-child{padding-left:0}
.tabla th:last-child,.tabla td:last-child{padding-right:0}
.tabla thead th{
  font-size:var(--t-small);font-weight:var(--peso-semi);
  color:var(--texto-3);
  border-bottom:1px solid var(--borde-fuerte);padding-top:0;padding-bottom:12px;
}
.tabla tbody th{font-weight:var(--peso-semi);color:var(--tinta)}
.tabla td{color:var(--texto-2)}
.tabla td.num,.tabla th.num{text-align:right}
.tabla tbody tr{transition:background-color var(--d-1) var(--ease)}
.tabla--hover tbody tr:hover{background:var(--aire)}
.tabla--zebra tbody tr:nth-child(even){background:var(--gris-50)}
.tabla--compacta th,.tabla--compacta td{padding:10px 12px}
.tabla--columnas td{color:var(--tinta);font-size:var(--t-body);padding:16px 16px}
.banda--oscura .tabla th,.banda--oscura .tabla td{border-color:rgba(255,255,255,.14)}
.banda--oscura .tabla thead th{border-color:rgba(255,255,255,.28);color:var(--texto-inverso-2)}
.banda--oscura .tabla tbody th{color:#fff}
.banda--oscura .tabla td{color:var(--texto-inverso-2)}
.banda--oscura .tabla--hover tbody tr:hover{background:rgba(255,255,255,.04)}

/* .cifra · número grande (gesto de Tenity / Heliox v1) ─────────────────── */
.cifra{display:grid;gap:var(--e-2);align-content:start}
.cifra__num{
  font-family:var(--f-titulos);font-size:var(--t-cifra);line-height:var(--lh-cifra);
  font-weight:var(--peso-titular);letter-spacing:-.04em;color:var(--tinta);
  font-variant-numeric:tabular-nums lining-nums;
}
.cifra__num sup,.cifra__num .cifra__pre{font-size:.45em;vertical-align:.55em;font-weight:var(--peso-negrita);
  letter-spacing:-.02em;color:var(--turquesa);margin-right:.05em}
.cifra__num .cifra__pre{vertical-align:baseline}
.cifra__txt{font-size:var(--t-small);line-height:var(--lh-small);color:var(--texto-2);max-width:22ch}
.cifra--acento .cifra__num{color:var(--turquesa)}     /* permitido: ≥ 56 px, decorativo */
.cifra--filete{padding-top:var(--e-4);border-top:1px solid var(--borde)}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--e-7) var(--e-6)}
.banda--oscura .cifra__num{color:#fff}
.banda--oscura .cifra--acento .cifra__num{color:var(--turquesa)}
.banda--oscura .cifra__txt{color:var(--texto-inverso-2)}
.banda--oscura .cifra--filete{border-color:rgba(255,255,255,.14)}

/* .filete ──────────────────────────────────────────────────────────────── */
.filete{border:0;border-top:1px solid var(--borde);margin:0}
.filete--fuerte{border-top-color:var(--borde-fuerte)}
.filete--acento{border-top:2px solid var(--turquesa);width:48px}
.filete--vertical{display:inline-block;width:1px;height:1.2em;background:var(--borde);vertical-align:middle;margin:0 var(--e-3)}
.banda--oscura .filete{border-top-color:rgba(255,255,255,.14)}
.banda--oscura .filete--acento{border-top-color:var(--turquesa)}

/* .banda · sección a sangre; .banda--aire y .banda--oscura ──────────────── */
.banda{padding-block:var(--seccion);background:var(--papel)}
.banda--aire{background:var(--aire)}
.banda--oscura{
  /* Reasignación de tokens: todo lo que esté dentro se invierte solo */
  --tinta:#FFFFFF;
  --texto:#FFFFFF;
  --texto-2:var(--texto-inverso-2);
  --texto-3:#B5B4AF;              /* 8,9:1 sobre marino · 8,0:1 sobre marino-2 (AAA) */
  --borde:rgba(255,255,255,.14);
  --borde-fuerte:rgba(255,255,255,.28);
  --borde-suave:rgba(255,255,255,.08);
  --superficie:var(--marino-2);
  --superficie-2:var(--marino-3);
  --aire:var(--marino-2);
  --gris-50:var(--marino-2);
  --foco:var(--turquesa);
  --turquesa-oscuro:var(--turquesa); /* sobre marino el turquesa puro sí pasa (6,63:1) */
  background:var(--marino);color:#fff;
}
.banda--oscura a{color:var(--turquesa)}
.banda--oscura a:hover{color:#fff}
.banda--oscura ::selection{background:var(--turquesa);color:var(--marino)}
.banda--marino-2{background:var(--marino-2)}


/* ── 5 · CONTENEDOR Y REJILLA ──────────────────────────────────────────── */
.contenedor{width:100%;max-width:var(--ancho-contenido);margin-inline:auto;padding-inline:var(--lat)} /* contenido = 85 % / 90 % del viewport (la sección va sangrada 10 px) */
.contenedor--ancho{max-width:var(--ancho-max)}
.contenedor--medio{max-width:var(--ancho-medio)}
.contenedor--texto{max-width:var(--ancho-texto)}
.contenedor--estrecho{max-width:var(--ancho-estrecho)}
.rejilla{display:grid;gap:var(--gap);grid-template-columns:repeat(12,minmax(0,1fr))}
.rejilla--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rejilla--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rejilla--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rejilla--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
@media (max-width:900px){.rejilla--3,.rejilla--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.rejilla,.rejilla--2,.rejilla--3,.rejilla--4{grid-template-columns:1fr}}
.pila{display:flex;flex-direction:column;gap:var(--e-4)}
.pila--s{gap:var(--e-2)} .pila--m{gap:var(--e-5)} .pila--l{gap:var(--e-7)}
.cabecera-seccion{display:grid;gap:var(--e-titulo);max-width:var(--ancho-medio);margin-bottom:var(--e-bloque)}
.cabecera-seccion--centro{text-align:center;margin-inline:auto;justify-items:center}

/* Animación de entrada (la maqueta la dispara por [data-anim] con GSAP o IO) */
[data-anim]{opacity:0;transform:translateY(18px);transition:opacity var(--d-3) var(--ease-suave),transform var(--d-3) var(--ease-suave)}
[data-anim].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-anim]{opacity:1;transform:none}}