/* Snoozim — one system, not one page.
   Tokens: 4 colours, a 4px spacing scale, a modular type scale, 3 radii, 1 line width.
   Flat: no shadows, no gradients. */

/* Poppins, self-hosted, WOFF2 only, latin subset (~8 KB each). swap = system font shows instantly on airport wifi. */
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Yellow marks the path to purchase and nothing else: the buy button, the
     recommended pack, focus and selection, positive confirmations, progress,
     and the one signature rule under the headline. Everything structural is
     ink. It used to mark a dozen things per screen, which is the same as
     marking none of them — and it left the price competing with a bullet. */
  /* colour: exactly four */
  --ink: #111111;
  --ground: #f2f2f3;
  --card: #ffffff;
  --brand: #FDD801;
  /* derived, text only: */
  --mute: #5f5f63;             /* on card/ground, ≥4.5:1 */
  --mute-on-ink: #c4c4c9;      /* on ink, ≥4.5:1 */
  --hair: #e6e6e8;
  --line: 1.5px;

  /* spacing: multiples of 4 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-20: 80px;

  /* type scale (ratio ~1.25) */
  --t--2: 12px; --t--1: 14px; --t-0: 16px; --t-1: 19px; --t-2: 24px;
  --t-3: clamp(26px, 3.6vw, 40px);
  --t-4: clamp(38px, 6.4vw, 68px);
  --t-num: 48px;                /* big figures: GB, price */

  /* radii: three, plus pills */
  --r-block: 24px; --r-card: 16px; --r-field: 12px; --r-pill: 999px;

  --w: 1120px;
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 17px/1.6 var(--font); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { line-height: 1.06; letter-spacing: -0.035em; margin: 0 0 var(--s-3); font-weight: 700; overflow-wrap: anywhere; }
h1 { font-size: var(--t-4); }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-1); }
p { margin: 0 0 var(--s-4); overflow-wrap: anywhere; }
code { font: var(--t--1)/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.muted { color: var(--mute); }
.small { font-size: var(--t--1); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

/* Small label above a heading */
.eyebrow { display: block; font-size: var(--t--2); font-weight: 700; letter-spacing: .04em; color: var(--mute); margin: 0 0 var(--s-3); }
.eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); margin-right: var(--s-2); vertical-align: 2px; }

/* header / footer */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); max-width: var(--w); margin: 0 auto; padding: var(--s-6); }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { display: block; width: 160px; height: auto; }
.site-header nav { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t--1); }
.site-header nav > a { text-decoration: none; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: var(--card); transition: background-color .15s ease, color .15s ease; }
.site-header nav > a:hover { background: var(--ink); color: var(--card); }
.lang { display: inline-flex; gap: 2px; background: var(--card); border-radius: var(--r-pill); padding: 3px; }
.lang a { padding: 6px var(--s-3); font-size: var(--t--2); border-radius: var(--r-pill); text-decoration: none; }
.lang a.on { background: var(--ink); color: var(--card); }
.site-footer { max-width: var(--w); margin: var(--s-6) auto 0; padding: var(--s-8) var(--s-8) var(--s-10); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; font-size: var(--t--1); color: var(--mute); }
.site-footer a { margin-right: var(--s-4); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.footer-logo { vertical-align: -2px; }

main { max-width: var(--w); margin: 0 auto; padding: 0 var(--s-6); }

/* Every section is a white block on the grey ground */
section { background: var(--card); border-radius: var(--r-block); padding: var(--s-14) var(--s-12); margin-bottom: var(--s-5); }
.narrow { max-width: 660px; margin-left: auto; margin-right: auto; }

/* notice: cancelled payment, rate limit… says what to do, not what broke */
.notice { background: var(--ground); border-left: 5px solid var(--brand); border-radius: var(--r-field); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-5); font-size: var(--t-0); }
.notice strong { display: block; margin-bottom: var(--s-1); }

/* hero: breathes directly on the ground; optional real photo beside the copy.
   The photo is not decoration. It carries the promise of the page, so it takes
   the price anchor on top of it and, on a phone, the full width of the screen. */
.hero { background: none; padding: var(--s-12) var(--s-2) var(--s-14); display: grid; gap: var(--s-8); }
.hero h1 { max-width: 15ch; }
.hero h1::after { content: ""; display: block; width: 84px; height: 9px; background: var(--brand); margin-top: var(--s-6); }
/* The home hero swaps that pseudo-element for a real one, because a takeoff
   needs two moving parts and a pseudo-element can only be one. Same 84x9 mark
   in the same place, so nothing changes until a phone scrolls. */
.hero--takeoff h1::after { display: none; }
.hero-rule { position: relative; height: 9px; margin-top: var(--s-6); }
.hero-rule-bar { position: absolute; left: 0; top: 0; display: block; width: 84px; height: 9px; background: var(--brand); }
/* Desktop keeps the plain rule: on a mouse there is no scrub, the hero barely
   moves, and an aeroplane sitting still next to a headline is just clip art. */
.hero-rule-plane { display: none; }
.hero p { font-size: clamp(18px, 2.1vw, 21px); max-width: 42ch; color: var(--mute); margin-top: var(--s-6); margin-bottom: 0; }

/* With a photo the copy and the actions stack in the left column while the
   image spans both rows, so the phone gets the order that reads best on its
   own: headline, promise, photo, buttons. No source-order tricks needed. */
.hero--photo { grid-template-columns: 1.05fr .95fr; grid-template-rows: auto 1fr; column-gap: var(--s-12); row-gap: var(--s-10); align-items: start; }
.hero--photo .hero-copy { grid-column: 1; grid-row: 1; }
/* The photo is taller than the copy, so the buttons drop to the bottom of
   the column and line up with its lower edge instead of leaving a hole. */
.hero--photo .hero-actions { grid-column: 1; grid-row: 2; align-self: end; }
.hero--photo .hero-photo { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
/* The price sits next to the button, not inside the sentence: it is the
   number the ad promised and the first thing the visitor looks for. */
.hero-from { display: inline-flex; align-items: center; font-weight: 700;
  font-size: var(--t-1); letter-spacing: -0.01em; color: var(--ink); }

.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.hero-cta .btn { padding: var(--s-4) var(--s-6); }

/* El segundo camino, para quien ya sabe que necesita mas datos. Enlace y no
   boton: dos botones del mismo peso obligan a elegir antes de entender. */
.hero-alt { display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t--1); color: var(--mute); text-decoration: underline;
  text-underline-offset: 3px; }
.hero-alt:hover, .hero-alt:focus-visible { color: var(--ink); }
@media (max-width: 560px) {
  /* En el movil el boton ocupa la linea entera: es el objetivo, y compartirla
     con el enlace deja los dos estrechos justo donde el pulgar es mas torpe. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero-alt { justify-content: center; }
}

/* Three facts the headline does not already make, on a hairline. */
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); list-style: none; margin: var(--s-8) 0 0; padding: var(--s-5) 0 0; border-top: var(--line) solid var(--hair); font-size: var(--t--1); color: var(--mute); }
.hero-meta li { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero-meta li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; }

.hero-photo { position: relative; margin: 0; border-radius: var(--r-block); overflow: hidden; aspect-ratio: 4 / 5; background: var(--card); }
/* The crop favours the upper third: in a portrait of a person that keeps the
   head and hands in frame, which is what a centred crop chops off first. */
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }
/* The price sits on the photo instead of waiting in the pack grid: it is the
   first thing a visitor looks for and this is the cheapest place to answer. */
.hero-chip { position: absolute; left: var(--s-5); bottom: var(--s-5); display: inline-flex; align-items: center; gap: var(--s-2); background: var(--card); color: var(--ink); border-radius: var(--r-pill); padding: var(--s-3) var(--s-5); font-size: var(--t--1); font-weight: 700; letter-spacing: -0.01em; }
.hero-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; }

