/* Fuentes auto-hospedadas — GENERADO por scripts/bajar-fuentes.mjs.
   No editar a mano: se pisa al regenerar.

   Copia literal de los @font-face que sirve Google para
     family=Montserrat:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700
   con las URLs reescritas a nuestro dominio. Los unicode-range son los suyos:
   son ellos los que deciden que fichero baja cada visitante, y por eso el
   render es identico al de antes.

   Se conservan latin y latin-ext; el resto se descarta (el sitio es ES/PT/EN). */

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.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;
}

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.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;
}

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.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;
}

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.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;
}

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.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;
}

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.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;
}

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.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;
}

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.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;
}

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.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;
}

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.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;
}

/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gV8tenXg.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;
}

/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gb8tc.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;
}

/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gV8tenXg.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;
}

/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/vEFI2_tTDB4M7-auWDN0ahZJW1gb8tc.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;
}

/* ============================================================
   GREEN NORTH — tokens de marca (Brasil)
   ------------------------------------------------------------
   GENERADO — no editar a mano.
   Fuente: assets-src/brands/green-north.css
   Regenerar: npm run assets:build   ·   verificar: npm run assets:check
   ============================================================ */

:root {
  /* ---- Semantic (use these) ---- */
  --green: #0B3B2E;        /* institutional green — headings, dark bands */
  --green-deep: #04231A;   /* deepest green — footer, final CTA */
  --green-700: #12674C;    /* gradient midpoint on green */
  --action: #0E7A52;       /* primary action (rest) — 5.35:1 on white */
  --action-hover: #0A5F40; /* one step darker, same hue */
  --action-press: #07452F;
  --accent: #7FE0B4;       /* accent on green backgrounds — 10.5:1 on deep */

  /* ---- Legacy aliases (inherited stylesheets) ---- */
  --navy: var(--green);
  --navy-deep: var(--green-deep);
  --navy-700: var(--green-700);
  --blue: var(--action);
  --blue-hover: var(--action-hover);
  --blue-press: var(--action-press);
  --blue-link: var(--action);
  --sky: var(--accent);
  --gold: var(--action);
  --gold-bright: var(--accent);
  --gold-deep: var(--action-hover);

  --band: #F2F9F5;         /* alternating section band */
  --wash: #E3F3EB;         /* hover/selected wash */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --text: #101820;
  --muted: #5A6572;
  --line: #D3E5DC;
  --line-soft: #E4F0E9;
  --success: #128842;
  --error: #D60000;

  /* Type */
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Spacing scale (8px base) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px;

  /* Radius (banker's proportions) */
  --r-card: 12px;
  --r-btn: 8px;
  --r-chip: 999px;
  --r-sm: 8px;

  /* Shadow (green-tinted whisper elevation) */
  --shadow-sm: 0 1px 2px rgba(11,59,46,.06), 0 2px 8px rgba(11,59,46,.05);
  --shadow-md: 0 4px 14px rgba(11,59,46,.07), 0 12px 32px rgba(11,59,46,.06);
  --shadow-lg: 0 16px 40px rgba(11,59,46,.12), 0 30px 70px rgba(11,59,46,.10);
  --shadow-gold: 0 6px 18px rgba(14,122,82,.20); /* legacy name — now the action shadow */

  /* Layout */
  --maxw: 1180px;
  --header-h: 76px;
}

/* ============================================================
   THE OTHER THREE PALETTES ON THE TABLE
   Set data-palette on <html> to swap the whole site. Only the
   colour tokens change — structure, type and spacing are shared,
   so the four options are a fair comparison of hue alone.
   ============================================================ */

/* 1 — MATA. O padrão. Repetido aqui como bloco nomeado para que um
   elemento possa ser fixado em Mata mesmo com o <html> em outra paleta
   (é assim que palette-options.html compara as quatro lado a lado). */
[data-palette="mata"] {
  --green: #0B3B2E; --green-deep: #04231A; --green-700: #12674C;
  --action: #0E7A52; --action-hover: #0A5F40; --action-press: #07452F;
  --accent: #7FE0B4;
  --band: #F2F9F5; --wash: #E3F3EB; --line: #D3E5DC; --line-soft: #E4F0E9;
  --shadow-sm: 0 1px 2px rgba(11,59,46,.06), 0 2px 8px rgba(11,59,46,.05);
  --shadow-md: 0 4px 14px rgba(11,59,46,.07), 0 12px 32px rgba(11,59,46,.06);
  --shadow-lg: 0 16px 40px rgba(11,59,46,.12), 0 30px 70px rgba(11,59,46,.10);
  --shadow-gold: 0 6px 18px rgba(14,122,82,.20);
}

/* 2 — ESMERALDA. Saturated, modern, fintech register. The most
   "green card" of the four; reads newest, least institutional. */
[data-palette="esmeralda"] {
  --green: #06392A; --green-deep: #032018; --green-700: #0C7B57;
  --action: #00875A; --action-hover: #026B48; --action-press: #014F35;
  --accent: #6EE7B7;
  --band: #F1FAF6; --wash: #DFF5EB; --line: #CFE7DB; --line-soft: #E2F2EA;
  --shadow-sm: 0 1px 2px rgba(6,57,42,.06), 0 2px 8px rgba(6,57,42,.05);
  --shadow-md: 0 4px 14px rgba(6,57,42,.07), 0 12px 32px rgba(6,57,42,.06);
  --shadow-lg: 0 16px 40px rgba(6,57,42,.12), 0 30px 70px rgba(6,57,42,.10);
  --shadow-gold: 0 6px 18px rgba(0,135,90,.20);
}

/* 3 — SÁLVIA. Desaturated olive/sage. Quiet luxury, private-bank
   register. The most sober and the least "eco" of the four. */
