/* Shared styles for the plan pages + coberturas.html. Copied to deploy/planes.css by
   scripts/deploy.sh and linked as /planes.css.

   Deliberately mirrors _legal.css: same dark ground, same tokens, same nav/footer, so a
   visitor moving from the home page to a plan page to the legal pages never changes worlds.
   Tokens are taken from mockup-v7-carousel.html (:root), not from DESIGN.md - the stylesheet
   in the page is what actually ships. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --blue:#1040a0;--blue-mid:#1a55c8;--blue-900:#060e1f;
  --gold:#c8a96a;--gold-l:#e8cc96;
  --cta:#25D366;--cta-dk:#1aad54;
  --white:#f5f2ed;
  --font-h:'Playfair Display',Georgia,serif;
  --font-b:'Inter',system-ui,sans-serif;
}
body{font-family:var(--font-b);background:var(--blue-900);color:var(--white);
  -webkit-font-smoothing:antialiased;line-height:1.65}

/* ── nav / footer: identical to the legal pages ── */
.pl-nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:1.1rem clamp(1.1rem,5vw,4rem);
  background:rgba(6,14,31,0.82);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,0.09)}
.pl-logo{font-family:var(--font-h);font-weight:700;font-size:1.1rem;color:#fff;
  text-decoration:none}
.pl-logo em{color:var(--gold);font-style:italic}
.pl-back{font-size:0.85rem;color:rgba(255,255,255,0.6);text-decoration:none;
  border:1px solid rgba(255,255,255,0.18);border-radius:8px;padding:0.45rem 0.9rem;
  transition:color 180ms,border-color 180ms}
.pl-back:hover{color:#fff;border-color:rgba(255,255,255,0.4)}

main{max-width:900px;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) clamp(1.1rem,5vw,2rem) 5rem}

/* ── plan hero ── */
.pl-hero-img{width:100%;aspect-ratio:16/7;object-fit:cover;display:block;
  border-radius:16px;background:rgba(255,255,255,0.06);margin-bottom:1.8rem}
