/* yma-tokens:inicio — fuente única en new-web/_tokens/ (editar ALLÁ) */
/* Tokens de marca YoMeAnimo! — FUENTE ÚNICA (new-web/_tokens/)
   ──────────────────────────────────────────────────────────────
   Se estampan inline en cada página con aplicar-tokens.py (mismo circuito que
   menú y footer: editar ACÁ, correr el aplicador; lo estampado se pisa).
   Los usos en las páginas van SIEMPRE con fallback — var(--yma-magenta,#FF3366) —
   así una página sin estampar se ve idéntica y nada puede romperse.

   ⚠️ Cambiar un valor acá recolorea el sitio entero: correr después
   aplicar-tokens.py + aplicar-footer.py, rebuild y smoke visual.

   Los CORTES DE VIEWPORT no pueden ser custom properties (CSS no permite var()
   en @media) — son convención documentada, no token:
     · 1000px  = corte desktop/mobile de TODO el sistema (menú, contenido, footer)
     · 560px y 359px = tiers menores (los usa el menú y el footer)
   Fuente: memoria viewport-corte-1000 + _menu/menu.css.

   Paleta oficial calibrada (sistema-marca.md · Marca/design-tokens.css):     */
:root{
  --cuando-asoma:62px;   /* cuánto asoma el avión de «¿Cuándo viajar?» por arriba de su tarjeta */
  --cuando-gap:12px;     /* hueco entre el avión y el título */
  --yma-magenta:  #FF3366;   /* CTA, acentos, marca */
  --yma-turquesa: #00DBD0;   /* secundario, checks, foco */
  --yma-violeta:  #6A3765;   /* bandas oscuras, texto de marca */
  --yma-violeta-oscuro: #291026;  /* el 4º de la paleta: anillo del logo, fondos
                                     profundos, texto sobre claro y botones oscuros.
                                     Está en sistema-marca.md y en design-tokens.css
                                     del vault como --yma-violet-dark; faltaba acá. */

  /* ── ANCHO DE LA CASA (Berna, 2026-08-28) ──────────────────────────────
     TECHO del contenido, no ancho obligatorio: una sección puede ser más
     angosta si así se diseñó (la home tiene bloques a 1100 y 1160), pero
     ninguna puede pasarse. Es el número que YA tenían el menú
     (_menu/menu.css → --ymm-contenido) y el footer (.ft-in), así que las
     tres piezas alinean por construcción.
     ⚠️ Las SECCIONES pueden ir a sangre completa (fondos de banda, el
     diente de marca); lo que topea es el contenido de adentro.            */
  --yma-ancho:    1240px;
}
/* yma-tokens:fin */