[data-palette="salvia"] {
  --green: #2B3B2F; --green-deep: #1A241C; --green-700: #4A6B52;
  --action: #3F6B4A; --action-hover: #33573B; --action-press: #26412C;
  --accent: #A8D5B5;
  --band: #F4F7F4; --wash: #E7EFE8; --line: #DAE3DB; --line-soft: #E9EFEA;
  --shadow-sm: 0 1px 2px rgba(43,59,47,.06), 0 2px 8px rgba(43,59,47,.05);
  --shadow-md: 0 4px 14px rgba(43,59,47,.07), 0 12px 32px rgba(43,59,47,.06);
  --shadow-lg: 0 16px 40px rgba(43,59,47,.12), 0 30px 70px rgba(43,59,47,.10);
  --shadow-gold: 0 6px 18px rgba(63,107,74,.20);
}

/* 4 — PETRÓLEO. Blue-green teal. The bridge from the Green North navy —
   keeps the banking coolness while still reading green. */
[data-palette="petroleo"] {
  --green: #0A3A38; --green-deep: #05201F; --green-700: #0F6A66;
  --action: #00786F; --action-hover: #005E58; --action-press: #004541;
  --accent: #68DED4;
  --band: #F1F9F8; --wash: #DEF2F0; --line: #CFE4E2; --line-soft: #E2F1EF;
  --shadow-sm: 0 1px 2px rgba(10,58,56,.06), 0 2px 8px rgba(10,58,56,.05);
  --shadow-md: 0 4px 14px rgba(10,58,56,.07), 0 12px 32px rgba(10,58,56,.06);
  --shadow-lg: 0 16px 40px rgba(10,58,56,.12), 0 30px 70px rgba(10,58,56,.10);
  --shadow-gold: 0 6px 18px rgba(0,120,111,.20);
}

/* ============================================================
   FAMÍLIA CLARA / MINT — verdes mais frescos e leves.
   Mesma arquitetura: as faixas escuras continuam escuras (texto
   branco em AA) e a ação continua forte o bastante para o link
   passar sobre branco. O ar "menta/pastel" vem do acento, da
   faixa e do wash — não de um botão pálido, que quebraria o
   contraste do texto. Todos os pares críticos são AA.
   ============================================================ */

/* 5 — MENTA. Verde-azulado fresco, tônica de spa/clean beauty.
   O mais "respirável" da família fria. */
[data-palette="menta"] {
  --green: #0C4A3A; --green-deep: #05291F; --green-700: #147A5E;
  --action: #0A8058; --action-hover: #077048; --action-press: #05583A;
  --accent: #93EAC7;
  --band: #EEFBF5; --wash: #DBF5EA; --line: #CBEADD; --line-soft: #E0F4EC;
  --shadow-sm: 0 1px 2px rgba(12,74,58,.06), 0 2px 8px rgba(12,74,58,.05);
  --shadow-md: 0 4px 14px rgba(12,74,58,.07), 0 12px 32px rgba(12,74,58,.06);
  --shadow-lg: 0 16px 40px rgba(12,74,58,.12), 0 30px 70px rgba(12,74,58,.10);
  --shadow-gold: 0 6px 18px rgba(10,128,88,.20);
}

/* 6 — PASTEL. Verde suave e dessaturado, o mais leve e arejado.
   Registro friendly/lifestyle sem perder legibilidade. */
[data-palette="pastel"] {
  --green: #2F5D49; --green-deep: #1E3D30; --green-700: #4A8168;
  --action: #368059; --action-hover: #2C6B49; --action-press: #21543A;
  --accent: #B8E8CE;
  --band: #F3FAF6; --wash: #E6F4EC; --line: #D7E9DF; --line-soft: #E7F2EC;
  --shadow-sm: 0 1px 2px rgba(47,93,73,.06), 0 2px 8px rgba(47,93,73,.05);
  --shadow-md: 0 4px 14px rgba(47,93,73,.07), 0 12px 32px rgba(47,93,73,.06);
  --shadow-lg: 0 16px 40px rgba(47,93,73,.12), 0 30px 70px rgba(47,93,73,.10);
  --shadow-gold: 0 6px 18px rgba(54,128,89,.20);
}

/* 7 — DÓLAR. O verde da nota de dólar: acinzentado, sóbrio,
   "greenback". Puxa direto o argumento do dinheiro/green card. */
[data-palette="dolar"] {
  --green: #1F3B2E; --green-deep: #142619; --green-700: #356B4C;
  --action: #337150; --action-hover: #285C41; --action-press: #1E4632;
  --accent: #A7D3A0;
  --band: #F2F7F1; --wash: #E5EFE4; --line: #D6E3D5; --line-soft: #E6EEE5;
  --shadow-sm: 0 1px 2px rgba(31,59,46,.06), 0 2px 8px rgba(31,59,46,.05);
  --shadow-md: 0 4px 14px rgba(31,59,46,.07), 0 12px 32px rgba(31,59,46,.06);
  --shadow-lg: 0 16px 40px rgba(31,59,46,.12), 0 30px 70px rgba(31,59,46,.10);
  --shadow-gold: 0 6px 18px rgba(51,113,80,.20);
}

/* 8 — DUBAI CHOCOLATE. Pistache + chocolate: o verde-pistache é a
   marca, o tom mais profundo (footer, hero) é chocolate. Quente,
   gourmet, memorável — o mais distinto dos oito. */
[data-palette="dubai"] {
  --green: #3B5A24; --green-deep: #2A1B10; --green-700: #5E8A34;
  --action: #4E7328; --action-hover: #3E5C20; --action-press: #2E4518;
  --accent: #CDE3A2;
  --band: #F6F8EF; --wash: #ECF1DC; --line: #DEE7C7; --line-soft: #ECF1DA;
  --shadow-sm: 0 1px 2px rgba(42,27,16,.06), 0 2px 8px rgba(42,27,16,.05);
  --shadow-md: 0 4px 14px rgba(42,27,16,.07), 0 12px 32px rgba(42,27,16,.06);
  --shadow-lg: 0 16px 40px rgba(42,27,16,.12), 0 30px 70px rgba(42,27,16,.10);
  --shadow-gold: 0 6px 18px rgba(78,115,40,.20);
}


