/* homepage pipeline (scoped names to avoid app clashes) */
.home{max-width:1040px;margin:0 auto;padding:.5rem 0 6rem}
h1{font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.08;margin:.4rem 0 .2rem}
.lede{color:var(--muted);max-width:640px}
.steps{display:flex;gap:.5rem;align-items:center;margin:1.4rem 0 1rem;font-size:.9rem;flex-wrap:wrap}
.stp{color:var(--muted);padding:.15rem 0}.stp.reach{cursor:pointer}.stp.reach:hover{color:var(--text)}
.stp.done{color:var(--accent)}.stp.cur{color:var(--text);font-weight:800}.sep{color:var(--muted)}
.step{display:none;animation:fade .35s ease}.step.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.1rem;overflow:hidden}
#map svg,.jvm-container,.jvm-container svg{max-width:100%}
.tabs{display:flex;gap:.5rem;margin-bottom:1rem}
.tab{flex:1;border:1px solid var(--line);background:var(--sunken);border-radius:12px;padding:.65rem;cursor:pointer;text-align:center;font-weight:700;font-size:.95rem}
.tab small{display:block;color:var(--muted);font-weight:500;font-size:.72rem;margin-top:.15rem}
.tab.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
#map{height:clamp(300px,46vh,440px);background:var(--sunken-2);border-radius:14px;border:1px solid var(--line)}
.jvm-tooltip{background:var(--accent)!important;color:var(--accent-ink)!important;font-weight:700;border:0!important}
.searchbox{position:relative;margin-bottom:.75rem}
.searchbox input{width:100%;padding:.65rem .8rem;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text)}
.hp-suggest{list-style:none;margin:.3rem 0 0;padding:.25rem;position:absolute;left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:10px;max-height:220px;overflow:auto;z-index:30}
.hp-suggest[hidden]{display:none}.hp-suggest li{padding:.5rem .6rem;border-radius:7px;cursor:pointer}.hp-suggest li:hover{background:var(--surface-hover)}
.region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem;margin-bottom:1rem}
.region{border:1px solid var(--line);background:var(--sunken);border-radius:12px;padding:.6rem .7rem;cursor:pointer;display:flex;gap:.5rem;align-items:flex-start}
.region:hover{border-color:var(--muted)}.region.on{border-color:var(--accent);background:var(--accent-soft)}
.dot{width:11px;height:11px;border-radius:3px;margin-top:.25rem;flex:0 0 auto}
.region b{display:block}.region small{color:var(--muted)}
.region{position:relative}
.rinfo{position:absolute;top:.35rem;right:.4rem;width:1.15rem;height:1.15rem;border-radius:50%;border:1px solid var(--line);background:var(--sunken-2);color:var(--muted);font-size:.72rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rinfo:hover{color:var(--accent);border-color:var(--accent)}
#region-ui{position:relative}
.region-grid::-webkit-scrollbar{height:6px}.region-grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.cov-modal{position:fixed;inset:0;background:var(--backdrop);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:70}
.cov-modal[hidden]{display:none}
.cov-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.1rem;max-width:440px;width:100%;max-height:80vh;display:flex;flex-direction:column}
.cov-box h3{margin:.1rem 0 .2rem}.cov-box .x{position:absolute;top:.6rem;right:.9rem}
.cov-box input{width:100%;padding:.5rem .6rem;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--text);margin:.6rem 0}
.cov-list{overflow:auto;display:flex;flex-wrap:wrap;gap:.3rem}
.cov-c{border:1px solid var(--line);border-radius:8px;padding:.25rem .55rem;font-size:.85rem}
.cov-close{align-self:flex-end;margin-top:.7rem}
.hint{margin-top:.7rem;color:var(--muted);font-size:.85rem}
.selbar{position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;width:min(1010px,calc(100% - 2rem));z-index:45;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.1rem;background:var(--accent-soft);border:1px solid var(--accent);border-radius:14px;box-shadow:var(--shadow-bar)}
.selbar[hidden]{display:none}
.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:.6rem 1.1rem;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block}
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.type-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.2rem;cursor:pointer;transition:.15s}
.type-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.type-card.on{border-color:var(--accent);background:var(--accent-soft)}
.type-card h3{margin:.2rem 0}.type-card .pill{font-size:.7rem;font-weight:800;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:.1rem .5rem}
.type-card ul{margin:.6rem 0 0;padding-left:1.1rem;color:var(--muted);font-size:.9rem}.type-card li{margin:.25rem 0}
.plan-title{display:flex;align-items:center;gap:.55rem;margin:.2rem 0 1rem;flex-wrap:wrap;min-width:0}
.type-toggle button{white-space:nowrap}
.type-toggle{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--sunken);flex:0 0 auto}
.type-toggle button{border:0;background:none;color:var(--muted);font-weight:800;padding:.4rem .85rem;cursor:pointer;font-size:.92rem}
.type-toggle button.on{background:var(--accent);color:var(--accent-ink)}
.type-toggle button:not(.on):hover{color:var(--text)}
/* ONE grid owns the columns for the whole table; the header and every row opt into it
   with `subgrid`. They used to be independent grids sharing a template, which cannot
   work here: the last track is `auto` (sized to the Add-to-cart button, whose label is
   translated — "+ Añadir al carrito" is far wider than "+ Add to cart"). `auto` resolved
   to ~0 in the header and ~200px in a row, so the flexible tracks got different widths
   and every header label drifted right of its column. Subgrid makes that impossible in
   any language. Gutters are inherited from this parent, so they can't drift either. */
