@font-face{
    font-family:'Archivo';
    src:url('/assets/fonts/archivo.woff2') format('woff2');
    font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
  }
  :root{
    --bg:#F5F7FA; --surface:#FFFFFF; --ink:#0F1522; --ink-2:#5A6577;
    --accent:#4C5FE8; --accent-2:#6070FF; --accent-ink:#3D4ECC;
    --line:#DCE2EC; --line-soft:#EAEEF4;
    --ok:#2E9E63; --warn:#E0A93E; --bad:#E25A44;
    --navy:#0A0E1A; --navy-2:#0D1322; --navy-ink:#F2F4F8; --navy-dim:#8A94A8;
    --shadow:0 1px 2px rgba(10,14,26,.05), 0 14px 40px -18px rgba(10,14,26,.22);
    /* Ritmo vertical unico de la pagina. Todo hueco entre bloques sale de aqui,
       para que no vuelvan a divergir. No es un color: no lleva variante de tema. */
    --sec-gap:96px;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0D1220; --surface:#151B2C; --ink:#E9ECF2; --ink-2:#98A2B5;
      --accent:#6070FF; --accent-2:#7A88FF; --accent-ink:#8A96FF;
      --line:#2A3348; --line-soft:#1D2537;
      --ok:#4FBE85; --warn:#E0A93E; --bad:#E87862;
      --shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 40px -18px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0D1220; --surface:#151B2C; --ink:#E9ECF2; --ink-2:#98A2B5;
    --accent:#6070FF; --accent-2:#7A88FF; --accent-ink:#8A96FF;
    --line:#2A3348; --line-soft:#1D2537;
    --ok:#4FBE85; --warn:#E0A93E; --bad:#E87862;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 40px -18px rgba(0,0,0,.6);
  }
  :root[data-theme="light"]{
    --bg:#F5F7FA; --surface:#FFFFFF; --ink:#0F1522; --ink-2:#5A6577;
    --accent:#4C5FE8; --accent-2:#6070FF; --accent-ink:#3D4ECC;
    --line:#DCE2EC; --line-soft:#EAEEF4;
    --ok:#2E9E63; --warn:#E0A93E; --bad:#E25A44;
    --shadow:0 1px 2px rgba(10,14,26,.05), 0 14px 40px -18px rgba(10,14,26,.22);
  }
  *{ box-sizing:border-box }
  html{ scroll-behavior:smooth }
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Archivo',"Segoe UI",-apple-system,Arial,sans-serif;
    font-size:16.5px; line-height:1.66; -webkit-font-smoothing:antialiased;
  }
  .mono{ font-family:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace; }
  .wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }
  a{ color:inherit }
  a:focus-visible,.btn:focus-visible,.langsw a:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

  .L-en{ display:none }
  :root[data-lang="en"] .L-en{ display:block }
  :root[data-lang="en"] .L-es{ display:none }

  .langsw{ display:inline-flex; border:1px solid rgba(242,244,248,.22); border-radius:99px; overflow:hidden; }
  .langsw a{
    appearance:none; border:0; text-decoration:none; background:transparent; color:var(--navy-dim);
    font:600 11.5px/1 'Archivo',Arial,sans-serif; letter-spacing:.08em; padding:7px 12px; cursor:pointer;
  }
  .langsw a.active{ background:var(--accent-2); color:#fff; }

  /* ─────── NAV ─────── */
  .navbar{
    position:sticky; top:0; z-index:60; background:rgba(10,14,26,.86);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    color:var(--navy-ink); border-bottom:1px solid rgba(242,244,248,.08);
  }
  .navbar .in{
    max-width:1120px; margin:0 auto; padding:14px 28px;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
  }
  .logo{ font-weight:800; font-stretch:112%; letter-spacing:.16em; font-size:19px; text-decoration:none; }
  .logo b{ color:var(--accent-2); font-weight:800; }
  .navlinks{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
  .navlinks a{
    text-decoration:none; font-size:12.5px; font-weight:600; letter-spacing:.1em;
    text-transform:uppercase; color:var(--navy-dim);
  }
  .navlinks a:hover{ color:var(--navy-ink); }
  @media (max-width:900px){ .navlinks{ display:none } }
  .nav-right{ display:flex; align-items:center; gap:14px; }
  .btn{
    display:inline-block; padding:13px 24px; border-radius:8px; text-decoration:none;
    font-weight:700; font-size:14.5px; letter-spacing:.03em;
    background:linear-gradient(180deg,var(--accent-2),var(--accent));
    color:#fff; border:0;
    box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 10px 24px -10px rgba(76,95,232,.6);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{ transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 14px 30px -10px rgba(76,95,232,.7); }
  .btn.sm{ padding:10px 18px; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
  .btn.ghost{
    background:transparent; color:var(--navy-ink); box-shadow:none;
    border:1px solid rgba(242,244,248,.28);
  }
  .btn.ghost:hover{ border-color:rgba(242,244,248,.55); transform:translateY(-1px); }
  @media (prefers-reduced-motion: reduce){ .btn{ transition:none } .btn:hover{ transform:none } }

  /* Barra de navegación en móvil: que nada se corte ni se aplaste */
  @media (max-width:560px){
    .navbar .in{ padding:11px 16px; gap:10px; }
    .logo{ font-size:16px; letter-spacing:.11em; }
    .nav-right{ gap:8px; flex-shrink:0; }
    .langsw{ flex-shrink:0 }
    .langsw a{ padding:6px 9px; font-size:11px; letter-spacing:.05em; }
    .btn.sm{ padding:9px 12px; font-size:11px; letter-spacing:.03em; }
  }
  .btn.sm .lbl-sm{ display:none }
  @media (max-width:365px){
    .logo{ font-size:14.5px; letter-spacing:.06em; }
    .langsw a{ padding:6px 7px; }
    .btn.sm{ padding:8px 10px; font-size:10.5px; }
    .btn.sm .lbl-lg{ display:none }
    .btn.sm .lbl-sm{ display:inline }
  }

  /* ─────── HERO ─────── */
  .hero-zone{ background:radial-gradient(1200px 600px at 75% -10%, #16204A 0%, var(--navy) 55%); color:var(--navy-ink); position:relative; overflow:hidden; }
  canvas.plano{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.4; }
  .hero-zone .inner{ position:relative; z-index:1; }
  .hero{
    padding:92px 0 96px; display:grid; grid-template-columns:1.25fr .95fr;
    gap:60px; align-items:center;
  }
  @media (max-width:860px){ .hero{ grid-template-columns:1fr; padding:64px 0 72px; gap:44px; } }
  .eyebrow{
    font-size:12px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--accent-2); font-weight:700; margin:0 0 22px;
  }
  h1{
    margin:0 0 22px; font-size:clamp(38px,5.4vw,60px); line-height:1.06;
    font-weight:800; font-stretch:104%; letter-spacing:-.018em; text-wrap:balance;
  }
  h1 .hl{ color:var(--accent-2); }
  .lead{ margin:0 0 30px; max-width:30em; color:var(--navy-dim); font-size:18px; line-height:1.62; }
  .lead strong{ color:var(--navy-ink); font-weight:600; }
  .cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:30px; }
  /* el micro-copy explica el boton fantasma, asi que va pegado a los botones y
     no separado como un parrafo mas. Si algun dia no lleva micro-copy debajo,
     la fila recupera su margen sola. */
  .cta-row:has(+ .cta-alt){ margin-bottom:12px; }
  .cta-alt{
    margin:0 0 30px; font-size:13.5px; line-height:1.55;
    color:var(--navy-dim); max-width:34em;
  }
  .trust{ display:flex; align-items:center; gap:12px; color:var(--navy-dim); font-size:13.5px; }
  .trust svg{ flex:none }

  /* placa 2027 (vidrio navy) */
  .plate{
    border-radius:14px; padding:36px 32px 30px; position:relative; text-align:center;
    color:var(--navy-ink);
    background:linear-gradient(165deg, rgba(96,112,255,.16), rgba(13,19,34,.6) 55%);
    border:1px solid rgba(122,136,255,.28);
    box-shadow:0 30px 60px -24px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.06) inset;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .plate .cap{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--navy-dim); font-weight:600; }
  .plate .date{
    font-size:clamp(46px,6vw,58px); font-weight:800; font-stretch:106%;
    letter-spacing:.02em; line-height:1.05; margin:10px 0 4px;
  }
  .plate .count{ font-size:14px; letter-spacing:.05em; color:var(--navy-dim); font-variant-numeric:tabular-nums; }
  .plate .count strong{ color:var(--accent-2); font-size:19px; font-weight:800; }
  .plate hr{ border:0; border-top:1px solid rgba(242,244,248,.12); margin:18px 0 12px; }
  .plate .norm{ font-size:11.5px; color:var(--navy-dim); }

  /* héroe con foto + placa superpuesta */
  .visual{ position:relative; }
  .visual .photo{
    aspect-ratio:3/2; border-radius:16px;
    background-image:url('/assets/hero.jpg');
    background-size:cover; background-position:center;
    border:1px solid rgba(122,136,255,.22);
    box-shadow:0 34px 80px -30px rgba(0,0,0,.85);
  }
  .visual .plate{
    position:absolute; left:-26px; bottom:-36px; width:min(70%,300px);
    padding:20px 20px 16px; text-align:left;
  }
  .visual .plate .date{ font-size:clamp(28px,3vw,36px); }
  .visual .plate hr{ margin:12px 0 8px; }
  @media (max-width:860px){
    .visual .plate{ position:relative; left:0; bottom:0; width:auto; margin:-44px 16px 0; }
  }

  /* banda marco normativo (estilo logos) */
  .normband{ background:#070B14; color:var(--navy-dim); padding:22px 0 24px; }
  .normband .cap{
    text-align:center; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
    font-weight:600; margin:0 0 18px;
  }
  .normband ul{
    display:flex; flex-wrap:wrap; justify-content:center; gap:18px 44px;
    list-style:none; margin:0; padding:0;
  }
  .normband li{
    font-family:Consolas,monospace; font-size:14.5px; letter-spacing:.06em;
    color:#6E7A90; white-space:nowrap;
  }
  .normband li b{ color:#A8B2C6; font-weight:600; }

  /* ─────── secciones claras ─────── */
  /* Entre dos secciones claras se suman el cierre de una y la apertura de la
     siguiente, asi que media --sec-gap por lado deja el hueco exacto.
     Tras una banda oscura (.stats, .normband) solo cuenta la apertura de la
     seccion siguiente y el hueco salia a la mitad. Por eso la primera seccion
     de cada .wrap se lleva el hueco entero: es lo que iguala el aire de
     despues de una banda con el que hay entre dos secciones. */
  section{ padding:calc(var(--sec-gap) / 2) 0; }
  .wrap > section:first-child{ padding-top:var(--sec-gap); }
  /* y la ultima de cada .wrap va seguida de una banda oscura, asi que el aire
     de antes de la banda tiene que igualar al de despues */
  .wrap > section:last-child{ padding-bottom:var(--sec-gap); }
  @media (max-width:860px){ :root{ --sec-gap:72px; } }
  .kicker{
    font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
    color:var(--accent); margin:0 0 14px;
  }
  h2{
    margin:0; font-size:clamp(28px,3.8vw,40px); font-weight:800; font-stretch:104%;
    letter-spacing:-.015em; text-wrap:balance;
  }
  .sec-intro{ color:var(--ink-2); max-width:38em; margin:16px 0 0; font-size:17px; }
  .sec-intro strong{ color:var(--ink) }

  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
  .reveal.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none } }

  /* cómo ayudamos: split + iconos */
  .help{ display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:start; }
  @media (max-width:860px){ .help{ grid-template-columns:1fr; gap:36px; } }
  .features{ display:grid; grid-template-columns:1fr 1fr; gap:34px 30px; }
  @media (max-width:560px){ .features{ grid-template-columns:1fr; } }
  .feature .ic{
    width:44px; height:44px; border-radius:10px; display:grid; place-items:center;
    background:color-mix(in srgb, var(--accent) 12%, transparent);
    color:var(--accent); margin-bottom:14px;
  }
  .feature h3{ margin:0 0 6px; font-size:16.5px; font-weight:700; }
  .feature p{ margin:0; font-size:14px; color:var(--ink-2); line-height:1.6; }
  .morelink{
    display:inline-block; margin-top:34px; color:var(--accent); font-weight:700;
    font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  }
  .morelink:hover{ text-decoration:underline }

  /* banda de stats (honesta) */
  .stats{ background:var(--navy); color:var(--navy-ink); padding:calc(var(--sec-gap) / 2) 0; }
  .stats ul{
    display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
    list-style:none; margin:0; padding:0; text-align:left;
  }
  @media (max-width:860px){ .stats ul{ grid-template-columns:1fr 1fr; } }
  .stats li{ border-left:1px solid rgba(242,244,248,.14); padding-left:22px; }
  .stats .v{ font-size:clamp(30px,3.6vw,42px); font-weight:800; font-stretch:106%; line-height:1.1; color:var(--accent-2); font-variant-numeric:tabular-nums; }
  .stats .k{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin-top:6px; }
  .stats .s{ font-size:12.5px; color:var(--navy-dim); margin-top:3px; }

  /* el informe por dentro: mock documento */
  .split{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center; margin-top:8px; }
  @media (max-width:860px){ .split{ grid-template-columns:1fr; gap:40px; } }
  .checks{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px; }
  .checks li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-2); }
  .checks li svg{ flex:none; margin-top:3px; color:var(--ok); }
  .checks li strong{ color:var(--ink); font-weight:600; }

  .docmock{
    border-radius:14px; background:var(--surface); border:1px solid var(--line-soft);
    box-shadow:var(--shadow); overflow:hidden; font-size:13.5px;
  }
  .docmock .bar{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:14px 20px; border-bottom:1px solid var(--line-soft);
    background:color-mix(in srgb, var(--surface) 70%, var(--bg));
  }
  .docmock .bar .t{ font-weight:700; font-size:13px; letter-spacing:.04em; }
  .docmock .bar .badge{
    font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-2); border:1px solid var(--line); border-radius:99px; padding:4px 10px;
  }
  .docmock-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .docmock table{ width:100%; border-collapse:collapse; }
  .docmock td{ padding:12px 20px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
  .docmock td.ref{ font-family:Consolas,monospace; font-size:11.5px; color:var(--ink-2); width:118px; white-space:nowrap; }
  .docmock td.st{ width:112px; text-align:right; }
  /* En movil, la tabla no cabe con el padding de escritorio: se aprieta al
     maximo para que quepa entera sin recorte; docmock-scroll queda como red
     de seguridad para telefonos muy estrechos, en vez de ocultar contenido. */
  @media (max-width:560px){
    .docmock{ font-size:12.5px; }
    .docmock .bar{ padding:12px 14px; }
    .docmock td{ padding:10px 12px; }
    .docmock td.ref{ font-size:10.5px; width:auto; }
    .docmock td.st{ width:auto; padding-left:8px; }
    .chip{ font-size:9.5px; padding:3px 8px; white-space:nowrap; }
  }
  .chip{
    display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; border-radius:99px; padding:4px 10px; color:#fff;
  }
  .chip.g{ background:var(--ok) } .chip.a{ background:var(--warn); color:#131313 } .chip.r{ background:var(--bad) }
  .docmock .sum{
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    padding:14px 20px; color:var(--ink-2); font-size:12px;
  }
  .docmock .sum .note{ font-style:italic }
  .meter{ display:flex; height:8px; border-radius:99px; overflow:hidden; flex:1; max-width:220px; }
  .meter i{ display:block; height:100% }
  .meter .g{ background:var(--ok); width:38% } .meter .a{ background:var(--warn); width:34% } .meter .r{ background:var(--bad); width:28% }

  /* cards a quién */
  .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px; }
  @media (max-width:860px){ .grid-3{ grid-template-columns:1fr; } }
  .card{
    background:var(--surface); border:1px solid var(--line-soft);
    padding:28px 26px; border-radius:14px; box-shadow:var(--shadow);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .card:hover{ transform:translateY(-3px); }
  @media (prefers-reduced-motion: reduce){ .card{ transition:none } .card:hover{ transform:none } }
  .card .tag{
    font-size:11px; color:var(--accent); letter-spacing:.16em; text-transform:uppercase;
    font-weight:700; display:block; margin-bottom:12px;
  }
  .card h3{ margin:0 0 10px; font-size:18px; font-weight:700; }
  .card p{ margin:0; font-size:14px; color:var(--ink-2); line-height:1.62; }

  /* puerta baja: mapa de brechas descargable */
  .magnet{
    display:grid; grid-template-columns:1fr 400px; gap:44px;
    background:color-mix(in srgb, var(--accent) 6%, var(--surface));
    border:1px solid color-mix(in srgb, var(--accent) 24%, var(--line-soft));
    border-radius:16px; padding:38px 36px; align-items:start;
  }
  @media (max-width:960px){ .magnet{ grid-template-columns:1fr; gap:30px; padding:30px 24px; } }
  /* el titulo lleva los dos numeros de norma completos y en movil se va a seis
     lineas; un punto menos lo deja en cinco sin tocar la jerarquia */
  @media (max-width:600px){
    .magnet h2{ font-size:21px; }
    /* en 390px se acumulaban tres rellenos horizontales (wrap 28 + magnet 24 +
       mform 24) y al boton le quedaban 182px utiles, con lo que su texto
       partia en dos lineas. Aflojando el anidamiento pasa a 218px y entra. */
    .magnet{ padding:26px 18px; }
    .mform{ padding:22px 16px; }
  }
  /* "Recurso gratuito" compite con el h2 que lleva justo debajo y como texto
     suelto de 12px lo perdia. Sube a pastilla solida, que es la gramatica que
     .chip ya usa en el mockup del informe, asi que no estrena lenguaje. */
  .magnet .kicker{
    display:inline-block; margin:0 0 16px; padding:7px 15px;
    font-size:12.5px; letter-spacing:.16em; color:#fff;
    background:var(--accent); border-radius:99px;
  }
  .magnet h2{ font-size:clamp(23px,2.6vw,30px); margin:0 0 14px; letter-spacing:-.015em; }
  .magnet-lead{ margin:0; font-size:15.5px; color:var(--ink-2); line-height:1.68; max-width:40em; }
  .magnet-list{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; }
  .magnet-list li{
    font-size:14px; color:var(--ink-2); padding-left:22px; position:relative; line-height:1.58;
  }
  .magnet-list li::before{ content:"→"; position:absolute; left:0; color:var(--accent); font-weight:700; }
  .magnet-fine{
    margin:22px 0 0; font-size:12.5px; color:var(--ink-2); opacity:.85; line-height:1.55; max-width:44em;
  }
  /* el formulario reusa .cform; sobre el panel tintado necesita fondo propio */
  .mform{ background:var(--surface); padding:26px 24px; }
  .mform > label:first-of-type{ margin-top:0 }
  .mform .check{ margin:18px 0 0 }
  .mform button{ margin-top:22px }

  /* popup de salida. Arranca con [hidden], que hay que anular a mano porque
     display:grid gana a la ocultacion por defecto del atributo. */
  .pop-fondo{
    position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:16px;
    background:rgba(7,11,20,.66); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    animation:pop-entra .18s ease-out;
  }
  .pop-fondo[hidden]{ display:none }
  @keyframes pop-entra{ from{ opacity:0 } to{ opacity:1 } }
  @media (prefers-reduced-motion: reduce){ .pop-fondo{ animation:none } }
  .pop{
    position:relative; width:100%; max-width:560px;
    max-height:calc(100vh - 32px); overflow:auto;
    background:color-mix(in srgb, var(--accent) 6%, var(--surface));
    border:1px solid color-mix(in srgb, var(--accent) 24%, var(--line-soft));
    border-radius:16px; padding:30px 28px; box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  }
  .pop .kicker{
    display:inline-block; margin:0 0 14px; padding:6px 13px; font-size:11.5px;
    letter-spacing:.16em; color:#fff; background:var(--accent); border-radius:99px;
  }
  .pop h2{ font-size:clamp(21px,2.4vw,26px); margin:0 0 10px; letter-spacing:-.015em; }
  .pop-lead{ margin:0 0 18px; font-size:14.5px; color:var(--ink-2); line-height:1.6; }
  /* La cruz iba con el caracter × en la tipografia del sitio, que a ciertas
     densidades de pantalla se veia gruesa y con el borde sucio. Ahora es un SVG
     de trazo, como el resto de iconos, que es nitido a cualquier resolucion. */
  .pop-x{
    position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:99px;
    border:0; background:transparent; color:var(--ink-2);
    cursor:pointer; display:grid; place-items:center; padding:0;
    transition:background .15s ease, color .15s ease;
  }
  .pop-x:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent) }
  .pop-x svg{ display:block }
  .pop-x:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }
  /* el foco al abrir va a la tarjeta, no a la cruz: asi el anillo no aparece
     sobre el boton de cerrar y Enter no lo descarta sin querer */
  .pop:focus{ outline:none }
  @media (prefers-reduced-motion: reduce){ .pop-x{ transition:none } }
  /* El formulario reusa .cform, pero aqui el panel ya pone fondo y borde. Va
     con .pop delante a proposito: .cform se define mas abajo en esta hoja y,
     a igual especificidad, ganaria la ultima. */
  .pop .cform{ background:transparent; border:0; padding:0; }
  .pop .cform button{ margin-top:18px }
  @media (max-width:560px){
    .pop-fondo{ padding:14px }
    .pop{ padding:24px 20px }
  }

  /* Ventanas bajas (un portatil de 1366x768 deja unos 650px utiles). Sin esto la
     tarjeta pide 670 y aparece barra de scroll dentro del propio popup, que
     queda fatal. No se toca el tamano en pantallas normales. */
  @media (max-height:760px){
    .pop{ padding:22px 26px }
    .pop .kicker{ margin-bottom:10px; padding:5px 12px }
    .pop h2{ font-size:20px; margin-bottom:8px }
    .pop-lead{ margin-bottom:14px; font-size:14px }
    .pop .cform label{ margin-top:12px }
    .pop .cform input[type=text], .pop .cform input[type=email]{ padding:9px 12px }
    .pop .cform .check{ margin-top:14px }
    .pop .cform button{ margin-top:14px }
    .pop .cform .alt{ margin-top:10px }
  }
  /* Y un escalon mas para las ventanas de 1366x768, que dejan unos 650px utiles
     y son de las mas comunes. Por debajo de esto la barra interna es inevitable
     y es el comportamiento correcto: mejor desplazable que cortada. */
  @media (max-height:680px){
    .pop-fondo{ padding:10px }
    .pop{ padding:18px 24px; max-height:calc(100vh - 20px) }
    .pop h2{ font-size:19px }
    .pop .cform .check{ margin-top:12px }
    .pop .cform .alt{ margin-top:8px }
  }


  .magnet-link{ margin:26px 0 0; font-size:14.5px; }
  .magnet-link a{ color:var(--accent); font-weight:600; text-decoration:none; }
  .magnet-link a:hover{ text-decoration:underline }
  /* subrayar solo "gratis y al instante" destaca lo que quita fricción sin
     alargar el enlace ni meter otra pastilla en una zona ya cargada */
  .magnet-link strong{ font-weight:800; text-decoration:underline; text-underline-offset:3px; }

  /* índice + método */
  .index{
    margin:34px 0 0; border:1px solid var(--line-soft); background:var(--surface);
    border-radius:14px; box-shadow:var(--shadow); list-style:none; padding:0; counter-reset:idx; overflow:hidden;
  }
  .index li{ display:flex; gap:18px; align-items:baseline; padding:16px 24px; border-bottom:1px solid var(--line-soft); font-size:15.5px; }
  .index li:last-child{ border-bottom:0 }
  .index li::before{
    counter-increment:idx; content:counter(idx,decimal-leading-zero);
    font-family:Consolas,monospace; font-size:12px; color:var(--accent); min-width:2.1em; font-weight:600;
  }
  .index li em{ font-style:normal; color:var(--ink-2); font-size:13px; display:block; margin-top:3px; }

  .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:34px; }
  @media (max-width:860px){ .steps{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
  .step{
    background:var(--surface); border:1px solid var(--line-soft); border-radius:14px;
    padding:22px 20px; box-shadow:var(--shadow); position:relative;
  }
  .step .n{
    width:30px; height:30px; border-radius:99px; display:grid; place-items:center;
    background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent);
    font-weight:800; font-size:13px; margin-bottom:12px;
  }
  .step h3{ margin:0 0 6px; font-size:16.5px; font-weight:700; }
  .step p{ margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.6; }

  /* precio */
  .price-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:26px; margin-top:34px; align-items:stretch; }
  @media (max-width:860px){ .price-wrap{ grid-template-columns:1fr; } }
  .price-plate{
    border-radius:14px; background:var(--surface); border:1px solid var(--line-soft);
    border-left:4px solid var(--accent); padding:32px 30px; box-shadow:var(--shadow);
  }
  .price-plate .cap{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); font-weight:700; }
  .price-plate .amount{ font-size:clamp(46px,5.6vw,60px); font-weight:800; font-stretch:104%; margin:10px 0 0; line-height:1; letter-spacing:-.02em; }
  .price-plate .amount small{ font-size:16px; font-weight:400; color:var(--ink-2); letter-spacing:0; }
  .price-plate .amount-txt{
    font-size:clamp(24px,2.7vw,30px); font-weight:800; font-stretch:104%;
    margin:12px 0 0; line-height:1.18; letter-spacing:-.015em; text-wrap:balance;
  }
  .price-plate .was{ font-size:13.5px; color:var(--ink-2); margin:10px 0 20px; }
  .price-plate table{ width:100%; border-collapse:collapse; font-size:14px; }
  .price-plate td{ padding:10px 0; border-top:1px solid var(--line-soft); vertical-align:top; }
  .price-plate td:first-child{ color:var(--ink-2); width:36%; padding-right:12px; }
  .guarantee{
    border-radius:14px; background:var(--surface); border:1px solid var(--line-soft);
    border-left:4px solid var(--accent); padding:30px 28px; box-shadow:var(--shadow);
    display:flex; flex-direction:column; gap:14px;
  }
  .guarantee h3{ margin:0; font-size:18.5px; font-weight:700; }
  .guarantee p{ margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.65; }
  .guarantee p strong{ color:var(--ink) }

  .not-box{ margin-top:30px; border:1px dashed var(--line); border-radius:14px; padding:26px 28px; }
  .not-box h3{
    margin:0 0 12px; font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink-2); font-weight:700;
  }
  .not-box p{ margin:0 0 10px; font-size:14.5px; color:var(--ink-2); max-width:56em; line-height:1.66; }
  .not-box p:last-child{ margin:0 }

  .strip{
    background:var(--surface); border:1px solid var(--line-soft); border-radius:14px;
    padding:24px 28px; display:flex; justify-content:space-between; gap:20px; align-items:center;
    flex-wrap:wrap; box-shadow:var(--shadow);
  }
  .strip p{ margin:0; font-size:14.5px; color:var(--ink-2); max-width:44em; line-height:1.6; }
  .strip .strip-txt{ flex:1 1 340px; }
  .strip .fine{ margin-top:8px; font-size:12.5px; line-height:1.55; opacity:.82; }
  .strip strong{ color:var(--ink) }
  .strip a{ color:var(--accent); font-weight:700; text-decoration:none; font-size:14px; white-space:nowrap; }
  .strip a:hover{ text-decoration:underline }

  /* CTA final navy */
  .final-zone{ background:radial-gradient(900px 420px at 50% -20%, #16204A 0%, var(--navy) 60%); color:var(--navy-ink); }
  .final{ text-align:center; padding:var(--sec-gap) 0; }
  .final .kicker{ color:var(--accent-2); }
  .final h2{ color:var(--navy-ink); font-size:clamp(30px,4.4vw,44px); }
  .final p{ color:var(--navy-dim); max-width:37em; margin:18px auto 32px; }
  .final .assure{ font-size:13px; margin:22px auto 0; max-width:34em; opacity:.9; }

  footer{
    background:#070B14; color:var(--navy-dim); padding:30px 0 44px; font-size:12.5px;
  }
  footer .in{
    max-width:1120px; margin:0 auto; padding:0 28px;
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center;
  }
  footer .logo{ font-size:15px; color:var(--navy-ink); }
  footer .mono{ font-size:11px }

  /* Banda de fecha normativa */
  .dateline{ background:var(--navy-2); border-bottom:1px solid rgba(255,255,255,.07); }
  .dateline .in{
    max-width:1120px; margin:0 auto; padding:9px 28px;
    font-size:12.5px; line-height:1.5; color:var(--navy-dim); text-align:center;
  }

  /* Quiénes somos */
  /* Contacto */
  /* #contact es <section>, asi que ya recibia medio hueco por la regla general,
     y ademas su .in llevaba relleno propio: los dos se sumaban y daban 144px
     de aire tras la banda oscura, frente a los 96 del resto de la pagina.
     El relleno vertical lo lleva solo .in, que es quien centra el contenido. */
  .contact-zone{ background:var(--surface); border-top:1px solid var(--line-soft); padding:0; }
  .contact-zone > .in{ max-width:1120px; margin:0 auto; padding:var(--sec-gap) 28px var(--sec-gap); }
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:start; }
  .contact-lead{ font-size:15.5px; color:var(--ink-2); line-height:1.7; margin:14px 0 22px; max-width:34em; }
  .contact-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
  .contact-list li{ font-size:14px; color:var(--ink-2); padding-left:22px; position:relative; line-height:1.55; }
  .contact-list li::before{ content:"→"; position:absolute; left:0; color:var(--accent); font-weight:700; }

  .cform{
    background:var(--bg); border:1px solid var(--line); border-radius:16px;
    padding:28px 26px; display:flex; flex-direction:column;
  }
  .cform label{ font-size:13px; font-weight:600; color:var(--ink); margin:16px 0 6px; }
  .cform > label:first-of-type{ margin-top:0 }
  .cform label .rq{ color:var(--accent) }
  .cform label small{ font-weight:400; color:var(--ink-2) }
  .cform input[type=text], .cform input[type=email], .cform input[type=tel], .cform select{
    font:inherit; font-size:14.5px; color:var(--ink); background:var(--surface);
    border:1px solid var(--line); border-radius:9px; padding:11px 12px; width:100%;
  }
  .cform input:focus-visible, .cform select:focus-visible{
    outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);
  }
  .cform .check{
    display:flex; gap:10px; align-items:flex-start; margin:22px 0 2px;
    font-weight:400; font-size:12.5px; color:var(--ink-2); line-height:1.55;
  }
  .cform .check input{ margin-top:2px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--accent); }
  .cform .check a{ color:var(--accent) }
  .cform button{ margin-top:20px; width:100%; font-family:inherit; cursor:pointer; }
  .cform .alt{ margin:14px 0 0; font-size:12.5px; color:var(--ink-2); text-align:center; }
  .cform .alt a{ color:var(--ink-2); text-decoration:underline; }
  .hp{ position:absolute; left:-9999px; }

  @media(max-width:900px){
    .contact-grid{ grid-template-columns:1fr; gap:36px; }
    /* aqui vivia un padding-top:22px que dejaba el contacto pegado a la banda
       en movil. Lo lleva --sec-gap como el resto de la pagina. */
    .cform{ padding-top:14px; padding-bottom:14px; }
  }