/* --- Literales de marca con alpha --------------------------------------
   Mismos valores que green-north.css llevaba embebidos antes del refactor. */
:root {
  --brand-rgb: 11,59,46;         /* #0B3B2E mata   */
  --brand-deepest-rgb: 4,35,26;  /* #04231A        */
  --action-rgb: 14,122,82;       /* #0E7A52        */
  --accent-rgb: 127,224,180;     /* #7FE0B4        */
  --brand-overlay-rgb: 4,35,26;  /* #04231A — mismo verde profundo que --brand-deepest-rgb */
  --rail-grad-from: var(--navy-700, var(--green-700));
  --caret-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230B3B2E' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ============================================================
   LOGO — Estrella Green North (simple 4-point north star; body in
   navy, the North point in sky blue — matches the favicon).
   Wordmark: spaced caps, institutional register (Chase-style
   lockup). --rose-* var names kept for compatibility.
   ============================================================ */
.logo {
  display: inline-flex; align-items: center; gap: 11px;
  --rose-hi: var(--navy);
  --rose-n-hi: var(--sky);
}
.logo .rose { width: 34px; height: 34px; flex: none; }
.logo .wordmark {
  font-weight: 700; font-size: 20px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--navy); display: inline-flex; align-items: baseline;
  transform: translateY(1px);
}
.logo.on-navy {
  --rose-hi: #fff;
  --rose-n-hi: var(--sky);
}
.logo.on-navy .wordmark { color: #fff; }

/* ============================================================

/* ── Ritmo vertical de la money page ────────────────────────────────────────
   Todo va bajo `[data-tenant="green-north"]` a propósito. `.section` y los
   headings de tarjeta viven en `shared/site.css`, que Rumbo también sirve:
   tocarlos allí cambiaría las dos marcas. El atributo del `<html>` da la
   especificidad para ganar sin depender del orden de concatenación —
   `brands/` se concatena ANTES que `shared/`, así que una regla plana
   perdería. */

/* Entre secciones había 102 px arriba y 102 abajo a 1280 px: 205 px de aire
   entre una idea y la siguiente. Se baja a 70 en escritorio y 48 en móvil,
   que sigue separando sin que la página se sienta despegada. */
[data-tenant="green-north"] .section { padding: clamp(var(--s7), 5.5vw, 72px) 0; }

/* Los títulos de tarjeta quedaban pegados a su párrafo —medido: 6 px en
   `.qualify-card`, 8 en `.ct-card`, 3 en `.qs-feature`—, así que el ojo leía
   título y texto como un bloque. Se les da un respiro proporcional al tamaño
   del título, no el mismo número a todos. */
[data-tenant="green-north"] .qualify-card h3,
[data-tenant="green-north"] .ct-card h3 { margin-bottom: var(--s3); }
[data-tenant="green-north"] .qs-feature h3 { margin-bottom: var(--s2); }

/* ============================================================
   SITIO — reglas compartidas por todas las marcas
   ------------------------------------------------------------
   GENERADO — no editar a mano.
   Fuente: assets-src/shared/site.css
   Regenerar: npm run assets:build   ·   verificar: npm run assets:check
   ============================================================ */

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* Keyboard focus ring (double ring, banking-grade visibility) */
:focus-visible { outline: 3px solid var(--blue-link); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .q-opt:focus-visible, .filter-chip:focus-visible { outline-offset: 3px; }
.on-navy:focus-visible, .hero a:focus-visible, .header .btn-gold:focus-visible { outline-color: var(--sky); }

/* ---------- Type scale ---------- */
.display {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(36px, 5.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h2.section-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--navy);
}
.eyebrow {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blue);
}
.lead {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--muted);
  font-weight: 400;
  line-height: 1.65;
  text-wrap: pretty;
}

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-band { background: var(--band); }
.section-head { max-width: 680px; margin: 0 auto var(--s7); text-align: center; }
.section-head .eyebrow { margin-bottom: var(--s3); display: inline-block; }
.section-head .lead { margin-top: var(--s4); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  padding: 15px 26px; border-radius: var(--r-btn);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}

/* Primary conversion CTA — the blue interaction ladder (Chase pattern).
   Class name .btn-gold is legacy; yellow is retired. No hover motion:
   interaction deepens the hue, it doesn't bounce. */