/* packs */
.packs, .how, .check { text-align: center; }
.packs h2, .how h2 { margin-bottom: var(--s-10); }
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); text-align: left; }
.pack { position: relative; background: var(--ground); border-radius: var(--r-card); padding: var(--s-8) var(--s-6) var(--s-6); display: flex; flex-direction: column; transition: background-color .15s ease; }
.pack:hover { background: #eaeaec; }
.pack--popular { background: var(--ink); color: var(--card); }
.pack--popular:hover { background: #000; }
.pack--popular .pack-meta { color: var(--mute-on-ink); }
.pack--popular .btn { background: var(--brand); color: var(--ink); }
.pack-tag { position: absolute; top: var(--s-5); right: var(--s-5); background: var(--brand); color: var(--ink); font-size: 11px; font-weight: 700; padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .05em; }
.pack-data { font-size: var(--t-num); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.pack-meta { font-size: var(--t--1); color: var(--mute); margin-top: var(--s-2); }
.pack-price { font-size: var(--t-2); font-weight: 700; margin: var(--s-6) 0 var(--s-5); }
.pack-why { font-size: var(--t--1); line-height: 1.5; margin: var(--s-4) 0 var(--s-5); color: var(--mute-on-ink); }
.packs > .muted { margin: var(--s-6) 0 0; font-size: var(--t--1); }


/* buttons & forms */
.btn { display: inline-block; background: var(--ink); color: var(--card); border: 0; border-radius: var(--r-pill); padding: var(--s-4) var(--s-8); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .12s ease, background-color .12s ease, color .12s ease; }
.btn:hover { background: var(--brand); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: wait; }
.btn--block { width: 100%; text-align: center; }
input[type="email"], input[type="text"] { width: 100%; padding: var(--s-4) var(--s-5); border: var(--line) solid var(--hair); border-radius: var(--r-field); font: inherit; background: var(--card); color: var(--ink); -webkit-appearance: none; }
input:focus { outline: 3px solid var(--brand); outline-offset: 1px; border-color: var(--ink); }
.inline-form { display: flex; gap: var(--s-3); max-width: 520px; margin: var(--s-6) auto 0; }
.inline-form input { flex: 1; background: var(--ground); border-color: transparent; }
.stack { display: grid; gap: var(--s-2); margin-top: var(--s-6); }
.stack label { font-size: var(--t--1); font-weight: 700; margin-top: var(--s-3); }
.stack input { background: var(--ground); border-color: transparent; }
.stack .btn { margin-top: var(--s-5); }
.form-msg { margin-top: var(--s-3); font-weight: 700; }
.form-msg.err { color: #b00020; }
.optin { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t--1); color: var(--mute); margin: var(--s-4) 0 0; cursor: pointer; }
.optin input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }

/* how it works */
.steps { list-style: none; padding: 0; margin: 0; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.steps li { background: var(--ground); border-radius: var(--r-card); padding: var(--s-6); display: grid; gap: var(--s-2); }
.steps strong { font-size: var(--t-1); }
.steps strong::before { content: ""; display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); margin-bottom: var(--s-4); }
.steps span { color: var(--mute); font-size: var(--t-0); }
.coverage { display: flex; align-items: center; gap: var(--s-10); flex-wrap: wrap; }
.coverage-stat { flex-shrink: 0; text-align: center; }
.coverage-n { display: block; font-size: 6rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.coverage-label { display: block; font-weight: 700; font-size: var(--t-1); margin-top: var(--s-1); }
.coverage-list { flex: 1; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.coverage-list li { padding-left: var(--s-5); position: relative; color: var(--mute); line-height: 1.5; }
.coverage-list li::before { content: "—"; position: absolute; left: 0; color: var(--ink); font-weight: 700; }
.check p { color: var(--mute); }

/* ---- Redeem: looks like the card the customer is holding -----------------
   yellow ground (the sleeve), a black card with yellow accents (the insert). */
body.page-redeem { background: var(--brand); }
body.page-redeem .site-header nav > a { background: rgba(255,255,255,.55); }
body.page-redeem .site-header nav > a:hover { background: var(--ink); color: var(--card); }
body.page-redeem .lang { background: rgba(255,255,255,.55); }
body.page-redeem .site-footer { color: var(--ink); }
.card-black { background: var(--ink); color: var(--card); border-radius: var(--r-block); padding: var(--s-12); max-width: 560px; }
.card-black .eyebrow { color: var(--brand); }
.card-black h1 { color: var(--brand); }
.card-black p { color: var(--mute-on-ink); }
.card-black .stack label { color: var(--card); }
.card-black .stack input { background: var(--card); color: var(--ink); border-color: transparent; }
.card-black .optin { color: var(--mute-on-ink); }
.card-black .optin input { accent-color: var(--brand); }
.card-black .btn { background: var(--brand); color: var(--ink); }
.card-black .btn:hover { background: var(--card); }
.card-black .form-msg.err { color: #ffb4a8; }
.card-black .ready h2 { color: var(--brand); }
.card-black .install { color: var(--mute-on-ink); }
.card-black details { background: rgba(255,255,255,.06); }
.card-black .manual code { background: var(--card); color: var(--ink); }
.card-black .manual dt { color: var(--mute-on-ink); }
.card-black .js-ready-email, .card-black .pulse { color: var(--card); }
.card-black .card-hint { font-size: var(--t--1); color: var(--mute-on-ink); margin-top: var(--s-6); }
.card-black .card-hint b { color: var(--card); }

/* Redeem step 2: base pack + paid upgrades (upsell at redemption) */
.redeem-included { font-weight: 700; margin: var(--s-6) 0 var(--s-4); }
.redeem-divider { text-align: center; color: var(--mute-on-ink); font-size: var(--t--1); text-transform: uppercase;
  letter-spacing: .05em; margin: var(--s-8) 0 var(--s-4); }
.redeem-upgrade { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0; border-top: 1px solid rgba(255,255,255,.12); }
.redeem-upgrade:last-of-type { border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: var(--s-6); }
.redeem-upgrade span { font-weight: 700; }
.redeem-upgrade .btn { padding: var(--s-2) var(--s-6); }

/* success / ready */
.pulse { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.qr { margin: var(--s-6) 0; }
.qr img { display: block; border-radius: var(--r-card); padding: var(--s-4); background: #fff; border: var(--line) solid var(--hair); width: 300px; height: 300px; max-width: 100%; }
.install { padding-left: var(--s-5); color: var(--mute); }
.install li { margin-bottom: var(--s-2); }
details { background: var(--ground); border-radius: var(--r-card); padding: var(--s-5) var(--s-6); margin: var(--s-6) 0; }
summary { cursor: pointer; font-weight: 700; }
.lpa { display: block; margin-top: var(--s-3); }

/* manual eSIM entry: the two fields the phone actually asks for */
.manual { margin: var(--s-4) 0 0; }
.manual dt { font-size: var(--t--2); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); margin-top: var(--s-4); }
.manual dd { margin: var(--s-2) 0 0; }
.manual code { display: block; background: var(--card); border-radius: var(--r-field); padding: var(--s-3) var(--s-4); }

/* usage */
.usage { background: var(--ground); border-radius: var(--r-card); padding: var(--s-6); margin: var(--s-6) 0 var(--s-8); }
.usage-bar { height: 12px; border-radius: var(--r-pill); background: #e0e0e2; overflow: hidden; }
.usage-bar span { display: block; height: 100%; width: 0; background: var(--brand); transition: width .6s ease; }
.usage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin: var(--s-6) 0 var(--s-2); }
.usage-grid dt { font-size: var(--t--2); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.usage-grid dd { margin: var(--s-2) 0 0; font-size: var(--t-2); font-weight: 700; letter-spacing: -0.035em; }
.recharge { border-top: var(--line) solid var(--hair); padding-top: var(--s-8); margin-top: var(--s-2); }

/* error pages */
.errpage .code { display: block; font-size: var(--t--1); color: var(--mute); margin-bottom: var(--s-3); }

/* compatibility checker */

/* top-up note */
.topup-note { background: var(--ink); color: var(--card); border-radius: var(--r-block); padding: var(--s-14) var(--s-12); margin-bottom: var(--s-5); }
.topup-note .eyebrow { color: var(--brand); }
.topup-note h2 { color: var(--card); }
.topup-note p { color: rgba(255,255,255,.7); }
.topup-note .btn { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.topup-note .btn:hover { background: #e6c200; border-color: #e6c200; }

/* packs comparison + guarantee */
.packs-vs { margin-top: calc(var(--s-2) * -1); margin-bottom: var(--s-6); }
.pack-guarantee { margin-top: var(--s-4); font-weight: 700; font-size: var(--t--1); }
.pack-guarantee::before { content: "✓ "; color: #22c55e; }

/* animated payment ticker */
.pay-ticker-wrap { margin-top: var(--s-8); }
.pay-ticker-label { display: block; text-align: center; font-size: var(--t--2); color: var(--mute); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--s-5); }
.pay-ticker { overflow: hidden; mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); }
@keyframes snz-ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.pay-ticker-track { display: flex; align-items: center; width: max-content; animation: snz-ticker 18s linear infinite; will-change: transform; }
.pay-ticker:hover .pay-ticker-track { animation-play-state: paused; }
.pay-ticker-item { flex: none; display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-6); opacity: .45; }
.pay-ticker-svg { height: 28px; width: 28px; flex: none; display: block; color: var(--ink); }
.pay-ticker-name { font-size: var(--t-0); font-weight: 700; white-space: nowrap; }

/* topup inline form on dark bg */
.topup-note .topup-resend input { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.topup-note .topup-resend input::placeholder { color: rgba(255,255,255,.45); }
.topup-note .topup-msg { color: var(--brand); font-size: var(--t--1); margin-top: var(--s-3); }

/* legal */
.legal h2 { font-size: var(--t-1); margin-top: var(--s-8); }
.legal { color: #3a3a3d; }

@media (max-width: 820px) {
  body { font-size: 16px; }
  section { padding: var(--s-8) var(--s-6); }
  .hero { padding: var(--s-6) var(--s-1) var(--s-8); gap: var(--s-6); }
  .hero--photo { grid-template-columns: 1fr; row-gap: var(--s-6); }
  .hero--photo .hero-copy,
  .hero--photo .hero-actions,
  .hero--photo .hero-photo { grid-column: 1; grid-row: auto; }
  /* Edge to edge instead of floating as one more rounded card, which is what
     made it read like a stock block. -20px is main's 16px gutter plus the
     hero's own 4px. 16/10 turned a vertical photo into a letterbox slit; 4/3
     crops far less of a portrait source and still leaves the packs in view. */
  .hero-photo { aspect-ratio: 4 / 3; margin-inline: -20px; border-radius: 0; }
  .hero-cta .btn { flex: 1 1 auto; text-align: center; }
  /* Phone only. Both halves move on the compositor — scaleX on the trail,
     translate on the plane — so a scroll handler that sets one custom property
     never triggers layout. --takeoff runs 0 to 1 over the first 45% of the
     screen; app.js sets it, and leaves it unset when motion is reduced. */
  .hero-rule-plane { display: block; position: absolute; left: 84px; top: 50%; margin-left: var(--s-2); color: var(--ink);
    transform: translate(calc(var(--takeoff, 0) * 92vw), -50%);
    opacity: calc(1 - var(--takeoff, 0) * 1.35); will-change: transform, opacity; }
  .hero-rule-bar { transform-origin: left center; transform: scaleX(calc(1 + var(--takeoff, 0) * 2.6)); will-change: transform; }
  .hero-meta { margin-top: var(--s-6); }
  .pack-grid, .steps { grid-template-columns: 1fr; }
  .usage-grid { grid-template-columns: 1fr 1fr; }
  .site-header { padding: var(--s-3) var(--s-4); gap: var(--s-2); }
  .site-header nav { gap: 6px; font-size: 13px; }
  .site-header nav > a { padding: var(--s-2) var(--s-3); white-space: nowrap; }
  .lang a { padding: 5px var(--s-2); font-size: var(--t--2); }
  .logo img { width: 128px; }
  .inline-form { flex-direction: column; }
  main { padding: 0 var(--s-4); }
  .site-footer { padding: var(--s-6) var(--s-5) var(--s-8); }
  .card-black { padding: var(--s-8) var(--s-6); }
}
/* Small phones: logo+lang top row, nav links second row */
@media (max-width: 430px) {
  .site-header { flex-wrap: wrap; justify-content: space-between; row-gap: var(--s-3); padding: var(--s-4) var(--s-5); }
  .logo img { width: 150px; }
  .site-header nav { order: 3; width: 100%; justify-content: center; gap: var(--s-2); }
  .lang { order: 2; margin-left: auto; }
  .hero { padding: var(--s-4) var(--s-1) var(--s-6); }
  .hero h1 { font-size: 33px; }
  .hero h1::after { width: 64px; height: 7px; margin-top: var(--s-4); }
  .hero-rule { height: 7px; margin-top: var(--s-4); }
  .hero-rule-bar { width: 64px; height: 7px; }
  .hero-rule-plane { left: 64px; }
  .hero p { font-size: var(--t-0); margin-top: var(--s-4); }
  .hero-chip { left: var(--s-4); bottom: var(--s-4); }
  .hero-meta { gap: var(--s-2) var(--s-5); }
  section { padding: var(--s-6) var(--s-5); }
  .packs h2, .how h2 { margin-bottom: var(--s-6); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse, .btn, .usage-bar span, .pack { animation: none; transition: none; }
  .hero-rule-bar, .hero-rule-plane { transform: none; }
  .hero-rule-plane { opacity: 1; }
}

/* other destinations disclosure (home) — native <details>, no JS (CSP: script-src 'self') */
.dest-more { margin-top: var(--s-10); border-top: 1px solid var(--hair); padding-top: var(--s-6); }
.dest-more-toggle { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font-weight: 700; font-size: var(--t--1); color: var(--mute); list-style: none; transition: color .12s ease; }
.dest-more-toggle::-webkit-details-marker { display: none; }
.dest-more-toggle::after { content: "+"; font-size: 1.15em; line-height: 1; display: inline-block; transition: transform .15s ease; }
.dest-more[open] .dest-more-toggle::after { transform: rotate(45deg); }
.dest-more-toggle:hover { color: var(--ink); }
.dest-more-group { margin-top: var(--s-8); }
.dest-more-title { font-size: var(--t-0); font-weight: 700; margin: 0 0 var(--s-5); }

/* destination picker + single-country landing */
.country-switch { margin-top: var(--s-10); border-top: 1px solid var(--hair); padding-top: var(--s-8); }
.country-picker-title { font-size: var(--t-1); font-weight: 700; letter-spacing: -.02em; margin: var(--s-2) 0 var(--s-5); }
.country-filter { margin: 0 auto var(--s-6); max-width: 320px; }
.country-filter input { width: 100%; font: inherit; font-size: var(--t--1); padding: var(--s-3) var(--s-5); border: var(--line) solid var(--hair); border-radius: var(--r-pill); background: var(--card); color: var(--ink); text-align: center; }
.country-filter input:focus { outline: none; border-color: var(--ink); }
.country-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.country-card { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: var(--line) solid var(--hair); border-radius: 12px; background: var(--card); text-decoration: none; color: var(--ink); transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease; }
.country-card:hover { border-color: var(--ink); transform: translateY(-1px); box-shadow: 0 2px 0 var(--ink); }
.country-card.is-current { border-color: var(--ink); background: var(--ink); color: var(--card); }
.country-flag { flex: none; width: 28px; height: 21px; border-radius: 3px; object-fit: cover; display: block; }
.country-name { font-weight: 700; font-size: var(--t--1); line-height: 1.2; text-align: left; }
.country-empty { margin: var(--s-6) 0 0; }

/* country hero: flag + name badge above the headline */
.hero--country { padding-bottom: var(--s-8); }
.country-hero-badge { display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2); border: var(--line) solid var(--hair); border-radius: var(--r-pill); background: var(--card); margin-bottom: var(--s-5); }
.country-hero-badge img { width: 34px; height: 26px; border-radius: 4px; object-fit: cover; display: block; }
.country-hero-badge span { font-weight: 700; font-size: var(--t--1); letter-spacing: .01em; }

/* unit price under the total, so packs of different sizes are comparable */
.pack-unit { font-size: 12px; font-weight: 700; margin: calc(var(--s-5) * -1) 0 var(--s-5); letter-spacing: .01em; }
.pack--popular .pack-unit { color: var(--mute-on-ink); }

.cross-sell { margin-top: var(--s-12); border-top: 1px solid var(--hair); padding-top: var(--s-8); }
.cross-sell h3 { font-size: var(--t-1); font-weight: 700; letter-spacing: -.02em; margin: 0 0 var(--s-3); }
.cross-sell > .muted { max-width: 46ch; margin: 0 auto var(--s-8); }

/* multi-eSIM purchase */
.pack--popular .pack--popular 
.purchase-note { max-width: 52ch; margin: 0 auto var(--s-8); }
.seat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); text-align: left; }
.seat { border: var(--line) solid var(--hair); border-radius: 16px; padding: var(--s-5); background: var(--card); }
.seat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.seat-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--card); font-weight: 700; font-size: 13px; }
.seat-state { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.seat-state--provisioned { color: var(--ink); }
.seat-current { font-size: var(--t--1); font-weight: 700; margin: 0 0 var(--s-4); word-break: break-all; }
.seat .inline-form { margin: 0; }
.seat-link { display: inline-block; margin-top: var(--s-3); font-size: var(--t--1); font-weight: 700; color: var(--ink); }

/* `.packs > .muted` above sets margin: x 0 0 and outranks a lone class, so the
   auto margins that centre this block need the same parent in the selector. */

/* Long tail of destinations stays folded until asked (or searched). */
.country-picker:not(.is-expanded) .country-grid li.is-extra { display: none; }
.country-more { display: inline-block; margin-top: var(--s-5); padding: var(--s-3) var(--s-6); border: var(--line) solid var(--hair); border-radius: var(--r-pill); background: transparent; color: var(--ink); font: inherit; font-weight: 700; font-size: var(--t--1); cursor: pointer; transition: border-color .12s ease, background-color .12s ease, color .12s ease; }
.country-more:hover { border-color: var(--ink); background: var(--ink); color: var(--card); }

/* Language switch was a 29px tap target; pad the hit area out to 44 without
   inflating the pill itself, which is what the eye is judging. */
.lang a { position: relative; }
.lang a::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }

/* One shared "how many eSIMs" control under the pack grid. */
.pack-qty { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin: var(--s-6) 0 0; }
.pack-qty-label { font-size: var(--t--1); font-weight: 700; color: var(--mute); }
.pack-qty-ctl { display: inline-flex; align-items: center; gap: var(--s-2); border: var(--line) solid var(--hair); border-radius: var(--r-pill); padding: var(--s-1); background: var(--card); }
.pack-qty-ctl button { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font: 700 20px/1 var(--font); cursor: pointer; transition: background-color .12s ease, color .12s ease; }
.pack-qty-ctl button:hover:not(:disabled) { background: var(--ink); color: var(--card); }
.pack-qty-ctl button:disabled { opacity: .25; cursor: default; }
.pack-qty-n { min-width: 2ch; text-align: center; font-weight: 700; font-size: var(--t-0); }

/* Quantity + discount code, folded away so the default view stays clean. */
.pack-extras { margin: var(--s-6) auto 0; max-width: 420px; text-align: left; }
.pack-extras-toggle { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font-size: var(--t--1); font-weight: 700; color: var(--mute); list-style: none; transition: color .12s ease; }
.pack-extras-toggle::-webkit-details-marker { display: none; }
.pack-extras-toggle::after { content: "+"; font-size: 1.15em; line-height: 1; display: inline-block; transition: transform .15s ease; }
.pack-extras[open] .pack-extras-toggle::after { transform: rotate(45deg); }
.pack-extras-toggle:hover { color: var(--ink); }
.pack-extras-body { margin-top: var(--s-5); padding: var(--s-5); border: var(--line) solid var(--hair); border-radius: 16px; background: var(--card); display: grid; gap: var(--s-5); }
.pack-qty { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin: 0; }
.pack-qty-label, .promo-label { font-size: var(--t--1); font-weight: 700; color: var(--mute); }
.promo-label { display: block; margin-bottom: var(--s-2); }
.pack-qty-ctl { display: inline-flex; align-items: center; gap: var(--s-2); border: var(--line) solid var(--hair); border-radius: var(--r-pill); padding: var(--s-1); }
.pack-qty-ctl button { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font: 700 20px/1 var(--font); cursor: pointer; transition: background-color .12s ease, color .12s ease; }
.pack-qty-ctl button:hover:not(:disabled) { background: var(--ink); color: var(--card); }
.pack-qty-ctl button:disabled { opacity: .25; cursor: default; }
.pack-qty-n { min-width: 2ch; text-align: center; font-weight: 700; font-size: var(--t-0); }
.promo-row { display: flex; gap: var(--s-2); }
.promo-row input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--t--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: var(--s-3) var(--s-4); border: var(--line) solid var(--hair); border-radius: var(--r-pill); background: var(--card); color: var(--ink); }
.promo-row input:focus { outline: none; border-color: var(--ink); }
.promo-row .btn { flex: none; padding: var(--s-3) var(--s-5); font-size: var(--t--1); }
.promo-msg { margin: var(--s-3) 0 0; font-size: var(--t--1); font-weight: 700; }
.promo-msg.err { color: #b00020; }
.js-promo.is-applied .promo-row input { border-color: var(--ink); }

/* Cookie consent bar. Accept and reject carry the same visual weight on
   purpose: AEPD guidance treats a hard-to-find refusal as no consent at all. */
.cookie-bar { position: fixed; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: 60; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); max-width: 720px; margin: 0 auto; padding: var(--s-5) var(--s-6); background: var(--card); border: var(--line) solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.cookie-bar-text { margin: 0; font-size: var(--t--1); line-height: 1.45; flex: 1 1 260px; }
.cookie-bar-text a { color: var(--ink); font-weight: 700; }
.cookie-bar-actions { display: flex; gap: var(--s-2); flex: none; }
.cookie-bar-actions .btn { padding: var(--s-3) var(--s-6); font-size: var(--t--1); }
.cookie-bar-actions .js-cookie-yes { background: var(--brand); color: var(--ink); }
.cookie-bar-actions .js-cookie-yes:hover { background: var(--ink); color: var(--card); }
/* Room to scroll clear of a bar that is fixed over the page. Only while it is
   up, and it costs nothing once the visitor has answered. */
body.has-cookie-bar { padding-bottom: 150px; }
.btn--ghost { background: transparent; color: var(--ink); border: var(--line) solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--card); }
@media (max-width: 560px) {
  .cookie-bar { flex-direction: column; align-items: stretch; text-align: left; }
  /* flex-basis measures the MAIN axis. In a row that 260px means "at least this
     wide"; the moment the bar turns into a column it means "at least this TALL",
     and with flex-grow on top the paragraph stretched into a hand-sized hole
     between the text and the buttons. In a column the text sizes to its content. */
  .cookie-bar-text { flex: 0 0 auto; }
  .cookie-bar-actions .btn { flex: 1 1 0; }
  /* 188px of fixed bar over a 812px screen was burying both hero buttons on a
     first visit. Tighter type and padding take it under 140. */
  .cookie-bar { padding: var(--s-4) var(--s-5); gap: var(--s-3); }
  .cookie-bar-text { font-size: var(--t--2); line-height: 1.4; }
  .cookie-bar-actions .btn { padding: var(--s-3) var(--s-4); }
}

/* Data calculator — one question per screen.
   Sits inside the site's normal section card (.narrow), so the only job here is
   the wizard itself: no competing widths, no bespoke padding. */
.calc { text-align: center; max-width: 540px; }
.calc > .eyebrow { text-align: left; }
.calc-progress { height: 3px; background: var(--hair); border-radius: 3px; overflow: hidden; margin: 0 0 var(--s-8); }
.calc-progress-bar { display: block; height: 100%; width: 25%; background: var(--brand); transition: width .35s cubic-bezier(.2,.8,.2,1); }

/* Only the active step is in the flow, so the card grows and shrinks with it. */
/* Every question screen reserves the same height, so the card does not jump
   between a two-option step and a three-option one. The result is left free to
   grow: it is the end of the flow, so nothing moves under the reader there. */
.calc-step[hidden] { display: none; }
.calc-step { animation: calcIn .32s cubic-bezier(.2,.8,.2,1) both; }
.calc-step:not(.calc-step--result) { min-height: var(--calc-h, 360px); display: flex; flex-direction: column; justify-content: center; }
/* Destination: flags with a search box. The list scrolls inside a fixed frame
   so this screen stays exactly as tall as the others. */
.calc-dest { max-width: 400px; margin: 0 auto; }
.calc-dest-search { width: 100%; font: inherit; font-size: var(--t--1); padding: var(--s-3) var(--s-5); border: var(--line) solid var(--hair); border-radius: var(--r-pill); background: var(--card); color: var(--ink); text-align: center; margin-bottom: var(--s-3); }
.calc-dest-search:focus { outline: none; border-color: var(--ink); }
.calc-dest-list { list-style: none; margin: 0; padding: 0 var(--s-2) 0 0; max-height: 236px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: var(--s-1); text-align: left; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
/* The native scrollbar looked like a system widget dropped into the page. */
.calc-dest-list::-webkit-scrollbar { width: 6px; }
.calc-dest-list::-webkit-scrollbar-track { background: transparent; }
.calc-dest-list::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 3px; }
.calc-dest-list::-webkit-scrollbar-thumb:hover { background: var(--mute); }
/* Fades the last row so it reads as "more below" instead of a hard cut. */
.calc-dest { position: relative; }
.calc-dest::after { content: ""; position: absolute; left: 0; right: var(--s-2); bottom: 0; height: 28px; background: linear-gradient(to top, var(--card), transparent); pointer-events: none; }
.calc-dest-list li[hidden] { display: none; }
.calc-dest-opt { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-3) var(--s-4); border: var(--line) solid transparent; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; font-size: var(--t--1); cursor: pointer; transition: background-color .12s ease, border-color .12s ease; }
.calc-dest-opt:hover { background: var(--ground); }
.calc-dest-opt.is-on { border-color: var(--ink); background: var(--ground); }
.calc-dest-flag { flex: none; width: 26px; height: 20px; border-radius: 3px; object-fit: cover; display: block; }
.calc-dest-none { margin: var(--s-4) 0 0; text-align: center; }
@keyframes calcIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.calc-step-n { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--mute); margin: 0 0 var(--s-3); }
.calc-step-q { font-size: var(--t-1); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin: 0 auto var(--s-6); max-width: 20ch; }

/* days */
/* Days: a stepper, same control language as the quantity picker on the packs. */
.calc-days { display: flex; align-items: center; justify-content: center; gap: var(--s-5); margin-bottom: var(--s-8); }
.calc-days-v { display: flex; align-items: baseline; gap: var(--s-2); min-width: 5.5ch; justify-content: center; }
.calc-days-n { font-size: var(--t-num); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.calc-days-u { font-size: var(--t-0); font-weight: 700; color: var(--mute); }
.calc-day-btn { flex: none; width: 48px; height: 48px; padding: 0; border: var(--line) solid var(--hair); border-radius: 50%; background: var(--card); color: var(--ink); font: 700 24px/1 var(--font); cursor: pointer; transition: background-color .12s ease, color .12s ease, border-color .12s ease; }
.calc-day-btn:hover:not(:disabled) { background: var(--ink); color: var(--card); border-color: var(--ink); }
.calc-day-btn:disabled { opacity: .25; cursor: default; }

/* choices */
.calc-choices { display: grid; gap: var(--s-3); max-width: 420px; margin: 0 auto; }
.calc-choice { display: block; width: 100%; text-align: left; padding: var(--s-4) var(--s-5); border: var(--line) solid var(--hair); border-radius: var(--r-field, 12px); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
.calc-choice:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 3px 0 var(--ink); }
.calc-choice:active { transform: translateY(0); box-shadow: none; }
.calc-choice-t { display: block; font-weight: 700; font-size: var(--t-0); }
.calc-choice-h { display: block; font-size: var(--t--1); color: var(--mute); margin-top: 2px; }

/* result */
.calc-step--result > .eyebrow { display: inline-block; margin-bottom: var(--s-3); }
.calc-figure { font-size: var(--t-num); font-weight: 700; letter-spacing: -.05em; line-height: 1; margin: 0 0 var(--s-5); }
.calc-figure::after { content: ""; display: block; width: 64px; height: 7px; background: var(--ink); margin: var(--s-4) auto 0; }
.calc-pick { font-size: var(--t-0); line-height: 1.5; margin: var(--s-6) auto var(--s-6); max-width: 34ch; }
.calc-cta { display: grid; gap: var(--s-2); max-width: 420px; margin: 0 auto; }
.calc-topup { margin: var(--s-5) auto 0; max-width: 38ch; }

/* Reuses the site's own <details> box (grey card) rather than fighting it, so
   it reads the same as the manual activation code on the success page. */
.calc-how { max-width: 420px; margin: var(--s-6) auto 0; text-align: left; }
.calc-how-toggle { cursor: pointer; font-size: var(--t--1); font-weight: 700; color: var(--mute); list-style: none; display: inline-flex; align-items: center; gap: var(--s-2); }
.calc-how-toggle::-webkit-details-marker { display: none; }
.calc-how-toggle::after { content: "+"; font-size: 1.15em; line-height: 1; display: inline-block; transition: transform .15s ease; }
.calc-how[open] .calc-how-toggle::after { transform: rotate(45deg); }
.calc-how-toggle:hover { color: var(--ink); }
.calc-how-body { margin-top: var(--s-4); display: grid; gap: var(--s-4); }
.calc-table { width: 100%; border-collapse: collapse; font-size: var(--t--1); }
.calc-table td { padding: var(--s-2) 0; border-bottom: 1px solid var(--hair); }
.calc-table td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.calc-table tr:last-child td { border-bottom: 0; }

/* quiet navigation */
.calc-back, .calc-restart { display: block; margin: var(--s-6) auto 0; padding: var(--s-2) var(--s-3); border: 0; background: transparent; color: var(--mute); font: inherit; font-size: var(--t--1); font-weight: 700; cursor: pointer; transition: color .12s ease; }
.calc-back:hover, .calc-restart:hover { color: var(--ink); }
.calc-link { display: inline-block; margin-top: var(--s-3); font-size: var(--t--1); font-weight: 700; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .calc-step { animation: none; }
  .calc-progress-bar { transition: none; }
  .calc-choice:hover { transform: none; }
}

/* The calculator's own hero is trimmed: on a phone the tool itself has to be
   the thing you see, not two screens of preamble above it. */
.hero--calc { padding-top: var(--s-4); padding-bottom: var(--s-5); }
.hero--calc h1 { font-size: clamp(30px, 6vw, 44px); max-width: 14ch; }
.hero--calc h1::after { margin-top: var(--s-4); }
.hero--calc p { margin-top: var(--s-4); font-size: var(--t-0); }
@media (max-width: 640px) {
  .hero--calc { padding-top: 0; padding-bottom: var(--s-3); }
  .hero--calc h1::after { width: 56px; height: 6px; margin-top: var(--s-3); }
  .hero--calc p { margin-top: var(--s-3); }
}

/* "Book before you land" — the planner's objection, answered. */
.ahead-sub { max-width: 52ch; color: var(--mute); margin: 0 0 var(--s-10); }
/* Second photo, and on purpose not another lone traveller: hardly anybody
   travels alone, and a page that only ever shows one person quietly leaves out
   the couple, the family and the group of friends — who are also the ones
   buying more than one eSIM. Same two-row grid as the hero, mirrored: the copy
   leads, the photo spans both rows, and a phone gets title, promise, photo,
   detail in that order. */
.ahead--photo { display: grid; grid-template-columns: 1.05fr .95fr; grid-template-rows: auto 1fr; column-gap: var(--s-12); row-gap: var(--s-8); align-items: start; }
.ahead--photo .ahead-copy { grid-column: 1; grid-row: 1; }
.ahead--photo .ahead-more { grid-column: 1; grid-row: 2; }
.ahead--photo .ahead-photo { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.ahead--photo .ahead-sub { margin-bottom: 0; }
/* One column: three cards will not fit beside a photo without turning into
   slivers, and stacked they read as the checklist they already are. */
.ahead--photo .ahead-list { grid-template-columns: 1fr; gap: var(--s-5); margin-bottom: var(--s-8); }
.ahead-photo { margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; background: var(--ground); }
.ahead-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block; }
/* This block has to live here, after the rules it overrides: the shared 820px
   media query sits higher up the file, and from there the base .ahead--photo
   below it would win the cascade and leave a phone on two columns. */
@media (max-width: 820px) {
  .ahead--photo { grid-template-columns: 1fr; row-gap: var(--s-6); }
  .ahead--photo .ahead-copy,
  .ahead--photo .ahead-more,
  .ahead--photo .ahead-photo { grid-column: 1; grid-row: auto; }
  .ahead--photo .ahead-sub { margin-bottom: 0; }
  .ahead--photo .ahead-list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  /* Two things were wrong on a phone. 4/3 threw away nearly half the height of
     a 4:5 source, which shrank two people to thumbnails; and the card's own
     padding took another 40px off the width. So: the native ratio, no crop at
     all, and the image runs out to the card's edges. It only meets the straight
     vertical sides, never the rounded corners, so nothing needs clipping. */
  .ahead-photo { aspect-ratio: 4 / 5; margin-inline: calc(var(--s-6) * -1); border-radius: 0; }
}
@media (max-width: 430px) {
  /* The card's horizontal padding drops to 20px at this width. */
  .ahead-photo { margin-inline: calc(var(--s-5) * -1); }
}
.ahead-list { list-style: none; margin: 0 0 var(--s-10); padding: 0; display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); text-align: left; }
.ahead-list li { border-top: 2px solid var(--ink); padding-top: var(--s-4); }
.ahead-list strong { display: block; font-size: var(--t-0); margin-bottom: var(--s-2); }
.ahead-list span { display: block; font-size: var(--t--1); color: var(--mute); line-height: 1.5; }

/* "Need a hand choosing?" — slides in from the right after a minute. */
.nudge { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 55; width: min(320px, calc(100vw - var(--s-8))); padding: var(--s-5) var(--s-6); background: var(--card); border: var(--line) solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); text-align: left; opacity: 0; transform: translateX(24px); transition: opacity .26s ease, transform .26s cubic-bezier(.2,.9,.3,1.2); }
.nudge.is-in { opacity: 1; transform: none; }
.nudge-t { margin: 0 0 var(--s-2); font-weight: 700; font-size: var(--t-0); padding-right: var(--s-6); }
.nudge-t::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); margin-right: var(--s-2); vertical-align: 2px; }
.nudge.is-in .nudge-t::before { animation: nudgePulse 1.1s ease 2; }
@keyframes nudgePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.7); } }
.nudge-d { margin: 0 0 var(--s-4); font-size: var(--t--1); color: var(--mute); line-height: 1.45; }
.nudge-cta { display: block; width: 100%; text-align: center; padding: var(--s-3) var(--s-5); font-size: var(--t--1); }
.nudge-x { position: absolute; top: var(--s-3); right: var(--s-3); width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--mute); font: 700 22px/1 var(--font); cursor: pointer; border-radius: 50%; transition: color .12s ease, background-color .12s ease; }
.nudge-x:hover { color: var(--ink); background: var(--ground); }
/* On a phone the card spans both edges, so the entry animation cannot slide it
   in from the right: translateX(24px) pushed it 8px past the viewport and gave
   the whole page a horizontal scrollbar. Coming up from below is both the fix
   and the gesture that belongs on a phone. */
