:root{--glowi-ink:#122F31;--glowi-lime:#C3F26C;--ink:var(--glowi-ink);--muted:#586968;--cream:#f7f4ec;--paper:#fffdf8;--mint:var(--glowi-lime);--mint-dark:#a8df3e;--coral:#ff725e;--line:rgba(16,42,42,.13);--shadow:0 24px 70px rgba(19,62,57,.14);--radius:24px;--space-1:12px;--space-2:20px;--space-3:32px}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}
    .hero{position:relative;display:flex;align-items:center;min-height:max(620px,86vh);color:white}.hero-media{display:contents}.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%}.hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,22,22,.68) 0%,rgba(7,22,22,.6) 48%,rgba(7,22,22,0) 76%);pointer-events:none}.hero-grid{position:relative;z-index:2;padding:40px 0 110px}.hero-copy{max-width:620px}
    .eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 11px 7px 8px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(7,22,22,.32);backdrop-filter:blur(8px);font-weight:750;font-size:12px;text-transform:uppercase;letter-spacing:.09em}.eyebrow i{width:24px;height:24px;border-radius:50%;background:var(--coral);display:grid;place-items:center;color:#fff;font-style:normal;font-size:12px}.hero-kicker{display:flex;align-items:center;gap:10px;margin:0 0 var(--space-1);font-size:14px;font-weight:650;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.45)}.hero-kicker i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--mint)}.hero h1{max-width:620px;margin:0 0 var(--space-2);font-size:clamp(40px,4.5vw,64px);line-height:1.03;letter-spacing:-.045em;font-weight:850;text-shadow:0 2px 18px rgba(0,0,0,.35)}.lead{max-width:620px;margin:0;color:rgba(255,255,255,.94);font-size:18px;line-height:1.55;text-shadow:0 1px 12px rgba(0,0,0,.45)}.benefits{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:var(--space-2);color:#fff;font-size:15px;font-weight:600;text-shadow:0 1px 10px rgba(0,0,0,.5)}.benefits span{display:flex;align-items:center;gap:7px;white-space:nowrap}.tick{flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:var(--mint);color:var(--ink);display:grid;place-items:center;font-size:10px;font-style:normal;text-shadow:none}.price-note{margin:var(--space-1) 0 0;font-size:13px;line-height:1.4;color:var(--muted)}.hero .price-note{color:rgba(255,255,255,.8);text-shadow:0 1px 8px rgba(0,0,0,.5)}
    .visual{display:none}
    .hero-search{position:relative;z-index:50;max-width:620px;margin-top:var(--space-3)}.search-label{display:block;margin:0 0 var(--space-1);font-size:15px;font-weight:700;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.3)}.search-wrap{position:relative}.search-field{height:58px;border:1px solid rgba(255,255,255,.6);border-radius:999px;background:#fff;display:flex;align-items:center;padding:0 6px 0 20px;transition:.2s;color:var(--ink);box-shadow:0 12px 34px rgba(0,0,0,.22)}.search-field:focus-within{box-shadow:0 0 0 4px rgba(201,246,107,.55),0 12px 34px rgba(0,0,0,.22)}.search-field svg{flex:0 0 auto}.search-field input{min-width:0;width:100%;height:100%;border:0;outline:0;background:transparent;color:var(--ink);padding:0 12px;font-size:16px}.search-field input::placeholder{color:#667876}.search-button{height:46px;flex:0 0 auto;border:0;border-radius:999px;background:var(--mint);display:flex;align-items:center;padding:0 20px;color:var(--ink);font-size:15px;font-weight:750;white-space:nowrap;transition:.2s}.search-button:hover{background:var(--mint-dark)}.suggestions{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;border:1px solid var(--line);border-radius:18px;background:white;padding:7px;box-shadow:0 18px 40px rgba(0,0,0,.2)}.suggestions.show{display:block}.suggestion{width:100%;border:0;border-radius:11px;background:white;display:flex;justify-content:space-between;align-items:center;padding:11px 12px;text-align:left;color:var(--ink)}.suggestion:hover,.suggestion.active{background:#f0f7e6}.suggestion span{font-size:13px;color:var(--muted)}.suggestion b{display:inline-flex;align-items:center;gap:10px}.chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:var(--space-1)}.chips-label{margin-right:2px;font-size:13px;font-weight:650;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}.chip{border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(7,22,22,.3);backdrop-filter:blur(6px);color:#fff;padding:6px 11px;font-size:13px;font-weight:650;transition:.15s}.chip:hover{background:#fff;color:var(--ink)}
    .proof{position:relative;z-index:1;margin-top:-64px;padding:0 0 56px}.proof-card{background:#fff;border-radius:28px;box-shadow:0 24px 60px rgba(16,42,42,.16);padding:26px 32px}.proof-row{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:26px}.proof-item{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;align-items:center;font-size:13px;color:var(--muted)}.proof-item strong{grid-column:2;color:var(--ink);font-size:14px}.proof-desc{grid-column:2;margin-top:3px}.proof-icon{grid-column:1;grid-row:1;display:grid;place-items:center;width:36px;height:36px;margin-block:-9px;border-radius:10px;background:rgba(195,242,108,.18);background:color-mix(in srgb,var(--mint) 18%,transparent);color:var(--ink)}.proof-icon svg{display:block}.proof-logos{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.proof-logos:not(:has(li)){display:none}.proof-logos-label{margin-right:4px;font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.proof-pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0;padding:0;list-style:none}.proof-pay li{display:flex}.proof-pay img{display:block;width:auto;height:20px}.proof-pay svg{display:block;width:auto;height:28px;color:var(--muted)}
    .result{display:none;margin-top:var(--space-1);padding:12px 16px;border-radius:14px;background:rgba(7,22,22,.72);color:white;font-size:14px}.result.show{display:block}.result strong{color:var(--mint)}
    @media(max-width:1050px){.proof-card{padding:24px}}
    @media(max-width:900px){.proof-row{grid-template-columns:repeat(2,1fr);gap:22px 20px}.hero{--gutter:20px;flex-direction:column;align-items:stretch;min-height:0;padding-bottom:96px;color:var(--ink);background:var(--cream)}.hero:before{display:none}.hero-grid,.hero-copy{display:contents}.hero .hero-copy>*{margin-left:var(--gutter);margin-right:var(--gutter)}.hero .hero-kicker{order:1;margin-top:var(--space-3);color:var(--ink);text-shadow:none}.hero-kicker i{background:var(--mint-dark)}.hero h1{order:2;color:var(--ink);text-shadow:none}.hero .lead{order:3;color:var(--ink);text-shadow:none}.hero .hero-search{order:4}.hero .hero-media{order:5;display:block;position:relative;overflow:hidden;margin:var(--space-3) var(--gutter) 0;border-radius:var(--radius);aspect-ratio:1122/811}.hero .hero-bg{position:absolute;top:auto;left:auto;right:0;bottom:0;width:100%;height:100%;max-width:none;border:0;border-radius:0;box-shadow:none;object-fit:cover;object-position:50% 100%}.hero .benefits{order:6;flex-direction:column;align-items:flex-start;gap:8px;margin-top:var(--space-3);color:var(--ink);text-shadow:none}.hero .chips{order:7;margin-top:var(--space-2)}.hero .price-note{order:8;color:var(--muted);text-shadow:none}.search-label{color:var(--ink);text-shadow:none}.search-field{border-color:rgba(16,42,42,.2);box-shadow:0 8px 24px rgba(16,42,42,.1)}.chips-label{color:var(--ink);text-shadow:none}.chip{background:#fff;border-color:var(--line);color:var(--ink);backdrop-filter:none}.chip:hover{background:var(--ink);color:#fff}}
    @media(max-width:560px){.wrap{width:min(100% - 24px,1180px)}.hero{--gutter:12px;padding-bottom:80px}.hero .hero-media{aspect-ratio:719/811}.hero .hero-bg{width:156.05%}.hero-kicker{font-size:13px}.lead{font-size:16px}.benefits{flex-direction:column;align-items:flex-start;gap:8px}.proof-row{grid-template-columns:repeat(2,1fr);gap:18px 14px;align-items:start}.proof-item{grid-template-columns:1fr;row-gap:6px}.proof-item strong,.proof-desc{grid-column:1}.proof-icon{grid-row:auto;margin-block:0}.proof{margin-top:-48px;padding-bottom:40px}.proof-card{padding:20px;border-radius:22px}.search-field{height:54px}.search-button{height:42px;padding:0 16px;font-size:14px}}

/* ===== Home: destinos populares, cómo funciona y qué es una eSIM ===== */
.home-sec{padding:28px 0 64px}
.home-h2{margin:0 0 10px;font-size:clamp(28px,3.4vw,40px);line-height:1.08;letter-spacing:-.045em}
.home-sub{margin:0 0 22px;font-size:16px;line-height:1.5;color:var(--muted)}
/* .btn.btn-ghost: más específico que .btn{border:0}, que va después en este archivo */
.btn.btn-ghost{border:1.5px solid var(--ink);background:transparent;color:var(--ink)}.btn.btn-ghost:hover{background:var(--ink);color:#fff}
/* Tarjetas de destino (components.js → destCardHTML) */
.dgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dcard{position:relative;display:flex;align-items:center;gap:14px;min-height:96px;padding:18px 48px 18px 18px;border:1.5px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);transition:border-color .15s,transform .15s}
.dcard:hover{border-color:var(--ink);transform:translateY(-2px)}
.dcard:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--mint)}
/* Bandera 4:3 de flag-icons recortada en círculo; el borde (encima, con ::after) evita que Japón se pierda sobre el fondo */
.dcard-flag{position:relative;flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden}
.dcard-flag::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.dcard-flag .fi{display:block;width:100%;height:100%;border-radius:0;box-shadow:none;vertical-align:0}
.dcard-flag .fi--region{display:grid}
.dcard-body{display:grid;min-width:0}
.dcard-kicker{font-size:12px;font-weight:650;line-height:1.2;color:var(--muted)}
.dcard-name{font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
.dcard-price{margin-top:2px;font-size:14px;color:var(--muted)}
.dcard-arrow{position:absolute;right:16px;bottom:14px;display:flex;color:var(--ink)}
.dcard-arrow svg{display:block}
.home-more{margin:24px 0 0;text-align:center}
@media(prefers-reduced-motion:reduce){.dcard{transition:none}.dcard:hover{transform:none}}
/* Tu eSIM en tres pasos */
.steps-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:stretch;margin-top:22px}
/* Hueco de la foto: 1.75:1 fijo (align-self:start para que la rejilla no lo estire y rompa la proporción) */
.steps-media{position:relative;align-self:start;aspect-ratio:1.75;overflow:hidden;border-radius:var(--radius);background:#ece8dd}
.steps-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/* Scrim: encima de la foto y debajo del texto, oscurece solo la parte inferior en vez de tintar la foto entera */
.steps-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(16,42,42,.8) 0%,rgba(16,42,42,.35) 45%,rgba(16,42,42,0) 75%);pointer-events:none}
.steps-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:20px 24px;color:#fff;font-size:clamp(22px,2.8vw,36px);font-weight:850;line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
@media(max-width:560px){.steps-caption{padding:14px 16px;font-size:22px}}
.hsteps{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.hstep{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;padding:22px 24px;border:1px solid var(--line);border-radius:20px;background:var(--paper)}
.hstep-n{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:34px;font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--mint-dark)}
.hstep-t{margin:2px 0 0;font-size:18px;font-weight:800;line-height:1.3;letter-spacing:-.02em}
.hstep-d{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.hstep-d strong{color:var(--ink)}
.hstep-link{margin-top:8px;font-size:15px}
/* ¿Qué es una eSIM? — ilustración SVG propia */
.esim-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
.esim-art{display:grid;place-items:center;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.esim-art svg{display:block;width:100%;max-width:380px;height:auto}
.ea-line{stroke:var(--ink)}.ea-paper{fill:var(--paper)}.ea-cream{fill:var(--cream)}.ea-mint{fill:var(--mint)}.ea-dot{fill:var(--mint-dark)}
.ea-text{fill:var(--ink);stroke:none;font-family:inherit;font-size:24px;font-weight:800;letter-spacing:-.02em}
.esim-copy p{margin:0 0 14px;font-size:17px;line-height:1.65;color:var(--muted)}
.esim-copy strong{color:var(--ink)}
.esim-links{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:20px!important}
/* Por qué Glowi */
.home-kicker{margin:0 0 8px;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.why-card{padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--paper)}
.why-icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:14px;border-radius:12px;background:rgba(195,242,108,.18);background:color-mix(in srgb,var(--mint) 18%,transparent);color:var(--ink)}
.why-icon svg{display:block}
.why-card h3{margin:0 0 6px;font-size:18px;line-height:1.25;letter-spacing:-.02em}
.why-card p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
/* Comparativa: datos en data/comparativa.js. En pantallas estrechas, scroll horizontal con la columna del proveedor fija */
.cmp-scroll{overflow-x:auto;margin-top:6px;border:1px solid var(--line);border-radius:20px;background:var(--paper)}
.cmp{width:100%;min-width:860px;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.4}
.cmp th,.cmp td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp thead th{background:var(--paper);font-size:12px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.cmp tbody th{font-weight:800;white-space:nowrap}
.cmp tbody tr:last-child>*{border-bottom:0}
.cmp tr>:first-child{position:sticky;left:0;z-index:1;background:var(--paper);box-shadow:inset -1px 0 0 var(--line)}
.cmp-us>*,.cmp .cmp-us>:first-child{background:#f5fbe6;background:color-mix(in srgb,var(--mint) 12%,var(--paper))}
.cmp-us td{font-weight:650}
.cmp-np{font-style:italic;color:var(--muted)}
.cmp-pending{display:inline-block;padding:1px 8px;border-radius:999px;background:#fff1c2;font-weight:650;color:var(--ink)}
.cmp-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;margin-top:12px;font-size:13px;line-height:1.5;color:var(--muted)}
.cmp-meta p{margin:0}.cmp-meta a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Preguntas frecuentes: sección propia más abajo («Home: preguntas frecuentes») */
/* Fila de pagos, ahora como sección propia antes del pie */
.home-pay{padding:0 0 56px}
.home-pay .proof-logos{margin-top:0}
@media(max-width:1023px){.dgrid,.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.steps-grid{grid-template-columns:1fr}.esim-grid{grid-template-columns:1fr;gap:24px}}
@media(max-width:560px){.dgrid,.why-grid{grid-template-columns:1fr}.cmp th,.cmp td{padding:12px}.home-sec{padding:20px 0 48px}.hstep{padding:18px;gap:14px}.hstep-n{font-size:28px}.esim-art{padding:18px}}

/* ===== Home: preguntas frecuentes (index.html #preguntas) =====
   SOLO la home. Las preguntas de ayuda/, esim/ y las fichas de destino siguen con .faq y .cf-faq
   tal cual: aquí no se toca ninguna regla compartida, se sobrescriben desde .faq.home-faq.

   ≥1024px (el mismo corte con el que la ficha de destino pasa a dos columnas, no uno nuevo): a la
   izquierda el título y las dos llamadas, pegado bajo la cabecera; a la derecha la lista.
   Por debajo, una columna. El bloque de la izquierda se deshace con display:contents —así sus tres
   piezas son celdas de la misma rejilla— y `order` las coloca alrededor de la lista: título arriba,
   botón y soporte debajo. Sin duplicar el HTML ni moverlo con JS.

   Sigue siendo <details>/<summary> del navegador: se abre con el teclado y sin JavaScript. El icono
   y el chevron son decorativos (aria-hidden en el HTML); lo que se lee es el texto de la pregunta. */
.hfaq-grid{display:grid;gap:20px}
.hfaq-aside{display:contents}
.hfaq-head{order:1}
.hfaq-grid .faq.home-faq{order:2}
.hfaq-cta{order:3;margin:0}
/* Bloque de soporte: discreto, separado del botón por una línea */
.hfaq-support{order:4;padding-top:18px;border-top:1px solid var(--line)}
.hfaq-kicker{margin:0 0 10px;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hfaq-h2{margin:0 0 14px;font-size:clamp(32px,4.6vw,52px);line-height:1.04;letter-spacing:-.045em;text-wrap:balance}
.hfaq-sub{margin:0;max-width:36ch;font-size:16px;line-height:1.55;color:var(--muted)}
.hfaq-support-t{margin:0;font-size:15px;font-weight:700}
.hfaq-support-d{margin:5px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
/* Foco visible, con el mismo aro que la cabecera y las tarjetas de destino */
.hfaq-grid :focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--mint)}

/* La lista. Cada pregunta es una fila de tres columnas: icono · texto · chevron. */
.faq.home-faq{margin:0;max-width:none;gap:8px}
.faq.home-faq details{padding:0;transition:background-color .15s,border-color .15s}
.faq.home-faq summary{display:grid;grid-template-columns:20px minmax(0,1fr) 18px;column-gap:14px;align-items:start;padding:16px 18px;border-radius:16px;font-size:16px;line-height:1.35;letter-spacing:-.01em}
.hfaq-icon{display:block;margin-top:1px;color:var(--muted)}
.hfaq-icon svg{display:block}
.hfaq-chev{display:block;margin-top:2px;color:var(--muted);transition:transform .2s}
/* Abierta: tinte lima sobre el papel. El texto de la respuesta (--muted) queda en 5,4:1 sobre él. */
.faq.home-faq details[open]{background:#f6fbe3;background:color-mix(in srgb,var(--mint) 15%,var(--paper));border-color:#dbeeab;border-color:color-mix(in srgb,var(--mint) 55%,var(--line))}
.faq.home-faq details[open] .hfaq-icon,.faq.home-faq details[open] .hfaq-chev{color:var(--ink)}
.faq.home-faq details[open] .hfaq-chev{transform:rotate(180deg)}
/* La respuesta se alinea con el TEXTO de la pregunta, no con el icono: 18 de padding + 20 + 14 de hueco */
.faq.home-faq details>:not(summary){margin:0 0 14px;padding:0 18px 0 52px;font-size:15px;line-height:1.6;color:var(--muted)}
.faq.home-faq details>:last-child{margin-bottom:18px}
.faq.home-faq kbd{display:inline-block;padding:0 7px;border:1px solid var(--line);border-bottom-width:2px;border-radius:7px;background:#fff;font:inherit;font-weight:800;color:var(--ink);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.faq.home-faq details,.hfaq-chev{transition:none}}
@media(min-width:1024px){
  .hfaq-grid{grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:64px;align-items:start}
  .hfaq-aside{display:block;position:sticky;top:calc(var(--header-h) + 24px)}
  .hfaq-cta{margin:26px 0 0}
  .hfaq-support{margin-top:26px}
}
@media(max-width:560px){.hfaq-cta .btn{width:100%}}

/* ===== Página «Cómo funciona» (como-funciona.html) ===== */
.cf :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cf-hero{padding:64px 0 48px}
.cf-hero h1{margin:0 0 16px;font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-.05em}
.cf-hero-sub{max-width:680px;margin:0;font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--muted)}
.cf-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.cf-sec{padding:56px 0}
.cf-h2{margin:0 0 24px;font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.045em}
/* Subtítulo dentro de una sección: entre el h2 y el texto corrido. */
.cf-h3{margin:32px 0 12px;font-size:clamp(19px,2vw,23px);line-height:1.25;letter-spacing:-.02em}
.cf-ico{display:inline-flex}.cf-ico svg{display:block}
/* Pasos: número lima sobre círculo tinta (el lima sobre blanco roto no llega a contraste AA) */
.cf-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:0;padding:0;list-style:none}
.cf-num{display:grid;place-items:center;width:56px;height:56px;margin-bottom:16px;border-radius:50%;background:var(--ink);color:var(--mint);font-size:26px;font-weight:850;line-height:1}
.cf-steps h3{margin:0 0 6px;font-size:19px;line-height:1.25;letter-spacing:-.02em}
.cf-steps p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
/* Antes de viajar / Al llegar */
.cf-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:stretch}
.cf-phase{padding:24px 26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.cf-phase-kicker{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cf-phase h3{margin:0 0 12px;font-size:22px;letter-spacing:-.03em}
.cf-list{display:grid;gap:10px;margin:0;padding-left:20px;font-size:16px;line-height:1.5}
.cf-flow-arrow{display:grid;place-items:center;color:var(--ink)}
.cf-flow-arrow span{display:flex}.cf-flow-arrow svg{display:block}
/* Con su propio color: en ayuda/solucion-de-problemas va dentro de .cf-sec--dark y heredaba el blanco */
.cf-callout{margin-top:16px;padding:18px 22px;border-radius:16px;background:#eef7d8;color:var(--ink);font-size:16px;line-height:1.55}
.cf-callout p{margin:0}
/* No pierdes tu número (bloque oscuro) */
.cf-sec--dark{background:var(--ink);color:#fff}
.cf-number{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 56px;align-items:start}
/* La entradilla va sobre todo en secciones claras (guías, ayuda, esim/, comparativas): tinta por
   defecto. El blanco, solo dentro del bloque oscuro. */
.cf-lead{margin:0;font-size:17px;line-height:1.65;color:var(--ink)}
.cf-sec--dark .cf-lead{color:rgba(255,255,255,.82)}
.cf-points{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.cf-points li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start}
.cf-point-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(201,246,107,.14);color:var(--mint)}
.cf-point-ico svg{display:block}
.cf-points p{margin:8px 0 0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.82)}
.cf-points strong{color:#fff}
.cf-footnote{grid-column:1/-1;margin:8px 0 0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.72)}
/* ¿Funciona en mi móvil? */
.cf-compat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cf-card{padding:22px 24px;border:1px solid var(--line);border-radius:20px;background:var(--paper)}
.cf-card h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:18px}
.cf-card p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.cf-card strong,.cf-nots strong{color:var(--ink)}
.cf-note{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
/* Instalación paso a paso */
.cf-install{margin-top:4px}
/* Los pasos según el móvil: dos tarjetas a la vez en ancho, una cada vez en estrecho.
   El suelo es que se vean LAS DOS: el conmutador lo monta el script, así que sin JavaScript no hay
   pestañas que no funcionen, hay dos bloques seguidos con su encabezado. */
.cf-os{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.cf-os-card{position:relative;padding:24px 26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.cf-os .cf-ol{max-width:none}
/* EL LIMA MARCA CUÁL ES EL TUYO SIN OSCURECER NADA: una barra arriba y un chip sobre el mismo pale
   lime del .cf-callout. Nueve pasos numerados en blanco sobre verde tinta cansan de leer, y los
   bloques oscuros de esta página funcionan porque son cortos. Además el lima NO puede ir de letra
   ni de borde fino sobre el crema: no llega a contraste AA (el mismo motivo que .cf-num). Aquí va
   de barra y de fondo, con el texto en tinta. */
.cf-os-card.is-tuyo{border-color:var(--ink)}
/* Entrada por los lados en vez de esquina a esquina: una barra de 4px con un radio de 24px se
   afilaría en las puntas, y recortarla con overflow:hidden comería el foco de los enlaces. */
.cf-os-card.is-tuyo::before{content:"";position:absolute;top:-1px;left:22px;right:22px;height:4px;border-radius:0 0 4px 4px;background:var(--mint)}
.cf-os-h{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 14px;font-size:22px;letter-spacing:-.03em}
.cf-os-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;background:#eef7d8;font-size:12px;font-weight:750;color:var(--ink)}
.cf-os-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint-dark)}
/* El conmutador solo existe cuando hay algo que conmutar */
.cf-os-switch{display:none}
@media(max-width:900px){
  .cf-os{grid-template-columns:1fr}
  /* La tarjeta que no toca. LA REGLA VIVE AQUÍ DENTRO A PROPÓSITO: por encima de los 900px no
     existe, así que ninguna combinación de estados del script puede dejar una tarjeta invisible
     con el conmutador escondido. La visibilidad la manda el CSS; el script solo dice cuál. */
  .cf-os-card.is-off{display:none}
  .cf-os-switch{display:inline-flex;gap:4px;padding:4px;margin-bottom:16px;border-radius:999px;background:#ece8dd}
  .cf-os-btn{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px;color:var(--muted)}
  .cf-os-btn.is-on{background:#eef7d8;color:var(--ink);box-shadow:0 2px 8px rgba(16,42,42,.12)}
  .cf-os-btn.is-on::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--mint-dark)}
  /* Con pestañas, la pastilla ya dice de qué sistema son los pasos: el encabezado sobra a la vista,
     pero no al lector de pantalla, que es quien nombra el panel. Y la barra lima tampoco pinta
     nada aquí, porque solo hay una tarjeta delante: el lima se va a la pastilla. */
  .cf-os.is-tabs .cf-os-h{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cf-os.is-tabs .cf-os-card{border-color:var(--line)}
  .cf-os.is-tabs .cf-os-card.is-tuyo::before{display:none}
}
@media(max-width:640px){.cf-os-card{padding:20px}}
.cf-ol{display:grid;gap:12px;max-width:780px;margin:0;padding-left:24px;font-size:16px;line-height:1.55}
.cf-ol li::marker{font-weight:800}
.cf-help{margin:20px 0 0;font-size:15px}
.cf-help a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* Lo que no incluye */
.cf-nots{display:grid;gap:14px;max-width:780px;margin:0;padding:0;list-style:none}
.cf-nots li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start}
.cf-not-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#ece8dd;color:var(--ink)}
.cf-not-ico svg{display:block}
.cf-nots p{margin:4px 0 0;font-size:16px;line-height:1.55;color:var(--muted)}
.faq.cf-faq{margin-top:0;max-width:820px}
/* CTA final (bloque oscuro) */
.cf-cta{padding:64px 0;background:var(--ink);color:#fff;text-align:center}
.cf-cta .cf-h2{margin-bottom:0}
.cf-actions--center{justify-content:center}
.cf-cta-note{margin:16px 0 0;font-size:14px;color:rgba(255,255,255,.72)}
.cf-sec--dark :focus-visible,.cf-cta :focus-visible{outline-color:var(--mint)}
@media(max-width:900px){.cf-steps{grid-template-columns:1fr;gap:28px}.cf-flow{grid-template-columns:1fr}.cf-flow-arrow svg{transform:rotate(90deg)}.cf-number{grid-template-columns:1fr}}
@media(max-width:640px){.cf-compat{grid-template-columns:1fr}.cf-hero{padding:40px 0 32px}.cf-sec,.cf-cta{padding:44px 0}.cf-phase{padding:20px}}

/* ===== Fallback si no existe assets/nuevobanner.png ===== */
@media(min-width:901px){.hero{background-color:#1d3a37}}

/* ===== Compartido: footer y layout de páginas interiores ===== */
.page{padding:44px 0 80px}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:22px}.crumbs a:hover{color:var(--ink);text-decoration:underline}
.page-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:start}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:15px 22px;font-weight:750;font-size:15px;transition:.15s}
.btn-primary{background:var(--mint);color:var(--ink)}.btn-primary:hover{background:var(--mint-dark);transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#0b1f1f}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* ===== Página de destino ===== */
.dest .page{padding-top:24px}
/* Cabecera de la ficha (scripts/build-layout.js → heroFichaHTML): migas, H1 y subtítulo encima de la foto o del degradado del país.
   El H1 es texto real (palabra clave «eSIM <País>»); la foto es un <img> con prioridad (LCP), nunca background-image.
   Alto fijo por tramo (--hero-h): la foto no mueve nada al cargar. */
.destino-hero{--hero-h:200px;position:relative;isolation:isolate;display:flex;align-items:flex-end;height:var(--hero-h);margin:0 0 20px;border-radius:var(--radius);overflow:hidden;background:#102A2A linear-gradient(135deg,var(--hero-tono,#1d4a45) 0%,#102A2A 100%);color:#fff}
@media(min-width:640px){.destino-hero{--hero-h:240px}}
/* En escritorio, 240 px: a 1366×768 se ven las tarjetas de planes con su precio sin hacer scroll */
@media(min-width:1024px){.destino-hero{--hero-h:240px}}
/* Se recorta, no se aplasta */
.destino-hero__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center}
/* Scrim desde abajo en verde tinta: sin él el título no se lee. Sobre el degradado basta el ligero.
   Sobre foto, uno denso (.90 → .78 → .50): el ligero, incluso subido a .88, no llegaba a 4.5:1 en la mayoría de
   fotos, sobre todo en móvil, donde el texto ocupa más de media cabecera. El de foto tiene que coincidir con
   scripts/fotos-config.js → SCRIM: es con lo que scripts/fotos-descargar.js mide el contraste. */
.destino-hero__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgba(16,42,42,.80) 0%,rgba(16,42,42,.45) 38%,rgba(16,42,42,.10) 70%,transparent 100%)}
.destino-hero--foto .destino-hero__scrim{background:linear-gradient(to top,rgba(16,42,42,.90) 0%,rgba(16,42,42,.78) 60%,rgba(16,42,42,.50) 100%)}
.destino-hero__inner{min-width:0;width:100%;padding:14px 16px 16px}
.destino-hero--foto .destino-hero__inner{padding-bottom:30px}
.destino-hero__migas ol{display:flex;flex-wrap:wrap;gap:2px 8px;margin:0 0 6px;padding:0;list-style:none;font-size:13px;line-height:1.4;color:rgba(255,255,255,.8)}
.destino-hero__migas li+li:before{content:"›";content:"›"/"";margin-right:8px}
.destino-hero__migas a{color:inherit}.destino-hero__migas a:hover{color:#fff;text-decoration:underline}
.destino-hero__h1{margin:0;font-size:clamp(28px,3.6vw,46px);font-weight:850;line-height:1.05;letter-spacing:-.04em;text-wrap:balance;overflow-wrap:anywhere}
.destino-hero__bandera .fi{font-size:.68em;margin-right:.24em;vertical-align:.04em}
/* Un pack regional: la silueta de su continente, en blanco y sin el fondo lima, del ancho de una bandera */
.destino-hero__bandera .fi--region{background:none;box-shadow:none;color:#fff}
.destino-hero__bandera .fi--region svg{width:100%;height:auto}
.destino-hero__sub{margin:6px 0 0;font-size:15px;line-height:1.4}
/* Crédito del fotógrafo: condición de uso de la API de Pexels. Discreto, pero visible y en el árbol accesible */
.destino-hero__credito{position:absolute;right:16px;bottom:8px;margin:0;font-size:11px;line-height:1.4;color:rgba(255,255,255,.65)}
.destino-hero__credito a{color:inherit;text-decoration:underline;text-underline-offset:2px}.destino-hero__credito a:hover{color:#fff}
.destino-hero a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:2px}
@media(min-width:640px){.destino-hero__inner{padding:20px 24px}.destino-hero__sub{font-size:16px}}
@media(min-width:1024px){.destino-hero__inner{padding:24px 32px 28px}.destino-hero--foto .destino-hero__inner{padding-right:240px;padding-bottom:28px}.destino-hero__credito{right:24px;bottom:14px}.destino-hero__sub{font-size:17px}}
/* Bajo la cabecera, solo el comprobador de compatibilidad (<1024px; en escritorio está en el panel «Tu eSIM») */
.dest-head{margin-bottom:16px}
.dest-head .dest-compat{font-size:14px}
@media(min-width:1024px){.dest-head{display:none}}
.dest-main>.tabs{margin-bottom:16px}
/* Degradado de marca con rótulo: lo usa la home (scripts/build-layout.js) mientras no tenga su imagen */
.dest-photo--fallback{display:flex;align-items:flex-end;padding:20px 24px;background:radial-gradient(90% 140% at 100% 0%,rgba(195,242,108,.5) 0%,rgba(195,242,108,0) 58%),linear-gradient(135deg,var(--ink) 0%,#1d4a45 100%);color:#fff}
.dest-photo--fallback span{font-size:clamp(26px,3.4vw,40px);font-weight:850;letter-spacing:-.04em;line-height:1.05;overflow-wrap:anywhere}
/* Señales de confianza junto al precio (textos: config/trust.js; operadores: catálogo) */
.dest-trust{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.dest-trust li{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);font-size:14px;line-height:1.35;color:var(--muted)}
.dest-trust svg{flex:0 0 auto;color:var(--ink)}
.dest-trust strong{color:var(--ink)}
.link-btn{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--mint-dark);text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
.link-btn:hover{text-decoration-color:var(--ink)}
.link-btn svg{flex:0 0 auto}
.tabs{display:inline-flex;padding:4px;border-radius:999px;background:#ece8dd;margin-bottom:20px}
.tab{border:0;background:transparent;padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;color:var(--muted)}
.tab[aria-selected=true]{background:var(--paper);color:var(--ink);box-shadow:0 2px 8px rgba(16,42,42,.12)}
.panel[hidden]{display:none}
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.plan{position:relative;text-align:left;background:var(--paper);border:1.5px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:6px;transition:.15s;color:var(--ink)}
.plan:hover{border-color:var(--ink);transform:translateY(-2px)}
.plan.selected{border-color:var(--ink);box-shadow:0 0 0 4px rgba(201,246,107,.5)}
.plan .gb{font-size:34px;font-weight:850;letter-spacing:-.05em;line-height:1}
.plan .gb small{font-size:15px;font-weight:700;letter-spacing:0;margin-left:2px}
.plan .validity{font-size:13px;color:var(--muted)}
.plan .price{margin-top:10px;font-size:22px;font-weight:800;letter-spacing:-.03em}
.plan .per{font-size:12px;color:var(--muted)}
/* Tinta sobre coral: 5,3:1 (AA). El blanco sobre este coral se quedaba en 2,7:1. */
.plan .badge{position:absolute;top:-11px;left:16px;background:var(--coral);color:var(--ink);font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.02em}
/* Plan diario («GB ilimitados»): una tarjeta más de la rejilla, pero con selector de días. El <select>
   va FUERA del botón (un control dentro de otro no es válido), así que la tarjeta es el contenedor. */
/* En tinta, para que se distinga a la primera de las de GB: fondo --ink (el de la barra de anuncio),
   texto blanco, precio e icono ∞ en lima. Contraste (AA, texto normal ≥ 4.5:1): blanco sobre #122F31
   14.2:1; lima #C3F26C sobre #122F31 11.0:1; «por día» (blanco al 70 %, que sobre la tinta da #B8C1C1)
   7.7:1. Elegida: anillo lima de 2 px, el patrón de las demás adaptado a fondo oscuro. */
.plan-diario{display:flex;flex-direction:column;gap:8px;background:var(--ink);color:#fff;border:1.5px solid var(--ink);border-radius:20px;padding:20px;transition:.15s}
.plan-diario:hover{transform:translateY(-2px)}
.plan-diario:has(.selected){box-shadow:0 0 0 2px var(--mint)}
.plan-diario__t{display:flex;align-items:center;gap:8px;margin:0;font-size:20px;font-weight:850;letter-spacing:-.03em;line-height:1.1}
.plan-diario__ico{display:flex;flex:0 0 auto;color:var(--mint)}
.plan-diario__ico svg{width:1em;height:1em}
.plan-diario__dias{display:flex;align-items:center;gap:8px;font-size:13px;color:#fff}
/* El desplegable, transparente sobre la tinta con su flecha blanca; las opciones, al abrirse, con los
   colores del sistema (Canvas/CanvasText): blanco sobre blanco no se leería. */
.plan-diario__dias select{flex:1;min-width:0;width:0;height:40px;border:1.5px solid rgba(255,255,255,.3);border-radius:12px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;padding:0 34px 0 10px;font-size:15px;font-weight:650;color:#fff;-webkit-appearance:none;appearance:none}
.plan-diario__dias select option{color:CanvasText;background-color:Canvas}
.plan-diario__dias select:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
/* El botón es solo el precio: la tarjeta ya tiene el borde y el fondo */
.plan.plan--diario{border:0;background:transparent;padding:0;gap:2px;box-shadow:none;color:#fff}
.plan.plan--diario:hover{transform:none}
.plan.plan--diario .price{margin-top:4px;color:var(--mint)}
.plan.plan--diario .per{color:rgba(255,255,255,.7)}
.plan.plan--diario:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
/* Móvil (dos columnas, ≤560px): «GB ilimitados» a 20px ya llena la tarjeta en un teléfono de 390px y
   el ∞ la partía en dos líneas, lo que alargaba la fila. El título escala con la pantalla para caber en
   una sola, con el ∞ incluido, hasta en 360px. El width:0 del <select> es para lo mismo: sin él, su
   relleno de la flecha ensancha la columna y la tarjeta sale más ancha que las de GB. */
@media(max-width:560px){.plan-diario__t{gap:5px;font-size:clamp(14px,3.9vw,20px)}}
@media(prefers-reduced-motion:reduce){.plan{transition:none}.plan:hover{transform:none}.plan-diario{transition:none}.plan-diario:hover{transform:none}}
.dest-incluye{margin:14px 0 0;padding:14px 18px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
/* «El plan ilimitado incluye», dentro de la rejilla de planes, justo detrás de la tarjeta de
   ilimitados y a todo el ancho. En escritorio, al final de la rejilla (order), siempre visible.
   Por debajo de 1024px, donde el panel de compra va debajo de los planes, solo con la tarjeta de
   ilimitados elegida: aparece bajo ella, antes del botón de comprar. «dense» rellena el hueco que
   deja a su lado la tarjeta, para que el cajón quede pegado a su fila. */
.plans>.dest-incluye{grid-column:1/-1;order:1;margin:0}
@media(max-width:1023px){
  .plans:has(>.dest-incluye){grid-auto-flow:row dense}
  .plans>.dest-incluye{order:0}
  .plans:not(:has(.plan--diario.selected))>.dest-incluye{display:none}
}
.dest-incluye__t{margin:0 0 6px;font-size:14px;font-weight:800}
.dest-incluye ul{margin:0;padding-left:18px;font-size:14px;color:var(--ink);display:grid;gap:4px}
.days{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 18px}
.day{border:1px solid var(--line);border-radius:999px;background:transparent;padding:9px 14px;font-size:14px;font-weight:650;color:var(--ink)}
.day[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.unl{display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--paper);border:1.5px solid var(--ink);border-radius:20px;padding:22px 24px;box-shadow:0 0 0 4px rgba(201,246,107,.5)}
.unl .big{font-size:30px;font-weight:850;letter-spacing:-.05em;line-height:1}
.unl .note{font-size:13px;color:var(--muted);margin-top:6px}
.unl .price{font-size:30px;font-weight:850;letter-spacing:-.04em;text-align:right}
.unl .price small{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.sticky{position:sticky;top:calc(var(--header-h) + 20px)}
.summary h3{margin:0 0 14px;font-size:20px;letter-spacing:-.03em}
/* «Tu eSIM» en la ficha: un título de caja, no un encabezado del documento (ahí el primer H2 es
   una sección de «Más sobre»). Mismo aspecto que el h3 de .summary. */
.summary-t{margin:0 0 14px;font-size:20px;font-weight:700;letter-spacing:-.03em}
.summary dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:10px 16px;font-size:14px}
.summary dt{color:var(--muted)}.summary dd{margin:0;font-weight:700;text-align:right}
.summary .total{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:22px;font-weight:850;letter-spacing:-.03em;display:flex;justify-content:space-between}
.summary .empty{color:var(--muted);font-size:14px;padding:6px 0 10px}
.trust{margin-top:16px;display:grid;gap:8px;font-size:13px;color:var(--muted)}
.trust span{display:flex;gap:8px;align-items:center}
.qty{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 14px}
.qty-label{font-size:14px;font-weight:700}
.qty-ctrl{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1.5px solid var(--line);border-radius:999px;background:#fff}
.qty-btn{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:20px;font-weight:600;line-height:1;display:grid;place-items:center}
.qty-btn:hover{background:#f0f7e6}.qty-btn:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.qty-btn[aria-disabled=true]{opacity:.35;cursor:not-allowed;background:transparent}
.qty-val{min-width:30px;text-align:center;font-size:16px;font-weight:800}
.cta-proof{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin:12px 0 0;font-size:13px;line-height:1.4;color:var(--muted);text-align:center}
.cta-proof span{display:inline-flex;align-items:center;gap:5px}.cta-proof svg{flex:0 0 auto}
.faq{margin-top:40px;display:grid;gap:10px;max-width:720px}
.faq details{border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:0 18px}
.faq summary{cursor:pointer;padding:15px 0;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.6}
.cover{margin-top:34px;font-size:14px;color:var(--muted)}
.cover strong{color:var(--ink)}

/* ===== Ficha de destino: columnas y panel de compra pegajoso =====
   <1024px: una columna (principal → panel «Tu eSIM» → chips y FAQ) + barra de compra fija abajo.
   ≥1024px: el panel ocupa la columna derecha en todas las filas y se pega bajo la cabecera.
   Sticky: (1) align-self:start, o el panel se estira a la altura de la fila y nunca se pega;
   (2) ningún ancestro (main, body, html) puede tener overflow distinto de visible;
   (3) si el panel es más alto que la ventana, scroll propio con max-height. */
.dest .dest-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "buy" "more";gap:24px}
.dest-main{grid-area:main;min-width:0}
.dest-buy{grid-area:buy;align-self:start}
.dest-more{grid-area:more;min-width:0}
.dest-more .dest-trust{margin-top:0}
.summary-note{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font-size:13px;line-height:1.4;color:var(--muted)}
.summary-note svg{flex:0 0 auto;margin-top:1px;color:var(--ink)}
@media(min-width:1024px){
  .dest .dest-grid{grid-template-columns:minmax(0,1fr) minmax(340px,380px);grid-template-rows:auto 1fr;grid-template-areas:"main buy" "more buy";gap:0 32px}
  .dest-more{padding-top:18px}
  .dest-buy{position:sticky;top:calc(var(--header-h) + 16px);max-height:calc(100vh - var(--header-h) - 32px);overflow-y:auto}
}

/* ===== Checkout ===== */
.form-row{display:grid;gap:8px;margin-bottom:16px}
.form-row label{font-size:13px;font-weight:780}
.form-row input{height:54px;border:1.5px solid rgba(16,42,42,.3);border-radius:14px;background:#fff;padding:0 16px;font-size:16px;color:var(--ink);outline:0}
.form-row input:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(201,246,107,.45)}
.form-row .hint{font-size:12px;color:var(--muted)}
.form-row .error{display:none;font-size:12px;color:#c43d2b;font-weight:600}
.form-row.invalid .error{display:block}.form-row.invalid input{border-color:#c43d2b}
/* Casilla de consentimiento del checkout: .form-row input da 54px de alto y borde a los campos de texto, aquí no */
.form-check-box{display:flex;gap:12px;align-items:flex-start}
.form-row .form-check-box input{flex:none;width:22px;height:22px;margin:1px 0 0;padding:0;border:0;border-radius:4px;box-shadow:none;accent-color:var(--ink);cursor:pointer}
.form-row .form-check-box input:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--mint)}
.form-row .form-check-box label{font-size:14px;font-weight:500;line-height:1.5;cursor:pointer}
.form-check-box label a{text-decoration:underline}
.form-row.invalid .form-check-box input{outline:2px solid #c43d2b;outline-offset:2px}
.wallets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 18px}
.wallet{height:50px;border:1.5px solid var(--ink);border-radius:14px;background:var(--ink);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;gap:6px}
.or{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);margin:6px 0 18px}.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Hueco del futuro Stripe Payment Element: ocupa lo que ocupaban los campos de tarjeta y se ve a propósito */
.pay-placeholder{display:grid;align-content:center;gap:4px;min-height:156px;margin-bottom:16px;padding:18px 20px;border:1.5px dashed rgba(16,42,42,.3);border-radius:14px;background:#efebe1;box-shadow:inset 0 2px 6px rgba(16,42,42,.08);font-size:14px;line-height:1.5;color:var(--muted);text-align:center}
.pay-placeholder strong{font-size:15px;color:var(--ink)}
.pay-placeholder p{margin:0}
.legal{font-size:12px;color:var(--muted);line-height:1.6;margin-top:14px}
.legal a{text-decoration:underline}
.compat{margin-top:18px;padding:14px 16px;border-radius:14px;background:#eef7d8;font-size:13px;line-height:1.5}

/* ===== Confirmación ===== */
/* Aviso de pedido de ejemplo: mientras no haya backend, que nadie lo tome por una compra real */
.demo-notice{max-width:760px;margin:0 auto 28px;padding:14px 18px;border:2px solid #c43d2b;border-radius:14px;background:#fff1c2;color:var(--ink);font-size:16px;font-weight:750;line-height:1.45;text-align:center}
.done{max-width:760px;margin:auto;text-align:center}
.done .ok{width:64px;height:64px;border-radius:50%;background:var(--mint);display:grid;place-items:center;margin:0 auto 18px;font-size:28px}
.done h1{font-size:clamp(34px,5vw,50px);letter-spacing:-.05em;margin:0 0 10px;line-height:1}
.qr-wrap{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;text-align:left;margin:30px 0}
.qr{width:200px;height:200px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px}
.steps{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.steps li{display:flex;gap:12px;font-size:14px;line-height:1.5}
.steps li>b{flex:0 0 26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12px}
.os-tabs{display:inline-flex;gap:6px;margin-bottom:14px}
.os-tabs button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;color:var(--muted)}
.os-tabs button[aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* El total junto a «Ir al pago»: solo cuando el resumen baja debajo del formulario */
.pay-total{display:none}
@media(max-width:900px){.pay-total:not([hidden]){display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:4px 0 12px;padding-top:12px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}.pay-total strong{font-size:22px;font-weight:850;letter-spacing:-.03em;color:var(--ink)}}
@media(max-width:900px){.page-grid{grid-template-columns:1fr}.sticky{position:static}.qr-wrap{grid-template-columns:1fr;justify-items:center;text-align:center}.steps li{text-align:left}}
@media(max-width:560px){.plans{grid-template-columns:1fr 1fr}.unl{flex-direction:column;align-items:flex-start}.unl .price{text-align:left}.card-grid{grid-template-columns:1fr}.page{padding:28px 0 60px}}

/* ===== Barra de compra fija (página de destino) =====
   La muestra/oculta el JS de destino.html (visible cuando no se ve el botón del panel «Tu eSIM»).
   Alto ~72px + zona segura del iPhone (indicador de inicio). La página reserva ese alto abajo
   para que la barra nunca tape el último bloque ni el pie. */
.buybar{display:none}
.dest{--bb-h:72px;padding-bottom:calc(var(--bb-h) + 1px + env(safe-area-inset-bottom))}
.dest .buybar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:20;padding-bottom:env(safe-area-inset-bottom);background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -12px 30px rgba(16,42,42,.12);transform:translateY(calc(100% + 16px));visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
.dest .buybar.is-visible{transform:none;visibility:visible;transition:transform .2s ease,visibility 0s linear 0s}
.bb-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;min-height:var(--bb-h);padding:10px 0}
.bb-dest{display:flex;align-items:center;gap:10px;min-width:0;font-size:16px;font-weight:800;letter-spacing:-.02em}
.bb-dest .fi{font-size:20px}
.bb-info{min-width:0;text-align:center}
.buybar .bb-plan{overflow:hidden;font-size:13px;line-height:1.3;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.buybar .bb-price{font-size:20px;font-weight:850;line-height:1.2;letter-spacing:-.03em}
.buybar .btn{justify-self:end;padding:14px 26px;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.dest .buybar,.dest .buybar.is-visible{transition:none}}
@media(max-width:1023px){
  .bb-inner{grid-template-columns:minmax(0,1fr) auto;gap:14px}
  .bb-dest{display:none}
  .bb-info{text-align:left}
  .buybar .btn{padding:14px 18px}
}

/* ===== Banderas =====
   SVG de flag-icons (assets/flags/, subset generado por scripts/build-layout.js). Nunca emoji:
   Windows no trae emoji de bandera en color y Chrome pinta el de Tailandia como «TH» (ver components.js).
   4:3 fijo y esquinas de 2px. El borde de 1px en --line (inset, para no deformar el 4:3) no es
   decorativo: sin él, las banderas casi blancas, como la de Japón, desaparecen sobre fondo claro. */
.fi{display:inline-block;flex:0 0 auto;width:1.3333em;height:1em;vertical-align:-.125em;border-radius:2px;background-color:#fff;background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px var(--line)}
.fi--region{display:inline-grid;place-items:center;background-color:#eef7d8;color:var(--ink)}
.fi--region svg{width:auto;height:76%}

/* ===== Comprobador de compatibilidad (compat.js) ===== */
.cc{display:grid;gap:28px}
.cc-sec+.cc-sec{padding-top:26px;border-top:1px solid var(--line)}
.cc-kicker{margin:0 0 6px;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cc-h{margin:0 0 14px;font-size:22px;line-height:1.2;letter-spacing:-.03em}
.cc kbd{display:inline-block;padding:0 7px;border:1px solid var(--line);border-bottom-width:2px;border-radius:7px;background:#fff;font:inherit;font-weight:800;white-space:nowrap}
.cc-a{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px;align-items:start}
.cc-list{display:grid;gap:8px;margin:0;padding-left:20px;font-size:15px;line-height:1.5}
.cc-screen{margin:0}
.cc-screen-ui{display:grid;gap:12px;padding:16px;border-radius:18px;background:var(--ink);color:rgba(255,255,255,.7);font-size:13px;line-height:1.35;font-variant-numeric:tabular-nums}
.cc-screen-row{display:grid;gap:2px;overflow-wrap:anywhere}
.cc-screen-row b{font-size:12px;letter-spacing:.06em;color:#fff}
.cc-screen-row--hit{margin:-6px;padding:6px;border-radius:10px;box-shadow:0 0 0 2px var(--mint);color:#fff}
.cc-screen-row--hit b{color:var(--mint)}
.cc-screen figcaption{margin-top:8px;font-size:12px;line-height:1.4;color:var(--muted)}
.cc-small{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.cc-unlock{margin-top:18px;padding:16px 18px;border-radius:16px;background:#eef7d8;font-size:14px;line-height:1.5}
.cc-unlock p{margin:0}.cc-unlock p+p{margin-top:6px}
.cc-unlock-title{font-weight:800}
.cc-combo{position:relative;display:flex;align-items:center;height:54px;padding:0 5px 0 16px;border:1.5px solid rgba(16,42,42,.3);border-radius:999px;background:#fff}
.cc-combo:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(201,246,107,.45)}
.cc-combo input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px}
.cc-combo button{height:42px;padding:0 18px;border:0;border-radius:999px;background:var(--mint);color:var(--ink);font-size:14px;font-weight:750}
.cc-combo button:hover{background:var(--mint-dark)}
.cc-options{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:5;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(16,42,42,.16)}
.cc-options li{padding:10px 12px;border-radius:10px;font-size:15px;cursor:pointer}
.cc-options li:hover,.cc-options li[aria-selected=true]{background:#f0f7e6}
.cc-result:not(:empty){margin-top:16px}
.cc-pick{margin:0;font-size:14px;color:var(--muted)}
.cc-res{padding:16px 18px;border:1.5px solid rgba(16,42,42,.3);border-radius:16px;background:var(--paper);font-size:14px;line-height:1.5}
.cc-res p{margin:0}.cc-res p+p{margin-top:6px}
.cc-res-title{display:flex;align-items:flex-start;gap:8px;font-size:17px;font-weight:800;letter-spacing:-.02em}
.cc-res-title svg{flex:0 0 auto;margin-top:3px}
.cc-res--yes{border-color:var(--mint-dark);background:#f4fbe6}
.cc-res--no{border-color:#c43d2b;background:#fdf0ed}.cc-res--no .cc-res-title{color:#a23222}
.cc :focus-visible,.cc-dialog :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cc-combo input:focus-visible,.cc-h:focus-visible{outline:0}
.cc-dialog{width:min(680px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:var(--radius);background:var(--paper);color:var(--ink);box-shadow:var(--shadow)}
.cc-dialog::backdrop{background:rgba(7,22,22,.5)}
.cc-dialog-head{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px 14px 24px;background:var(--paper);border-bottom:1px solid var(--line)}
.cc-dialog-head h2{margin:0;font-size:20px;letter-spacing:-.03em}
.cc-close{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink)}
.cc-dialog-body{padding:22px 24px 26px}
.compat-page .card{max-width:820px;margin-top:28px}
@media(max-width:560px){.cc-a{grid-template-columns:1fr}.cc-h{font-size:19px}.cc-dialog-head{padding:12px 16px}.cc-dialog-body{padding:18px 16px 22px}.compat-page .card{padding:20px 16px}}

/* =========================================================
   Layout global: SiteHeader + SiteFooter (HTML generado por scripts/build-layout.js)
   ========================================================= */
/* Alto de la cabecera: ÚNICA fuente. De aquí salen el alto de .sh y del cajón móvil, el top de los paneles
   pegajosos y el scroll-margin-top de los anclas. No escribas la altura a mano en ningún otro sitio. */
:root{--header-h:72px}
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
html.is-locked{overflow:hidden}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-80px;z-index:200;padding:12px 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:750;transition:top .15s}
.skip-link:focus{top:12px}
/* Foco visible: anillo lima con borde tinta sobre fondos claros; lima sobre fondos oscuros */
.skip-link:focus-visible,.sh :focus-visible,.sd :focus-visible,.lc-panel :focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--mint)}
.ann :focus-visible,.sf :focus-visible{outline:2px solid var(--mint);outline-offset:3px;box-shadow:none}
.sf .lc-panel :focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--mint)}
.i-chev{flex:0 0 auto;transition:transform .15s}

/* ---- Barra de anuncio ---- */
.ann{background:var(--ink);color:#fff;font-size:13px;line-height:1.4}
.ann-inner{display:flex;align-items:center;justify-content:center;min-height:38px;padding-top:8px;padding-bottom:8px;text-align:center}
.ann p{margin:0}.ann strong{color:var(--mint);font-weight:750}

/* ---- Header ---- */
/* Alto fijo (--header-h): al hacer scroll solo aparece la sombra, así el panel pegajoso y los anclas no se desincronizan */
.sh{position:sticky;top:0;z-index:70;height:var(--header-h);pointer-events:none}
.sh-bar{position:relative;height:var(--header-h);pointer-events:auto;background:rgba(247,244,236,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .2s ease}
.sh.is-compact .sh-bar{box-shadow:0 10px 30px rgba(16,42,42,.08)}
.sh-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.sh-logo{display:flex;align-items:center;flex:0 0 auto;border-radius:8px}.sh-logo img{display:block;height:32px;width:auto}
.sh-nav{margin-left:auto} /* menú a la derecha, junto al selector de idioma/moneda */
.sh-list{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.sh-item--drop{position:relative}
.sh-link{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--ink);font-size:14px;font-weight:650;white-space:nowrap}
.sh-link:hover,.sh-link[aria-expanded=true],.sh-link[aria-current=page]{background:rgba(16,42,42,.06)}
[aria-expanded=true]>.i-chev{transform:rotate(180deg)}
.sh-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.sh-account{padding:10px 12px;border-radius:999px;font-size:14px;font-weight:650;white-space:nowrap}.sh-account:hover{background:rgba(16,42,42,.06)}
.sh-cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:750;white-space:nowrap;transition:background .15s}
.sh-cta:hover{background:#0b1f1f}
.sh-burger{display:none;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink)}

.sh-panel{animation:sh-in .16s ease-out}
@keyframes sh-in{from{opacity:0;transform:translateY(-4px)}}
.sh-mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 30px 60px rgba(16,42,42,.14);padding-top:26px}
.sh-mega-cols{display:grid;grid-template-columns:2fr 1.2fr 1.1fr;gap:36px;margin-top:24px}
.sh-col-title,.sd-col-title{margin:0 0 8px;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sh-col ul{margin:0;padding:0;list-style:none}
.sh-col--grid ul{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.sh-mlink{display:flex;align-items:center;gap:10px;margin-inline:-10px;padding:9px 10px;border-radius:12px;font-size:15px;font-weight:650}
.sh-mlink:hover{background:#f0f7e6}
.sh-mlink .fi{font-size:16px}
.sh-feature{display:flex;gap:12px;padding:18px;border-radius:18px;background:var(--ink);color:#fff}
.sh-feature svg{flex:0 0 auto;margin-top:2px;color:var(--mint)}
.sh-feature b{display:block;font-size:16px}.sh-feature small{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:rgba(255,255,255,.72)}
.sh-feature:hover b{color:var(--mint)}
.sh-mega-foot{margin:24px 0 0;padding:16px 0 18px;border-top:1px solid var(--line)}
.sh-mega-foot a,.sd-more a{font-size:15px;font-weight:750;text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:3px;text-underline-offset:4px}
.sh-drop{position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;min-width:250px;margin:0;padding:8px;list-style:none;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px rgba(16,42,42,.14)}
.sh-drop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.sh-drop a{display:block;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:650;white-space:nowrap}
.sh-drop a:hover{background:#f0f7e6}

/* ---- Buscador (mega-menú y drawer) ---- */
.sh-search{display:flex;align-items:center;max-width:540px;height:52px;padding:0 5px 0 18px;border:1.5px solid rgba(16,42,42,.2);border-radius:999px;background:#fff;color:var(--ink)}
.sh-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(195,242,108,.6)}
.sh-search svg{flex:0 0 auto}
.sh-search input{flex:1;min-width:0;height:100%;padding:0 10px;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px}
.sh .sh-search input:focus-visible,.sd .sh-search input:focus-visible{outline:0;box-shadow:none}
.sh-search input::-webkit-search-cancel-button{display:none}
.sh-search>button{height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--mint);color:var(--ink);font-size:14px;font-weight:750}
.sh-search>button:hover{background:var(--mint-dark)}

/* ---- Selector idioma · moneda ---- */
.lc{position:relative}
.lc-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font-size:13px;font-weight:700;white-space:nowrap}
.lc-btn:hover{background:rgba(16,42,42,.06)}
.lc-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:80;width:270px;padding:16px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 40px rgba(16,42,42,.18)}
.lc--up .lc-panel{top:auto;bottom:calc(100% + 10px);left:0;right:auto}
.lc-fs{margin:0;padding:0;border:0}.lc-fs+.lc-fs{margin-top:14px}
.lc-fs legend{margin-bottom:8px;padding:0;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lc-opts{display:flex;flex-wrap:wrap;gap:6px}
.lc-opt{position:relative;display:inline-flex;align-items:center;padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:14px;font-weight:650;cursor:pointer}
.lc-opt input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.lc-opt:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
.lc-opt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--mint)}
.lc-opt input:focus-visible{outline:0!important;box-shadow:none!important}
/* La moneda: buscador, grupos por región y una lista que se desplaza; cada opción, código, símbolo y nombre */
.lc-panel{width:min(320px,calc(100vw - 32px))}
.lc-buscar{width:100%;height:38px;margin:0 0 10px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:14px}
.lc-grupos{max-height:min(46vh,340px);overflow-y:auto;overscroll-behavior:contain;margin:0 -4px;padding:0 4px}
/* La lista no se sale del panel: un <fieldset> no encoge por debajo de su contenido (min-width:
   min-content) y los nombres van en una línea; con min-width:0 manda el ancho del panel y el nombre
   largo se corta con «…». Y el panel nunca llega al borde inferior: como mucho, la ventana menos la
   cabecera (y el aviso de la home) y un margen. La lista de monedas se lleva el scroll: su altura es
   esa misma menos lo que ocupa el resto del panel (idioma, buscador, rellenos: unos 240 px). No se
   hace con flex porque un <fieldset> no reparte su altura a lo que lleva dentro. Si la ventana es
   tan baja que ni así cabe, hace scroll el panel entero. */
.lc-fs{min-width:0}
.lc-panel{max-height:calc(100dvh - var(--header-h) - 72px);overflow-y:auto;overscroll-behavior:contain}
.lc-panel .lc-grupos{max-height:max(160px,calc(100dvh - var(--header-h) - 72px - 240px))}
/* En móvil el del pie (el de la cabecera no se ve) se abría hacia la derecha desde su botón y se salía de
   la pantalla, ensanchando la página. Ahí va fijo abajo, de borde a borde con 16 px de margen. */
@media(max-width:640px){.lc--up .lc-panel{position:fixed;left:16px;right:16px;bottom:16px;top:auto;width:auto;max-height:calc(100dvh - 32px)}}
.lc-grupo+.lc-grupo{margin-top:10px}
.lc-grupo-t{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--muted)}
.lc-opts--cur{flex-direction:column;flex-wrap:nowrap;gap:4px}
.lc-opt--cur{display:flex;border-radius:12px;padding:8px 12px}
.lc-cur{display:flex;align-items:baseline;gap:8px;min-width:0}.lc-cur b{min-width:34px}
.lc-sim{min-width:38px;color:var(--muted);font-weight:600}.lc-opt--cur:has(input:checked) .lc-sim{color:rgba(255,255,255,.75)}
.lc-nom{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-nada{margin:6px 0 0;font-size:13px;color:var(--muted)}
/* «Precios en MXN · cambiar», bajo el total de la ficha */
.ficha-moneda{margin:8px 0 0;font-size:13px;color:var(--muted)}
.ficha-moneda b{color:var(--ink)}
.ficha-moneda__btn{padding:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
/* Mientras se decide la moneda por país (<html class="geo-pendiente">, como mucho un segundo): los
   importes, ocultos pero ocupando su sitio, para que no se vea saltar de euros a otra moneda */
.geo-pendiente .price,.geo-pendiente .per,.geo-pendiente [data-por-gb],.geo-pendiente [data-eur],.geo-pendiente [data-precios-moneda],
.geo-pendiente [data-sum-total],.geo-pendiente [data-bb-price],.geo-pendiente #buy,.geo-pendiente #buy-m,.geo-pendiente [data-diario-precio],
.geo-pendiente [data-diario-pordia],.geo-pendiente .dcard-price,.geo-pendiente [data-ficha-moneda],.geo-pendiente [data-locale-label],
.geo-pendiente #pay-total-importe,.geo-pendiente #summary-body .total{visibility:hidden}
/* Aviso de moneda suspendida (site.js): abajo, sin tapar el botón de comprar en móvil */
.aviso-moneda{position:fixed;left:16px;right:16px;bottom:88px;z-index:90;display:flex;gap:12px;align-items:flex-start;max-width:520px;margin:0 auto;padding:12px 14px;border-radius:14px;background:var(--ink);color:#fff;font-size:14px;line-height:1.4;box-shadow:0 12px 30px rgba(16,42,42,.25)}
.aviso-moneda button{flex:0 0 auto;padding:0 4px;border:0;background:none;color:#fff;font-size:20px;line-height:1;cursor:pointer}
.aviso-moneda span{flex:0 1 auto}
.aviso-moneda .aviso-moneda__cambiar{padding:0;font-size:14px;line-height:1.4;font-weight:700;text-decoration:underline}
.aviso-moneda .aviso-moneda__cerrar{margin-left:auto}

/* ---- Drawer móvil ---- */
.sd{position:fixed;inset:0;z-index:100}
.sd-overlay{position:absolute;inset:0;background:rgba(7,22,22,.45);opacity:0;transition:opacity .25s}
.sd-panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:min(100%,440px);background:var(--cream);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.sd.is-open .sd-overlay{opacity:1}.sd.is-open .sd-panel{transform:none}
.sd-head{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding:0 20px;border-bottom:1px solid var(--line)}
.sd .sd-close{display:grid}
.sd-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:20px}
.sd .sh-search{max-width:none}
.sd-acc{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.sd-acc>li{border-bottom:1px solid var(--line)}
.sd-acc-btn,.sd-acc-link{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0;border:0;background:transparent;color:var(--ink);font-size:17px;font-weight:750;text-align:left}
.sd-acc-panel{padding:0 0 16px}
.sd-acc-panel ul{margin:0 0 10px;padding:0;list-style:none}
.sd-col-title{margin-top:10px}
.sd-acc-panel a{display:block;padding:9px 0;font-size:15px;font-weight:600}
.sd-more{margin:6px 0 0}
.sd-locale{margin-top:24px}
.sd-account{display:flex;align-items:center;min-height:52px;margin-top:14px;font-size:16px;font-weight:750;text-decoration:underline;text-underline-offset:4px}
.sd-foot{padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--cream)}
.sd-foot .sh-cta{width:100%;height:54px;font-size:16px}

/* ---- Footer ---- */
.sf{background:var(--ink);color:var(--cream);font-size:14px}
.sf a,.sf .sf-linkbtn{color:rgba(255,255,255,.72);transition:color .15s}
.sf a:hover,.sf .sf-linkbtn:hover{color:var(--mint)}
.sf-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 36px;padding:32px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.sf-kicker{margin:0 0 10px;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.sf-pay,.sf-badges,.sf-social{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.sf-pay svg{display:block;color:rgba(255,255,255,.88)}
.sf-badges{flex-direction:column;align-items:flex-start;gap:10px}
.sf-badges li{display:flex;align-items:center;gap:10px;font-weight:650;color:#fff}.sf-badges svg{color:var(--mint)}
.sf-social a{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:50%}
.sf-social a:hover{border-color:var(--mint)}
/* Columnas: la primera (destinos) algo más ancha. Si cambia el número de columnas en
   nav.config.js (footer.columns), ajusta el repeat(). */
.sf-cols{display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:32px;padding:44px 0}
.sf-col summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:default}
.sf-col summary::-webkit-details-marker{display:none}
.sf-col summary .i-chev{display:none}
.sf-h{margin:0 0 16px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.sf-col ul{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.sf-col a,.sf-linkbtn{font-size:14px;line-height:1.35}
.sf-linkbtn{padding:0;border:0;background:none;font-family:inherit;text-align:left;cursor:pointer}
.sf .is-strong{color:#fff;font-weight:750}
.sf-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding:24px 0 36px;border-top:1px solid rgba(255,255,255,.12);font-size:13px}
.sf-copy{display:flex;align-items:center;gap:10px;margin:0 auto 0 0;color:#fff}.sf-copy img{display:block}
.sf .lc-btn{color:#fff;border-color:rgba(255,255,255,.25)}.sf .lc-btn:hover{background:rgba(255,255,255,.08)}
.sf-tagline{margin:0;color:rgba(255,255,255,.72)}
.sf-fx{margin:0;font-size:12px}.sf-fx a{color:rgba(255,255,255,.72)}

/* ---- Páginas stub ---- */
.stub h1,.compat-page h1{margin:0 0 14px;font-size:clamp(34px,5vw,52px);line-height:1.02;letter-spacing:-.05em}
.stub-intro{max-width:640px;margin:0;font-size:17px;line-height:1.6;color:var(--muted)}
.stub-form{max-width:480px;margin-top:28px}
.stub-status{margin:14px 0 0;font-size:14px;line-height:1.5}
.stub-note{margin-top:28px;font-size:14px;color:var(--muted)}.stub-note a{color:var(--ink);text-decoration:underline}

/* ---- Páginas legales (generadas desde content/legal por scripts/build-layout.js) ---- */
.legal-doc{max-width:780px}
.legal-head h1{margin:0 0 8px;font-size:clamp(34px,5vw,52px);line-height:1.02;letter-spacing:-.05em}
.legal-updated{margin:0;font-size:14px;color:var(--muted)}
.legal-toc{margin:28px 0 8px;padding:18px 22px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.legal-toc-t{margin:0 0 10px;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.legal-toc ol{display:grid;gap:6px;margin:0;padding-left:22px;font-size:15px}
.legal-toc a{text-decoration:underline;text-decoration-color:var(--mint-dark);text-decoration-thickness:2px;text-underline-offset:3px}
.legal-toc a:hover{text-decoration-color:var(--ink)}
.legal-body{font-size:16px;line-height:1.7;overflow-wrap:anywhere}
.legal-body h2{margin:40px 0 10px;font-size:22px;line-height:1.25;letter-spacing:-.02em}
.legal-body p,.legal-body ul,.legal-body ol{margin:0 0 14px}
.legal-body ul,.legal-body ol{padding-left:22px}
.legal-body li+li{margin-top:6px}
.legal-body a{text-decoration:underline;text-underline-offset:3px}
.legal-body .link-btn{font-size:inherit}
.legal-data{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin:0 0 14px;padding:16px 20px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.legal-data dt{font-weight:750}.legal-data dd{margin:0}
.legal-pending{padding:1px 6px;border-radius:6px;background:#fff1c2;color:var(--ink);font-weight:650}
.legal-table{overflow-x:auto;margin:0 0 18px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.legal-table table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;line-height:1.45;overflow-wrap:normal}
.legal-table th,.legal-table td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.legal-table thead th{background:#ece8dd;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.legal-table .legal-table-group th{background:#f4f1e8;font-size:14px}
.legal-table tbody tr:last-child>*{border-bottom:0}
.legal-table code{font-size:13px;white-space:nowrap}
.legal-form{margin:0 0 14px;padding:16px 20px;border-left:4px solid var(--mint-dark);border-radius:0 16px 16px 0;background:var(--paper)}
.legal-form p:last-child{margin-bottom:0}
@media(max-width:560px){.legal-data{grid-template-columns:1fr;gap:2px}.legal-data dd+dt{margin-top:10px}}

/* ---- Cookies: aviso de consentimiento y panel «Configurar cookies» (site.js) ---- */
.ck-banner{position:fixed;left:0;right:0;bottom:0;z-index:90;padding-bottom:env(safe-area-inset-bottom);background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -12px 30px rgba(16,42,42,.14)}
.ck-banner-inner{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding:16px 0}
.ck-banner p{flex:1 1 420px;margin:0;font-size:14px;line-height:1.5}
/* Con el aviso abierto: hueco debajo de la página y la barra de compra de la ficha por encima de él */
.ck-con-aviso body{padding-bottom:var(--ck-alto,0px)}
.ck-con-aviso .dest .buybar{bottom:var(--ck-alto,0px)}
.ck-banner a,.ck-intro a{text-decoration:underline;text-underline-offset:3px}
.ck-actions,.ck-foot{display:flex;flex-wrap:wrap;gap:8px}
.ck-btn{min-height:44px;padding:0 18px;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:750}
.ck-btn:hover{background:#0b1f1f}
.ck-btn--ghost{background:transparent;color:var(--ink)}.ck-btn--ghost:hover{background:rgba(16,42,42,.06)}
.ck-btn:focus-visible,.ck-banner a:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--mint)}
.ck-intro{margin:0 0 6px;font-size:14px;line-height:1.55;color:var(--muted)}
.ck-cat{padding:16px 0;border-bottom:1px solid var(--line)}
.ck-cat-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ck-cat h3{margin:0;font-size:16px}
.ck-cat p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.ck-always{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--muted)}
.ck-note{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:#eef7d8;font-size:14px;line-height:1.5}
.ck-switch{position:relative;display:inline-flex;flex:0 0 auto;width:48px;height:28px}
.ck-switch input{position:absolute;inset:0;z-index:1;margin:0;opacity:0;cursor:pointer}
.ck-switch span{position:absolute;inset:0;border-radius:999px;background:rgba(16,42,42,.28);transition:background .15s}
.ck-switch span::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.ck-switch input:checked+span{background:var(--ink)}
.ck-switch input:checked+span::after{transform:translateX(20px)}
.ck-switch input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--mint)}
.ck-foot{justify-content:flex-end;padding:14px 24px 20px;border-top:1px solid var(--line)}
@media(max-width:560px){.ck-actions,.ck-foot .ck-btn{width:100%}.ck-actions .ck-btn{flex:1 1 0;padding:0 10px}.ck-foot{padding:12px 16px 18px}
  .ck-banner-inner{gap:10px;padding:10px 0}.ck-banner p{font-size:13px;line-height:1.4}.ck-actions .ck-btn{min-height:40px;font-size:13.5px}}
@media(prefers-reduced-motion:reduce){.ck-switch span,.ck-switch span::after{transition:none}}

@media(max-width:1100px){
  .sh-inner{gap:14px}.sh-link{padding:0 10px}.sh-account{padding:10px 8px}
  .sh .lc-btn{width:40px;padding:0;justify-content:center}.sh .lc-btn .lc-text,.sh .lc-btn .i-chev{display:none}
  .sf-cols{grid-template-columns:1fr 1fr;gap:34px 24px}
}
@media(max-width:900px){
  :root{--header-h:60px}
  .sh-nav,.sh-actions>.lc,.sh-actions>.sh-account,.sh-actions>.sh-cta{display:none}
  .sh-burger{display:grid}
  .sf-trust{flex-direction:column;align-items:flex-start}
}
@media(max-width:640px){
  .sf-cols{grid-template-columns:1fr;gap:0;padding:12px 0 28px}
  .sf-col{border-bottom:1px solid rgba(255,255,255,.12)}
  .sf-col summary{min-height:56px;cursor:pointer}.sf-col summary .i-chev{display:block}
  .sf-col[open] summary .i-chev{transform:rotate(180deg)}
  .sf-h{margin:0}.sf-col ul{padding:0 0 18px}
  .sf-copy{margin-right:0;flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){.sh-bar,.sd-overlay,.sd-panel,.skip-link,.i-chev{transition:none}.sh-panel{animation:none}}

/* ===== Buscador de destinos (site.js → [data-dest-search]) ===== */
.sh-search{position:relative}
.sh-search .suggestions{top:calc(100% + 6px);text-align:left}
.suggestion[aria-selected=true]{background:#f0f7e6}
.suggestion-empty{margin:0;padding:12px 14px;font-size:14px;line-height:1.45;color:var(--muted)}
.suggestion-empty a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ===== Listados de destinos (destinos/*.html, generados por el build) ===== */
.dl-head h1{margin:0 0 10px;font-size:clamp(34px,5vw,52px);line-height:1.02;letter-spacing:-.05em}
.dl-intro{max-width:640px;margin:0 0 20px;font-size:17px;line-height:1.55;color:var(--muted)}
.dl-jump{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.dl-jump a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:14px;font-weight:700}
.dl-jump a:hover{border-color:var(--ink)}
.dl-jump span,.dl-count{font-weight:600;color:var(--muted)}
/* content-visibility: los continentes fuera de pantalla no se pintan hasta acercarse. Las banderas de los listados son <img loading="lazy"> (.dl-flag): content-visibility no retrasa las imágenes de fondo de .fi */
.dl-group{padding-top:36px;content-visibility:auto;contain-intrinsic-size:auto 640px;scroll-margin-top:calc(var(--header-h) + 12px)}
.dl-h2{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;font-size:clamp(24px,3vw,30px);line-height:1.15;letter-spacing:-.04em}
.dl-count{font-size:15px;letter-spacing:0}
.dl-note{margin:-4px 0 12px;font-size:15px;color:var(--muted)}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 18px;margin:0;padding:0;list-style:none}
.dl-item{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border-radius:10px;font-size:15px;line-height:1.25;color:var(--ink)}
.dl-item:hover{background:#efebe1}
.dl-item:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.dl-item .fi{font-size:17px}
.dl-flag{flex:0 0 auto;width:22px;height:16px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.dl-name{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.dl-from{flex:0 0 auto;font-size:13px;color:var(--muted);white-space:nowrap}
.dl-pack{max-width:440px;margin:24px 0 8px}
.dl-pack-t{margin:0 0 10px;font-size:14px;font-weight:750;color:var(--muted)}
.dl-more{margin:36px 0 0}

/* ===== Ficha: APN ===== */
.dest-apn{margin:14px 0 0;padding:12px 14px;border-radius:14px;background:#eef7d8;font-size:14px;line-height:1.5}
.dest-apn code{padding:1px 6px;border-radius:6px;background:#fff;font-size:14px;font-weight:700;white-space:nowrap}
.dest-more .dest-apn+.faq{margin-top:18px}

/* ===== Preguntas frecuentes (ayuda/preguntas-frecuentes.html) =====
   Grupos con ancla. Como .dl-group pero sin content-visibility: aquí los bloques son cortos
   y la reserva de alto de .dl-group (pensada para 196 países) daría un salto al saltar al ancla. */
.faq-group{padding-top:36px;scroll-margin-top:calc(var(--header-h) + 12px)}
.faq-group:first-of-type{padding-top:8px}

/* ===== Centro de ayuda (ayuda/index.html) y contacto (contacto.html) =====
   Bloque de urgencia: va el primero y a 390px tiene que caber entero sin hacer scroll,
   así que el título es menor que un .cf-h2 y no lleva párrafo de entrada. */
.help-sos{margin:0 0 30px;padding:20px 22px;border-radius:var(--radius);background:#eef7d8}
.help-sos h2{margin:0 0 10px;font-size:clamp(20px,4.6vw,26px);line-height:1.2;letter-spacing:-.03em}
.help-sos ol{display:grid;gap:8px;margin:0 0 16px;padding-left:22px;font-size:15px;line-height:1.5}
.help-sos p{margin:0}
/* Directorio de tarjetas (lo usan las dos): .card-grid + .card, con la tipografía que a .card le falta */
.help-card h3{margin:0 0 6px;font-size:18px;line-height:1.25;letter-spacing:-.02em}
.help-card p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.help-card:hover{border-color:var(--ink)}
.help-card:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(min-width:901px){.help-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Contacto, «Escríbenos»: a la izquierda la dirección y qué poner en el mensaje, a la derecha el
   formulario. Una columna hasta 900px (el corte de .help-cards y .page-grid) y ahí el formulario
   sube el primero con order: en el móvil es a lo que se viene. */
.contact-cols{display:grid;gap:28px}
.contact-cols .contact-form{order:-1}
@media(min-width:901px){.contact-cols{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:start}.contact-cols .contact-form{order:0}}
.contact-info>p:first-child{margin-top:0}
.contact-info .contact-sub{margin-top:28px}
/* Datos del titular: la ficha .legal-data de los textos legales, al ancho de lo que lleva */
.contact-titular{width:fit-content;max-width:100%;font-size:15px}
/* Formulario de contacto: envía a /api/contacto (contacto.js) */
.contact-form{margin:0}
.contact-form textarea{min-height:120px;border:1.5px solid rgba(16,42,42,.3);border-radius:14px;background:#fff;padding:12px 16px;font:inherit;font-size:16px;color:var(--ink);outline:0;resize:vertical}
.contact-form textarea:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(201,246,107,.45)}
.contact-note{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--muted)}
/* El resultado del envío. Los tres estados se distinguen por el color de la barra lateral y no
   solo por el texto, pero NUNCA solo por el color: el mensaje ya dice qué ha pasado, y esto es el
   refuerzo. El de error va en coral, que es el único rojo de la marca. */
.contact-estado{margin:14px 0 0;padding:12px 16px;border-left:4px solid var(--line);border-radius:0 12px 12px 0;background:#fff;font-size:15px;line-height:1.55}
.contact-estado.is-enviando{border-left-color:var(--muted);color:var(--muted)}
.contact-estado.is-ok{border-left-color:var(--mint-dark);background:#eef7d8}
.contact-estado.is-error{border-left-color:var(--coral);background:#fff3f1}
.contact-estado strong{font-weight:800;letter-spacing:.02em}
/* El campo trampa del formulario. display:none y no .vh: .vh lo dejaría para el lector de pantalla
   y para el autorrelleno del navegador, y las dos cosas lo romperían. Ver contacto.html. */
.contact-trampa{display:none}
/* Botón con aspecto de enlace SOBRE FONDO CLARO. No se usa .sf-linkbtn para esto: esa clase la
   pinta «.sf a,.sf-linkbtn{color:rgba(255,255,255,.72)}», sin escopar al pie, así que fuera del pie
   sale texto casi blanco sobre crema. */
.link-btn-claro{padding:0;border:0;background:none;font-family:inherit;font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-btn-claro:hover{color:var(--ink)}

/* ===== Mi eSIM: la cuenta y las tarjetas de pedido ===== */
/* La cuenta, arriba a la derecha y fuera del camino. Antes iba centrada entre el título y las
   tarjetas, que es por donde pasa la vista de quien viene a ver sus eSIM. */
.mis-cuenta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin:0 0 8px;text-align:right}
.mis-cuenta__email{margin:0;font-size:13px;line-height:1.3;color:var(--muted);overflow-wrap:anywhere}
/* NADA DE ROJO: cerrar sesión no es destructivo —se deshace escribiendo tu email otra vez— y el
   rojo tampoco es de la marca (verde tinta, lima y papel). El único color aparece al pasar el
   ratón, y es el lima de siempre. */
.mis-cuenta__salir{padding:0;border:0;background:none;font-family:inherit;font-size:13px;line-height:1.3;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .15s}
.mis-cuenta__salir:hover{color:var(--mint-dark)}
.mis-cuenta__salir:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}

/* La tarjeta de cada pedido: texto a la izquierda, foto del destino a la derecha.
   Los once destinos sin foto NO llevan .mis-card--foto, así que se quedan en una sola columna y el
   texto ocupa el ancho entero: ni hueco, ni imagen rota, ni un color inventado donde no hay sitio
   que fotografiar (seis de los once son packs de zona, que no son UN lugar). */
.mis-card{display:grid;gap:18px;margin-bottom:12px;align-items:center}
.mis-card--foto{grid-template-columns:minmax(0,1fr) 168px}
.mis-card__cuerpo{min-width:0}
.mis-card__foto{width:100%;height:112px;object-fit:cover;border-radius:14px;display:block}
/* El consumo de cada tarjeta. Mismo peso visual que la línea de plan y fecha que tiene encima: es
   un dato más del pedido, no un aviso. Sale ENCIMA de la fila de botones. */
.mis-consumo{margin:0 0 14px}
.mis-consumo p{margin:0}
.mis-consumo__dato{font-size:14px;line-height:1.5;color:var(--ink)}
/* Los dos botones de la tarjeta, en la misma línea. «Consultar consumo» es .btn-ghost: borde y sin
   relleno, con el mismo alto que el oscuro porque comparten el padding de .btn. Secundario por el
   relleno, no por el tamaño: dos alturas distintas en la misma fila se ven como un descuido.
   flex-wrap para que en la columna estrecha de una tarjeta con foto caiga solo en vez de desbordar. */
.mis-acciones{display:flex;flex-wrap:wrap;gap:10px}
.mis-acciones .btn{flex:0 1 auto}
/* El borde de .btn-ghost son 1,5 px por lado que .btn-dark no tiene: en fila da igual (los estira
   align-items:stretch) pero apilados el oscuro salía 3 px más bajo. Un borde transparente del mismo
   grosor iguala las cajas sin tocar el aspecto: el fondo se pinta también bajo el borde. */
.mis-acciones .btn-dark{border:1.5px solid transparent}
.mis-consumo__nota{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--muted)}
.mis-credito{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.mis-credito a{text-decoration:underline;text-underline-offset:2px}
/* En móvil la foto se va. La tarjeta tiene cuatro líneas de texto y un botón en unos 340 px útiles:
   quitándole 168 px a la foto no queda sitio para «Ver los datos de instalación». La foto es
   decoración; el botón es a lo que se viene.
   Con display:none las diferidas NO se descargan (el navegador no baja una imagen lazy que no se
   renderiza), así que en móvil no se paga por lo que no se ve. Comprobado en el navegador. */
@media(max-width:640px){
  .mis-card--foto{grid-template-columns:minmax(0,1fr)}
  .mis-card__foto{display:none}
  .mis-cuenta{align-items:flex-start;text-align:left}
  /* Apilados y a todo el ancho: dos botones a medias en 340 px salen con el texto partido en dos
     líneas y alturas distintas. Apilados se leen enteros y se aciertan con el pulgar. */
  .mis-acciones{flex-direction:column}
  .mis-acciones .btn{width:100%}
}
/* Fila de enlaces legales en la barra inferior del pie (nav.config.js → footer.legal).
   flex-basis:100% para que ocupe su propia línea y envuelva sola en pantallas estrechas. */
.sf-legal{flex-basis:100%}
.sf-legal ul{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none}
.sf-legal a,.sf-legal .sf-linkbtn{font-size:12px;line-height:1.6;color:rgba(255,255,255,.62)}
.sf-legal a:hover,.sf-legal .sf-linkbtn:hover{color:var(--mint)}

/* ===== Espaciado: un .cf-note que presenta lo que viene detrás =====
   El margen va en el hermano siguiente y no en el propio .cf-note, porque la mayoría de los
   .cf-note cierran una sección y ahí ese aire no debe aparecer. Los comentarios del build
   (<!-- glowi:*:start -->) no son elementos, así que el selector de hermano sigue casando. */
.cf-note + .dgrid,
.cf-note + .dl-grid,
.cf-note + .card-grid,
.cf-note + .cf-compat,
.cf-note + .cf-nots,
.cf-note + .cf-ol,
.cf-note + .faq{margin-top:24px}

/* ===== Espaciado: secciones hermanas de una página interior =====
   contacto.html y ayuda/index.html tienen sus <section> como hijas del .wrap y no usan .cf-sec,
   que es de ancho completo. Sin esto cada h2 nace pegado a lo de arriba. */
.page > section + section{margin-top:44px}

/* ===== Contraste: botones sobre superficie oscura =====
   .btn-ghost es var(--ink) sobre fondo var(--ink): el texto sale del color exacto del fondo
   (1:1, invisible). En blanco son 14,2:1. .btn-dark tiene el mismo problema con su fondo.
   Va aquí y no en cada página: el bloque oscuro se repite en siete. */
.cf-cta .btn.btn-ghost,
.cf-sec--dark .btn.btn-ghost{border-color:#fff;color:#fff}
.cf-cta .btn.btn-ghost:hover,
.cf-sec--dark .btn.btn-ghost:hover{background:#fff;color:var(--ink)}
.cf-cta .btn.btn-dark,
.cf-sec--dark .btn.btn-dark{background:#fff;color:var(--ink)}
.cf-cta .btn.btn-dark:hover,
.cf-sec--dark .btn.btn-dark:hover{background:var(--mint);color:var(--ink)}

/* ===== Contacto: subtítulos de sección ===== */
.contact-sub{margin:32px 0 14px;font-size:22px;line-height:1.2;letter-spacing:-.03em}

/* ===== Cobertura de un pack regional (destinos/global.html y la ficha de un pack) =====
   La lista va completa en el HTML: es lo que indexa Google y lo que ve quien no tenga JS.
   El buscador de cobertura.js solo esconde elementos ya pintados. */
.cov{margin-top:36px}
.cov-search{display:flex;align-items:center;gap:10px;height:48px;max-width:360px;margin:0 0 12px;padding:0 16px;border:1.5px solid rgba(16,42,42,.3);border-radius:999px;background:#fff}
.cov-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(201,246,107,.45)}
.cov-search svg{flex:0 0 auto;color:var(--muted)}
.cov-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px}
.cov-search input::-webkit-search-cancel-button{display:none}
.cov-status{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--muted)}
.cov-status:empty{display:none}
/* País que no se vende por separado: se lista igual, pero no es un enlace */
.dl-item--plain{color:var(--muted);cursor:default}
.dl-item--plain:hover{background:transparent}

/* ===== Checkout: avisos encima del botón de pago (pago cancelado y error del servidor) =====
   Reutilizan .compat y .cc-res--no; aquí solo se les da el hueco con el botón. */
.checkout-msg{margin:0 0 16px}

/* ===== Confirmación (confirmacion.html): variantes del círculo de estado =====
   .ok es el círculo lima de «hecho». Esperando o reembolsado: neutro. Fallido: los colores de .cc-res--no. */
.done .ok--espera{background:#ece8dd;color:var(--ink)}
.done .ok--aviso{background:#fdf0ed;color:#a23222}

/* Ficha de instalación de la eSIM (esim-ficha.js): confirmacion.html y mi-esim.html */
.esim-ficha+.esim-ficha{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.esim-ficha-h{margin:0 0 12px;font-size:17px;letter-spacing:-.02em}
.esim-datos{margin:0 0 16px;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px}
.esim-datos dt{color:var(--muted)}.esim-datos dd{margin:0;font-weight:700;text-align:right}
.esim-qr{margin:0 0 18px;text-align:center}
.esim-qr img{display:block;width:240px;max-width:100%;height:auto;margin:0 auto;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff}
.esim-qr figcaption{max-width:420px;margin:10px auto 0;font-size:13px;line-height:1.45;color:var(--muted)}
.esim-ios{margin:0 0 16px;text-align:center}
.esim-manual{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--muted)}
.esim-code{margin:0 0 12px}
.esim-code-label{display:block;margin:0 0 4px;font-size:12px;color:var(--muted)}
.esim-code-row{display:flex;align-items:center;gap:8px}
.esim-code code{flex:1 1 auto;min-width:0;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--cream);font-size:14px;overflow-wrap:anywhere;user-select:all}
/* .esim-code-copiar, no .esim-copy: «copy» de copiar es un VERBO y chocaba con el .esim-copy
   de la home, que es el texto («copy» sustantivo) de «¿Qué es una eSIM?». Al ir estas reglas después,
   al bloque de la home le caía la píldora y, en :hover, el fondo tinta que dejaba su <strong>
   invisible. El nombre va en la familia .esim-code-* porque el botón vive dentro de .esim-code-row. */
.esim-code-copiar{flex:0 0 auto;padding:8px 12px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font-size:13px;font-weight:700}
.esim-code-copiar:hover{background:var(--ink);color:#fff}
.esim-avisos{margin:0 0 18px;padding:14px 16px 14px 32px;border-radius:14px;background:#eef7d8;font-size:14px;line-height:1.5}
.esim-avisos li+li{margin-top:6px}

/* ---- Comparativas por destino (comparativa/*.html) ----
   Reutilizan .cmp-scroll/.cmp de la comparativa de la home. --corta quita el ancho mínimo que allí
   fuerza el scroll: estas tablas tienen dos columnas y caben en un móvil sin desbordar. */
.cmp--corta{min-width:0}
/* «eSIM barata» (esim-barata/*.html): cinco columnas de precios. Sin el ancho mínimo y más
   compactas en el móvil, para que Glowi y los tres competidores se vean a la vez: una comparación
   en la que hay que desplazar para ver a los demás esconde justo lo que compara. */
.cmp--precios{min-width:0}
/* Landings de venta «eSIM barata» (esim-barata/*.html). EL BOTÓN DE COMPRA SE VE SIN SCROLL, a
   1440×900 y a 390×844: por eso la cabecera es una rejilla con áreas. En móvil va primero lo que
   vende (H1, «Desde», botón) y después las frases y una foto baja; desde 901 px (el corte del resto
   de la web), dos columnas con la foto 4:3 a la derecha. El HTML va en el orden de lectura móvil. */
.lp-hero{padding:32px 0 36px}
.lp-cabecera{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"h1" "desde" "cta" "frases" "foto";gap:14px;margin-top:14px}
.lp-cabecera>*{margin:0}
.lp-h1{grid-area:h1}
.lp-desde{grid-area:desde;font-size:20px;line-height:1.3}
.lp-cta{grid-area:cta}
.lp-frases{grid-area:frases;margin-top:6px}
.lp-foto{grid-area:foto}
.lp-foto img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;border-radius:var(--radius)}
.lp-foto figcaption{margin-top:6px;font-size:12px}
.lp-hero .lp-h1{font-size:clamp(34px,4.4vw,56px);line-height:1.02}
@media(min-width:901px){
  .lp-cabecera{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"h1 foto" "frases foto" "desde foto" "cta foto";column-gap:56px;row-gap:16px;align-items:start;grid-template-rows:auto auto auto 1fr}
  .lp-foto img{aspect-ratio:4/3}
}
/* La tarjeta de compra de la cabecera de las guías (build-layout.js → tarjetaCompraHTML): los
   mismos colores que la landing, con su foto. Desde 901 px, la cabecera de la guía pasa a dos
   columnas y la tarjeta ocupa el hueco de la derecha; en móvil va debajo de los botones, compacta.
   Pinta su fondo Y su color de texto (test/contraste.test.js). */
.guia-cabecera__texto>:last-child{margin-bottom:0}
.lp-tarjeta{margin-top:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);overflow:hidden;box-shadow:var(--shadow);animation:lp-entra .5s cubic-bezier(.2,.7,.2,1) both}
.lp-tarjeta__foto{margin:0;overflow:hidden}
.lp-tarjeta__foto picture{display:block;overflow:hidden}
.lp-tarjeta__foto img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;transition:transform .6s ease}
.lp-tarjeta:hover .lp-tarjeta__foto img{transform:scale(1.05)}
.lp-tarjeta__foto figcaption{padding:6px 16px 0;font-size:11px}
.lp-tarjeta__cuerpo{display:grid;gap:8px;padding:12px 16px 16px}
.lp-tarjeta__cuerpo>*{margin:0}
.lp-tarjeta__t{font-size:17px;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.lp-tarjeta__t .fi{margin-right:.3em}
.lp-tarjeta__sub{font-size:14px;line-height:1.5;color:var(--muted)}
.lp-tarjeta__desde{font-size:18px;line-height:1.3}
.lp-tarjeta .btn{width:100%;justify-content:center;margin-top:4px}
@media(min-width:901px){
  .guia-cabecera{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr);column-gap:56px;align-items:start}
  .guia-cabecera .lp-tarjeta{margin-top:0}
  .lp-tarjeta__foto img{aspect-ratio:4/3}
  .lp-tarjeta__cuerpo{gap:10px;padding:16px 20px 20px}
  .lp-tarjeta__t{font-size:19px}
}
/* Comparador de precios (comparador-precios-esim/*.html): menos hueco que las guías.
   · El resultado, en UNA línea destacada en la cabecera (no una sección entera).
   · Secciones con el espaciado de las fichas, para que la tabla empiece arriba.
   · Datos del destino y preguntas lado a lado desde 901 px: sin media página vacía. */
.cmpr-hero{padding:36px 0 20px}
.cmpr-resultado{margin:0 0 18px;padding:10px 14px;border-left:4px solid var(--mint-dark);border-radius:0 12px 12px 0;background:#eef7d8;color:var(--ink);font-size:17px;line-height:1.45}
.cmpr-sec{padding:28px 0}
.cmpr-dos{display:grid;gap:28px}
@media(min-width:901px){.cmpr-dos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}}
@media(max-width:640px){.cmpr-hero{padding:24px 0 12px}.cmpr-sec{padding:22px 0}}
/* Comparador, comparativas con Holafly y calculadora: títulos largos («Comparador de precios eSIM
   para Japón (septiembre de 2026)») en una columna más estrecha. Un H1 más contenido para que no
   se vayan a cuatro líneas y la tarjeta siga en la primera pantalla. */
.guia-cabecera--h1 h1{font-size:clamp(34px,3.7vw,52px);line-height:1.04}
@keyframes lp-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Quien pide menos movimiento, no lo tiene: ni la entrada ni el zoom */
@media(prefers-reduced-motion:reduce){
  .lp-tarjeta{animation:none}
  .lp-tarjeta__foto img{transition:none}
  .lp-tarjeta:hover .lp-tarjeta__foto img{transform:none}
}
/* La tarjeta en «eSIM para {viaje}» y «eSIM para {móvil}»: accesos directos a fichas, cada uno con
   su «desde», y un enlace secundario debajo del botón («Comprobar mi móvil»). */
.lp-tarjeta__accesos{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:15px;line-height:1.4}
.lp-tarjeta__accesos a{font-weight:700;color:var(--ink)}
.lp-tarjeta__accesos .fi{margin-right:.3em}
.lp-tarjeta__sec{font-size:14px;text-align:center}
.lp-tarjeta__sec a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Las secciones de esas páginas: el espaciado del comparador, sin media página vacía */
.seo-sec{padding:28px 0}
.seo-lista{display:grid;gap:8px}
.seo-modelos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.seo-modelos li{padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-size:14px;line-height:1.4}
.seo-relacionado{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0;list-style:none;font-size:15px;line-height:1.5}
.seo-relacionado a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.seo-marcas{margin-top:28px}
.seo-marcas h2{margin:0 0 10px;font-size:20px}
@media(max-width:640px){.seo-sec{padding:22px 0}}
.lp-comparar{margin:12px 0 0}
.lp-comparar a{text-decoration:underline;text-underline-offset:2px}
/* La bandera del H1, a escala del texto y no del cuerpo del título */
.lp-h1 .fi{font-size:.55em;vertical-align:.2em;margin-right:.15em}
/* Interrail y Eurotrip: la cabecera de la ficha del pack Europa, dentro del ancho de página como allí.
   Con el «Desde» y el botón dentro, deja de tener alto fijo: crece lo que haga falta y nada se recorta. */
.viaje-hero{padding-top:24px}
.destino-hero--viaje{height:auto;min-height:var(--hero-h)}
.viaje-compra{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:16px}
.viaje-desde{margin:0;font-size:18px;line-height:1.3}
.viaje-compra .btn{flex:0 0 auto}
@media(max-width:560px){.viaje-compra .btn{width:100%;justify-content:center}}
@media(max-width:560px){.cmp--precios th,.cmp--precios td{padding:10px 6px;font-size:12.5px}.cmp--precios thead th{font-size:11px;letter-spacing:0}.cmp--precios tbody th{white-space:normal}}
.cmp-kicker{margin:26px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
.cmp-kicker strong{color:var(--ink)}
.cmp-fuente{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
.cmp-fuente a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cf-lead-note{margin:0 0 18px;font-size:16px;line-height:1.6;color:var(--muted)}
.cf-lead-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Cita literal del competidor: se marca como cita para que se vea que son SUS palabras */
.cf-cita{margin:0 0 18px;padding:18px 22px;border-left:3px solid var(--ink);border-radius:0 16px 16px 0;background:var(--paper)}
.cf-cita p{margin:0;font-size:18px;line-height:1.5}
.cf-cita footer{margin-top:8px;font-size:13px;color:var(--muted)}
.cf-meta{font-size:13px;color:var(--muted)}
/* Enlace a la comparativa desde la ficha del destino (data/comparativas-destino.js) */
/* «Más sobre {País}» al final de la ficha: los enlaces a otras páginas del destino (comparativa,
   comparador, landing…). Discretos a propósito: texto pequeño, subrayado fino, en una fila que
   salta de línea. La ficha es para comprar; esto es para quien siga leyendo. */
.dest-mas{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted)}
.dest-mas__t{margin:0 0 6px;font-size:13px;font-weight:700;line-height:1.4}
.dest-mas ul{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;padding:0;list-style:none;font-size:13px;line-height:1.5}
.dest-mas a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.dest-mas a:hover{color:var(--ink)}
/* «Más sobre {País}» (build-layout.js → infoFichaHTML): una pregunta por H2 y la respuesta debajo.
   Debajo de la compra, con el mismo ancho de lectura que las preguntas frecuentes. */
.dest-info{margin-top:40px;max-width:720px;font-size:15px;line-height:1.6}
.dest-info h2{margin:32px 0 8px;font-size:clamp(20px,2.4vw,24px);line-height:1.2;letter-spacing:-.03em}
.dest-info h2:first-child{margin-top:0}
.dest-info h3{margin:16px 0 8px;font-size:15px;line-height:1.3}
.dest-info p{margin:0 0 10px}
.dest-info a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.dest-info .cmp-scroll{margin:12px 0 8px}
.dest-info__fecha{font-size:13px;color:var(--muted)}
.dest-info__enlaces{margin:0;padding-left:20px}
.dest-datos{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:0;font-size:14px}
.dest-datos dt{font-weight:700}
.dest-datos dd{margin:0;color:var(--muted)}
.dest-info .faq{margin-top:0}
.dest-info summary h3{display:inline;margin:0;font-size:inherit;line-height:inherit}
.dest-comparativa{margin:14px 0 0;font-size:15px;line-height:1.5}
.dest-comparativa a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---- Contenedor de compra (scripts/build-layout.js → contenedorCompra) ----
   Componente reutilizable: nombre del destino, precio real del catálogo y botón a la ficha.
   Aparece dos veces en las comparativas, y puede usarse en cualquier página de contenido con
   <!-- glowi:compra-<slug>:start/end -->. */
/* La tarjeta pinta su fondo claro Y su color de texto: va dentro del bloque oscuro .cf-cta, y sin
   color propio heredaba el blanco de la sección (título blanco sobre papel, invisible). Lo vigila
   test/contraste.test.js → «tarjeta clara dentro de sección oscura». */
.buy-box{margin:28px 0 0;padding:22px 24px;border:1.5px solid var(--ink);border-radius:20px;background:var(--paper);color:var(--ink)}
.buy-box-t{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:20px;line-height:1.25;letter-spacing:-.02em}
.buy-box-t .fi{font-size:18px;border-radius:3px}
.buy-box-t strong{font-weight:850}
.buy-box-sub{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.buy-box-cta{margin:16px 0 0}
.buy-box-cta .btn{width:100%;justify-content:center}
@media(min-width:640px){.buy-box-cta .btn{width:auto}}

/* ---- Calculadora de datos (esim/calculadora-de-datos) ---- */
.calc-form{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 18px;padding:22px 24px;border:1.5px solid var(--ink);border-radius:20px;background:var(--paper)}
@media(min-width:720px){.calc-form{grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:end}}
.calc-campo{display:grid;gap:6px;min-width:0}
.calc-campo label{font-size:13px;font-weight:700;color:var(--muted)}
.calc-campo input,.calc-campo select{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:15px;color:var(--ink)}
.calc-campo input:focus-visible,.calc-campo select:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.calc-form .btn{white-space:nowrap}
.calc-perfiles{margin:0 0 18px;font-size:14px;line-height:1.55;color:var(--muted)}
.calc-perfiles strong{color:var(--ink)}
/* El resultado: lo primero que se lee, y el rango en grande */
.calc-salida{padding:22px 24px;border-radius:20px;background:#eef7d8}
.calc-rango{margin:0;font-size:clamp(19px,2.4vw,24px);line-height:1.35;letter-spacing:-.02em}
.calc-donde{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.calc-plan{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(16,42,42,.14);font-size:16px;line-height:1.6}
.calc-plan a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-weight:700}
/* Tabla de consumo: la etiqueta de fiabilidad y la nota, bajo cada cifra */
.calc-tabla{min-width:640px}
.calc-tabla .calc-grupo{display:block;margin-top:2px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.calc-mb{font-weight:750;white-space:nowrap}
.calc-mb .calc-unidad{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.calc-nota{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:var(--muted)}
.calc-fuente{font-size:13px;line-height:1.5;color:var(--muted)}
.calc-fuente a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* Fiabilidad: publicado, derivado o estimación nuestra. El color dice de un vistazo cuál es cuál */
.fia{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:750;letter-spacing:.02em;white-space:nowrap}
.fia--pub{background:#d9f0c2;color:#20401a}
.fia--der{background:#dfe9f7;color:#1c3557}
.fia--est{background:#fff1c2;color:#4a3a05}
.calc-ajustes{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:860px){.calc-ajustes{grid-template-columns:1fr}}
.calc-cuanto{margin-top:8px!important;font-weight:650;color:var(--ink)!important}
/* Enlace a la calculadora desde la ficha de destino, bajo los planes */
.dest-calc{margin:16px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.dest-calc a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---- Solución de problemas (ayuda/solucion-de-problemas) ---- */
.sp-aviso{margin:16px 0 0;padding:14px 16px;border-left:3px solid var(--ink);border-radius:0 12px 12px 0;background:#fff6db;font-size:15px;line-height:1.6}
.sp-apn{padding:3px 8px;border:1px solid var(--line);border-radius:8px;background:var(--cream);font-size:14px;white-space:nowrap;user-select:all}

/* «¿Tiene eSIM el [modelo]?»: la respuesta en grande, debajo del H1 (scripts/build-layout.js → cuerpoModelo) */
.modelo-resp{margin:6px 0 4px;font-size:clamp(34px,5vw,56px);font-weight:850;line-height:1.05;letter-spacing:-.03em}
.modelo-resp--si{color:#1f7a4d}
.modelo-resp--no{color:#b3261e}
.modelo-resp--depende,.modelo-resp--comprobar{color:#8a5a00}
/* La tabla de modelos en ayuda/dispositivos-compatibles y los enlaces de las guías de instalación */
.modelos-tabla{max-width:820px;margin-top:36px}
.modelos-tabla h2{margin:0 0 8px;font-size:24px;letter-spacing:-.02em}
.modelos-tabla .legal-table table{min-width:0;font-size:15px}
.modelos-tabla td a,.modelo-enlaces a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.modelo-celda{font-weight:750}
.modelo-enlaces{margin:14px 0 0;font-size:15px;line-height:1.7}

/* «¿Cómo nos conociste?» en la confirmación (conocer.js): discreto, después de la eSIM */
.cnc{margin:22px 0 4px;padding-top:18px;border-top:1px solid var(--line);text-align:left}
.cnc-titulo{margin:0 0 4px;font-size:18px;letter-spacing:-.02em}
.cnc-nota{margin:0 0 12px;font-size:14px;color:var(--muted)}
.cnc-opciones{display:flex;flex-wrap:wrap;gap:8px}
.cnc-opcion{min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.cnc-opcion:hover,.cnc-opcion[aria-expanded="true"]{border-color:var(--ink)}
.cnc-opcion:disabled{opacity:.55;cursor:default}
.cnc-otro{margin-top:12px}
.cnc-otro label{display:block;margin-bottom:6px;font-size:14px;font-weight:600}
.cnc-otro-fila{display:flex;gap:8px;flex-wrap:wrap}
.cnc-otro-fila input{flex:1 1 220px;min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px}
.cnc-gracias{margin:0;font-size:15px;font-weight:650}
.cnc-error{margin:10px 0 0;font-size:14px;color:#b42318}