.btn-gold {
  background: var(--blue); color: #fff;
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover { background: var(--blue-hover); }
.btn-gold:active { background: var(--blue-press); }
/* Sobre banda oscura el CTA primario se invierte a blanco (patrón Citi).
   Es OPT-IN por clase en el propio botón, igual que `.btn-ghost.on-navy` y
   `.logo.on-navy`, que ya usaban esta convención.

   Antes era `.hero .btn-gold, .final-cta .btn-gold, …`: un selector de
   descendencia, que alcanzaba a TODO `.btn-gold` dentro de la banda. La
   tarjeta blanca del quiz vive dentro del hero, así que su CTA —el principal
   de conversión del home, en las dos marcas— se pintaba blanco sobre blanco,
   sin sombra ni borde. El texto se leía (navy sobre blanco, 11:1), pero el
   botón no parecía un botón. En Rumbo caía debajo del pliegue; por eso nadie
   lo vio.

   Un selector de contexto no puede saber que entró en una superficie clara.
   La clase sí: se pone donde se decide, y no se hereda hacia adentro. */
.btn-gold.on-navy {
  background: #fff; color: var(--blue-press); box-shadow: none;
}
.btn-gold.on-navy:hover { background: var(--wash); }
.btn-gold.on-navy:active { background: #D7E9FA; }

/* Primary blue action ladder: rest → hover → pressed, same hue deeper */
.btn-blue {
  background: var(--blue); color: #fff;
}
.btn-blue:hover { background: var(--blue-hover); }
.btn-blue:active { background: var(--blue-press); }

.btn-ghost {
  background: transparent; color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--navy);
}
.btn-ghost:hover { background: rgba(var(--action-rgb),.08); color: var(--blue-press); box-shadow: inset 0 0 0 1.5px var(--blue-press); }
.btn-ghost.on-navy { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.btn-ghost.on-navy:hover { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1.5px #fff; }
.btn-lg { padding: 18px 34px; font-size: 17px; }
.btn-block { width: 100%; }

/* WhatsApp chip */
.wa-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px;
  padding: 9px 15px; border-radius: var(--r-chip);
  background: rgba(18,136,66,.09); color: #0e6b34;
  transition: background .2s ease;
}
.wa-chip:hover { background: rgba(18,136,66,.16); }
.wa-chip svg { width: 17px; height: 17px; }


/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px rgba(var(--brand-rgb),.05);
}
.header .wrap { display: flex; align-items: center; gap: 28px; }
.nav { display: flex; align-items: center; gap: 26px; margin-left: 8px; }
.nav a {
  font-weight: 600; font-size: 14.5px; color: var(--navy); white-space: nowrap;
  position: relative; padding: 4px 0; transition: color .18s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: var(--blue); transition: width .22s ease; border-radius: 2px;
}
.nav a:hover { color: var(--blue-hover); }
.nav a:hover::after { width: 100%; }
.nav a.active { color: var(--blue-hover); }
.nav a.active::after { width: 100%; }

/* ---------- Desplegable de Visas (trigger + panel) ---------- */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; font-size: 14.5px; color: var(--navy); white-space: nowrap;
  position: relative; padding: 4px 0; transition: color .18s ease;
}
.nav-drop-btn::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: var(--blue); transition: width .22s ease; border-radius: 2px;
}
.nav-drop-btn:hover, .nav-drop-btn[aria-expanded="true"] { color: var(--blue-hover); }
.nav-drop-btn:hover::after, .nav-drop-btn[aria-expanded="true"]::after { width: 100%; }
.nav-caret {
  width: 12px; height: 12px; flex: none; position: relative; top: 1px;
  transition: transform .25s ease;
}
.nav-drop-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: calc(100% + 10px); left: -14px; z-index: 60;
  min-width: 320px; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(var(--brand-rgb), .14);
}
.nav-menu::before {
  /* puente invisible: mantiene el hover entre el botón y el panel */
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.nav-menu:not([hidden]) { animation: navMenuIn .18s ease; }
@keyframes navMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.nav .nav-menu a {
  display: block; white-space: normal; padding: 10px 12px; border-radius: 10px;
  transition: background .15s ease;
}
.nav .nav-menu a::after { content: none; }
.nav .nav-menu a:hover { background: var(--wash, #EAF3FC); color: var(--navy); }
.nav-menu a strong { display: block; font-size: 14px; font-weight: 700; color: var(--navy); }
.nav-menu a span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--muted); }
.nav .nav-menu a.nav-menu-all {
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px;
  font-size: 13px; font-weight: 700; color: var(--blue);
}
.nav .nav-menu a.nav-menu-all:hover { color: var(--blue-hover); background: none; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.header-cta { padding: 11px 20px; font-size: 14.5px; }

/* Selector de idioma (ES · PT · EN) */
.lang-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.lang-toggle button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--muted); padding: 5px 9px; border-radius: 7px; line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.lang-toggle button:hover { color: var(--navy); background: var(--wash); }
.lang-toggle button.on { color: #fff; background: var(--navy); }
.lang-toggle button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 980px) { .header-right .lang-toggle { display: none; } }

/* Aviso de traducción parcial — sólo aparece en PT/EN. Borrar junto con el
   bloque NOTICE de i18n.js cuando el cuerpo esté traducido. */
.i18n-notice {
  background: var(--wash); border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 13px; line-height: 1.45;
  padding: 9px 20px; text-align: center;
}

/* Mobile menu button */
.burger { display: none; width: 42px; height: 42px; border-radius: 10px; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); }
.burger span { display: block; width: 18px; height: 2px; background: var(--navy); position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--navy); }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 130% at 78% 8%, var(--navy-700) 0%, var(--navy) 42%, var(--navy-deep) 100%);
  color: #fff;
  padding: clamp(56px, 8vw, 92px) 0 clamp(64px, 9vw, 104px);
}
/* Hero background slideshow — slow crossfade + Ken Burns drift */
.hero-slides { position: absolute; inset: 0; overflow: hidden; }
.hero-slides .hs {
  position: absolute; inset: 0;
  background-position: center; background-size: cover;
  opacity: 0; transition: opacity 1.8s ease;
  will-change: opacity, transform;
}
.hero-slides .hs.on { opacity: 1; animation: hs-ken 16s ease-out forwards; }
@keyframes hs-ken { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--brand-rgb),.95) 0%, rgba(var(--brand-rgb),.85) 40%, rgba(var(--brand-deepest-rgb),.55) 100%);
}
.hero canvas.starfield { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; }
.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
/* Plain typographic label — no pill/bubble (de-bubbled jul 2026) */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 22px;
}
.hero-eyebrow .star { width: 15px; height: 15px; }
.hero h1 { color: #fff; }
.hero .lead { color: rgba(255,255,255,.8); margin-top: 22px; max-width: 540px; }
.hero-actions { display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }

/* Trust strip */
.trust-strip {
  display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap;
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.trust-item { display: flex; flex-direction: column; gap: 2px; }
.trust-item .num { font-weight: 800; font-size: 30px; color: #fff; letter-spacing: -.02em; line-height: 1; }
.trust-item .num .g { color: var(--sky); }
.trust-item .lbl { font-size: 12.5px; color: rgba(255,255,255,.66); font-weight: 600; }
.trust-stars { display: inline-flex; gap: 2px; margin-bottom: 3px; }
.trust-stars svg { width: 14px; height: 14px; }

/* Hero quiz card */
.hero-quiz-card {
  background: var(--surface); border-radius: var(--r-card);
  padding: 26px; box-shadow: var(--shadow-lg); color: var(--text);
  position: relative;
}
.hero-quiz-card .badge2 {
  position: absolute; top: -14px; right: 22px;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 12px;
  padding: 6px 13px; border-radius: var(--r-chip); box-shadow: var(--shadow-sm);
}
.hero-quiz-card h3 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
.hero-quiz-card p { font-size: 14px; color: var(--muted); margin: 8px 0 18px; }
.hqc-preview { display: grid; gap: 9px; margin-bottom: 18px; }
.hqc-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-weight: 600; font-size: 14px; transition: all .18s ease; background: var(--surface);
  color: var(--navy);
}
.hqc-opt:hover { border-color: var(--blue); background: var(--wash); }
.hqc-opt .dot { width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.hqc-opt:hover .dot { border-color: var(--blue); }
.hqc-meta { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); margin-top: 14px; justify-content: center; }

/* ============================================================
   TRUST CAROUSEL (gallery pattern: header + arrows, snap track)
   ============================================================ */
.tcar-section { padding-top: clamp(40px, 6vw, 72px); }
.tcar-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 30px;
}
.tcar-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-weight: 700; font-size: 15px; color: var(--blue-link);
}
.tcar-link svg { width: 17px; height: 17px; transition: transform .2s ease; }
.tcar-link:hover svg { transform: translate(3px, -3px); }
.tcar-nav { display: flex; gap: 10px; }
.tcar-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--line); color: var(--navy); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.tcar-btn svg { width: 19px; height: 19px; }
.tcar-btn:hover:not(:disabled) { border-color: var(--blue); background: var(--wash); color: var(--blue-press); }
.tcar-btn:disabled { opacity: .35; cursor: default; }
.tcar-track {
  display: flex; gap: 18px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 4px 8px; margin: -4px -4px 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tcar-track::-webkit-scrollbar { display: none; }
.tcar-track.dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.tcar-card {
  scroll-snap-align: start; flex: 0 0 min(360px, 82vw);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tcar-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); }