.hp-plans{display:grid;
  grid-template-columns:minmax(130px,1.25fr) minmax(140px,1fr) minmax(90px,.7fr) minmax(78px,.55fr) minmax(120px,1fr) auto;
  column-gap:.85rem;row-gap:.45rem}
.plan-row{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center}
/* Pre-subgrid browsers: independent grids again, but with a last track wide enough for a
   translated button label, so it degrades to "slightly loose" rather than "overlapping". */
@supports not (grid-template-columns:subgrid){
  .hp-plans{display:flex;flex-direction:column;gap:.45rem}
  .plan-row{grid-column:auto;grid-template-columns:minmax(130px,1.25fr) minmax(140px,1fr) minmax(90px,.7fr) minmax(78px,.55fr) minmax(120px,1fr) minmax(11rem,auto);column-gap:.85rem}
}
/* The header is a separate grid from the rows, so its content box must match theirs
   EXACTLY or every column drifts. Rows are .hp-plan: padding .9rem + a 1px border, with
   border-box sizing. Hence the same .9rem here plus transparent 1px side borders. */
.plan-head{position:sticky;top:0;z-index:4;background:var(--bg);padding:.35rem .9rem;
  border-left:1px solid transparent;border-right:1px solid transparent;
  border-bottom:1px solid var(--line);
  color:var(--muted);font-size:.72rem;text-transform:uppercase;font-weight:800;line-height:1.25}