@media (max-width: 560px) {
  .nudge { right: var(--s-4); left: var(--s-4); bottom: var(--s-4); width: auto; transform: translateY(16px); }
  .nudge.is-in { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nudge { transition: opacity .2s ease; transform: none; }
  .nudge.is-in .nudge-t::before { animation: none; }
}
}

/* Networks you roam onto in a country — the unique content of each page. */
.networks { margin-top: var(--s-12); border-top: 1px solid var(--hair); padding-top: var(--s-8); }
.networks h3 { font-size: var(--t-1); font-weight: 700; letter-spacing: -.02em; margin: 0 0 var(--s-6); }
.networks-list { list-style: none; margin: 0 auto var(--s-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.networks-list li { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); border: var(--line) solid var(--hair); border-radius: var(--r-pill); }
.networks-name { font-weight: 700; font-size: var(--t-0); }
.networks-gen { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--ink); background: var(--brand); border-radius: var(--r-pill); padding: 2px var(--s-2); }
.networks-note { max-width: 46ch; margin: 0 auto; }
.roaming { max-width: 52ch; margin: var(--s-5) auto 0; font-size: var(--t--1); line-height: 1.55; border-left: 3px solid var(--brand); padding-left: var(--s-4); text-align: left; }

/* Per-country questions */
.faq { margin-top: var(--s-12); border-top: 1px solid var(--hair); padding-top: var(--s-8); text-align: left; }
.faq h3 { font-size: var(--t-1); font-weight: 700; letter-spacing: -.02em; margin: 0 0 var(--s-6); text-align: center; }
.faq-item { margin: 0 0 var(--s-2); }
.faq-item summary { font-size: var(--t-0); }
.faq-item p { margin: var(--s-3) 0 0; font-size: var(--t--1); color: var(--mute); line-height: 1.6; }