.tcar-card h3 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
.tcar-card p { font-size: 14px; color: var(--muted); line-height: 1.55; flex: 1; }
.tcar-card .tc-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; color: var(--blue-link); }
.tcar-card .tc-link svg { width: 16px; height: 16px; transition: transform .2s ease; }
.tcar-card:hover .tc-link svg { transform: translateX(4px); }
.chip-ic {
  width: 48px; height: 48px; border-radius: 12px; flex: none;
  background: var(--wash);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(var(--action-rgb),.18);
}
.chip-ic svg { width: 26px; height: 26px; }

/* ============================================================
   QUIZ BAND (bottom-of-page conversion band — navy register)
   ============================================================ */
.quiz-band { position: relative; overflow: hidden; }
.quiz-band-inner {
  background: radial-gradient(120% 140% at 85% 0%, var(--navy-700), var(--navy) 55%, var(--navy-deep));
  border-radius: var(--r-card); padding: clamp(34px, 5vw, 52px);
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  position: relative; overflow: hidden; color: #fff;
  box-shadow: var(--shadow-lg);
  --rose-hi: #fff; --rose-n-hi: var(--sky); --rose-ring: var(--sky);
}
.quiz-band .eyebrow { color: var(--sky); }
.quiz-band h2 { color: #fff; font-family: var(--font-serif); font-size: clamp(26px, 3.4vw, 38px); font-weight: 600; letter-spacing: -.012em; max-width: 620px; margin-top: 8px; }
.quiz-band p { color: rgba(255,255,255,.8); font-weight: 500; margin-top: 12px; }
.band-compass { position: absolute; right: -40px; bottom: -60px; width: 240px; height: 240px; opacity: .12; }
@media (max-width: 860px) { .quiz-band-inner { grid-template-columns: 1fr; } }

/* ============================================================
   VISA ACCORDION-FEATURE (accordion left, live preview right)
   ============================================================ */
.vacc-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.vacc-item { border-bottom: 1px solid var(--line); }
.vacc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 4px; text-align: left;
}
.vacc-trigger .code { font-weight: 800; font-size: 12.5px; letter-spacing: .04em; color: var(--blue); display: block; }
.vacc-trigger .vacc-h {
  display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em;
  color: var(--muted); margin-top: 4px; transition: color .2s ease;
}
.vacc-item.open .vacc-trigger .vacc-h { color: var(--navy); }
.vacc-trigger:hover .vacc-h { color: var(--navy); }
.vacc-chev {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--wash); display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease, background .3s ease;
}
.vacc-chev svg { width: 14px; height: 14px; stroke: var(--blue); }
.vacc-item.open .vacc-chev { transform: rotate(180deg); background: var(--blue); }
.vacc-item.open .vacc-chev svg { stroke: #fff; }
.vacc-content { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.vacc-content-inner { padding: 0 4px 22px; }
.vacc-content-inner p { font-size: 15px; color: var(--muted); line-height: 1.6; max-width: 480px; }
.vacc-content-inner .vlink { margin-top: 14px; font-weight: 700; font-size: 14px; color: var(--blue-link); display: inline-flex; align-items: center; gap: 7px; }
.vacc-content-inner .vlink svg { width: 16px; height: 16px; }

.vacc-panel {
  position: sticky; top: calc(var(--header-h) + 24px);
  background: radial-gradient(120% 140% at 85% 0%, var(--navy-700), var(--navy) 55%, var(--navy-deep));
  border-radius: var(--r-card); padding: clamp(28px, 3vw, 40px);
  color: #fff; min-height: 400px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  --rose-hi: #fff; --rose-n-hi: var(--sky); --rose-ring: var(--sky);
}
.vacc-panel .vp-rose { position: absolute; right: -50px; bottom: -60px; width: 240px; height: 240px; opacity: .1; }
.vacc-panel-inner { position: relative; z-index: 2; transition: opacity .22s ease, transform .22s ease; }
.vacc-panel-inner.swap { opacity: 0; transform: translateY(8px); }
.vacc-panel .vp-code { font-weight: 800; font-size: 13px; letter-spacing: .05em; color: var(--sky); margin-bottom: 8px; }
.vacc-panel .vp-title {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -.012em; color: #fff;
}
.vacc-panel .vp-desc { font-size: 15px; color: rgba(255,255,255,.78); line-height: 1.6; margin-top: 12px; max-width: 420px; }
.vacc-panel .vp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.vacc-panel .featured-badge { margin-bottom: 14px; }

@media (max-width: 1000px) {
  .vacc-grid { grid-template-columns: 1fr; }
  .vacc-panel { display: none; }
}
/* Desktop: the navy panel shows the step text, so the accordion keeps
   only the titles — no duplicated copy on both sides. */
@media (min-width: 1001px) {
  .vacc-content { display: none; }
}

/* ============================================================
   VISA PATHWAYS — bento grid
   ============================================================ */
.visa-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  grid-auto-rows: 1fr;
}
.visa-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 26px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.visa-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue); }
.visa-card .code { font-weight: 800; font-size: 13px; letter-spacing: .04em; color: var(--blue); }
.visa-card h3 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin: 8px 0 8px; color: var(--navy); }
.visa-card p { font-size: 14px; color: var(--muted); line-height: 1.55; flex: 1; }
.visa-card .vlink { margin-top: 18px; font-weight: 700; font-size: 14px; color: var(--blue-link); display: inline-flex; align-items: center; gap: 7px; }
.visa-card .vlink:hover { color: var(--blue-hover); }
.visa-card .vlink svg { width: 16px; height: 16px; transition: transform .2s ease; }
.visa-card:hover .vlink svg { transform: translateX(4px); }
.visa-card.featured {
  grid-column: span 2; grid-row: span 1;
  background: radial-gradient(120% 140% at 85% 0%, var(--navy-700), var(--navy) 55%, var(--navy-deep));
  color: #fff; border-color: var(--navy);
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 24px; align-items: center;
}
.visa-card.featured:hover { border-color: var(--blue); }
.visa-card.featured .code { color: var(--sky); }
.visa-card.featured h3 { font-size: 30px; color: #fff; }
.visa-card.featured p { color: rgba(255,255,255,.78); font-size: 15px; }
.visa-card.featured .vlink { color: var(--sky); }
.featured-badge {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--sky); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 14px; width: fit-content;
}
.featured-badge svg { width: 14px; height: 14px; }
.feat-side { display: flex; flex-direction: column; gap: 12px; }
.feat-stat { background: rgba(255,255,255,.06); border: 1px solid rgba(var(--accent-rgb),.18); border-radius: 12px; padding: 14px 16px; }
.feat-stat .fs-num { font-weight: 800; font-size: 22px; color: var(--sky); }
.feat-stat .fs-lbl { font-size: 12.5px; color: rgba(255,255,255,.66); font-weight: 600; }

