/* Estilos de la página pública. Van en un archivo aparte, no dentro del HTML,
   porque el CSP de vercel.json usa style-src-elem 'self': un <style> escrito
   dentro de la página queda bloqueado y sale sin una sola regla aplicada. */
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  :root{
    /* ── Paleta FIJA de la Vitrina, extraída de src/components/UpgradeModal.jsx:67-69 ── */
    --gold:#F5C64D; --ink:#F4F7FF; --mut:rgba(232,238,252,.75);
    --surf:rgba(255,255,255,.055); --line:rgba(255,255,255,.14);
    --goldBtn:linear-gradient(135deg,#E0982A,#F5C64D);
    --onGold:#1B2238;
    /* ── Degradado base del starfield, src/lib/utils.js:233 ── */
    --sky:linear-gradient(172deg,#42419A 0%,#33327A 46%,#2A295F 100%);
    /* ── Tema claro de la app, src/lib/theme.js C_LIGHT ── */
    --navy:#1B2238; --navyLight:#2C3E63; --navyMuted:#6A6E82;
    --sage:#2E3A8C; --sagePale:#EBE9F6; --beige:#F5F6F9; --beigeDeep:#E8E1D2;
    --accent:#C6871E; --accentPale:#F6ECD5; --white:#FFFFFF;
  }
  body{font-family:Inter,system-ui,sans-serif;background:#2A295F;color:var(--ink);-webkit-font-smoothing:antialiased}
  .brand{font-family:Fraunces,Georgia,serif}
  img{max-width:100%;display:block}
  a{color:inherit}

  /* ══════════ CIELO VITRINA — calcado de starfieldBg() ══════════ */
  .sky{background:var(--sky);position:relative;overflow:hidden}
  .stars{position:absolute;inset:0;pointer-events:none}

  /* ══════════ Piezas compartidas ══════════ */
  .wm{height:26px;width:auto;opacity:.96}

  /* ─────────── Barra fija: el logo acompaña todo el scroll ───────────
     La marca no la conoce nadie, así que el wordmark tiene que estar presente
     los tres minutos que dura la página, no solo en el primer pantallazo. */
  .topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;
    justify-content:space-between;gap:20px;padding:13px 32px;
    background:rgba(38,37,86,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.10)}
  .topbar .wm{height:30px;opacity:1}
  .topbar .goldbtn{padding:10px 20px;font-size:13.5px;border-radius:14px;
    box-shadow:0 6px 18px rgba(224,152,42,.26)}
  .topbar .goldbtn:hover{transform:none;box-shadow:0 8px 22px rgba(224,152,42,.4)}
  .goldbtn{display:inline-block;background:var(--goldBtn);color:var(--onGold);border:none;
    border-radius:18px;padding:15px 30px;font-size:15px;font-weight:800;letter-spacing:.2px;
    font-family:Inter,sans-serif;cursor:pointer;text-decoration:none;
    box-shadow:0 10px 30px rgba(224,152,42,.32);transition:.25s}
  .goldbtn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(224,152,42,.42)}
  .ghostbtn{display:inline-block;background:var(--surf);border:1px solid var(--line);color:var(--ink);
    border-radius:18px;padding:15px 28px;font-size:15px;font-weight:600;text-decoration:none;transition:.25s}
  .ghostbtn:hover{border-color:var(--gold);color:var(--gold)}
  /* Subió de 11.5 a 12.5 y de 700 a 800: a 11.5 con .22em de tracking la línea se
     deshacía en pelusa y no se leía ni sobre el cielo oscuro. */
  .eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
  /* Antes iba en --mut con opacidad .85 y se perdía contra el cielo. Ahora usa
     el tinta plena de la Vitrina: sobre #2A295F da 12.6:1 de contraste. */
  .trust{font-size:13px;font-weight:500;color:rgba(244,247,255,.94);letter-spacing:.01em}

  /* ─────────── 1 · La noche (hero) ─────────── */
  .hero{padding:72px 32px 96px;position:relative;z-index:2;display:grid;
    grid-template-columns:1.08fr .92fr;gap:40px;align-items:center;max-width:1080px;margin:0 auto}
  .hero h1{font-size:clamp(34px,4.8vw,54px);font-weight:300;line-height:1.08;letter-spacing:-.03em;margin:16px 0 18px}
  .hero h1 em{font-style:italic;font-weight:400;color:var(--gold)}
  .hero .sub{color:var(--mut);font-size:16px;line-height:1.66;margin-bottom:30px;max-width:430px}
  .hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}

  .phone{position:relative;justify-self:center}
  .phone .shell{width:252px;border-radius:36px;border:1px solid rgba(255,255,255,.2);
    background:var(--sky);padding:14px 13px 18px;box-shadow:0 34px 80px rgba(0,0,0,.6);position:relative;overflow:hidden}
  .phone .notch{width:82px;height:5px;border-radius:99px;background:rgba(255,255,255,.22);margin:0 auto 14px}
  .phone .kanga{width:74px;margin:6px auto 10px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.42));position:relative;z-index:2}
  .phone .t{text-align:center;font-size:15px;font-weight:700;color:var(--ink);position:relative;z-index:2}
  .phone .s{text-align:center;font-size:10.5px;color:var(--mut);margin:4px 0 13px;position:relative;z-index:2}
  .phone .row{display:flex;align-items:center;gap:8px;background:var(--surf);border:1px solid var(--line);
    border-radius:12px;padding:9px 11px;margin-bottom:7px;position:relative;z-index:2}
  .phone .row .dot{width:22px;height:22px;border-radius:7px;background:rgba(245,198,77,.16);
    display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
  .phone .row b{font-size:10.5px;font-weight:600;color:var(--ink);display:block}
  .phone .row span{font-size:9px;color:var(--mut)}

  /* ─────────── 2 · El amanecer ─────────── */
  /* Las paradas van en píxeles, no en porcentaje: así el amanecer termina siempre
     antes de que empiece el texto, sin depender de cuánto mida el bloque. Con
     porcentajes la línea dorada caía justo sobre el malva #9A8FA8 y desaparecía. */
  .dawn{background:linear-gradient(180deg,#2A295F 0px,#4A4A82 40px,#9A8FA8 95px,#E8DCC8 145px,var(--beige) 195px,var(--beige) 100%);
    padding:216px 32px 40px;text-align:center}
  /* Oro profundo. El --accent (#C6871E) sobre el beige da 2.75:1 de contraste —
     por eso no se veía. Éstos dan 5.1:1 en la línea chica y 3.8:1 en el titular. */
  .dawn .eyebrow{color:#8F5E12}
  .dawn h2{font-size:clamp(27px,3.8vw,38px);font-weight:300;color:var(--navy);letter-spacing:-.02em;
    margin:14px auto 16px;max-width:660px;line-height:1.2}
  .dawn h2 em{font-style:italic;color:#A8701A}
  .dawn p{color:var(--navyMuted);font-size:15.5px;line-height:1.68;max-width:530px;margin:0 auto}

  /* ─────────── 3 · El día (producto) ─────────── */
  .light{background:var(--beige);padding:16px 32px 90px}
  .grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
  .card{background:var(--white);border:1px solid var(--beigeDeep);border-radius:24px;padding:28px 24px;
    box-shadow:0 3px 16px rgba(140,120,90,.09);transition:.3s}
  .card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(140,120,90,.16)}
  /* Ilustración 3D, una por tarjeta. Son los mismos seis objetos que los glifos de
     línea de la app (src/icons.jsx, PAPERCUT), traducidos a volumen. Ya vienen
     recortados y compensados de tamaño óptico en el png: aquí no se reescalan. */
  .card .ic{width:48px;height:48px;border-radius:15px;background:var(--sagePale);
    display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  .card .ic img{width:32px;height:32px;display:block}
  .card h3{font-size:15.5px;font-weight:600;color:var(--navy);margin-bottom:7px}
  .card p{font-size:13px;color:var(--navyMuted);line-height:1.6}

  /* ─────────── 4 · Cierre: vuelve la noche, con los precios ─────────── */
  .close{background:var(--sky);position:relative;overflow:hidden;padding:82px 32px 74px;text-align:center}
  .close-in{position:relative;z-index:2}
  .close .kanga{width:96px;margin:0 auto 14px;filter:drop-shadow(0 16px 32px rgba(0,0,0,.5))}
  /* El wordmark en grande, pegado al canguro: es el único punto de la página donde
     la marca y la decisión de compra caben en el mismo golpe de vista. */
  .close .bigwm{display:block;height:54px;width:auto;margin:0 auto 22px;
    filter:drop-shadow(0 8px 22px rgba(0,0,0,.45))}
  .close h2{font-size:clamp(26px,3.6vw,36px);font-weight:300;letter-spacing:-.02em;margin:14px 0 14px}
  .close h2 em{font-style:italic;color:var(--gold)}
  .close .lead{color:var(--mut);font-size:15px;max-width:440px;margin:0 auto 36px;line-height:1.62}
  .plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:410px;margin:0 auto 26px}
  .plan{border-radius:18px;padding:20px 14px;text-align:center;border:2px solid var(--line);background:var(--surf)}
  .plan.sel{border-color:var(--gold);background:var(--goldBtn);color:var(--onGold)}
  .plan .lbl{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--mut);margin-bottom:5px}
  .plan.sel .lbl{color:rgba(27,34,56,.7)}
  .plan .amt{font-size:30px;font-weight:800;line-height:1;color:var(--ink)}
  .plan.sel .amt{color:var(--onGold)}
  .plan .per{font-size:11px;margin-top:5px;color:var(--mut)}
  .plan.sel .per{color:rgba(27,34,56,.72)}
  .plan .per s{opacity:.6;margin-right:4px}
  .plan .save{display:inline-block;background:var(--onGold);color:var(--gold);font-size:8.5px;
    font-weight:800;letter-spacing:.4px;padding:3px 7px;border-radius:6px;margin-top:8px}
  .close .free{font-size:13px;color:var(--mut);margin-top:22px;line-height:1.6}

  /* ─────────── Pie ─────────── */
  .foot{background:#231F4A;padding:38px 32px;text-align:center;border-top:1px solid var(--line)}
  .foot .wm{margin:0 auto 16px;height:26px;opacity:.92}
  .foot nav{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
  /* Redes: línea pura, mismo peso y mismo color que el resto — sin cajita de marca. */
  .social{display:flex;gap:11px;justify-content:center;margin:0 0 22px}
  .social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surf);
    display:flex;align-items:center;justify-content:center;transition:.25s}
  .social a:hover{border-color:var(--gold);background:rgba(245,198,77,.12);transform:translateY(-2px)}
  .social svg{width:17px;height:17px;fill:none;stroke:var(--mut);stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;transition:.25s}
  .social a:hover svg{stroke:var(--gold)}
  .foot a{font-size:12.5px;color:var(--mut);text-decoration:none;transition:.2s}
  .foot a:hover{color:var(--gold)}
  .foot small{font-size:11.5px;color:var(--mut);opacity:.6}

  /* ══ Notas — NO son parte de la página, solo para Antonio ══ */
  .notes{max-width:860px;margin:0 auto;padding:70px 24px 20px}
  .notes h2{font-size:24px;font-weight:600;margin-bottom:8px;letter-spacing:-.02em}
  .notes .intro{color:var(--mut);font-size:14.5px;line-height:1.7;margin-bottom:26px}
  .notes table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:24px}
  .notes th,.notes td{text-align:left;padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.11);vertical-align:top;line-height:1.55}
  .notes th{color:var(--gold);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
  .notes td{color:var(--mut)}
  .notes td b{color:var(--ink);font-weight:600}
  .warn{background:rgba(240,133,122,.09);border:1px solid rgba(240,133,122,.32);border-radius:14px;
    padding:20px 22px;margin-bottom:18px}
  .warn b{color:#F0857A;display:block;margin-bottom:7px;font-size:14px}
  .warn p{color:var(--mut);font-size:14px;line-height:1.65}
  .src{background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:18px}
  .src b{color:var(--gold);display:block;margin-bottom:9px;font-size:13px}
  .src p{color:var(--mut);font-size:13.5px;line-height:1.72}
  .src code{color:var(--ink);font-size:12.5px;font-family:ui-monospace,monospace}
  .end{text-align:center;padding:34px 24px 60px;color:var(--mut);font-size:12.5px;opacity:.7}
  .divider{max-width:860px;margin:70px auto 0;padding:0 24px}
  .divider hr{border:none;border-top:1px dashed rgba(255,255,255,.22)}
  .divider span{display:block;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--mut);margin-top:-9px}
  .divider span i{background:#2A295F;padding:0 14px;font-style:normal}

  @media(max-width:820px){
    .hero{grid-template-columns:1fr;text-align:center}
    .hero .sub{margin-left:auto;margin-right:auto}
    .hero .cta{justify-content:center}
    .plans{grid-template-columns:1fr}
  }
  @media(max-width:560px){
    .hero,.dawn,.light,.close,.notes{padding-left:18px;padding-right:18px}
    .topbar{padding:11px 18px}
    .topbar .wm{height:26px}
    .topbar .goldbtn{padding:9px 15px;font-size:12.5px}
    .close .bigwm{height:42px}
  }