/* ------------------------------------------------------------------ /compatible
   The visitor owns one phone and wants a yes, so the search field leads and the
   drawing decorates. Everything here is flat: the phone is two rectangles, a
   chip and three arcs, in the four colours the rest of the site already uses. */
.hero--devices { grid-template-columns: 1.15fr .85fr; column-gap: var(--s-12); align-items: center; }
.hero--devices h1 { max-width: 14ch; }


.dev-stage { margin: 0; display: flex; justify-content: center; }
.dev-phone { width: 100%; max-width: 260px; height: auto; }
.dev-body { fill: none; stroke: var(--ink); stroke-width: 3; }
.dev-screen { fill: var(--card); }
.dev-chip { fill: var(--brand); }
.dev-chip-line { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.dev-wave { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }

/* The outline draws itself, the chip drops in, then the signal starts: the same
   order the customer lives through — phone, eSIM, connection. */
@media (prefers-reduced-motion: no-preference) {
  .dev-body { stroke-dasharray: 760; animation: dev-draw 1.1s ease-out both; }
  .dev-screen { animation: dev-fade .5s ease-out .5s both; }
  .dev-chip, .dev-chip-line { transform-box: fill-box; transform-origin: center; animation: dev-pop .45s cubic-bezier(.2,.9,.3,1.2) .9s both; }
  .dev-wave { opacity: 0; animation: dev-wave 2.4s ease-in-out infinite; }
  .dev-wave--1 { animation-delay: 1.25s; }
  .dev-wave--2 { animation-delay: 1.4s; }
  .dev-wave--3 { animation-delay: 1.55s; }
}
@keyframes dev-draw { from { stroke-dashoffset: 760; } to { stroke-dashoffset: 0; } }
@keyframes dev-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dev-pop  { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes dev-wave { 0%, 70%, 100% { opacity: .12; } 25% { opacity: 1; } }



.dev-how { text-align: left; }
.dev-how .eyebrow, .dev-how h2 { text-align: center; }
/* The payoff line after the three steps: the sentence the whole page exists
   to deliver, so it gets the brand rule above it. */
.dev-done { max-width: 46ch; margin: var(--s-10) auto 0; text-align: center; font-weight: 700; padding-top: var(--s-6); border-top: 2px solid var(--ink); }
.dev-check { max-width: 660px; margin-left: auto; margin-right: auto; }
.dev-check h2 { font-size: var(--t-1); }
.dev-check p { color: var(--mute); margin-bottom: var(--s-8); }

@media (max-width: 820px) {
  .hero--devices { grid-template-columns: 1fr; row-gap: var(--s-8); }
  /* The drawing goes first on a phone: it is the fastest way to say "this page
     is about your handset", and the field lands right under the thumb after it. */
  .hero--devices .dev-stage { order: -1; }
  .dev-phone { max-width: 176px; }
}

/* Trust block: the six questions somebody asks with the card already in hand.
   Two columns of plain statements, no badges and no seals — an invented trust
   seal is the very thing that makes a new shop look less trustworthy. */
.trust-list { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-6) var(--s-10); grid-template-columns: 1fr 1fr; text-align: left; }
.trust-list li { border-top: 2px solid var(--ink); padding-top: var(--s-4); }
.trust-list strong { display: block; font-size: var(--t-0); margin-bottom: var(--s-2); }
.trust-list span { display: block; font-size: var(--t--1); color: var(--mute); line-height: 1.55; }
.trust-list a { font-weight: 700; color: var(--ink); }
@media (max-width: 820px) {
  .trust-list { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ------------------------------------------------------------------- /help
   One column, generous line length, everything collapsed. Someone reading this
   is either hesitating or stuck, and neither of those states wants a layout. */
.hero--help h1 { max-width: 18ch; }
.help-mail { margin-top: var(--s-8); margin-bottom: var(--s-3); }
/* The one number on this page that is a promise, so it sits under the
   address rather than in a footer nobody reaches. */
.help-sla { color: var(--mute); margin: 0; }
.help-group { max-width: 720px; margin-left: auto; margin-right: auto; }
.help-group h2 { font-size: var(--t-1); margin-bottom: var(--s-6); }
/* The shared .faq rule adds a rule and top margin meant for the bottom of a
   country page; inside its own section neither earns its place. */
.help-group .faq { margin-top: 0; border-top: 0; padding-top: 0; }
.help-more { max-width: 720px; margin-left: auto; margin-right: auto; }
.help-more h2 { font-size: var(--t-1); margin-bottom: var(--s-5); }
.help-links { list-style: none; margin: 0 0 var(--s-8); padding: 0; display: grid; gap: var(--s-3); }
.help-links a { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
.help-links a:hover { background: var(--brand); }
.help-closing { color: var(--mute); margin: 0; }
.help-closing a { font-weight: 700; }

/* ------------------------------------------------------- /admin/funnel
   Behind the admin login and noindex, so it inherits the shop's tokens without
   pretending to be part of the shop. Four numbers and two tables: the rates are
   what get read, so they are the ones set in the heavier type. */
.fnl { max-width: var(--w); margin: 0 auto; padding: var(--s-6); }
.fnl-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; border-bottom: var(--line) solid var(--hair); padding-bottom: var(--s-4); margin-bottom: var(--s-8); }
.fnl-top h1 { font-size: var(--t-2); margin: 0; }
.fnl-top nav a { margin-left: var(--s-4); font-size: var(--t--1); text-decoration: none; color: var(--mute); }
.fnl-top nav a:hover { color: var(--ink); }
.fnl-empty { background: var(--ground); border-left: 5px solid var(--brand); border-radius: var(--r-field); padding: var(--s-4) var(--s-5); }
.fnl-steps { list-style: none; margin: 0 0 var(--s-10); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.fnl-steps li { background: var(--card); border-radius: var(--r-card); padding: var(--s-5); }
.fnl-steps--3 { grid-template-columns: repeat(3, 1fr); }
.fnl-n { display: block; font-size: var(--t-num); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.fnl-label { display: block; margin-top: var(--s-2); font-size: var(--t--1); color: var(--mute); }
.fnl-table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-10); background: var(--card); border-radius: var(--r-card); overflow: hidden; }
.fnl-table th, .fnl-table td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: var(--line) solid var(--hair); font-size: var(--t--1); }
.fnl-table th { font-weight: 700; }
.fnl-table td:nth-child(2) { font-weight: 700; }
/* Abandonment is the number that decides the week, so it is the one that
   reads first. */
.fnl-drop { font-weight: 700; }
.fnl-table h2, .fnl h2 { font-size: var(--t-1); margin: var(--s-10) 0 var(--s-4); }
.fnl code { font-size: var(--t--2); background: var(--ground); padding: 1px 4px; border-radius: 4px; }
.fnl-total td { background: var(--brand); font-weight: 700; }
.fnl-note { color: var(--mute); font-size: var(--t--2); max-width: 70ch; }
@media (max-width: 820px) { .fnl-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fnl-steps--3 .fnl-n { font-size: var(--t-3); } }

/* Coverage block on a country page. Plain rows, no card: it is reference
   material people scan for one number, not something to decorate. */
.cover { margin-top: var(--s-10); padding-top: var(--s-8); border-top: var(--line) solid var(--hair); }
.cover h3 { margin: 0 0 var(--s-4); }
.cover h4 { margin: var(--s-8) 0 var(--s-3); font-size: var(--t-1); }
.cover p { max-width: 62ch; color: var(--mute); margin: 0; }
.cover-table { width: 100%; max-width: 48ch; border-collapse: collapse; margin-top: var(--s-4); }
.cover-table td { padding: var(--s-3) 0; border-bottom: var(--line) solid var(--hair); font-size: var(--t--1); }
.cover-table td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.cover .btn { margin-top: var(--s-6); }

/* Tap targets on a phone. Measured at 390px: the calculator link and the
   extras toggle came out 22px tall and the quantity buttons 40px, all under
   the 44px a finger needs. The language switch was already padded out the same
   way further up. Only the hit area grows — the text keeps its size, which is
   what the eye is judging. */
@media (max-width: 820px) {
  .calc-link { padding-block: 11px; margin-top: calc(var(--s-3) - 11px); }
  /* Header pills were 37px. The padding grows, the pill grows with it, and the
     header already stacks at this width so nothing is pushed off. */
  .site-header nav > a { min-height: 44px; display: inline-flex; align-items: center; }
  .pack-extras-toggle { min-height: 44px; }
  .pack-qty-ctl button { width: 44px; height: 44px; }
}

/* Anchor jumps. "See the packs" and the rest of the in-page links moved the
   page in one frame, which reads as a page change rather than a scroll: the
   eye loses its place and has to re-read where it landed. Gated behind
   no-preference because for some people smooth scrolling causes nausea, and
   the rest of the sheet already honours that switch.

   scroll-margin-top stops the target sitting flush against the top edge —
   a heading touching the viewport border looks cut off. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
:target,
#packs, #check, #promo-code, #resend-email, #topup-email { scroll-margin-top: var(--s-8); }

/* Nothing should ever scroll sideways on a phone. This is the backstop for
   anything that slips past review — it clips rather than hides, so it cannot
   break position:sticky the way overflow:hidden would. */
body { overflow-x: clip; }

/* Atrás y siguiente en una fila: el secundario a la izquierda como texto, el
   que avanza a la derecha como botón, que es el orden en el que se leen. */
.calc-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-6); }
.calc-nav .calc-back { margin: 0; }
.calc-advance { margin-left: auto; min-height: 44px; }
.calc-advance:disabled { opacity: .35; cursor: default; }
@media (max-width: 560px) { .calc-advance { flex: 1 1 auto; } }