/* ============================================================
   TU RUMBO — 7-step timeline
   ============================================================ */
.rumbo-steps { position: relative; margin-top: 12px; }
.steps-track {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0;
  position: relative;
}
.step-rail {
  position: absolute; top: 27px; left: 7%; right: 7%; height: 3px;
  background: var(--line); border-radius: 3px; overflow: hidden;
}
.step-rail .beam {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--sky));
  border-radius: 3px; transition: width 1.8s cubic-bezier(.2,.7,.2,1);
}
.step {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 8px; position: relative; z-index: 2;
}
.step-num {
  width: 56px; height: 56px; border-radius: 50%; background: var(--surface);
  border: 3px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 19px; color: var(--muted);
  transition: all .4s ease; box-shadow: var(--shadow-sm);
}
.step.lit .step-num { border-color: var(--blue); color: var(--navy); }
/* Destination: solid action blue */
.step.final .step-num { background: var(--blue); border-color: var(--blue); }
.step.final .step-num svg { width: 26px; height: 26px; }
.step h4 { font-size: 15px; font-weight: 800; margin-top: 16px; letter-spacing: -.01em; color: var(--navy); }
.step p { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.steps-foot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-top: 40px; font-weight: 600; font-size: 14.5px; color: var(--muted); text-align: center; }
.steps-foot .sf-row { display: flex; align-items: center; gap: 10px; }
.steps-foot svg { width: 18px; height: 18px; flex: none; }
.steps-foot .sf-sub { font-size: 13px; font-weight: 500; color: var(--muted); }

/* ============================================================
   PROOF / TESTIMONIALS
   ============================================================ */
.proof-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 38px; }
.google-rate { display: flex; align-items: center; gap: 14px; }
.google-rate .gr-num { font-weight: 800; font-size: 38px; letter-spacing: -.02em; color: var(--navy); }
.google-rate .gr-meta { font-size: 13px; color: var(--muted); font-weight: 600; }
.google-rate .gr-stars { display: flex; gap: 2px; margin-bottom: 3px; }
.google-rate .gr-stars svg { width: 16px; height: 16px; }

