/* ============================================================
   RUMBO — tokens de marca (Perú)
   ------------------------------------------------------------
   GENERADO — no editar a mano.
   Fuente: assets-src/brands/rumbo.css
   Regenerar: npm run assets:build   ·   verificar: npm run assets:check
   ============================================================ */

:root {
  /* Colour, type, radius, spacing and elevation now come from the design
     system — see /assets/rumbo-tokens.css, generated from
     design-system/packages/tokens. Only site-specific layout constants
     remain here. */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --maxw: 1180px;
  --header-h: 76px;
}

/* --- Literales de marca con alpha -------------------------------------
   rgba() no acepta un hex dentro de var(), así que el color de marca se
   expone además como triplete RGB. Los valores son EXACTAMENTE los que
   estaban embebidos en las hojas antes de este refactor: el color
   resuelto no cambia ni un bit. --------------------------------------- */
:root {
  --brand-rgb: 4,30,66;          /* #041E42 navy   */
  --brand-deepest-rgb: 2,19,43;  /* #02132B        */
  --action-rgb: 0,94,184;        /* #005EB8        */
  --accent-rgb: 133,200,255;     /* #85C8FF sky    */
  /* Un data-URI no admite var() por dentro; se expone el url() entero. */
  --brand-overlay-rgb: 0,19,43;  /* #00132B — velo del CTA final (distinto del --brand-deepest de la sombra) */
  --rail-grad-from: var(--navy-700, #0A4386);
  --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='%23041E42' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ============================================================
   LOGO — Estrella Rumbo (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(--blue);
  --rose-ring: var(--blue);
}
.logo .rose { width: 34px; height: 34px; flex: none; }
/* La cabecera del quiz usa el mismo compass mark, pero .quiz-brand vive en la
   capa compartida (shared/quiz.css) y no puede declarar valores de marca. Sin
   estas tres variables el símbolo cae a sus fallbacks: el cuerpo es #FFFFFF y
   queda invisible sobre la tarjeta blanca, dejando sólo el anillo. Green North
   no necesita el equivalente: sus fallbacks ya son de marca. */
.quiz-brand {
  --rose-hi: var(--navy);
  --rose-n-hi: var(--blue);
  --rose-ring: var(--blue);
}
.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);
  --rose-ring: var(--sky);
}
.logo.on-navy .wordmark { color: #fff; }

/* ============================================================
   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);
}
/* `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; }
}