/* El asistente en un movil. Tres cosas lo dejaban sin salida: cada paso tenia
   una altura minima de 360px calculada para el escritorio, la lista de paises
   sumaba 236px mas, y esa lista se lleva el gesto del dedo porque tiene su
   propio scroll. Resultado: el boton de avanzar caia por debajo de la barra
   del navegador y no habia forma de llegar a el.

   La lista se mide ahora contra la pantalla, el paso deja de imponer altura, y
   la fila de navegacion se queda pegada abajo: el boton siempre esta donde el
   pulgar lo espera. */
@media (max-width: 640px) {
  .calc-step:not(.calc-step--result) { min-height: 0; }
  .calc-dest-list { max-height: min(236px, 30vh); }
  .calc-nav {
    position: sticky;
    bottom: 0;
    margin-top: var(--s-4);
    padding-block: var(--s-3);
    background: var(--card);
  }
}

/* La pregunta que frena la compra, al lado del boton. Hereda la caja gris de
   <details> del resto del sitio; solo cambia el aire, porque aqui va dentro
   del heroe y no entre secciones. */
.compat { margin: var(--s-5) 0 0; padding: var(--s-4) var(--s-5); }
.compat p { margin: var(--s-3) 0 0; font-size: var(--t--1); }
.compat-refund { font-weight: 700; color: var(--ink); }
/* Solo la instruccion del sistema que se esta usando. Sin JS no se anade
   ninguna clase y se ven las dos: de mas, nunca de menos. */
.compat--ios .compat-android,
.compat--android .compat-ios { display: none; }

/* ── Popup de captación ──────────────────────────────────────────────────────
   Centrado y con velo, al contrario que la barra de cookies, que vive abajo:
   son dos avisos distintos y si se parecieran el segundo se leería como parte
   del primero. app.js se encarga de que no salgan a la vez.

   ⚠️ La primera versión usaba el paso 7 de la escala, que NO existe (la escala salta del 6
   al 8). Una variable inválida dentro de un `padding` abreviado invalida la
   declaración entera, así que la caja se quedaba con padding cero en los cuatro
   lados: la etiqueta se montaba sobre el borde y el campo tocaba los laterales.
   Aquí sólo se usan valores que existen en :root.

   Contenido alineado a la izquierda y no centrado: con la X arriba a la derecha,
   una etiqueta centrada chocaba con ella en los móviles estrechos, y un bloque
   de texto de tres líneas centrado se lee peor que uno alineado. */
.lead { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: var(--s-4); background: rgba(17,17,17,.6); }
.lead-box { position: relative; width: 100%; max-width: 400px; padding: var(--s-8) var(--s-6) var(--s-6); background: var(--card); border: var(--line) solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); text-align: left; }
.lead-x { position: absolute; top: var(--s-3); right: var(--s-3); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; }
.lead-x:hover { background: var(--ground); }
.lead-x:focus-visible { outline: 3px solid var(--brand); outline-offset: 0; }
.lead-off { display: inline-block; margin: 0 0 var(--s-4); padding: 6px var(--s-3); background: var(--brand); border-radius: 999px; font-size: var(--t--2); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1.3; }
/* Deja sitio a la X: sin este margen, en los móviles estrechos la última palabra
   del titular se metía debajo del botón de cerrar. */