h1{font-family:var(--font-h);font-weight:800;font-size:clamp(1.9rem,5vw,2.8rem);
  line-height:1.15;color:#fff;margin-bottom:0.5rem}
.pl-tagline{font-size:clamp(0.98rem,2.4vw,1.12rem);font-style:italic;color:var(--gold-l);
  margin-bottom:0.9rem}
.pl-desc{font-size:1rem;color:rgba(255,255,255,0.74);max-width:64ch}
.pl-meta{font-size:0.82rem;color:rgba(255,255,255,0.4);margin-top:0.9rem}

/* ── the Cotiza block. Deliberately loud: this is the only revenue action on the page. ── */
.pl-quote{background:rgba(37,211,102,0.08);border:1px solid rgba(37,211,102,0.28);
  border-radius:16px;padding:1.4rem 1.5rem;margin:2.2rem 0 2.6rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;justify-content:space-between}
.pl-quote p{font-size:0.92rem;color:rgba(255,255,255,0.78);margin:0;max-width:46ch}
.pl-cotiza{display:inline-flex;align-items:center;gap:0.45rem;white-space:nowrap;
  font-size:0.92rem;font-weight:700;color:#062012;background:var(--cta);
  padding:0.8rem 1.5rem;border-radius:999px;text-decoration:none;transition:background 200ms}
.pl-cotiza:hover{background:var(--cta-dk);color:#fff}
.pl-cotiza:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}

/* ── benefit cards ── */
h2{font-family:var(--font-h);font-weight:700;font-size:clamp(1.2rem,3vw,1.55rem);
  color:#fff;margin:2.8rem 0 0.5rem}
.pl-h2-sub{font-size:0.88rem;color:rgba(255,255,255,0.45);margin-bottom:1.4rem}
.pl-benefits{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;
  list-style:none;padding:0}
.pl-benefit{background:rgba(255,255,255,0.055);border:1px solid rgba(255,255,255,0.12);
  border-radius:13px;padding:1rem 1.15rem}
.pl-benefit dt{font-size:0.82rem;color:rgba(255,255,255,0.58);line-height:1.4;
  margin-bottom:0.4rem}
.pl-benefit dd{font-family:var(--font-h);font-size:1.05rem;font-weight:700;color:#fff;
  margin:0;line-height:1.25}
.pl-benefit dd.pl-inc{font-family:var(--font-b);font-size:0.92rem;color:var(--gold-l)}
.pl-benefit dd.pl-no{font-family:var(--font-b);font-size:0.92rem;color:rgba(255,255,255,0.38)}

.pl-note{background:rgba(255,255,255,0.05);border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0;padding:1rem 1.2rem;margin:1.6rem 0}
.pl-note p{font-size:0.88rem;color:rgba(255,255,255,0.7);margin:0}
.pl-note p + p{margin-top:0.6rem}
a{color:var(--gold-l);text-decoration:underline;text-underline-offset:2px}
a:hover{color:#fff}
strong{color:#fff;font-weight:600}

.pl-links{display:flex;flex-wrap:wrap;gap:0.7rem;margin-top:2.4rem}
.pl-btn{display:inline-block;font-size:0.86rem;font-weight:600;padding:0.65rem 1.2rem;
  border-radius:10px;border:1px solid rgba(255,255,255,0.24);background:rgba(255,255,255,0.08);
  color:#fff;text-decoration:none;transition:background 180ms}
.pl-btn:hover{background:rgba(255,255,255,0.17);color:#fff}

/* ── coberturas.html: the full matrices ──
   Every table scrolls INSIDE its own container. Viajes Cortos is 21 tiers wide, so without
   this the page body itself would scroll sideways on every screen size. */
.pl-index{display:flex;flex-wrap:wrap;gap:0.6rem;margin:1.6rem 0 2.6rem}
.pl-index a{font-size:0.84rem;padding:0.5rem 1rem;border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.78);text-decoration:none}
.pl-index a:hover{border-color:var(--gold);color:#fff}
.pl-plan{scroll-margin-top:5rem;margin-bottom:3.4rem}
.pl-tablewrap{overflow-x:auto;margin:0.6rem 0 0.8rem;
  border:1px solid rgba(255,255,255,0.12);border-radius:12px;
  -webkit-overflow-scrolling:touch}
table{border-collapse:collapse;font-size:0.82rem;table-layout:fixed}
/* Every level column is the SAME width on every plan. Without this each table sizes its
   own columns to its own content, so the five tables visibly disagree about column width
   and the page reads as five unrelated tables instead of one document. Headers wrap
   (tier names run long: "PLAN LOCAL MEXICO USD 5.000"); values do not, so a figure is
   never split across two lines. */
th,td{text-align:left;padding:0.62rem 0.85rem;border-bottom:1px solid rgba(255,255,255,0.09);
  vertical-align:top;color:rgba(255,255,255,0.74);white-space:nowrap;
  width:186px;min-width:186px;max-width:186px}
th{background:rgba(255,255,255,0.07);color:#fff;font-weight:600;position:sticky;top:0;
  white-space:normal;line-height:1.3}
/* First column pinned so the benefit name stays readable while scrolling 21 levels. */
td:first-child,th:first-child{position:sticky;left:0;background:#0b1426;z-index:1;
  white-space:normal;width:230px;min-width:230px;max-width:230px;color:#fff}
thead th:first-child{z-index:2}
tbody tr:last-child td{border-bottom:none}

/* ── "Ver más planes" affordance ──
   The tables scroll sideways and nothing said so loudly enough: on Viajes Cortos there are
   21 levels and only the first two fit, so visitors read the page believing that IS the plan.
   Shown by _planes.js only when the table really overflows, and faded once it is scrolled
   to the end, so it never lies about there being more. */
.pl-tabletop{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  margin-top:1rem;flex-wrap:wrap}
.pl-scrollhint{font-size:0.78rem;color:rgba(255,255,255,0.38);margin:0}
.pl-morehint{display:none;align-items:center;gap:0.5rem;white-space:nowrap}
.pl-morehint.on{display:inline-flex}
.pl-morehint-label{font-size:0.78rem;font-weight:600;color:var(--gold-l)}
.pl-arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(200,169,106,0.45);background:rgba(200,169,106,0.10);
  color:var(--gold-l);font-size:1.05rem;line-height:1;cursor:pointer;padding:0;
  font-family:var(--font-b);transition:background 180ms,border-color 180ms,opacity 180ms}
.pl-arrow:hover:not(:disabled){background:rgba(200,169,106,0.25);border-color:var(--gold)}
.pl-arrow:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
/* Disabled rather than hidden: a control that vanishes at the ends makes the row jump and
   hides the fact that going back is possible at all. */
.pl-arrow:disabled{opacity:0.28;cursor:default}
/* Nudge only while there is genuinely somewhere further to go. */
.pl-arrow[data-dir="1"]:not(:disabled){animation:pl-nudge 1.6s ease-in-out infinite}
@keyframes pl-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){.pl-arrow{animation:none!important}}

footer{padding:2rem clamp(1.1rem,5vw,4rem);border-top:1px solid rgba(255,255,255,0.09);
  display:flex;flex-wrap:wrap;gap:0.6rem 1.5rem;align-items:center;justify-content:space-between}
footer span{font-size:0.78rem;color:rgba(255,255,255,0.3)}
footer nav{display:flex;flex-wrap:wrap;gap:1.2rem}
footer nav a{font-size:0.82rem;color:rgba(255,255,255,0.42);text-decoration:none}
footer nav a:hover{color:#fff}

@media(max-width:560px){
  .pl-quote{flex-direction:column;align-items:flex-start}
  .pl-cotiza{width:100%;justify-content:center}
  .pl-benefits{grid-template-columns:1fr}
}