.plan-head>div{min-width:0;overflow-wrap:anywhere}
.hp-plan{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.75rem .9rem;margin:0}
.plan-main{min-width:0}
.hp-plan>div{min-width:0}.hp-plan .d{font-size:1.18rem;font-weight:800}.hp-plan .m{color:var(--muted);font-size:.78rem;line-height:1.25;overflow-wrap:anywhere}
.hp-plan .p{color:var(--accent);font-weight:800;font-size:1.05rem;white-space:nowrap}
.op-cell{font-size:.88rem;line-height:1.3;min-width:0;padding-right:.35rem;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.info-dot{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border:1px solid var(--line);border-radius:999px;background:var(--sunken-2);color:var(--muted);font-size:.68rem;font-weight:800;cursor:pointer}
button.info-dot{vertical-align:middle;margin-left:.25rem}
.info-dot:hover,.linkish:hover .info-dot{color:var(--accent);border-color:var(--accent)}
.linkish{background:none;border:0;color:var(--accent);font-weight:800;cursor:pointer;padding:0;text-align:left}
.hp-plan .btn{white-space:nowrap}
.add-btn{justify-self:end;padding:.48rem .75rem;display:inline-flex;align-items:center;gap:.25rem}
.plan-coverage{grid-column:1/-1;border-top:1px solid var(--line);padding-top:.65rem}
.plan-coverage[hidden]{display:none}
.coverage-scroll{margin-top:.55rem;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.coverage-scroll table{width:100%;border-collapse:collapse;font-size:.84rem}
.coverage-scroll th,.coverage-scroll td{padding:.45rem .55rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.coverage-scroll th{position:sticky;top:0;background:var(--sunken);color:var(--muted);font-size:.7rem;text-transform:uppercase}
.coverage-scroll tr:last-child td{border-bottom:0}
.muted{color:var(--muted)}.small{font-size:.85rem}
@media(max-width:720px){.type-grid{grid-template-columns:1fr}.tab small{display:none}.tab{padding:.6rem .3rem;font-size:.9rem}
#map{height:clamp(230px,38vh,320px)}
.region-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:.5rem;padding-bottom:.35rem;-webkit-overflow-scrolling:touch}
.region{flex:0 0 auto;min-width:9.3rem}
.region-grid{padding-bottom:.35rem}
#region-ui::after{content:"";position:absolute;top:0;right:0;width:36px;height:calc(100% - .5rem);pointer-events:none;z-index:2;background:linear-gradient(90deg,transparent,var(--card))}
#region-ui::before{content:"";position:absolute;top:0;left:0;width:36px;height:calc(100% - .5rem);pointer-events:none;z-index:2;background:linear-gradient(270deg,transparent,var(--card))}}
.cov-x{position:absolute;top:.7rem;right:.9rem;background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:.15rem .5rem;cursor:pointer}
.cov-x:hover{color:var(--accent);border-color:var(--accent)}
/* Wraps rather than overflowing: on the top-up and auto-renew pages this control carries
   a translated leading label, so it has no width it can be guaranteed to fit in. */
.days-pick{display:flex;align-items:center;gap:.35rem;color:var(--text);font-size:.85rem;font-weight:800;flex-wrap:wrap;min-width:0}
.days-pick input{width:3.4rem;padding:.35rem .4rem;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);text-align:center}
.day-step{width:1.75rem;height:1.75rem;border:1px solid var(--line);border-radius:8px;background:var(--sunken-2);color:var(--text);font-weight:800;cursor:pointer}
.day-step:hover{border-color:var(--accent);color:var(--accent)}
.info-box p{margin:.4rem 0 0}
/* Drop the per-GB / per-day column when it stops fitting. Targeted by CLASS, never by
   nth-child: a row is a <form> that starts with 7 hidden inputs, so `div:nth-child(4)`
   matched the header but never a row — the two ended up with different cell counts. */
@media(max-width:980px){
  /* Minimums kept low on purpose. The last track is the translated button, and at 768px
     the old minimums (150+150+88+140) plus a Spanish button overflowed the container by
     17px — English fit, Spanish didn't. These leave headroom for a longer label still. */
  .hp-plans{grid-template-columns:minmax(100px,1.35fr) minmax(88px,.95fr) minmax(76px,.7fr) minmax(90px,1fr) auto}
  @supports not (grid-template-columns:subgrid){
    .plan-row{grid-template-columns:minmax(100px,1.35fr) minmax(88px,.95fr) minmax(76px,.7fr) minmax(90px,1fr) minmax(11rem,auto)}
  }
  .h-rate,.rate-cell{display:none}
}
/* Phones: a compact card, not a stack of labelled rows. The old layout repeated
   VALIDITY / TOTAL / OPERATORS on every card and ran 198px tall — under two plans per
   screen and 2.8 screens to see eight. Size and price lead; the rest is one muted line. */
@media(max-width:720px){
.plan-head{display:none}
.hp-plans{display:flex;flex-direction:column;gap:.5rem}
.plan-row{grid-column:auto;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"main price" "meta action" "ops ops";gap:.1rem .6rem;align-items:center}
.hp-plan{align-items:center;padding:.7rem .85rem}
.hp-plan>div{min-width:0}
.plan-main{grid-area:main}
.hp-plan .p{grid-area:price;justify-self:end;font-size:1.15rem}
.cell-validity{grid-area:meta;color:var(--muted);font-size:.9rem;font-weight:700}
.op-cell{grid-area:ops;font-size:.76rem;color:var(--muted);-webkit-line-clamp:1;margin-top:.15rem}
.add-btn{grid-area:action;justify-self:end;padding:.45rem .8rem}
/* Per-GB / per-day is derivable from the two numbers already on the card. */
.rate-cell{display:none}
/* The repeated uppercase labels are noise once the layout speaks for itself; the day
   stepper keeps its label because a bare -/+ control does not. */
.hp-plan>div::before{display:none}
.daily-buy .cell-validity::before{content:attr(data-label);display:block;color:var(--muted);
  font-size:.66rem;text-transform:uppercase;font-weight:800;margin-bottom:.15rem}
/* The throttle note repeats the plan-type tab that is already selected. */
.hp-plan .m{display:none}
.plan-coverage{grid-area:ops;grid-column:1/-1}
.daily-buy .days-pick{justify-content:flex-start}}

/* ---- server-rendered marketing sections (indexable; see docs/homepage-plan.md) ---- */
.marketing{padding-top:0}
.hero-guarantee{margin:.7rem 0 0;color:var(--accent);font-weight:700;font-size:.9rem}
.hero-guarantee::before{content:"✓ ";font-weight:900}
.trust-strip{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:.9rem;margin:2.5rem 0 0;padding:1.1rem;background:var(--sunken);border:1px solid var(--line);border-radius:14px}
.trust-strip li{min-width:0}
.trust-strip strong{display:block;font-size:.92rem}
.trust-strip span{color:var(--muted);font-size:.84rem;line-height:1.45}
.mkt{margin:3rem 0 0;scroll-margin-top:6rem}
.mkt h2{font-size:1.5rem;margin:0 0 1rem}
.mkt p{max-width:65ch}
.mkt-note{color:var(--muted);font-size:.9rem;max-width:65ch}
.steps-3{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.steps-3 li{counter-increment:s;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:1.1rem;color:var(--muted);font-size:.92rem;line-height:1.5}
.steps-3 li::before{content:counter(s);display:grid;place-items:center;width:1.8rem;height:1.8rem;
  border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:900;margin-bottom:.6rem}
.steps-3 strong{display:block;color:var(--text);margin-bottom:.25rem}
/* The explainer cards are not clickable here — they explain, they don't select. */
.type-card.static{cursor:default}
.type-card.static:hover{border-color:var(--line);transform:none}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.why-grid>div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem}
.why-grid strong{display:block;margin-bottom:.3rem}
.why-grid p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.5}
.check-tip{background:var(--accent-soft);border:1px solid var(--accent);border-radius:12px;
  padding:.8rem 1rem;font-weight:700}
.check-tip code{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:.1rem .4rem}
.faq details{border-bottom:1px solid var(--line);padding:.85rem 0}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-weight:900;flex:0 0 auto}
.faq details[open] summary::after{content:"−"}
.faq p{margin:.6rem 0 0;color:var(--muted);line-height:1.6}
/* The honest bit: whatever fair-use / speed terms the operator gives us, shown on the plan. */
.plan-fup{display:block;color:var(--muted);font-size:.72rem;line-height:1.35;margin-top:.15rem}
@media(max-width:720px){
  .mkt{margin:2.2rem 0 0}
  .mkt h2{font-size:1.25rem}
  .trust-strip{grid-template-columns:1fr;gap:.7rem;padding:.9rem}
}