.lead-t { margin: 0 var(--s-8) var(--s-3) 0; font-size: clamp(22px, 6vw, 26px); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.lead-d { margin: 0 0 var(--s-6); font-size: var(--t-0); line-height: 1.5; color: var(--mute); }
.lead-form { display: flex; flex-direction: column; gap: var(--s-3); }
/* `.lead-box .lead-input` y no `.lead-input` a secas: la regla global
   input[type="email"] pesa más (atributo + elemento) y le ponía el borde
   --hair, un gris que sobre blanco da 1,2:1 — por debajo del 3:1 que pide la
   accesibilidad para el contorno de un campo. En un popup cuyo único trabajo
   es que escribas el correo, el campo tiene que verse sin tocarlo. */
.lead-box .lead-input { display: block; width: 100%; padding: 14px var(--s-4); border: 2px solid var(--ink); border-radius: 12px; font: inherit; font-size: 16px; background: var(--card); color: var(--ink); }
/* 16px exactos en el campo: por debajo, Safari en iPhone hace zoom al tocarlo y
   descoloca todo el popup. */
.lead-box .lead-input::placeholder { color: var(--mute); }
.lead-box .lead-input:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.lead-go { width: 100%; }
/* Vacío no ocupa sitio: antes reservaba una línea en blanco y abría un hueco
   enorme entre el botón y el aviso legal. */
.lead-msg { margin: var(--s-3) 0 0; font-size: var(--t--1); font-weight: 700; line-height: 1.45; }
.lead-msg:empty { display: none; }
.lead-msg.is-err { color: #b00020; }
.lead-legal { margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--hair); font-size: var(--t--2); line-height: 1.5; color: var(--mute); }
.lead-legal a { color: var(--ink); font-weight: 700; }
@media (max-width: 420px) {
  .lead-box { padding: var(--s-8) var(--s-5) var(--s-5); border-radius: 18px; }
}
/* Móviles bajos o con el teclado abierto: la caja se ancla arriba y hace scroll
   en vez de salirse por abajo con el botón inalcanzable. */
@media (max-height: 640px) {
  .lead { align-items: flex-start; overflow-y: auto; }
  .lead-box { margin: var(--s-4) 0; }
}

/* ── Registro de actividad (panel) ───────────────────────────────────────────
   Tres niveles y nada mas: grave, salio mal, normal. Un registro con diez
   colores no lo mira nadie. */
.log-filtro { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin: 0 0 var(--s-6); }
.log-filtro input { flex: 1 1 260px; padding: var(--s-3) var(--s-4); border: var(--line) solid var(--ink); border-radius: 10px; font: inherit; font-size: var(--t--1); }
.log-filtro input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.log-tbl { table-layout: fixed; }
.log-tbl td { vertical-align: top; word-break: break-word; }
.log-tbl td:nth-child(2) { font-weight: 400; }
.log-fecha { width: 104px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--mute); }
.log-ctx { width: 45%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t--2); color: var(--mute); }
.log-alerta td:nth-child(2) { font-weight: 700; }
.log-alerta { background: #fff6d6; }
.log-error  { background: #fdeceb; }
.log-error td:nth-child(2) { font-weight: 700; }
.tbl-scroll { overflow-x: auto; margin-bottom: var(--s-10); }
.tbl-scroll .fnl-table { min-width: 760px; margin-bottom: 0; }
.fnl-table small { font-weight: 400; color: var(--mute); }
p.log-error { padding: var(--s-4); border-radius: 12px; }

/* ── Páginas de compatibilidad por modelo (/compatible/<modelo>) ─────────────
   Plano como el resto: tinta, blanco y el amarillo sólo donde hay un sí. El
   veredicto va arriba y grande porque es la única pregunta que trae a alguien
   aquí; todo lo demás es letra pequeña para quien quiera asegurarse. */
.dvm { max-width: 760px; margin: 0 auto; padding: var(--s-8) var(--s-5) var(--s-16); }
.dvm-crumbs { font-size: var(--t--1); color: var(--mute); margin: 0 0 var(--s-5); }
.dvm-crumbs a { color: var(--mute); }
.dvm-h1 { font-size: clamp(30px, 7vw, 48px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 var(--s-6); }
.dvm h2 { font-size: var(--t-1); line-height: 1.25; margin: 0 0 var(--s-3); }
.dvm-verdict { display: flex; gap: var(--s-5); align-items: flex-start; padding: var(--s-6); background: var(--card); border: 2px solid var(--ink); border-radius: 20px; margin: 0 0 var(--s-6); }
.dvm-verdict p { margin: 0; font-size: var(--t-0); line-height: 1.55; }
.dvm-badge { flex: none; display: inline-block; min-width: 88px; padding: var(--s-2) var(--s-4); border-radius: 999px; font-weight: 700; font-size: var(--t-1); text-align: center; line-height: 1.3; }
.dvm-verdict--yes .dvm-badge { background: var(--brand); color: var(--ink); }
.dvm-verdict--no .dvm-badge { background: var(--ink); color: var(--card); }
.dvm-verdict--depends .dvm-badge { background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.dvm-box { padding: var(--s-5) var(--s-6); background: var(--card); border: var(--line) solid var(--hair); border-radius: 16px; margin: 0 0 var(--s-5); }
.dvm-box ul { margin: 0; padding-left: 1.2em; }
.dvm-box li { margin: 0 0 var(--s-2); line-height: 1.55; }
.dvm-box li:last-child { margin-bottom: 0; }
.dvm-box p { margin: 0; line-height: 1.55; }
.dvm-check { margin: var(--s-10) 0; }
.dvm-cta { padding: var(--s-6); background: var(--card); border: 2px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); margin: var(--s-8) 0; text-align: center; }
.dvm-cta p { margin: 0 0 var(--s-5); color: var(--mute); line-height: 1.55; }
.dvm-more { margin-top: var(--s-12); }
.dvm-more h3 { font-size: var(--t-1); margin: 0 0 var(--s-3); }
.dvm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s-2) var(--s-4); }
.dvm-list li { font-size: var(--t--1); line-height: 1.4; }
.dvm-list a { color: var(--ink); }
.dvm-tag { display: inline-block; margin-left: var(--s-1); padding: 0 var(--s-2); border-radius: 999px; background: var(--ink); color: var(--card); font-size: var(--t--2); font-weight: 700; vertical-align: 1px; }
.dvm-notlisted { margin: var(--s-6) 0 0; font-size: var(--t--1); color: var(--mute); line-height: 1.55; }
.dvm-hub .dvm-more { margin-top: var(--s-8); text-align: left; }
.dvm-hub > .btn { margin-top: var(--s-8); }
@media (max-width: 480px) {
  .dvm-verdict { flex-direction: column; gap: var(--s-3); }
  .dvm-list { grid-template-columns: 1fr 1fr; }
}

/* Four languages and the longer German and French labels no longer fit the
   phone header on one row: the links ran off both edges. Let the switch drop
   to its own centred row instead of squeezing anything. */
@media (max-width: 430px) {
  .site-header nav { flex-wrap: wrap; row-gap: var(--s-2); }
  .site-header nav .lang { margin: 0 auto; }
}

/* Language suggestion. Just under the header, because the cookie bar owns the
   bottom and the two can be up at the same time. Same flat card as the bar. */
.langhint { position: fixed; top: 88px; right: var(--s-4); z-index: 61; width: 340px; max-width: calc(100% - 2 * var(--s-4)); padding: var(--s-5); background: var(--card); border: var(--line) solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.langhint-t { margin: 0 0 var(--s-4); font-size: var(--t-0); font-weight: 700; line-height: 1.35; }
.langhint-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.langhint-actions .btn { padding: var(--s-3) var(--s-5); font-size: var(--t--1); }
.langhint-actions .js-langhint-go { background: var(--brand); color: var(--ink); }
.langhint-actions .js-langhint-go:hover { background: var(--ink); color: var(--card); }
@media (max-width: 430px) {
  .langhint { left: var(--s-4); right: var(--s-4); width: auto; max-width: none; }
}

/* "eSIM for Spain from X" pages: the device-page layout plus a lead line, a
   small print line and a heavier border where the news is "probably not". */
.dvm-lead { margin: 0 0 var(--s-6); font-size: var(--t-1); line-height: 1.45; color: var(--mute); }
.dvm-small { margin-top: var(--s-3) !important; font-size: var(--t--1); color: var(--mute); }
.dvm-small a { color: var(--ink); font-weight: 700; }
.dvm-box--warn { border: 2px solid var(--ink); }
.origin-links { margin: var(--s-10) 0 0; }
.origin-links h3 { font-size: var(--t-1); margin: 0 0 var(--s-2); }
.origin-links p { margin: 0 0 var(--s-4); }

/* Footer link map. Three plain columns of small links, same muted ink as the
   footer line below it: it is there for people looking for a page and for
   crawlers, not to compete with the page above. */
/* Una sola fila. Antes eran cuatro columnas con 88 enlaces. */
.footer-map { max-width: var(--w); margin: var(--s-10) auto 0; padding: var(--s-5) var(--s-8) 0; border-top: var(--line) solid var(--hair); font-size: var(--t--1); }
.footer-map ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.footer-map li { margin: 0; }
.footer-map a { color: var(--mute); text-decoration: none; }
.footer-map a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 640px) {
  .footer-map { padding: var(--s-5) var(--s-5) 0; }
  .footer-map ul { gap: var(--s-2) var(--s-4); }
}

body.page-redeem .footer-map a { color: var(--ink); }

/* ---- /oferta: landing de la campaña de historias (España + Andorra) ---- */
.oferta-hero { max-width: 760px; margin: 0 auto; padding: var(--s-10) var(--s-6) var(--s-8); text-align: center; }
.oferta-hero h1 { font-size: var(--t-4); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 var(--s-4); }
.oferta-sub { font-size: var(--t-1); color: var(--mute); max-width: 560px; margin: 0 auto var(--s-8); }
.oferta-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); text-align: left; }
.oferta-pack { background: var(--card); border-radius: var(--r-card, 24px); padding: var(--s-6); display: grid; gap: var(--s-5); }
.oferta-pack-top { display: flex; align-items: center; gap: var(--s-3); }
.oferta-pack-top img { border-radius: 4px; }
.oferta-pack-top strong { display: block; font-size: var(--t-1); }
.oferta-pack-top span { font-size: var(--t--1); color: var(--mute); }
.oferta-gb { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.oferta-gb-base { font-size: var(--t-num); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.oferta-gb-plus { font-size: var(--t-2); font-weight: 800; background: var(--brand); border-radius: var(--r-pill); padding: 2px var(--s-3); }
.oferta-pack .btn { background: var(--brand); color: var(--ink); font-size: var(--t-1); padding: var(--s-4) var(--s-6); }
.oferta-pack .btn:hover { background: var(--ink); color: var(--card); }
.oferta-micro { font-size: var(--t--1); color: var(--mute); margin: var(--s-5) auto 0; max-width: 560px; }
.oferta-trust { max-width: 760px; margin: 0 auto; padding: 0 var(--s-6); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.oferta-trust div { background: var(--card); border-radius: 16px; padding: var(--s-4) var(--s-2); text-align: center; font-size: var(--t--1); font-weight: 700; }
.oferta-how, .oferta-compat { max-width: 760px; margin: 0 auto; padding: var(--s-10) var(--s-6) 0; }
.oferta-how h2 { font-size: var(--t-3); margin: 0 0 var(--s-5); }
.oferta-how ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); counter-reset: paso; }
.oferta-how li { background: var(--card); border-radius: 20px; padding: var(--s-5); counter-increment: paso; display: grid; gap: var(--s-1); }
.oferta-how li::before { content: counter(paso); width: 28px; height: 28px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; font-weight: 800; margin-bottom: var(--s-2); }
.oferta-how li span { color: var(--mute); font-size: var(--t--1); }
.oferta-compat details { background: var(--card); border-radius: 20px; padding: var(--s-5) var(--s-6); }
.oferta-compat summary { font-weight: 800; cursor: pointer; }
.oferta-more { text-align: center; padding: var(--s-10) var(--s-6); }
@media (max-width: 640px) {
  .oferta-hero { padding: var(--s-5) var(--s-2) var(--s-6); }
  .oferta-hero h1 { font-size: 34px; margin-bottom: var(--s-3); }
  .oferta-sub { font-size: var(--t-0); margin-bottom: var(--s-5); }
  .oferta-pack { padding: var(--s-5); gap: var(--s-4); }
  .oferta-trust { grid-template-columns: repeat(2, 1fr); }
  .oferta-how ol { grid-template-columns: 1fr; }
}

/* ---- captación de correo dentro de la página (bajo las garantías) ---- */
.lead-inline { max-width: 760px; margin: var(--s-10) auto; padding: var(--s-8) var(--s-6); background: var(--ink); color: var(--card); border-radius: var(--r-block); text-align: center; }
.lead-inline h2 { font-size: var(--t-3); margin: var(--s-2) 0 var(--s-3); color: var(--card); }
.lead-inline-copy p:not(.lead-off) { color: var(--mute-on-ink); max-width: 520px; margin: 0 auto; }
.lead-inline-form { display: flex; gap: var(--s-2); max-width: 520px; margin: var(--s-6) auto 0; }
.lead-inline-form input { flex: 1; min-width: 0; border-color: transparent; }
.lead-inline-form .btn { background: var(--brand); color: var(--ink); white-space: nowrap; }
.lead-inline-form .btn:hover { background: var(--card); }
.lead-inline .lead-msg { color: var(--card); margin-top: var(--s-3); }
.lead-inline .lead-msg.is-err { color: #ffb4ab; }
.lead-inline-legal { font-size: var(--t--2); color: var(--mute-on-ink); margin: var(--s-4) auto 0; max-width: 520px; }
.lead-inline-legal a { color: var(--card); }
@media (max-width: 560px) { .lead-inline { margin: var(--s-8) var(--s-4); } .lead-inline-form { flex-direction: column; } }
.lead-inline .lead-off { color: var(--ink); }

/* ---- selector de idioma: desplegable con bandera ---- */
/* OJO: la regla generica `details` (acordeon del FAQ) le metia a este
   desplegable fondo, radio, 20/24 px de padding y 24 px de margen arriba y
   abajo. Resultado: la cabecera media 160 px en un movil de 812, o sea el 20 %
   de la primera pantalla en blanco. Aqui se deshace: el pildoro lo pinta
   .lang-menu > summary, no el <details>. */
.lang-menu { position: relative; flex: 0 0 auto; background: none; border-radius: 0; padding: 0; margin: 0; }
.lang-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--card); border-radius: var(--r-pill); font-size: var(--t--1); font-weight: 700; cursor: pointer; user-select: none; min-height: 40px; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; margin-left: 2px; }
.lang-menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.lang-menu img { border-radius: 3px; display: block; box-shadow: 0 0 0 1px var(--hair); }
.lang-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 116px; background: var(--card); border: var(--line) solid var(--ink); border-radius: 16px; padding: var(--s-1); display: grid; gap: 2px; }
.lang-list a { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: 12px; text-decoration: none; font-size: var(--t--1); font-weight: 700; }
.lang-list a:hover { background: var(--ground); }
.lang-list a.on { background: var(--ink); color: var(--card); }
body.page-redeem .lang-menu > summary { background: rgba(255,255,255,.55); }
@media (max-width: 430px) {
  .lang-menu { order: 2; margin-left: auto; }
}