.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 26px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
}
.tcard .tstars { display: flex; gap: 2px; margin-bottom: 14px; }
.tcard .tstars svg { width: 15px; height: 15px; }
.tcard blockquote { font-size: 15px; line-height: 1.6; font-weight: 400; color: var(--text); flex: 1; text-wrap: pretty; }
.tcard .tperson { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.tcard .tavatar { width: 46px; height: 46px; border-radius: 50%; flex: none; background: linear-gradient(150deg, var(--navy-700), var(--navy)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; }
.tcard .tname { font-weight: 800; font-size: 14.5px; color: var(--navy); }
.tcard .trole { font-size: 12.5px; color: var(--muted); }
.tcard .tvisa { margin-left: auto; font-weight: 700; font-size: 11.5px; color: var(--blue-hover); background: var(--wash); padding: 5px 10px; border-radius: var(--r-chip); }

/* ============================================================
   GUARANTEE
   ============================================================ */
.guarantee {
  background: radial-gradient(120% 130% at 15% 10%, var(--navy-700), var(--navy) 50%, var(--navy-deep));
  color: #fff;
}
.guar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.guar-box {
  background: rgba(255,255,255,.05); border: 1px solid rgba(var(--accent-rgb),.35);
  border-radius: var(--r-card); padding: 34px; position: relative; overflow: hidden;
}
.guar-seal { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.guar-seal .seal { width: 56px; height: 56px; flex: none; }
.guar-seal .seal-txt { font-weight: 800; font-size: 18px; }
.guar-box .big { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: #fff; }
.guar-box .big .g { color: var(--sky); }
.guar-box .fine { font-size: 13.5px; color: rgba(255,255,255,.65); margin-top: 14px; line-height: 1.55; }
.guarantee .eyebrow { color: var(--sky); }
.guarantee h2 { color: #fff; }
.honesty {
  margin-top: 22px; padding: 20px 22px; border-left: 3px solid var(--sky);
  background: rgba(255,255,255,.04); border-radius: 0 12px 12px 0;
  font-size: 16px; line-height: 1.55; font-weight: 400; color: rgba(255,255,255,.9); font-style: italic;
}

/* ============================================================
   COST TRANSPARENCY
   ============================================================ */
.cost-table { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 920px; margin: 0 auto; }
.cost-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; }
.cost-col.inc { border-color: rgba(18,136,66,.4); }
.cost-col.exc { border-color: var(--line); }
.cost-col h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; margin-bottom: 18px; color: var(--navy); }
.cost-col h3 .pill { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.cost-col.inc .pill { background: rgba(18,136,66,.12); }
.cost-col.exc .pill { background: var(--band); }
.cost-col h3 .pill svg { width: 15px; height: 15px; }
.cost-list li { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; font-weight: 500; }
.cost-list li:first-child { border-top: none; }
.cost-list li svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.cost-note { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 22px; }

/* ============================================================
   RUMBO CLUB
   ============================================================ */
.club { background: linear-gradient(180deg, #fff 0%, var(--band) 100%); }
.club-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.club-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px;
  display: flex; align-items: center; gap: 15px; transition: all .2s ease;
}
.club-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.club-ic { width: 44px; height: 44px; border-radius: 11px; background: var(--wash); display: flex; align-items: center; justify-content: center; flex: none; }
.club-ic svg { width: 23px; height: 23px; }
.club-card h4 { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
.club-card p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ============================================================
   AUTHORITY ROW
   ============================================================ */
.authority { padding: clamp(40px,6vw,68px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--band); }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; max-width: 900px; margin: 0 auto; }
.auth-feature { display: flex; gap: 16px; align-items: center; }
.auth-feature .auth-avatar { width: 64px; height: 64px; border-radius: 14px; flex: none; background: linear-gradient(150deg, var(--navy-700), var(--navy)); display: flex; align-items: center; justify-content: center; }
.auth-feature .auth-avatar svg { width: 32px; height: 32px; }
.auth-feature h4 { font-size: 16px; font-weight: 800; color: var(--navy); }
.auth-feature p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.auth-logos { display: flex; flex-wrap: wrap; gap: 14px; }
.auth-logo { height: 34px; padding: 0 18px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px dashed var(--line); border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .03em; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; align-items: center; gap: 16px; justify-content: space-between;
  padding: 22px 4px; text-align: left; font-weight: 700; font-size: 17px; color: var(--navy); letter-spacing: -.01em;
}
.faq-q .faq-ic { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--wash); display: flex; align-items: center; justify-content: center; transition: transform .3s ease, background .3s ease; }
.faq-q .faq-ic svg { width: 14px; height: 14px; }
.faq-item.open .faq-q .faq-ic { transform: rotate(45deg); background: var(--blue); }
.faq-item.open .faq-q .faq-ic svg { stroke: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a-inner { padding: 0 4px 22px; font-size: 15px; color: var(--muted); line-height: 1.6; max-width: 660px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta { position: relative; overflow: hidden; background: var(--navy-deep); color: #fff; }
.final-cta .imgslot { position: absolute; inset: 0; z-index: 0; }
.final-cta .overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--navy-deep) 18%, rgba(var(--brand-overlay-rgb),.86) 55%, rgba(var(--brand-overlay-rgb),.6)); }
.final-cta .wrap { position: relative; z-index: 2; }
.final-inner { max-width: 620px; padding: clamp(56px,8vw,96px) 0; }
.final-cta h2 { color: #fff; font-size: clamp(28px,4vw,46px); }
.final-cta .lead { color: rgba(255,255,255,.82); margin-top: 18px; }
.final-actions { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--navy-deep); color: rgba(255,255,255,.72); padding: 64px 0 32px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer .logo .wordmark { color: #fff; }
.foot-about { font-size: 14px; line-height: 1.6; margin: 18px 0; max-width: 300px; color: rgba(255,255,255,.62); }
.foot-col h5 { color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 16px; }
.foot-col a { display: block; font-size: 14px; padding: 6px 0; color: rgba(255,255,255,.68); transition: color .18s ease; }
.foot-col a:hover { color: var(--sky); }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 48px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; color: rgba(255,255,255,.52); }
.foot-socials { display: flex; gap: 10px; }
.foot-socials a { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; }
.foot-socials a:hover { background: var(--blue); color: #fff; }
.foot-socials svg { width: 17px; height: 17px; }

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
.mobile-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); gap: 10px;
}
.mobile-cta .btn-gold { flex: 1; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in { opacity: 1; transform: none; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.d1.in { transition-delay: .08s; } .reveal.d2.in { transition-delay: .16s; }
.reveal.d3.in { transition-delay: .24s; } .reveal.d4.in { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-quiz-card { max-width: 460px; }
  .visa-card.featured { grid-column: span 3; grid-template-columns: 1fr; }
  .auth-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 1060px) {
  .header .wrap { gap: 18px; }
  .nav { gap: 18px; margin-left: 0; }
  .nav a { font-size: 13.5px; }
  .header .wa-chip { display: none; }
}
@media (max-width: 860px) {
  .nav, .header-cta, .header .wa-chip { display: none; }
  .burger { display: flex; }
  .chips-row { grid-template-columns: 1fr; margin-top: 28px; }
  .visa-grid { grid-template-columns: 1fr 1fr; }
  .visa-card.featured { grid-column: span 2; }
  .tcards { grid-template-columns: 1fr; }
  .club-grid { grid-template-columns: 1fr 1fr; }
  .guar-grid, .cost-table { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .steps-track { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .step-rail { display: none; }
  .mobile-cta { display: flex; }
  body.has-mobile-cta { padding-bottom: 78px; }
}
@media (max-width: 540px) {
  .wrap { padding: 0 18px; }
  .visa-grid, .club-grid { grid-template-columns: 1fr; }
  .visa-card.featured { grid-column: span 1; }
  .steps-track { grid-template-columns: 1fr; }
  .trust-strip { gap: 16px; }
  .trust-item .num { font-size: 24px; }
  .hero-actions .btn { width: 100%; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* Testimonial avatar photos */
.tavatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Photo slots (destinos, article covers, featured post) */
.dest-media img, .art-cover img, .fp-cover img, .post-cover img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border-radius: inherit;
}
.art-cover, .fp-cover { position: relative; overflow: hidden; }

/* Step-panel photo (accordion feature) */
.vacc-panel .vp-photo { margin-top: 20px; border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; position: relative; }
.vacc-panel .vp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   FOOTNOTE DISCIPLINE (Manifest-inspired, 2026-07-11): every
   stat carries a visible source/attribution note.
   ============================================================ */
.stat-foot {
  font-size: 11.5px; font-weight: 500; line-height: 1.55;
  color: var(--muted); max-width: 640px; margin-top: 18px;
}
.stat-foot.on-navy { color: rgba(255,255,255,.55); }
.guar-tag {
  margin-top: 16px; font-weight: 700; font-size: 14.5px;
  color: var(--navy); letter-spacing: .01em;
}
.art-disclaimer {
  margin-top: 34px; padding: 14px 16px; border-left: 3px solid var(--line);
  background: var(--wash); border-radius: 8px;
  font-size: 13px; line-height: 1.6; color: var(--muted);
}

/* ============================================================
   VISA COMPARISON TABLE (#comparar) — banking register; the
   table scrolls horizontally inside .cmp-scroll on small screens.
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-card); box-shadow: var(--shadow-md); background: var(--surface); }
.cmp-table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 14.5px; }
.cmp-table thead th {
  background: var(--navy); color: #fff; text-align: left;
  font-size: 15px; letter-spacing: .02em; padding: 16px 18px;
}
.cmp-table thead th:first-child { border-top-left-radius: var(--r-card); }
.cmp-table thead th:last-child { border-top-right-radius: var(--r-card); }
.cmp-table tbody th {
  text-align: left; font-weight: 700; color: var(--navy);
  padding: 14px 18px; background: var(--band); white-space: nowrap;
}
.cmp-table tbody td { padding: 14px 18px; color: var(--text); line-height: 1.45; vertical-align: top; }
.cmp-table tbody tr { border-bottom: 1px solid var(--line-soft); }
.cmp-table tbody tr:last-child { border-bottom: none; }
.cmp-table td.yes { color: var(--success); font-weight: 600; }
.cmp-table .cmp-links td a { color: var(--blue-link); font-weight: 700; }
.cmp-table .cmp-links td a:hover { text-decoration: underline; }
.cmp-table .cmp-links th, .cmp-table .cmp-links td { padding-top: 10px; padding-bottom: 16px; }

/* ============================================================
   CountrySelector — combobox de países compartido
   ------------------------------------------------------------
   Marca-agnóstico: todo sale de tokens (--line, --action, --wash…),
   que cada marca define en assets-src/brands/. Ningún literal de
   color acá — el CI lo verifica.

   El markup lo genera shared/countries/country-selector.ts.
   ============================================================ */

.rc-root {
  position: relative;
  display: block;
}

.rc-input {
  width: 100%;
  /* Sitio al carét sin que el texto se le meta debajo. */
  padding-right: 38px;
  cursor: pointer;
  /* Hereda el resto (alto, borde, radio, tipografía) del campo de cada
     formulario: el selector se mete en .bf-field y en .q-field sin
     redefinir su aspecto, así no hay dos estilos de input en la página. */
}

.rc-caret {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  color: var(--muted);
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.16s ease;
}
.rc-caret svg { width: 100%; height: 100%; display: block; }
.rc-input[aria-expanded="true"] ~ .rc-caret { transform: rotate(180deg); }

.rc-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 288px;
  overflow-y: auto;
  /* El scroll de la lista no debe arrastrar el de la página al llegar al
     final — es la queja clásica de un dropdown largo en móvil. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-card, 12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
.rc-list[hidden] { display: none; }

.rc-group {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 14px 5px;
  background: var(--surface, #fff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft, var(--line));
}

.rc-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 15px;
  color: var(--text);
  /* El padding dejaba la fila en 42 px, por debajo del mínimo táctil de 44.
     Medido a 375x812 sobre `consulta`, que usa esta regla base y no la del
     quiz: el quiz ya sube a 52 px por su cuenta, porque su lista se recorre
     entera con el pulgar. Aquí basta con no bajar del mínimo — `min-height`
     no toca tipografía ni espaciado, sólo impide que la fila quede corta. */
  min-height: 44px;
}
/* `act` la mueve el teclado y el hover, así que ratón y flechas comparten
   una sola indicación visual y nunca hay dos filas resaltadas a la vez. */
.rc-opt.act { background: var(--wash); }
.rc-opt.sel { font-weight: 600; }
.rc-opt.sel::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--action, var(--blue));
}

.rc-flag {
  font-size: 18px;
  line-height: 1;
  flex: none;
  /* Fuentes de emoji, en orden, para que la bandera se pinte a color en
     Windows/Linux en vez de caer a las dos letras del código ISO. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.rc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rc-empty {
  padding: 16px 14px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

/* Región viva: se anuncia, no se ve. */
.rc-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .rc-caret { transition: none; }
}