/* ---- destination pages ---- */
.crumbs{display:flex;gap:.4rem;align-items:center;font-size:.85rem;color:var(--muted);margin:.2rem 0 .6rem}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.dest-facts{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1.1rem 0 0}
.dest-facts li{background:var(--sunken);border:1px solid var(--line);border-radius:12px;padding:.55rem .8rem;min-width:0}
.dest-facts li.wide{flex:1 1 100%}
.dest-facts span{display:block;color:var(--muted);font-size:.68rem;text-transform:uppercase;font-weight:800}
.dest-facts strong{font-size:.95rem}
.dest-plans{margin-top:.5rem}
.dest-editorial h2{font-size:1.35rem}
.dest-editorial p,.dest-editorial li{max-width:65ch;line-height:1.65}
.dest-regional{list-style:none;padding:0;margin:.8rem 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem}
.dest-regional li{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:.7rem .85rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:baseline}
.dest-regional strong{flex:1 1 auto}
.dest-grid{list-style:none;padding:0;margin:1rem 0 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}
.dest-grid a{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:.7rem .85rem;text-decoration:none;color:var(--text);font-weight:600}
.dest-grid a:hover{border-color:var(--accent);color:var(--accent)}
.dest-back{margin:2.5rem 0 0}
@media(max-width:720px){.dest-grid{grid-template-columns:1fr 1fr}}