/* ---- buy box de país (14-09-2026) ---- */
.buy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-10); align-items: start; padding: var(--s-6); }
.buy-photo { margin: 0; position: sticky; top: var(--s-6); border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--card); }
.buy-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* sin foto: sin columna lateral, el buy box centrado */
.buy--solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
.buy-title { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-3); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 var(--s-3); }
.buy-title img { border-radius: 50%; width: 40px; height: 40px; object-fit: cover; box-shadow: 0 0 0 1px var(--hair); flex: 0 0 auto; }
.buy-sub { color: var(--mute); font-size: var(--t-1); margin: 0 0 var(--s-8); max-width: 560px; }
.buy-label { font-weight: 700; margin: 0 0 var(--s-3); }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.plan { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "gb radio" "days days" "price price" "unit unit"; row-gap: 2px; background: var(--card); border: 2px solid var(--hair); border-radius: 18px; padding: var(--s-5); cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.plan:hover { border-color: #c9c9ce; }
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan.is-on, .plan:has(input:checked) { border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.plan input:focus-visible ~ .plan-radio { outline: 3px solid var(--brand); outline-offset: 2px; }
.plan-radio { grid-area: radio; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c9c9ce; align-self: start; }
.plan.is-on .plan-radio, .plan:has(input:checked) .plan-radio { border: 7px solid var(--ink); }
.plan-gb { grid-area: gb; font-size: var(--t-2); font-weight: 800; letter-spacing: -.02em; }
.plan-days { grid-area: days; color: var(--mute); font-size: var(--t--1); }
.plan-price { grid-area: price; font-size: var(--t-1); font-weight: 800; margin-top: var(--s-3); }
.plan-unit { grid-area: unit; color: var(--mute); font-size: var(--t--2); }
.plan-badge { position: absolute; top: -11px; left: var(--s-4); background: var(--brand); color: var(--ink); font-size: var(--t--2); font-weight: 800; border-radius: var(--r-pill); padding: 2px var(--s-3); }
.plan-why { color: var(--mute); font-size: var(--t--1); margin: var(--s-3) 0 0; }
.buy-note { background: var(--ground); border-radius: 14px; padding: var(--s-4) var(--s-5); font-size: var(--t--1); margin: var(--s-5) 0; }
.buy-qty { justify-content: space-between; margin: 0 0 var(--s-5); }
.buy-summary { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); border-top: 1px solid var(--hair); padding-top: var(--s-4); margin-bottom: var(--s-4); }
.buy-summary strong { font-size: var(--t-2); }
.buy-cta { background: var(--brand); color: var(--ink); font-size: var(--t-1); padding: var(--s-5); }
.buy-cta:hover { background: var(--ink); color: var(--card); }
.buy-micro { font-size: var(--t--1); color: var(--mute); text-align: center; margin: var(--s-3) 0 var(--s-4); }
.buy-up { border: 2px dashed var(--ink, #111); border-radius: 14px; padding: var(--s-3) var(--s-4); font-size: var(--t--1); margin: 0 0 var(--s-4); }
.buy-up.is-on { border-style: solid; background: var(--brand); font-weight: 700; }
.buy-box .compat { margin-top: var(--s-2); }
.buy-how h2 { font-size: var(--t-3); margin: 0 0 var(--s-5); }
.buy-how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.buy-how li { background: var(--ground); border-radius: 20px; padding: var(--s-6); display: grid; gap: var(--s-2); align-content: start; }
.buy-how-n { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--card); display: grid; place-items: center; font-weight: 800; margin-bottom: var(--s-2); }
.buy-how li span:last-child { color: var(--mute); font-size: var(--t--1); }
.packs--more { padding-top: var(--s-10); }
.buy-box .pack-extras { max-width: none; margin: var(--s-3) 0 0; }
.sticky-buy { display: none; }
@media (max-width: 860px) {
  .buy { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-5) var(--s-4); }
  .buy-photo { position: relative; top: 0; aspect-ratio: 16 / 9; border-radius: 20px; order: 2; }
  .buy-box { order: 1; }
  .buy-sub { margin-bottom: var(--s-5); font-size: var(--t-0); }
  .buy-how ol { grid-template-columns: 1fr; }
  .sticky-buy:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--hair); }
  .sticky-buy-info { display: grid; font-size: var(--t--1); color: var(--mute); }
  .sticky-buy-info strong { color: var(--ink); font-size: var(--t-1); }
  .sticky-buy .btn { background: var(--brand); color: var(--ink); padding: var(--s-3) var(--s-8); }
  body.has-sticky-buy { padding-bottom: 84px; }
  body.has-cookie-bar .sticky-buy { display: none !important; }
}
@media (max-width: 380px) { .plan { padding: var(--s-4); } .plan-gb { font-size: var(--t-1); } }

/* ---- portada: buscador + populares + barra de confianza (14-09-2026) ---- */
.home-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-10); align-items: center; padding: var(--s-10); }
.home-hero h1 { font-size: var(--t-4); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 var(--s-4); }
.home-hero-sub { font-size: var(--t-1); color: var(--mute); margin: 0 0 var(--s-8); max-width: 560px; }
.dest-search { position: relative; max-width: 560px; }
.dest-search-label { display: block; font-weight: 700; margin-bottom: var(--s-2); }
.dest-search-box { display: flex; align-items: center; gap: var(--s-3); background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-pill); padding: 0 var(--s-5); box-shadow: 0 4px 0 var(--ink); }
.dest-search-box svg { flex: 0 0 auto; }
.dest-search-box input[type="search"] { flex: 1; border: 0; background: transparent; padding: var(--s-5) 0; font-size: var(--t-1); outline: none; min-width: 0; }
.dest-results { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 40; list-style: none; margin: 0; padding: var(--s-2); background: var(--card); border: var(--line) solid var(--ink); border-radius: 18px; max-height: 360px; overflow: auto; box-shadow: 0 6px 0 var(--ink); }
.dest-results a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: 12px; text-decoration: none; }
.dest-results a:hover, .dest-results a:focus { background: var(--ground); outline: none; }
.dest-results img, .home-popular img { border-radius: 4px; box-shadow: 0 0 0 1px var(--hair); flex: 0 0 auto; }
.dest-results span { flex: 1; font-weight: 700; }
.dest-results em, .home-popular em { font-style: normal; color: var(--mute); font-size: var(--t--1); white-space: nowrap; }
.dest-empty { padding: var(--s-3); color: var(--mute); }
.home-popular-label { font-weight: 700; margin: var(--s-8) 0 var(--s-3); font-size: var(--t--1); color: var(--mute); }
.home-popular { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); max-width: 560px; }
.home-popular a { display: flex; align-items: center; gap: var(--s-3); background: var(--ground); border-radius: 14px; padding: var(--s-3) var(--s-4); text-decoration: none; transition: background-color .12s ease; }
.home-popular a:hover { background: #e7e7ea; }
.home-popular span { flex: 1; font-weight: 700; font-size: var(--t--1); }
.home-hero-photo { margin: 0; position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; }
.home-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-hero-photo .hero-chip { position: absolute; left: var(--s-4); bottom: var(--s-4); }
.trust-bar { list-style: none; margin: 0 0 var(--s-5); padding: var(--s-5) var(--s-6); background: var(--ink); color: var(--card); border-radius: var(--r-block); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.trust-bar li { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: var(--t--1); }
.trust-bar li::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.carriers { padding: var(--s-8) var(--s-6); }
@media (max-width: 860px) {
  .home-hero { grid-template-columns: 1fr; padding: var(--s-6) var(--s-5); gap: var(--s-6); }
  .home-hero h1 { font-size: 36px; }
  .home-hero-sub { font-size: var(--t-0); margin-bottom: var(--s-5); }
  .home-hero-photo { display: none; }
  .home-popular-label { margin-top: var(--s-6); }
  .trust-bar { grid-template-columns: 1fr 1fr; padding: var(--s-5); }
  .home-popular a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); row-gap: 0; padding: var(--s-3); }
  .home-popular img { grid-row: span 2; }
  .home-popular span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .home-popular em { white-space: normal; font-size: var(--t--2); }
}

/* Guías de viaje (/guides) */
.guide .guide-meta { font-size: var(--t--1); color: var(--mute); margin: 0 0 var(--s-5); }
.guide-cta { margin: 0 0 var(--s-8); }
.guide-sec { margin: 0 0 var(--s-8); }
.guide-sec h2 { font-size: var(--t-2); letter-spacing: -.02em; margin: 0 0 var(--s-4); }
.guide-sec p { line-height: 1.65; margin: 0 0 var(--s-4); }
.guide-sec a, .guide-teaser a, .guide-index a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.guide-list { padding-left: 1.2em; margin: 0 0 var(--s-4); }
.guide-list li { margin: 0 0 var(--s-2); line-height: 1.55; }
.guide-tbl { width: 100%; min-width: 520px; border-collapse: collapse; background: var(--card); border-radius: 16px; overflow: hidden; margin: 0 0 var(--s-4); font-size: var(--t--1); }
.guide-tbl th, .guide-tbl td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4); border-bottom: var(--line) solid var(--hair); line-height: 1.45; }
.guide-tbl thead th { background: var(--ink); color: var(--card); }
.guide-end { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; margin-top: var(--s-10); }
.guide-end p { flex: 1 1 280px; }
.guide-more { margin-top: var(--s-10); }
.guide-more h2 { font-size: var(--t-1); margin: 0 0 var(--s-3); }
.guide-more ul, .guide-index { list-style: none; padding: 0; margin: 0; }
.guide-more li { margin: 0 0 var(--s-2); }
.guide-index li { margin: 0 0 var(--s-4); }
.guide-index a { display: block; padding: var(--s-5) var(--s-6); background: var(--card); border: var(--line) solid var(--hair); border-radius: 16px; text-decoration: none; }
.guide-index strong { display: block; font-size: var(--t-1); margin-bottom: var(--s-2); }
.guide-index span { color: var(--mute); font-size: var(--t--1); line-height: 1.5; }
/* Lista compacta para los grupos largos del índice de guías. Con 60 guías,
   una tarjeta con descripción por cada una convertía /guides en una página sin
   fin: los países y las ciudades se buscan por nombre, no se leen de arriba
   abajo, así que ahí basta el nombre en varias columnas. Las de "cómo
   funciona" siguen con tarjeta: esas sí se eligen leyendo. */
.guide-list-compact { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s-2) var(--s-5); }
.guide-list-compact li { margin: 0; }
.guide-list-compact a { display: block; padding: var(--s-2) 0; font-size: var(--t-0);
  color: var(--ink); text-decoration: none; border-bottom: var(--line) solid var(--hair); }
.guide-list-compact a:hover { text-decoration: underline; text-underline-offset: 3px; }

.guide-teaser { max-width: 760px; margin: 0 auto var(--s-8); padding: var(--s-4) var(--s-5); background: var(--card); border: var(--line) solid var(--hair); border-radius: 16px; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; }
.guide-teaser a { font-weight: 700; }