:root{
  /* Paleta oficial (calibrada para superficies grandes). Acentos = token puro. */
  --coral:var(--yma-magenta,#FF3366);       /* = --yma-magenta (acento puro) */
  --coral-2:#D81E54;     /* magenta profunda (gradientes + sombras) */
  --coral-soft:#FF5C82;  /* magenta clara (acento sobre violeta) */
  --green:#1B9A6B;       /* = --state-ok oficial */
  --teal:var(--yma-turquesa,#00DBD0);        /* = --yma-turquoise (acento puro) */
  --turq-deep:#048B85;   /* turquesa calibrada (stop oscuro de superficie) */
  --turq-mid:#00BDB4;    /* turquesa calibrada (stop claro de superficie) */
  --violet:var(--yma-violeta,#6A3765);      /* = --yma-violet */
  --violet-700:#52254C;
  --violet-dark:#291026;
  --cream:#E8F4F3;       /* = --bg-cream oficial (turquesa-tintado) */
  --ink:#18121A;         /* = --text-ink oficial */
  --ink-soft:#3A2F3C;    /* = --text-ink-2 oficial */
  --muted:#7A6E7C;       /* = --text-muted oficial */
  --line:#E7E5EA;
  --maxw:440px;
  --pad:22px;
  --font-head:'Outfit',sans-serif;
  --font-body:'Plus Jakarta Sans',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  background:#fff;
  color:var(--ink);
  display:flex;
  justify-content:center;
  min-height:100vh;
  line-height:1.4;
}
.page{
  position:relative;
  width:100%;
  background:#fff;
  min-height:100vh;
  overflow-x:clip; /* recorta horizontal (avión sangrante) SIN romper position:sticky */
}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:60;
  background:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 18px) var(--pad) 16px;
  min-height:62px;
}
.logo{display:inline-flex;align-items:center;text-decoration:none;}
.logo img{height:30px;width:auto;display:block;}
.burger{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:13px;margin:-13px;}
.burger span{display:block;width:24px;height:2.6px;border-radius:3px;background:#1f1b24;}

/* ---------- Hero: zona foto ---------- */
.hero-photo{
  position:relative;
  height:260px;
  background:#F1E8EF;
}
.hero-photo-frame{
  position:absolute;inset:0;
  overflow:hidden;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18px), 50% calc(100% - 4px), 50% calc(100% - 22px), 0 calc(100% - 8px));
}
.hero-photo-frame img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 40%;
  display:block;
}
.hero-photo-frame::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:90px;
  background:linear-gradient(to bottom,rgba(20,10,30,.45) 0%,transparent 100%);
  pointer-events:none;
}
.tag{
  display:inline-block;
  background:#FFF0F4;
  color:var(--coral);
  font-weight:700;font-size:11px;letter-spacing:1.2px;
  padding:8px 12px;border-radius:8px;
}
.tag-on-photo{
  position:absolute;top:18px;left:var(--pad);
  background:#FFF0F4;
  color:var(--coral-2);
  font-weight:700;font-size:12px;letter-spacing:1px;
  padding:9px 14px;border-radius:999px;
}
/* Cinta "LA GUÍA MAESTRA" — CSS puro, eco del logo (banda + pliegue) */
.tag-ribbon{
  position:absolute;top:16px;left:var(--pad);
  display:inline-block;
  background:var(--coral-2);
  color:#fff;
  font-family:var(--font-head);font-weight:800;
  font-size:13px;letter-spacing:1.2px;
  padding:9px 14px;
  white-space:nowrap;
  filter:drop-shadow(0 4px 10px rgba(41,16,38,.28));
}
.tag-ribbon::after{
  content:"";
  position:absolute;right:-8px;bottom:-9px;
  width:20px;height:10px;
  background:#B01441;
  clip-path:polygon(0 0, 100% 0, 100% 100%);
}
.tag-banner-svg{
  position:absolute;top:16px;left:var(--pad);
  width:150px;height:auto;
  filter:drop-shadow(0 4px 10px rgba(41,16,38,.28));
}
.badge-open{
  display:inline-flex;align-items:center;gap:8px;
  background:#15825A;color:#fff;
  font-weight:700;font-size:12.5px;letter-spacing:.8px;
  padding:8px 15px;border-radius:999px;
  white-space:nowrap;
}
.badge-open i{width:9px;height:9px;border-radius:50%;background:#eafff0;display:inline-block;}
.badge-on-diente{
  position:absolute;bottom:-18px;right:var(--pad);
  box-shadow:0 8px 20px -4px rgba(27,154,107,.55);
}
/* Color por estado (esquema B, Berna 2026-09-03). Sin clase = verde, como siempre. */
.badge-open.est-pronto{background:#E58A00;box-shadow:0 8px 20px -4px rgba(229,138,0,.55);}
.badge-open.est-pronto i{background:#FFF1DB;}
.badge-open.est-cerrada{background:var(--violet);box-shadow:0 8px 20px -4px rgba(106,55,101,.55);}
.badge-open.est-cerrada i{background:#EFE6F0;}

/* ---------- Hero: zona info (tinte lavanda, fiel a guia-australia-1d) ---------- */
.hero-info{
  padding:18px var(--pad) 62px;
  background:#F1E8EF;
}
.back-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:13px 0;margin:-13px 0 -5px;
  font-family:var(--font-body);font-weight:600;font-size:15px;
  color:var(--violet);text-decoration:none;line-height:1;
}
/* El chevron es un SVG, no el carácter «‹» (2026-09-02). Un glifo se centra por
   su caja de fuente, no por su forma: quedaba alto respecto del texto y no había
   valor de line-height que lo arreglara para todos los tamaños. El trazo dibujado
   sí se centra solo con align-items:center. */
.back-link .bl-ico{width:12px;height:12px;flex:0 0 auto;display:block;}
.back-link:hover{color:var(--coral);}
.back-link:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px;}
.hero-type{
  /* Outfit 600 en violeta claro, no el gris del cuerpo: es marca, no metadato.
     Valores de la referencia que pasó Berna el 02-09. */
  font-size:26px;font-weight:600;color:#8A6885;
  letter-spacing:-.01em;margin:0;
}
.hero-h1 .hero-name{
  /* La bandera y el nombre van SIEMPRE juntos: es el flex que antes era el h1.
     Si el h1 fuera el flex, con un nombre largo («República Checa») el texto se
     iría a otra fila y la bandera quedaría sola arriba.
     flex-end + el margen de la bandera la apoyan sobre la línea de base del
     nombre, en vez de centrarla contra la caja del texto. */
  display:flex;align-items:flex-end;gap:12px;
}
.hero-h1 .hero-type{
  /* Bloque, como cuando era un <p> afuera del h1: un <span> inline mide por la
     caja de la fuente (30px) y no por su line-height, y el kicker quedaba 3,12px
     más bajo y 20px corrido. Los 6px de abajo reemplazan al margin-top que tenía
     el h1 cuando el kicker era su hermano. */
  display:block;
  line-height:1.4;
  margin:0 0 6px;
}
/* Sin esto, el display:block de arriba le gana al [hidden] del navegador y el
   kicker se seguía viendo en los destinos que no llevan («Andorra»). */
.hero-h1 .hero-type[hidden]{ display:none; }
.hero-h1{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(38px, 14.4vw, 56px);line-height:.9;letter-spacing:-.02em;
  color:var(--violet-dark);
  display:block;
  margin-top:0;margin-bottom:26px;
  text-wrap:balance;
}
.hero-flag{
  /* Se mide por ALTO, no por ancho: los SVG de _banderas/ no comparten
     proporción (Irlanda 20×17,9 · Australia 84×75), así que fijar el ancho
     dejaba cada país de un tamaño distinto. */
  height:40px;width:auto;flex:0 0 auto;
  display:block;margin-bottom:4px;
}

/* Card de pasaporte — una fila, fiel a guia-australia-1d */
.pass-card{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid #EADFE7;border-radius:16px;
  padding:12px 13px;
}
.pass-card-flag{width:34px;height:auto;flex:0 0 auto;display:block;}
.pass-card-text{flex:1;min-width:0;line-height:1.15;}
.pass-card-label{font-size:12px;color:var(--muted);}
.pass-card-value{font-size:16px;color:var(--ink);font-weight:700;margin-top:1px;display:block;}
.pass-card-btn{
  flex:0 0 auto;
  background:#FFE3EC;border:none;border-radius:999px;
  padding:8px 18px;min-height:44px;
  cursor:pointer;font-family:var(--font-head);
  font-weight:700;font-size:13px;color:#C2184A;
  box-shadow:none;
  transition:background .15s;
}
.pass-card-btn:hover{background:#FFD3E1;}
.pass-card-btn:focus-visible{outline:2px solid var(--coral);outline-offset:3px;}

/* a11y: foco visible para flag-opt */
.flag-opt:focus-visible{outline:2px solid var(--coral);outline-offset:2px;}

/* a11y: texto solo para lectores de pantalla */
.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;
}

/* legacy (aún usado por otras variantes internas) */
.nm{font-family:var(--font-head);font-weight:700;font-size:17px;color:#fff;}

/* ---------- Section: permite (beige) ---------- */
/* wrapper: lleva el solape + drop-shadow (sigue el clip-path; box-shadow no) */
.permite-wrap{
  position:relative;z-index:2;
  margin-top:-28px;
  filter:drop-shadow(0 -3px 6px rgba(41,16,38,.07));
}
.permite{
  background:var(--cream);
  padding:58px var(--pad) 40px;
  clip-path:polygon(0 18px, 50% 4px, 50% 22px, 100% 8px, 100% 100%, 0 100%);
}
.sec-title{font-family:var(--font-head);font-weight:700;font-size:27px;color:var(--ink);text-align:center;}
.permite .sec-title{margin-bottom:0;}

/* kicker / eyebrow — diferencia los dos bloques */
.kicker{
  display:block;text-align:center;
  font-family:var(--font-body);font-weight:700;
  font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;
  margin-bottom:8px;
}
.kicker-teal{color:#159A91;}
.kicker-coral{color:var(--coral);}

/* "permite" — cards blancas flotando sobre el menta */
.benes{display:flex;flex-direction:column;gap:14px;margin-top:22px;}
.bene{
  position:relative;background:#fff;border-radius:16px;
  padding:17px 20px 17px 26px;
  box-shadow:0 10px 26px rgba(20,120,112,.12);
}
.bene::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:5px;
  border-radius:0 4px 4px 0;
}
.bene.b1::before{background:#2BC4BA;}
.bene.b2::before{background:var(--yma-violeta,#6A3765);}
.bene.b3::before{background:var(--coral);}
.bene-h{font-family:var(--font-head);font-weight:700;font-size:21px;color:var(--ink);line-height:1.2;}
.bene-h .mk{
  background:#5FE3DB;border-radius:4px;
  padding:.02em .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.bene-sub{font-size:14px;color:var(--muted);margin-top:5px;line-height:1.45;}

/* ---------- Section: requisitos (white) ---------- */
.requisitos{padding:44px var(--pad) 8px;background:#fff;}
.requisitos .sec-title{margin-bottom:26px;}
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.req-card{border-radius:18px;padding:18px 16px 20px;box-shadow:0 4px 14px rgba(42,34,48,.04);}
.req-card.edad{background:#E2F5F3;}
.req-card.estudios{background:#FFE9EE;}
.req-card.ingles{background:#EFE6F0;}
.req-card.fondos{background:#EFEEF2;}
.req-head{display:flex;align-items:center;gap:9px;margin-bottom:16px;color:#5b5562;}
.req-head svg{width:23px;height:23px;flex:none;stroke:#5b5562;}
.req-head .rl{font-size:12px;font-weight:600;letter-spacing:1.1px;color:#7d7986;}
.req-val{font-family:var(--font-head);font-weight:600;font-size:18px;color:var(--ink);display:flex;align-items:center;gap:7px;line-height:1.15;}
.req-sub{font-size:13px;color:var(--muted);margin-top:5px;}
.info-i{width:17px;height:17px;border-radius:50%;background:#d9d9de;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);}

/* ---------- Los 2 artículos clave (destacados) ---------- */
.destacados{padding:26px var(--pad) 6px;background:#fff;}
.dest-head{text-align:center;margin-bottom:18px;}
.dest-head h2{font-family:var(--font-head);font-weight:700;font-size:22px;color:var(--ink);line-height:1.15;}
.dest-head p{font-size:13.5px;color:var(--muted);margin-top:4px;}
.art-feat{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;
  text-decoration:none;background:#fff;border:1.5px solid #ECEAF0;border-radius:18px;
  padding:16px 16px 16px 19px;margin-bottom:13px;box-shadow:0 8px 20px rgba(24,18,26,.06);
  transition:transform .12s ease;
}
.art-feat:active{transform:scale(.99);}
.art-feat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;}
.art-feat.turq::before{background:#02A49C;}
.art-feat.mag::before{background:#EC295D;}
.af-ico{flex:0 0 auto;width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:25px;}
.art-feat.turq .af-ico{background:#DFF9F7;}
.art-feat.mag .af-ico{background:#FFE9EE;}
.af-tx{flex:1;min-width:0;}
.af-chip{display:inline-block;background:#FFE08A;color:#7A5B00;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;margin-bottom:6px;}
.af-title{display:block;font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--ink);line-height:1.15;}
.af-sub{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.3;}
.af-go{
  flex:0 0 auto;align-self:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;line-height:1;
  transition:transform .15s ease;
}
.art-feat:hover .af-go{transform:scale(1.08);}

/* ---------- Section: cuando viajar (red, stepped) ---------- */
.cuando{
  position:relative;z-index:2;
  background:var(--violet);   /* violeta de marca: antes magenta, se mezclaba con el resultado rosa (Berna 2026-09-03) */
  margin-top:24px;
  /* El avión asoma --cuando-asoma por arriba de la tarjeta; el padding le deja
     ese lugar más un aire fijo. Tokens abajo, en .cuando-card. */
  padding:calc(var(--cuando-asoma) + 42px) var(--pad) var(--pad);
  clip-path:polygon(0 18px, 50% 4px, 50% 22px, 100% 8px, 100% 100%, 0 100%);
}
/* El avión va EN FLUJO (07-09): un margen negativo lo hace asomar por arriba y
   la tarjeta crece con él, así el hueco hasta el título (--cuando-gap) es el
   mismo en todos los anchos. Antes iba en absoluto con un padding-top FIJO por
   breakpoint, y como el alto del avión depende del ancho (64% del card, tope
   290px) ningún número servía para todos: a 500 y 818px pisaba el título, a
   1300 dejaba 74px de aire (Berna, 07-09). display:flow-root evita que el
   margen negativo colapse a través de la tarjeta y la mueva a ella. */
.cuando-card{
  position:relative;background:#fff;border-radius:28px;padding:0 26px 28px;
  text-align:center;overflow:visible;display:flow-root;}
.illus-circle{
  width:200px;height:200px;border-radius:50%;margin:0 auto 22px;
  background:#e6caa0;
  display:flex;align-items:center;justify-content:center;font-size:74px;
  box-shadow:inset 0 -8px 22px rgba(150,110,60,.18);
}
.cuando-card h2{font-family:var(--font-head);font-weight:600;font-size:27px;color:var(--ink);line-height:1.1;margin-bottom:12px;}
.cuando-card p{color:var(--muted);font-size:15.5px;margin-bottom:24px;}

/* bloque "¿cuándo viajar?" — estado inicial: avión grande sangrando a la izquierda + texto 2 líneas */
.cuando-top{display:block;text-align:center;margin-bottom:24px;}
.cuando-img{display:block;width:64%;max-width:270px;height:auto;margin:calc(var(--cuando-asoma) * -1) auto var(--cuando-gap);} /* tope 270 en todos los anchos (Berna, 07-09, con sliders) */
.cuando-tx{padding-top:0;}
.cuando-tx h2{font-size:24px;line-height:1.16;margin-bottom:10px;}
.cuando-tx .cuando-sub{margin-bottom:0;font-size:14.5px;color:var(--muted);line-height:1.35;}
/* selector segmentado: 3 opciones en una línea, persistente */
.cuando-seg{display:flex;gap:8px;}
.seg-opt{
  flex:1;background:#fff;border:1.5px solid var(--line);border-radius:999px;
  padding:12px 6px;font-family:var(--font-body);font-size:13px;font-weight:600;
  color:#6c6775;cursor:pointer;line-height:1.2;
  transition:background .15s,border-color .15s,color .15s;
}
.seg-opt.active{background:var(--coral);border-color:var(--coral);color:#fff;}
.seg-sub{font-weight:500;opacity:.72;white-space:nowrap;}

/* resultado: se revela abajo (no reemplaza nada) */
.cuando-result{text-align:left;max-height:0;overflow:hidden;transition:max-height .4s ease;}
.cuando-card.open .cuando-result{max-height:1000px;margin-top:22px;}
/* card superior "¿cuándo solicitar?" */
.solicitar{
  position:relative;
  background:#FFE9EE;border:1px solid #FAD3DD;border-radius:18px;
  padding:20px;text-align:center;margin-bottom:24px;
}
.cuando-close{
  position:absolute;top:10px;right:10px;z-index:2;
  width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(216,69,90,.10);color:var(--coral);
  font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.cuando-close:hover{background:rgba(216,69,90,.20);}
.sol-lbl{color:var(--coral);font-weight:700;font-size:12px;letter-spacing:1.2px;margin-bottom:8px;}
.sol-month{font-family:var(--font-head);font-weight:700;font-size:30px;color:var(--ink);line-height:1;}
.sol-tag{color:var(--coral);font-weight:700;font-size:14px;margin-top:8px;}
.sol-note{border-top:1px solid #FAD3DD;margin-top:16px;padding-top:14px;font-size:13.5px;color:var(--muted);line-height:1.5;}
.sol-note b{color:var(--ink-soft);font-weight:600;}

/* timeline vertical con puntos + línea conectora coral→verde */
.timeline{margin:0 0 22px;padding-left:4px;}
.tl-item{position:relative;display:flex;gap:16px;padding-bottom:26px;}
.tl-item.last{padding-bottom:0;}
.tl-item::before{content:'';position:absolute;left:10px;top:24px;bottom:-3px;width:2.5px;background:var(--tl-line);}
.tl-item.last::before{display:none;}
/* punto tipo "diana": centro de color + gap blanco + anillo exterior de color */
.tl-dot{position:relative;z-index:1;flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  background:var(--tl-c);border:3px solid #fff;box-shadow:0 0 0 3px var(--tl-c);
  box-sizing:border-box;margin:3px 9px 0 3px;}
.tl-item.coral{--tl-c:var(--coral);--tl-line:#F5A8BC;}
.tl-item.green{--tl-c:#1B9A6B;--tl-line:#A9D9C6;}
.tl-body{flex:1;min-width:0;padding-top:1px;}
.tl-lbl{font-size:12px;font-weight:700;letter-spacing:.6px;margin-bottom:3px;}
.tl-item.coral .tl-lbl{color:var(--coral);}
.tl-item.green .tl-lbl{color:#1B9A6B;}
.tl-val{font-family:var(--font-head);font-weight:600;font-size:17px;color:var(--ink);line-height:1.2;}
.tl-sub{font-size:13.5px;color:var(--muted);margin-top:3px;}

/* botón avisar + link checklist */
.btn-avisar{
  display:block;width:100%;text-align:center;text-decoration:none;
  background:#00CCC2;
  color:var(--ink);font-family:var(--font-head);font-weight:600;font-size:17px;
  padding:18px;border-radius:999px;margin-bottom:14px;
  box-shadow:0 10px 22px rgba(0,219,208,.3);
}

/* ---------- Section: guia completa (white) ---------- */
.guia{padding:0 var(--pad) 30px;background:#fff;scroll-margin-top:74px;} /* header fijo (74): el CTA del widget «¿Cuándo viajar?» llega acá con #guia */
.guia .sec-title{margin-bottom:24px;}
/* Opción B — banda crema "cambio de zona" como apertura de la guía */
.guia-head{background:var(--cream);margin:0 calc(var(--pad) * -1) 0;padding:34px var(--pad) 28px;text-align:center;}
.guia-kicker{margin-bottom:9px;}
.guia-title{font-family:var(--font-head);font-weight:800;font-size:36px;line-height:1.04;letter-spacing:-.6px;color:var(--ink);margin:0 0 11px;}
.guia-title .hl-teal{background:var(--teal);color:var(--violet-dark);padding:0 .12em;border-radius:5px;white-space:nowrap;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.guia-sub{font-family:var(--font-body);font-weight:500;font-size:14px;line-height:1.45;color:var(--muted);max-width:32ch;margin:0 auto;}

/* ---------- categoría expandible (Entender la visa, etc.) ---------- */
.datos-vivos{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(255,255,255,.10);border-radius:14px;overflow:hidden;margin-bottom:20px;
}
.datos-vivos .dv{padding:13px 6px;text-align:center;border-right:1px solid rgba(255,255,255,.16);}
.datos-vivos .dv:last-child{border-right:none;}
.dv-k{font-size:9.5px;font-weight:700;letter-spacing:.07em;color:rgba(255,255,255,.72);}
.dv-v{font-family:var(--font-head);font-weight:700;font-size:18px;margin:3px 0 1px;}
.dv-s{font-size:9.5px;color:rgba(255,255,255,.62);line-height:1.2;}
.cat-group{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;margin:22px 0 12px;padding-left:16px;}
.cat-group::after{content:'';flex:1;height:1.5px;border-radius:2px;background:rgba(255,255,255,.22);}
.cat-group:first-of-type{margin-top:0;}
.art-row{
  display:flex;align-items:center;gap:13px;text-decoration:none;
  background:rgba(255,255,255,.12);border-radius:15px;padding:14px;margin-bottom:10px;
}
.art-row .ar-t{
  flex:1;min-width:0;font-weight:600;font-size:15px;color:#fff;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.art-row .ar-go{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;background:rgba(255,255,255,.2);color:#fff;
}
.art-row .ar-chip{
  background:#FFE08A;color:#7A5B00;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.art-row.feat{background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.14);}
.art-row.feat .ar-t{color:var(--ink);}
.art-row.feat .ar-go{background:var(--coral);color:#fff;}

/* ---- CTA de etapa (FullPack y similares): tarjeta sólida de marca ---- */
.cta-card{display:block;text-decoration:none;border-radius:16px;padding:17px 18px;margin-top:12px;background:#FF4874;box-shadow:0 10px 24px rgba(216,30,84,.40);color:#fff;}
.cta-card .cta-top{display:flex;align-items:center;gap:14px;}
.cta-card .cta-emblem{width:54px;height:54px;flex-shrink:0;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.22));}
.cta-card .cta-txt{flex:1;min-width:0;}
.cta-card .cta-kick{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;opacity:.9;}
.cta-card .cta-t{display:block;font-family:var(--font-head);font-size:19px;font-weight:700;margin-top:5px;line-height:1.12;}
.cta-card .cta-s{display:block;font-size:13px;opacity:.92;margin-top:4px;line-height:1.3;}
.cta-card .cta-btn{display:flex;width:100%;align-items:center;justify-content:center;gap:7px;margin-top:13px;background:#fff;color:var(--coral-2);font-weight:800;font-size:13.5px;padding:12px 16px;border-radius:999px;}

/* ---- CTA del SEGURO: tratamiento propio, violeta ----
   Las dos CTAs (seguro y FullPack) eran magenta y competían entre sí. El seguro
   —~80% del revenue— pasa a tarjeta violeta con la bandera del destino y botón
   magenta macizo: cada producto con su identidad, y el magenta queda para la
   acción. Elegida por Berna el 31-08 entre 3 fondos (ver
   `_cta-seguro-alternativas.html`). */
/* CTA del seguro (Berna, 02-09) — sin subtítulo, botón bajo el título.
   Elegida con sliders en `_variantes-cta-seguro.html`; los números de acá son
   los que copió, no estimaciones. Estructura: Yomi médico a la izquierda,
   bandera CHICA como sello del kicker, título, subtítulo y botón.
   La grilla es de la TARJETA y `.cs-body` es display:contents, así los cuatro
   bloques de texto son hijos directos y se pueden repartir por fila.
   · Mobile: Yomi acompaña kicker+título; subtítulo y botón van a lo ancho.
   · Desktop: el título CRUZA por encima del subtítulo y del botón, que
     comparten fila. Aprovecha el ancho sin partir el título en dos.
   El fondo (#3B1D38) y el botón magenta vienen de la decisión del 31-08. */
.cta-seguro{display:grid;grid-template-columns:auto 1fr;column-gap:20px;row-gap:0;
  align-items:center;text-decoration:none;
  border-radius:22px;padding:28px 35px 28px 31px;margin-top:12px;
  background:#3B1D38;color:#fff;box-shadow:0 12px 28px rgba(41,16,38,.34);}
.cta-seguro .cs-yomi{grid-column:1;grid-row:1 / span 2;align-self:center;
  width:auto;height:72px;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));}
.cta-seguro .cs-body{display:contents;}
.cta-seguro .cs-kick{grid-column:2;grid-row:1;display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--yma-turquesa,#00DBD0);}
/* la bandera va CHICA, como sello del kicker — no como emblema de la tarjeta */
.cta-seguro .cs-flag{width:24px;height:auto;flex:0 0 auto;display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));}
.cta-seguro .cs-t{grid-column:2;grid-row:2;display:block;font-family:var(--font-head);
  font-size:22px;font-weight:800;margin-top:8px;line-height:1.1;}
/* La itálica es SINTÉTICA (no hay cursiva de Outfit autoalojada): el browser
   inclina la redonda, y el último glifo sobresale de su caja de avance. El
   padding devuelve ese sobrante para que el remate no quede pegado a lo que
   siga. Aplica en todos los viewports. */
.cta-seguro .cs-t em{font-style:italic;color:#FF5C82;padding-right:.06em;}
.cta-seguro .cs-s{grid-column:1 / -1;grid-row:3;display:block;font-size:13px;
  color:#D9CBD8;margin-top:16px;line-height:1.45;}
/* El botón queda en la fila 4 y la 3 (la del subtítulo) se declara vacía: sin
   contenido mide 0px, así que el botón sube solo. Deja el hueco listo por si
   alguna vez vuelve un subtítulo POR PAÍS — ver el comentario del puente. */
.cta-seguro .cs-btn{grid-column:1 / -1;grid-row:4;display:flex;width:100%;align-items:center;
  justify-content:center;gap:8px;margin-top:22px;background:#EC295D;color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:17px;padding:15px;
  border-radius:999px;box-shadow:0 8px 20px rgba(236,41,93,.42);}

@media (min-width:1000px){
  .cta-seguro{grid-template-columns:auto 1fr;column-gap:39px;
    padding:24px 56px 24px 48px;border-radius:24px;}
  .cta-seguro .cs-yomi{grid-row:1 / span 4;height:106px;}
  .cta-seguro .cs-flag{width:27px;}
  .cta-seguro .cs-kick{grid-column:2;font-size:12px;gap:10px;}
  .cta-seguro .cs-t{grid-column:2;font-size:30px;margin-top:8px;}
  .cta-seguro .cs-s{grid-column:2;grid-row:3;align-self:center;
    font-size:17px;max-width:53ch;margin-top:12px;}
  /* Debajo del título, NO a la derecha: a la derecha quedan 269px libres y el
     título a 30px necesita ~420 → se partiría en dos. Medido el 02-09. */
  .cta-seguro .cs-btn{
    grid-column:2;grid-row:4;justify-self:start;
    width:auto;font-size:16px;margin-top:20px;padding:15px 32px;white-space:nowrap;
    transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s cubic-bezier(.2,.8,.2,1);
  }
  /* mismo gesto que .art-feat: la tarjeta entera es el target, el botón responde */
  .cta-seguro:hover .cs-btn{transform:translateY(-2px);box-shadow:0 12px 26px rgba(236,41,93,.52);}
}
@media (min-width:1000px) and (prefers-reduced-motion:reduce){
  .cta-seguro .cs-btn{transition:none;}
  .cta-seguro:hover .cs-btn{transform:none;}
}

/* ---- costos como fila desplegable dentro de "Entender la visa" ---- */
.art-cost{display:flex;align-items:center;gap:11px;width:100%;cursor:pointer;background:#fff;border:none;border-radius:13px;padding:14px 16px;margin-bottom:9px;font-family:var(--font-body);}
.art-cost .ac-ic{font-size:20px;line-height:1;}
.art-cost .ac-t{flex:1;text-align:left;font-weight:600;font-size:15px;color:var(--ink);line-height:1.2;}
.art-cost .ac-car{flex:0 0 auto;color:#bdbac2;font-size:13px;transition:transform .25s;}
.art-cost.open .ac-car{transform:rotate(180deg);}
.art-cost-body{max-height:0;overflow:hidden;transition:max-height .4s ease;}
.art-cost.open + .art-cost-body{max-height:640px;margin-bottom:9px;}
.cost-panel{background:#fff;border-radius:13px;padding:16px;}
.cost-panel .cf-total{background:#582E57;border-radius:14px;padding:15px 17px 16px;color:#fff;}
.cost-panel .cf-total-k{font-size:11px;letter-spacing:1.1px;font-weight:700;color:rgba(255,255,255,.55);}
.cost-panel .cf-total-v{font-family:var(--font-head);font-weight:800;font-size:30px;line-height:1;margin-top:6px;}
.cost-panel .cp-lbl{font-size:11px;font-weight:700;letter-spacing:1.1px;color:var(--muted);margin:14px 0 6px;}
.cost-panel .cp-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);}
.cost-panel .cp-row.last{border-bottom:none;}
.cost-panel .cp-row .k{font-size:13.5px;color:var(--ink-soft);}
.cost-panel .cp-row .v{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;}
.cost-panel .cp-fondos{display:flex;align-items:center;gap:10px;background:var(--cream);border-radius:12px;padding:11px 14px;margin-top:12px;font-size:13px;}
.cost-panel .cp-fondos-tx{color:var(--ink-soft);}
.cost-panel .cp-fondos-tx b{font-weight:700;color:var(--ink);}
.cost-panel .cp-fondos-tx span{color:var(--muted);}

/* ---------- Modo Relax ---------- */
.relax{margin:24px var(--pad) 28px;background:var(--cream);border-radius:24px;overflow:hidden;padding-bottom:30px;}
.relax-img{
  height:215px;
  background:#e7c6a8;   /* se ve un instante mientras carga la foto */
}
.relax-img img{width:100%;height:100%;object-fit:cover;display:block;}
.relax-body{padding:26px 26px 0;text-align:center;}
.relax-body h2{font-family:var(--font-head);font-weight:600;font-size:26px;color:var(--ink);line-height:1.08;margin-bottom:14px;}
.relax-body p{color:var(--ink-soft);font-size:15.5px;line-height:1.5;margin-bottom:22px;}
.btn-relax{
  display:block;width:100%;text-align:center;text-decoration:none;
  background:#EC295D;
  color:#fff;font-weight:600;font-size:16px;
  padding:17px;border-radius:999px;
  box-shadow:0 10px 22px rgba(255,51,102,.30);
}

/* ---------- Footer placeholder ---------- */
.footer{
  margin:24px var(--pad) 30px;background:#E8F4F3;border-radius:24px;
  min-height:360px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:600;font-size:22px;color:var(--ink);
}

/* ---------- Modal: Configura tu guia ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(20,12,20,.55);
  opacity:0;visibility:hidden;transition:opacity .25s;z-index:100;
  display:flex;justify-content:center;align-items:flex-end;
}
.overlay.show{opacity:1;visibility:visible;}
.sheet{
  width:100%;max-width:var(--maxw);background:#fff;
  border-radius:26px 26px 0 0;
  padding:26px 22px calc(env(safe-area-inset-bottom,0px) + 22px);
  max-height:90vh;overflow-y:auto;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.overlay.show .sheet{transform:translateY(0);}
.sheet-grip{width:42px;height:5px;border-radius:3px;background:#e2e0e6;margin:0 auto 18px;}
.sheet-close{
  position:absolute;top:18px;right:18px;z-index:2;
  width:36px;height:36px;border:none;border-radius:50%;cursor:pointer;line-height:1;
  background:#F1EFF3;color:var(--muted);font-size:16px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.sheet-close:active{transform:scale(.95);}
.sheet h3{font-family:var(--font-head);font-weight:600;font-size:26px;color:var(--ink);margin-bottom:20px;}
.group-lbl{font-size:11px;letter-spacing:1.4px;font-weight:600;color:var(--muted);margin:18px 0 12px;}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.flag-opt{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  border:1.6px solid var(--line);border-radius:15px;padding:14px 8px;cursor:pointer;
  background:#fff;font-family:var(--font-body);transition:border-color .15s, background .15s;
}
.flag-opt .fe{height:28px;width:auto;}
.flag-opt .fn{font-size:13.5px;font-weight:500;color:#5b5562;}
.flag-opt.selected{border-color:var(--coral);background:#FFE9EE;}
.flag-opt.selected .fn{color:var(--coral);font-weight:600;}
.sheet-cta{
  display:block;width:100%;border:none;cursor:pointer;
  background:#EC295D;color:#fff;
  font-family:var(--font-body);font-weight:600;font-size:16px;
  padding:17px;border-radius:999px;margin-top:24px;
  box-shadow:0 10px 22px rgba(255,51,102,.30);
}

/* ---------- FAB volver arriba ---------- */
.fab-top{
  position:fixed;bottom:20px;right:max(16px, calc(50vw - 204px));z-index:80;
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:var(--coral);color:#fff;font-size:22px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(255,51,102,.4);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s, transform .25s, visibility .25s;
}
.fab-top.show{opacity:1;visibility:visible;transform:translateY(0);}

/* ---------- ÍNDICE NAVEGABLE (versión sticky) ---------- */
.idx-sentinel{height:1px;margin:0;}
.idx-nav{
  /* top DEBE calzar con la altura real del header global (.ymm-bar, --ymm-alto
     en _menu/menu.css = 74px). Quedó en 60px de cuando esta página tenía su
     propio .header (62px, hoy código muerto) — al unificar el menú (14-08) nadie
     lo actualizó y el nav quedaba tapado ~14px por el header (Berna, 25-08). */
  position:sticky;top:74px;z-index:50;
  background:transparent;
  padding:11px 0;margin:0 calc(var(--pad) * -1) 6px;
  transition:background .2s ease, box-shadow .2s ease, border-color .2s ease;
  border-bottom:1px solid transparent;
}
/* solo muestra "chrome" cuando está realmente pegada al header */
.idx-nav.is-stuck{
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  box-shadow:0 6px 16px rgba(41,16,38,.07);
  border-bottom:1px solid rgba(41,16,38,.07);
}
.idx-nav-scroll{display:flex;gap:8px;overflow-x:auto;padding:0 var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.idx-nav-scroll::-webkit-scrollbar{display:none;}
.idx-pill{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;
  background:var(--cream);border:none;border-radius:999px;
  padding:8px 15px 8px 8px;cursor:pointer;font-family:var(--font-body);
  font-weight:600;font-size:13px;color:#7A6E7C;white-space:nowrap;
}
.idx-pill .nm{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:#CFE6E4;
  font-size:11px;font-weight:700;color:#7A6E7C;
}
.idx-pill.act{background:var(--ink);color:#fff;}
.idx-pill.act .nm{background:var(--coral);color:#fff;}

.idx-sec{
  position:relative;border-radius:20px;padding:22px;color:#fff;
  margin-bottom:16px;box-shadow:0 10px 24px rgba(0,0,0,.10);
  /* header(74) + alto real del idx-nav(~61) — mismo motivo que el fix de arriba */
  scroll-margin-top:135px;
}
.idx-sec .ism{position:absolute;top:24px;right:22px;font-size:13.5px;color:rgba(255,255,255,.8);}
.idx-sec .emoji{font-size:30px;line-height:1;display:block;margin-bottom:18px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18));}
.idx-sec h3{font-family:var(--font-head);font-weight:600;font-size:26px;line-height:1.12;}
.idx-sec .iss{font-size:13.5px;color:rgba(255,255,255,.82);margin-top:4px;}
.idx-sec .cat-inner-open{margin-top:18px;border-top:1px solid rgba(255,255,255,.16);padding-top:18px;}
/* Tarjetas de etapa en color SÓLIDO (decisión de Berna, 2026-08-31).
   Antes eran degradés 125deg, pero el efecto era dispar: el teal se percibía
   con profundidad y el magenta/violeta/tinta quedaban casi planos (extremos
   muy vecinos, y el delta del magenta vive en el canal rojo). Cada sólido es
   el punto MEDIO de su ex-degradé, así el peso visual no cambió:
     magenta #D81E54→#FF3366 ⇒ #EC295D · teal #048B85→#00BDB4 ⇒ #02A49C
     violeta #52254C→#6A3765 ⇒ #5E2E59 · tinta #291026→#43203D ⇒ #361832 */
.idx-sec.c-entender{background:#EC295D;}
.idx-sec.c-aplicar{background:#02A49C;}
.idx-sec.c-trabajar{background:#361832;}
.idx-sec.c-preparar{background:#5E2E59;}
.idx-sec.c-llegar{background:#02A49C;}
.idx-sec.c-vivir{background:#EC295D;}

.vermas{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.4);border-radius:13px;padding:13px;
  font-family:var(--font-body);font-weight:800;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;cursor:pointer;margin-top:8px;
}
.vermas .cv{transition:transform .2s;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--ink);font-size:13px;font-weight:900;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.18);}
.vermas.abierto .cv{transform:rotate(180deg);}
.art-row.oculto{display:none;}
.cat-group.oculto{display:none;}

@media (min-width:480px){
  body{padding:0;align-items:flex-start;}
}

/* ============================================================
   COMPARADOR DE PASAPORTES (todo scopeado para no chocar)
   ============================================================ */

/* trigger dentro del modal "Configura tu guía" */
.cmp-trigger{
  display:flex;align-items:center;gap:12px;width:100%;
  background:#E9D9E5;border:none;border-radius:16px;
  padding:14px 16px;margin:14px 0 4px;cursor:pointer;text-align:left;
  font-family:var(--font-body);transition:transform .12s ease;
}
.cmp-trigger:active{transform:scale(.99);}
.cmp-trigger .emoji{font-size:24px;line-height:1;}
.cmp-trigger .cmp-trigger-tx{flex:1;min-width:0;}
.cmp-trigger .cmp-trigger-tx b{display:block;font-size:14px;color:#291026;}
.cmp-trigger .cmp-trigger-tx span{font-size:12px;color:#85547F;}
.cmp-trigger .chev{margin-left:auto;color:var(--coral);font-weight:800;font-size:20px;}

/* overlay del comparador — por encima del modal de config */
#cmpOverlay{z-index:110;}
#cmpOverlay [hidden]{display:none!important;}

#cmpOverlay .topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:18px;}
#cmpOverlay .topbar h2{font-family:var(--font-head);font-weight:700;font-size:20px;color:var(--ink);}
#cmpOverlay .icon-btn{
  width:36px;height:36px;border:none;border-radius:50%;flex:0 0 auto;
  background:#F1EFF3;color:var(--muted);font-size:17px;font-weight:700;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
#cmpOverlay .sec-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;}

/* destino fijo (heredado de la guía) */
#cmpOverlay .dest-fijo{font-family:var(--font-head);font-weight:700;font-size:36px;text-align:center;color:var(--ink);margin:0 0 22px;line-height:1.1;}
#cmpOverlay .dest-nombre{position:relative;display:inline-block;}
#cmpOverlay .dest-bandera{position:absolute;right:100%;margin-right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;}

/* selects de pasaporte */
#cmpOverlay .psel-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px;}
#cmpOverlay .psel{position:relative;}
#cmpOverlay .psel-flag{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;display:flex;align-items:center;}
#cmpOverlay .psel select{
  width:100%;appearance:none;-webkit-appearance:none;border:none;
  background:#F1EFF3;border-radius:14px;padding:12px 26px 12px 42px;
  font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;
}
#cmpOverlay .psel::after{content:'▾';position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:13px;}
#cmpOverlay .visa-chip{font-size:11px;color:var(--muted);margin-top:6px;padding-left:2px;min-height:14px;}

/* filas de comparación */
#cmpOverlay #filas{margin-top:22px;}
#cmpOverlay .dim{margin-bottom:14px;}
#cmpOverlay .dim-label{font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:8px;text-align:center;}
#cmpOverlay .dim-vals{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
#cmpOverlay .celda{background:#F1EFF3;border-radius:14px;padding:12px 10px;text-align:center;}
#cmpOverlay .celda b{display:block;font-size:14.5px;color:var(--ink);font-weight:700;line-height:1.25;}
#cmpOverlay .celda span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.3;}
#cmpOverlay .celda.win{background:#DFF9F7;}
#cmpOverlay .celda.win b{color:#067A74;}

/* resumen + aviso + footnote */
#cmpOverlay .resumen{background:var(--violet-dark,#291026);color:#fff;border-radius:20px;padding:18px;margin:22px 0;font-size:14.5px;line-height:1.5;}
#cmpOverlay .resumen b{color:var(--teal);}
#cmpOverlay .aviso{background:#FFEBF0;border-radius:16px;padding:18px;text-align:center;font-size:14px;font-weight:600;color:var(--coral);margin:20px 0;}
#cmpOverlay .footnote{font-size:11px;color:#A87CA3;text-align:center;margin-top:18px;line-height:1.5;}

/* CTAs */
#cmpOverlay .cta{display:block;width:100%;text-align:center;border-radius:999px;padding:16px;font-family:var(--font-body);font-weight:800;font-size:15px;border:none;cursor:pointer;margin-bottom:10px;transition:transform .12s ease;}
#cmpOverlay .cta:active{transform:scale(.99);}
#cmpOverlay .cta.solid{background:#EC295D;color:#fff;box-shadow:0 10px 24px rgba(255,51,102,.35);}
#cmpOverlay .cta.ghost{background:#fff;border:2px solid var(--coral);color:var(--coral);}

/* banderas (img base64 o emoji de fallback) */
#cmpOverlay .bandera{display:inline-block;width:auto;vertical-align:middle;}
#cmpOverlay .flag-emoji{display:inline-block;line-height:1;vertical-align:middle;}
#cmpOverlay .b-sel{height:20px;}
#cmpOverlay .flag-emoji.b-sel{font-size:18px;}
#cmpOverlay .b-xl{height:38px;}
#cmpOverlay .flag-emoji.b-xl{font-size:33px;}
#cmpOverlay .b-cta{height:19px;vertical-align:-4px;margin:0 2px;}
#cmpOverlay .flag-emoji.b-cta{font-size:17px;vertical-align:-2px;}
#cmpOverlay .b-inline{height:15px;vertical-align:-2px;margin:0 1px;}
#cmpOverlay .flag-emoji.b-inline{font-size:14px;}

/* === Iconos de sección: duotono transparente (PNG) + sombra que sigue la silueta === */
.idx-sec .emoji{filter:none;}
.idx-sec .emoji .sec-ico-img{display:block;height:78px;width:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.40));}

/* === Destacados ("2 artículos clave"): iconos duotono magenta + ambos bordes magenta === */
.art-feat.turq::before{background:#EC295D;}
.art-feat.turq .af-ico,.art-feat.mag .af-ico{background:none;width:auto;}
.af-ico-img{display:block;height:65px;width:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));}

/* ============================================================
   DESKTOP (≥1000px, subido de 900 el 2026-08-24 para alinear con el
   menú unificado — ver memoria menu-global-estructura) — capa
   aditiva; por debajo el mobile queda intacto.
   --edge alinea todo a un contenedor de 1080px centrado.
   ============================================================ */
@media (min-width:1000px){
  :root{--edge:max(calc(50vw - 540px), 32px);}

  .page{max-width:none;box-shadow:none;}

  /* Header full-width alineado al contenedor */
  .header{padding-left:var(--edge);padding-right:var(--edge);}

  /* Hero foto: más alto, overlays alineados al contenedor */
  .hero-photo{height:420px;}
  .hero-photo-frame img{object-position:center 35%;}
  .tag-banner-svg{left:var(--edge);top:26px;width:200px;}
  .badge-on-diente{right:var(--edge);}
  .badge-open{font-size:13.5px;padding:10px 18px;}

  /* Hero info: título a la izquierda, pass-card a la derecha */
  .hero-info{
    padding:24px var(--edge) 72px;
    display:grid;grid-template-columns:1fr 420px;
    column-gap:56px;align-items:end;
  }
  .back-link{grid-column:1 / -1;}
  /* El H1 se queda en 77px (Berna, 02-09: los 88px de la referencia no van).
     La bandera SÍ se escala con él para conservar la proporción de esa
     referencia —alto de bandera = 0,727 × el cuerpo del H1—, que es lo que hace
     que se vean parejas: 64/88 allá, 56/77 acá. El tracking cerrado se conserva. */
  .hero-h1{grid-column:1;font-size:77px;letter-spacing:-.035em;margin-bottom:0;}
  .hero-h1 .hero-name{gap:18px;}
  .hero-h1 .hero-flag{height:56px;margin-bottom:6px;}
  .pass-card{
    grid-column:2;grid-row:2 / span 2;align-self:end;
    padding:20px 22px;gap:14px;
  }
  .pass-card-flag{width:40px;}
  .pass-card-label{font-size:14px;}
  .pass-card-value{font-size:19px;white-space:nowrap;}
  .pass-card-btn{padding:10px 22px;font-size:14px;}

  /* Permite: 3 cards en fila */
  /* mas aire arriba/abajo entre secciones (pedido puntual sobre v13) */
  .permite{padding:80px var(--edge) 76px;}
  .benes{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;max-width:1080px;margin:28px auto 0;
  }
  .bene{padding:20px 22px 20px 28px;}

  /* Requisitos: 4 cards en fila */
  .requisitos{padding:76px var(--edge) 60px;}
  .req-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1080px;margin:0 auto;}

  /* Destacados: los 2 artículos lado a lado */
  .destacados{
    padding:60px var(--edge) 84px;
    display:grid;grid-template-columns:repeat(2,minmax(0,460px));
    justify-content:center;gap:16px;
  }
  .dest-head{grid-column:1 / -1;margin-bottom:10px;}
  .art-feat{margin-bottom:0;}

  /* Cuándo viajar: card centrada, ancho de lectura */
  .cuando{padding:calc(var(--cuando-asoma) + 50px) var(--edge) 40px;}
  .cuando-card{max-width:760px;margin:0 auto;padding:0 48px 36px;}

  /* Guía navegable: banda crema full-width, contenido a ancho de lectura */
  .guia{padding:0 0 48px;}
  .guia-head{margin:0;padding:46px 32px 34px;}
  .guia-title{font-size:44px;}
  .idx-nav{margin:0 0 6px;} /* top:74px ya lo fija la regla base, es el mismo en mobile y desktop */
  .idx-nav-scroll{
    max-width:792px;margin:0 auto;padding:0 16px;
    flex-wrap:wrap;justify-content:center;overflow-x:visible;
  }
  #idxMain{max-width:792px;margin:0 auto;padding:0 16px;}

  /* Modo Relax: imagen + texto lado a lado */
  .relax{
    max-width:1080px;margin:36px auto 56px;
    display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
    padding-bottom:0;
  }
  .relax-img{height:100%;min-height:300px;font-size:100px;}
  /* banner sin ilustración (seguro / personalizado sin imagen): una sola columna.
     Sin esto el texto queda en la mitad izquierda y la derecha vacía. */
  .relax.sin-img{grid-template-columns:1fr;}
  .relax.sin-img .relax-body{text-align:center;align-items:center;}
  .relax-body{padding:44px 44px 40px;text-align:left;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}
  .btn-relax{display:inline-block;width:auto;padding:17px 36px;}

  /* Footer */
  .footer{max-width:1080px;margin:28px auto 40px;}

  /* Bottom-sheets → diálogo centrado */
  .overlay{align-items:center;padding:24px;}
  .sheet{max-width:480px;border-radius:26px;}
  .sheet-grip{display:none;}

  /* FAB anclado al borde del contenedor */
  .fab-top{right:32px;bottom:28px;}
}


/* ═══ Widget «¿Cuándo viajar?»: estilos portados del molde (2026-07-26) ═══
   El motor genera .bisagra y .aviso-pp; la v13 no los tenía y se veían sin estilo. */
.bisagra{margin:-2px 0 22px 36px;}
.bisagra span{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.6px;color:#1B9A6B;background:#E5F6EE;border:1px solid #BBE3D0;border-radius:999px;padding:5px 12px;}
.aviso-pp{background:#E5F6EE;border:1px solid #BBE3D0;border-radius:16px;padding:16px 18px;margin-bottom:22px;}
.aviso-pp .app-t{font-family:var(--font-head);font-weight:700;font-size:15px;color:#127a54;margin-bottom:4px;}
.aviso-pp .app-d{font-size:13.5px;color:var(--ink-soft);line-height:1.45;}
.aviso-pp .app-cta{display:inline-block;margin-top:10px;font-weight:700;font-size:14px;color:#1B9A6B;text-decoration:none;}

/* ═══ Timeline en DESKTOP: el detalle al lado del valor, no debajo ═══
   El label ocupa la fila entera; valor y detalle caen lado a lado.
   El primer hito queda apilado: su detalle es largo y al lado se apretaba. */
@media (min-width:1000px){
  .timeline .tl-body{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:10px;
    align-items:baseline;
  }
  .timeline .tl-lbl{grid-column:1 / -1;}
  .timeline .tl-sub{margin-top:0;}
  /* el hito 1 ("Solicitá la visa online · Online · desde cualquier país…") sigue apilado */
  .timeline .tl-item:first-of-type .tl-body{display:block;}
  .timeline .tl-item:first-of-type .tl-sub{margin-top:3px;}
}

/* El atributo [hidden] es estilo del NAVEGADOR (display:none) y cualquier
   selector de clase le gana. `.relax` declara display:grid en la media query
   de desktop, así que una sección escondida con relax.hidden=true seguía
   dibujándose de 1000px para arriba: el banner del FullPack aparecía en las 69
   guías que no lo ofrecen. En mobile no pasaba, porque ahí .relax no declara
   display. Detectado el 2026-08-31 por Berna, en la guía de Alemania.
   Va al final del archivo y con [hidden] para ganarle a cualquier regla futura. */
.relax[hidden]{display:none;}

/* ═══ Hero panorámico C2b (2026-09-01) ═══════════════════════════════════════
   Elegida por Berna en _hero-anchas-alternativas.html. Una sola imagen para
   todos los viewports (hero-sydney-full.webp, 219 KB); adiós al panorama con
   outpainting de IA (image.webp). Dos capas: .hero-fondo = la misma imagen
   desenfocada por CSS (0 bytes extra) rellena los costados en pantallas
   >1800px; .hero-stage = la foto nítida en un escenario centrado que se
   disuelve en el fondo con una máscara progresiva de 340px. Arriba de 1600px
   el hero crece a 560px para que entre la escena completa (puente, Ópera,
   agua, personas hasta el muslo) — es lo que da la lectura panorámica.
   VOLVER ATRÁS: borrar este bloque entero + restaurar el <img> viejo en
   index.html (el comentario ahí dice cómo) — o revertir el commit. */
.hero-fondo{position:absolute;inset:0;overflow:hidden;}
.hero-fondo img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:blur(52px) saturate(1.15);transform:scale(1.18);
}
.hero-stage{position:absolute;inset:0;margin:0 auto;max-width:1800px;}
/* el velo oscuro de legibilidad del banner tiene que pintar ARRIBA de las
   capas nuevas (::before es primer hijo y quedaba tapado por los divs) */
.hero-photo-frame::before{z-index:1;}
/* ≥900: ancla 64% (centro medido de los avatars) + top (las caras nunca se
   cortan). En mobile no aplica: ahí no hay recorte vertical y el centrado
   base (center 40%) es el aprobado. */
@media (min-width:900px){
  .hero-stage img,.hero-fondo img{object-position:64% top;}
}
@media (min-width:1600px){
  .hero-photo{height:560px;}
}
@media (min-width:1800px){
  .hero-stage img{
    -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 120px,rgba(0,0,0,.75) 230px,#000 340px,#000 calc(100% - 340px),rgba(0,0,0,.75) calc(100% - 230px),rgba(0,0,0,.35) calc(100% - 120px),transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 120px,rgba(0,0,0,.75) 230px,#000 340px,#000 calc(100% - 340px),rgba(0,0,0,.75) calc(100% - 230px),rgba(0,0,0,.35) calc(100% - 120px),transparent 100%);
  }
}

/* ═══ Heroes por destino: composición con el grupo a la DERECHA (2026-09-01) ══
   Las fotos de destino (img/heroes/*.webp, 2752×1536 = 1,79:1) NO tienen la
   composición de la de Sydney (3168×1344 = 2,36:1, grupo al 64%): en las 18 el
   grupo va pegado al borde derecho, hasta el 97,8% del ancho. Con la geometría
   base pasaban dos cosas, las dos medidas en staging el 01-09:
     · en >1800px el fade derecho (340px) se comía a la chica ENTERA
       (arrancaba en 1460px y ella iba de 1492 a 1760: opacidad 0,12 en su borde);
     · en mobile el recorte horizontal la cortaba al medio (visible hasta 90,2%).
   Arreglo, que respeta la regla de Berna «los avatars siempre visibles enteros»:
   anclar la imagen a la derecha y fundir SÓLO hacia la izquierda —que además es
   donde vive el paisaje—. El build pone `.hero-propio` cuando la guía usa foto
   propia; Australia (Sydney) no la lleva y conserva su fade simétrico. */
.hero-photo.hero-propio .hero-stage{margin-left:auto;margin-right:0;}
.hero-photo.hero-propio .hero-stage img,
.hero-photo.hero-propio .hero-fondo img{object-position:100% 40%;}
@media (min-width:900px){
  .hero-photo.hero-propio .hero-stage img,
  .hero-photo.hero-propio .hero-fondo img{object-position:100% top;}
}
@media (min-width:1800px){
  /* sin fade a la derecha: ahí está el grupo, y el escenario ya llega al borde */
  .hero-photo.hero-propio .hero-stage img{
    -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 120px,rgba(0,0,0,.75) 230px,#000 340px,#000 100%);
            mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 120px,rgba(0,0,0,.75) 230px,#000 340px,#000 100%);
  }
}