/* Correo antes de Stripe (buy box) */
.buy-email { margin: 0 0 var(--s-4); }
.buy-email label { display: block; font-weight: 700; font-size: var(--t--1); margin: 0 0 var(--s-2); }
.buy-email input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: var(--s-4); border: 2px solid var(--ink); border-radius: 14px; background: var(--card); color: var(--ink); }
.buy-email input:focus { outline: 3px solid var(--brand); outline-offset: 1px; }
.buy-email.is-err input { border-color: #c0392b; }
.buy-email-err { color: #c0392b; font-size: var(--t--1); font-weight: 700; margin: var(--s-2) 0 0; }
.buy-email-note { color: var(--mute); font-size: var(--t--2); margin: var(--s-2) 0 0; }

/* /extension */
.ext-soon { display: inline-block; background: transparent; border: 2px dashed var(--ink); border-radius: 999px; padding: var(--s-3) var(--s-5); font-weight: 700; margin: 0 0 var(--s-8); }
.ext-shot { margin: 0 0 var(--s-8); }
.ext-shot img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 16px; }

/* Boton de compra en el hero. Antes, encima del pliegue solo habia buscador y
   destinos populares: util para quien ya sabe adonde va, invisible para quien
   llega de un anuncio y solo quiere saber cuanto cuesta. */
.home-hero-buy { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin: var(--s-6) 0 var(--s-5); }
.home-hero-buy span { font-size: var(--t--1); color: var(--mute); font-weight: 700; }
.btn-buy { padding: var(--s-5) var(--s-8); font-size: var(--t-1); background: var(--brand); color: var(--ink); }
.btn-buy:hover { background: var(--ink); color: var(--card); }
@media (max-width: 560px) {
  .home-hero-buy { gap: var(--s-2); }
  /* A 375 px el texto completo partia el boton en dos lineas y el precio caia
     solo debajo. Tipografia normal y menos padding: cabe en una linea. */
  .btn-buy { width: 100%; text-align: center; font-size: var(--t-0); padding: var(--s-4) var(--s-5); }
}

/* Quien hay detras. Una marca desconocida que vende algo intangible y no ensena
   a nadie detras se parece a una estafa; esto es lo unico que lo desmiente
   mientras no haya resenas. */
/* .founder es una section: hereda tarjeta, ancho y relleno como las demás.
   (Hasta el 22-09-2026 usaba --s-9 y --s-7, que no existen: el navegador
   tiraba la regla y el bloque salía estrecho y sin relleno.) */
.founder p { max-width: 62ch; }
.founder h2 { margin: var(--s-2) 0 var(--s-4); }
.founder p { margin: 0 0 var(--s-4); }
.founder-who { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--s-5); }
.founder-who span { font-size: var(--t--1); color: var(--mute); }
.founder-links { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin: 0; }
.btn--wa { display: inline-flex; align-items: center; gap: var(--s-3); background: #25D366; color: #0b2e18; }
.btn--wa:hover { background: var(--ink); color: var(--card); }
.founder-wa-num { font-size: var(--t--1); color: var(--mute); font-weight: 700; }
.founder-li { font-size: var(--t--1); font-weight: 700; }
@media (max-width: 560px) {
  .founder-links { gap: var(--s-3); }
  .btn--wa { width: 100%; justify-content: center; }
}

/* Casilla de "avisame si no termino", debajo del correo de la caja de compra.
   Va dentro de .buy-email, cuya regla de <label> (bloque, negrita) la pisaba:
   la casilla salia sola y centrada y el texto en negrita debajo. Mas
   especifico aqui para ganarle. */
.buy-email .buy-recover { display: flex; gap: var(--s-3); align-items: flex-start; margin: var(--s-3) 0 0; font-weight: 400; font-size: var(--t--1); color: var(--mute); text-align: left; cursor: pointer; }
.buy-email .buy-recover input { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 2px 0 0; flex: none; accent-color: var(--ink); }
.buy-email .buy-recover span { line-height: 1.35; }
/* Caja de compra dentro de una guia: separada del texto de arriba y abajo. */
.guide-buy { margin: var(--s-8) 0; }

/* Tabla de referencia de /compatible (22-09-2026). Plana, tinta sobre blanco:
   una fila por modelo, el veredicto como pastilla, las variantes en gris debajo
   del nombre para que quepa en 375 px sin scroll lateral. */
.dvt { max-width: 860px; margin: 0 auto var(--s-5); }
.dvt h2 { font-size: var(--t-3); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 var(--s-3); }
.dvt-lead { color: var(--mute); margin: 0 0 var(--s-8); line-height: 1.55; }
.dvt-stats { list-style: none; margin: 0 0 var(--s-10); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.dvt-stats li { background: var(--card); border: var(--line) solid var(--hair); border-radius: var(--r-card); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); }
.dvt-stats strong { font-size: var(--t-num); line-height: 1; letter-spacing: -.03em; }
.dvt-stats span { font-size: var(--t--1); color: var(--mute); line-height: 1.35; }
.dvt-brand { margin: 0 0 var(--s-10); scroll-margin-top: var(--s-8); }
.dvt-brand h3 { font-size: var(--t-2); margin: 0 0 var(--s-3); }
.dvt-note { font-size: var(--t--1); color: var(--mute); line-height: 1.55; margin: 0 0 var(--s-4); }
.dvt-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--r-card); overflow: hidden; }
.dvt-table thead th { text-align: left; font-size: var(--t--2); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); padding: var(--s-3) var(--s-5); border-bottom: var(--line) solid var(--ink); }
.dvt-table thead th:last-child, .dvt-table td { text-align: right; }
.dvt-table tbody th, .dvt-table td { padding: var(--s-3) var(--s-5); border-bottom: var(--line) solid var(--hair); vertical-align: middle; }
.dvt-table tbody tr:last-child th, .dvt-table tbody tr:last-child td { border-bottom: 0; }
.dvt-table tbody th { text-align: left; font-weight: 700; font-size: var(--t-0); }
.dvt-table tbody th a { color: var(--ink); text-decoration: none; }
.dvt-table tbody th a:hover { text-decoration: underline; }
.dvt-table small { display: block; font-weight: 400; font-size: var(--t--1); color: var(--mute); line-height: 1.4; margin-top: 2px; }
.dvt-v { display: inline-block; min-width: 64px; text-align: center; padding: 2px var(--s-3); border-radius: var(--r-pill); font-size: var(--t--1); font-weight: 700; white-space: nowrap; }
.dvt-v--yes { background: var(--ink); color: var(--card); }
.dvt-v--no { background: var(--card); color: var(--ink); border: var(--line) solid var(--ink); }
.dvt-v--depends { background: var(--ground); color: var(--ink); }
.dvt-foot { margin: var(--s-3) 0 0; font-size: var(--t--2); }
.dvt-src { font-size: var(--t--2); color: var(--mute); margin: var(--s-3) 0 0; }
.dvt-src a { color: var(--mute); }
.dvt-cite { font-size: var(--t--1); color: var(--mute); margin: var(--s-4) 0 var(--s-8); }
@media (max-width: 640px) {
  .dvt-stats { grid-template-columns: 1fr 1fr; }
  .dvt-stats strong { font-size: var(--t-3); }
  .dvt-table tbody th, .dvt-table td, .dvt-table thead th { padding: var(--s-3) var(--s-4); }
}

/* Calculadora de roaming justo (/roaming-calculator), 22-09-2026. Las mismas
   tarjetas que el resto; el resultado es la cifra grande y la cuenta debajo. */
.fup h1 { font-size: var(--t-3); line-height: 1.1; letter-spacing: -.02em; margin: var(--s-3) 0 var(--s-4); max-width: 22ch; }
.fup-sub { color: var(--mute); max-width: 60ch; margin: 0 0 var(--s-8); line-height: 1.55; }
.fup-form { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s-4); align-items: end; }
.fup-field { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t--1); font-weight: 700; }
.fup-field em { font-style: normal; color: var(--mute); }
.fup-field select { width: 100%; padding: var(--s-4) var(--s-5); border: var(--line) solid var(--hair); border-radius: var(--r-field); font: inherit; font-weight: 400; background: var(--card); color: var(--ink); }
.fup-field select:focus { outline: 3px solid var(--brand); outline-offset: 1px; border-color: var(--ink); }
.fup-field input:disabled { opacity: .4; }
.fup-unl { grid-column: 1 / -1; margin: 0; }
.fup-btn { grid-column: 1 / -1; justify-self: start; }
.fup-result { margin-top: var(--s-10); padding-top: var(--s-8); border-top: var(--line) solid var(--ink); }
.fup-result[hidden] { display: none; }
.fup-big { margin: var(--s-3) 0 var(--s-2); display: flex; align-items: baseline; gap: var(--s-3); }
.fup-big strong { font-size: clamp(56px, 11vw, 96px); line-height: 1; letter-spacing: -.05em; }
.fup-big span { font-size: var(--t-1); font-weight: 700; color: var(--mute); }
.fup-verdict { font-size: var(--t-1); font-weight: 700; line-height: 1.35; max-width: 50ch; margin: 0 0 var(--s-3); }
.fup-min, .fup-note { color: var(--mute); font-size: var(--t--1); line-height: 1.55; margin: 0 0 var(--s-2); max-width: 62ch; }
.fup-math { margin: var(--s-6) 0; padding: var(--s-5) var(--s-6); background: var(--ground); border-radius: var(--r-card); }
.fup-math h2 { font-size: var(--t--1); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); margin: 0 0 var(--s-3); }
.fup-math ol { margin: 0; padding-left: 1.3em; font-variant-numeric: tabular-nums; line-height: 1.8; }
.fup-trip h2, .fup-out h2, .fup-src h2 { font-size: var(--t-2); margin: 0 0 var(--s-3); }
.fup-trip p, .fup-out p, .fup-src p { color: var(--mute); line-height: 1.55; max-width: 62ch; }
.fup-out ul, .fup-src ul { margin: var(--s-4) 0 0; padding-left: 1.2em; line-height: 1.7; }
.fup-out a, .fup-src a { color: var(--ink); font-weight: 700; }
.fup-cite { margin-top: var(--s-6) !important; font-size: var(--t--1); }
@media (max-width: 820px) {
  .fup-form { grid-template-columns: 1fr; }
  .fup-btn { justify-self: stretch; }
}

/* Mapa del roaming (/roaming-map), 22-09-2026. Blanco y negro: "incluido" es
   tinta llena, "no incluido" es contorno; los países son pastillas enlazadas. */
.rmap h1 { font-size: var(--t-3); line-height: 1.1; letter-spacing: -.02em; margin: var(--s-3) 0 var(--s-4); max-width: 24ch; }
.rmap-sub { color: var(--mute); max-width: 62ch; margin: 0 0 var(--s-6); line-height: 1.55; }
.rmap-badge { display: inline-block; padding: 2px var(--s-3); border-radius: var(--r-pill); font-size: var(--t--2); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.rmap-badge--yes { background: var(--ink); color: var(--card); }
.rmap-badge--no { border: var(--line) solid var(--ink); color: var(--ink); }
.rmap-yes h2, .rmap-no h2, .rmap-traps h2, .rmap-src h2 { font-size: var(--t-2); margin: var(--s-3) 0 var(--s-3); }
.rmap-yes h3, .rmap-traps h3 { font-size: var(--t-0); margin: var(--s-6) 0 var(--s-3); }
.rmap-yes > p, .rmap-no > p, .rmap-traps > p { color: var(--mute); line-height: 1.55; max-width: 62ch; }
.rmap-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rmap-chips li { font-size: var(--t--1); }
.rmap-chips a, .rmap-chips li { display: inline-block; }
.rmap-chips a { padding: var(--s-1) var(--s-3); border: var(--line) solid var(--hair); border-radius: var(--r-pill); color: var(--ink); text-decoration: none; background: var(--card); }
.rmap-chips a:hover { border-color: var(--ink); }
.rmap-chips li:not(:has(a)) { padding: var(--s-1) var(--s-3); border: var(--line) solid var(--hair); border-radius: var(--r-pill); }
.rmap-note { font-size: var(--t--1); color: var(--mute); line-height: 1.55; max-width: 62ch; margin: var(--s-3) 0 0; }
.rmap-table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0; }
.rmap-table th, .rmap-table td { text-align: left; padding: var(--s-3) var(--s-2) var(--s-3) 0; border-bottom: var(--line) solid var(--hair); vertical-align: top; font-size: var(--t--1); }
.rmap-table th { font-weight: 700; width: 38%; }
.rmap-table th a { color: var(--ink); }
.rmap-table td { color: var(--mute); }
.rmap-bundle { font-weight: 700; color: var(--ink) !important; }
.rmap-bundle a { color: var(--ink); }
.rmap-traps ol { margin: var(--s-4) 0 0; padding-left: 1.3em; line-height: 1.6; max-width: 70ch; }
.rmap-traps li { margin-bottom: var(--s-2); }
.fup-maplink { color: var(--ink); font-weight: 700; }
@media (max-width: 640px) {
  .rmap-table th { width: 42%; }
}

/* "Ponla en tu web" (/roaming-calculator#embed). */
.fup-embed h2 { font-size: var(--t-2); margin: 0 0 var(--s-3); }
.fup-embed p { color: var(--mute); line-height: 1.55; max-width: 62ch; }
.fup-code { display: block; width: 100%; margin: var(--s-4) 0; padding: var(--s-4); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--ground); color: var(--ink); border: var(--line) solid var(--hair); border-radius: var(--r-field); resize: vertical; }
.fup-code:focus { outline: 3px solid var(--brand); outline-offset: 1px; border-color: var(--ink); }

/* Las herramientas al pie del índice de guías. */
.guide-tools-t { font-size: var(--t-1); margin: var(--s-12) 0 var(--s-4); }