/* Enlace Sistemas — solo tokens. La composición vive en base.css.
   Noche/verde, siempre encendido. Sin webfonts. */
:root{
  --noche:#0b1411; --noche-2:#101d18; --noche-halo:#16342a;
  --menta:#55c0a8; --menta-suave:#9db4ac; --menta-pale:#e6f4ef;
  --verde:#0d6b5c; --verde-hover:#0a5749; --cobre:#b06a3b;
  --papel:#f2f4f3; --blanco:#fff; --tinta:#1c2422; --gris:#5d6b66; --gris-claro:#82918a; --linea:#dde3e0;
  --whatsapp:#25d366;

  --display:"Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;
  --body:"Avenir Next",Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",Menlo,Consolas,monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r:10px; --r-lg:14px; --w-nav:290px; --w-txt:68ch;
  --sh:0 18px 44px -30px rgba(13,107,92,.28); --sh-lg:0 24px 60px -28px rgba(11,20,17,.55);

  /* Alias del motor: base.css compone con este vocabulario. */
  --navy:var(--noche); --navy-2:var(--noche-2); --navy-3:var(--noche);
  --blue:var(--verde); --gold:var(--cobre); --gold-light:var(--menta); --gold-pale:var(--menta-pale);
  --cream:var(--papel); --paper:var(--blanco); --ink:var(--tinta); --gray:var(--gris); --line:var(--linea);
  --tinta-suave:#3d4a46; --fila-par:#f7f9f8;
  --ok:#1d9e75; --alerta:#a45b18;
  --tinte-alerta:#fbf5ef; --tinte-ok:#f1f8f5;

  /* Textura y profundidad */
  --halo-oscuro:rgba(22,52,42,.85);
  --rejilla-clara:rgba(28,36,34,.035);
  --rejilla-oscura:rgba(255,255,255,.045);

  /* Texto sobre fondo noche */
  --on-navy:#e8efec;
  --on-navy-suave:#9db4ac;
  --on-navy-tenue:#7e918a;
  --linea-oscura:rgba(255,255,255,.12);
  --riel:rgba(255,255,255,.14);
  --campo:rgba(255,255,255,.06);

  /* Veredictos de las piezas interactivas */
  --v-ok-fondo:rgba(29,158,117,.20);  --v-ok-linea:rgba(85,192,168,.42);  --v-ok-texto:#bfeadf;
  --v-mal-fondo:rgba(164,91,24,.20);  --v-mal-linea:rgba(201,136,26,.42); --v-mal-texto:#f2d9b8;
  --v-duda-fondo:rgba(201,136,26,.16);--v-duda-linea:rgba(201,136,26,.40);--v-duda-texto:#efdcbd;
}

/* Capa de COMPOSICIÓN, compartida por todas las marcas.
   Aquí no hay un solo color literal: todo sale de los tokens que define
   cada tema. El tema dice cómo se ve la marca; esto dice cómo se compone
   la página. Separarlos evita que una mejora de diseño haya que escribirla
   dos veces y se desincronice. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;color:var(--ink);font:400 17px/1.68 var(--body);-webkit-font-smoothing:antialiased;
  background-color:var(--cream);
  /* Textura: solo retícula, que se repite limpia a lo largo de toda la página.
     Aquí NO va halo. Un degradado de altura fija sobre un documento largo deja
     un borde horizontal visible donde termina, y al hacer scroll se lee como una
     banda que se desplaza. El halo vive donde sí está contenido: barra, hero,
     piezas y bloques de código. */
  background-image:
    linear-gradient(var(--rejilla-clara) 1px, transparent 1px),
    linear-gradient(90deg, var(--rejilla-clara) 1px, transparent 1px);
  background-size:64px 64px;
}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);color:var(--navy);line-height:1.15;letter-spacing:-.015em}
img,svg{max-width:100%}
.saltar{position:absolute;left:-999px}
.saltar:focus{left:var(--s3);top:var(--s3);z-index:99;background:var(--paper);padding:var(--s2) var(--s3);border-radius:var(--r)}

/* ---------- barra superior ---------- */
.barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s4);
  height:60px;padding:0 var(--s5);color:var(--on-navy);
  background:var(--navy);
  background-image:radial-gradient(90% 240% at 18% 0%, var(--halo-oscuro), transparent 60%);
  border-bottom:1px solid var(--linea-oscura)}
.marca{font-family:var(--display);font-weight:600;font-size:15px;color:var(--on-navy);text-decoration:none;
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marca::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--gold-light);margin-right:var(--s2);vertical-align:middle;
  box-shadow:0 0 12px var(--gold-light)}
.barra-der{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.prog{display:block;width:130px;height:6px;border-radius:3px;background:var(--riel);overflow:hidden}
.prog i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold))}
.prog-t{font:500 12px/1 var(--mono);color:var(--on-navy-suave);white-space:nowrap;font-variant-numeric:tabular-nums}
.menu-btn{display:none;background:var(--riel);color:var(--on-navy);border:0;border-radius:var(--r);
  padding:var(--s2) var(--s3);font:500 13px var(--body);cursor:pointer}

/* ---------- estructura ---------- */
.capa{display:grid;grid-template-columns:var(--w-nav) minmax(0,1fr);gap:var(--s7);
  max-width:1240px;margin:0 auto;padding:var(--s6) var(--s5) var(--s8)}
.nav{position:sticky;top:calc(60px + var(--s5));align-self:start;max-height:calc(100vh - 110px);
  overflow-y:auto;font-size:14.5px}
.nav-inicio{display:block;font-weight:600;margin-bottom:var(--s4);color:var(--navy);text-decoration:none}
.nav-inicio::before{content:"←";margin-right:6px;color:var(--gold)}
.nav-mod{border-top:1px solid var(--line);padding:var(--s3) 0}
.nav-mod summary{cursor:pointer;font-family:var(--display);font-weight:600;color:var(--navy);
  font-size:15px;line-height:1.3;list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.nav-mod summary::-webkit-details-marker{display:none}
.nav-mn{display:block;width:100%;font:600 10.5px/1 var(--body);letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.nav-mod ul{list-style:none;margin:var(--s3) 0 0;padding:0}
.nav-mod li a{display:flex;gap:var(--s2);padding:6px var(--s2);border-radius:6px;color:var(--ink);
  text-decoration:none;line-height:1.4}
.nav-mod li a:hover{background:var(--gold-pale)}
.nav-mod li.on a{background:var(--navy);color:var(--on-navy);font-weight:500}
.nl-n{font:500 12px/1.5 var(--mono);color:var(--gray);flex:0 0 auto;font-variant-numeric:tabular-nums}
.nav-mod li.on .nl-n{color:var(--gold-light)}
.tag{font:700 10px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;border-radius:4px}
.tag-libre{background:var(--gold-pale);color:var(--gold)}

/* ---------- contenido ---------- */
main{max-width:var(--w-txt);min-width:0}

/* Cabecera de lección: el número del módulo entra como objeto gráfico
   (cifra fantasma sangrando), no como un dato más de texto. */
.cabecera{position:relative;margin-bottom:var(--s7);padding-top:var(--s2)}
.cabecera::before{content:attr(data-n);position:absolute;right:-8px;top:-42px;
  font:700 170px/1 var(--display);color:var(--gold);opacity:.09;pointer-events:none;
  letter-spacing:-.04em;z-index:0;font-variant-numeric:tabular-nums}
.cabecera > *{position:relative;z-index:1}
.miga{font:700 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin:0 0 var(--s3);display:flex;align-items:center;gap:10px}
.miga::before{content:"";width:44px;height:3px;background:var(--gold);flex:0 0 auto;border-radius:2px}
main h1{font-size:clamp(30px,4.4vw,46px);margin:0}

/* Entradilla: primer párrafo tratado como bajada, no como cuerpo. */
main > p:first-of-type{font-size:20.5px;line-height:1.55;color:var(--tinta-suave);
  border-left:3px solid var(--gold-light);padding-left:var(--s4);margin:0 0 var(--s6)}

main h2{font-size:26px;margin:var(--s8) 0 var(--s4);padding-top:var(--s5);
  border-top:1px solid var(--line);position:relative}
main h2::before{content:"";position:absolute;top:-1px;left:0;width:64px;height:3px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold));border-radius:2px}
main h3{font-size:19.5px;margin:var(--s6) 0 var(--s2)}
main p{margin:0 0 var(--s4)}
main ul,main ol{margin:0 0 var(--s5);padding-left:var(--s5)}
main li{margin-bottom:var(--s2)}
main li::marker{color:var(--gold)}
strong{font-weight:700;color:var(--navy)}
code{font:500 .88em var(--mono);background:var(--gold-pale);padding:2px 5px;border-radius:4px;color:var(--gold)}
pre{background:var(--navy);background-image:radial-gradient(90% 120% at 100% 0%, var(--halo-oscuro), transparent 65%);
  color:var(--on-navy);padding:var(--s5);border-radius:var(--r-lg);overflow-x:auto;font-size:14px;
  box-shadow:var(--sh-lg);border:1px solid var(--linea-oscura)}
pre code{background:none;color:inherit;padding:0}
hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}

/* Cita: la comilla es un elemento gráfico, no un signo de puntuación. */
blockquote{position:relative;margin:var(--s6) 0;padding:var(--s2) 0 var(--s2) var(--s7);
  font-family:var(--display);font-size:21px;line-height:1.45;color:var(--navy)}
blockquote::before{content:"”";position:absolute;left:-4px;top:14px;font:700 110px/0.6 var(--display);
  color:var(--gold);opacity:.22}
blockquote p:last-child{margin-bottom:0}

/* El scroll lo hace el envoltorio, no la tabla. Poner display:block en la propia
   tabla la convertía SIEMPRE en contenedor desplazable, y macOS le dibujaba su
   barra translúcida aunque la tabla cupiera de sobra. */
.tabla{margin:var(--s6) 0;overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--sh);
  border:1px solid var(--line);background:var(--paper)}
.tabla table{width:100%;border-collapse:collapse;margin:0;font-size:15.5px;
  font-variant-numeric:tabular-nums}
th{background:var(--navy);background-image:linear-gradient(180deg,var(--navy-2),var(--navy));
  color:var(--on-navy);font-family:var(--display);font-weight:600;font-size:13.5px;
  text-align:left;padding:var(--s3) var(--s4);white-space:nowrap}
td{padding:var(--s3) var(--s4);border-top:1px solid var(--line);vertical-align:top}
tbody tr:nth-child(even){background:var(--fila-par)}
tbody tr:hover{background:var(--gold-pale)}

/* ---------- callouts: sangran fuera de la columna de texto ---------- */
.callout{position:relative;margin:var(--s6) -28px;padding:var(--s5) var(--s6);border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--blue);
  box-shadow:var(--sh);font-size:16.5px}
.callout p:last-child{margin-bottom:0}
.callout b{display:block;font-family:var(--display);color:var(--navy);margin-bottom:var(--s2);font-size:16px}
.callout-nota{border-left-color:var(--blue)}
.callout-ojo{border-left-color:var(--alerta);background:var(--tinte-alerta)}
.callout-truco{border-left-color:var(--gold-light);background:var(--gold-pale)}
.callout-ejemplo{border-left-color:var(--ok);background:var(--tinte-ok)}

/* ---------- piezas interactivas: aparato encendido, no bloque plano ---------- */
.pieza{margin:var(--s7) -28px;background:var(--navy);border-radius:18px;padding:var(--s6);
  box-shadow:var(--sh-lg);color:var(--on-navy-suave);border:1px solid var(--linea-oscura);
  background-image:
    radial-gradient(90% 120% at 12% 0%, var(--halo-oscuro), transparent 62%),
    linear-gradient(var(--rejilla-oscura) 1px, transparent 1px),
    linear-gradient(90deg, var(--rejilla-oscura) 1px, transparent 1px);
  background-size:100% 100%, 48px 48px, 48px 48px;
  background-repeat:no-repeat, repeat, repeat}
.pieza h4{color:var(--on-navy);margin:0 0 var(--s2);font-size:19px;
  display:flex;align-items:center;gap:10px}
.pieza h4::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold-light);
  box-shadow:0 0 12px var(--gold-light);flex:0 0 auto}
.pieza .pz-sub{margin:0 0 var(--s5);font-size:14.5px;color:var(--on-navy-suave)}
.pieza label{display:block;font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-navy-suave);margin-bottom:7px}
.pieza input,.pieza select{width:100%;background:var(--campo);border:1px solid var(--linea-oscura);
  border-radius:var(--r);color:var(--on-navy);font:400 16px var(--body);padding:11px var(--s3)}
.pieza input:focus,.pieza select:focus{outline:2px solid var(--gold-light);outline-offset:1px}
.pieza select option{color:var(--ink)}
.pz-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s4);margin-bottom:var(--s4)}
.pz-out{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--linea-oscura)}
.pz-linea{display:flex;justify-content:space-between;gap:var(--s4);padding:7px 0;font-size:15px}
.pz-linea span:last-child{font:500 15px var(--mono);color:var(--on-navy);font-variant-numeric:tabular-nums}
.pz-total{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--linea-oscura);
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4)}
.pz-total b{font-family:var(--display);font-size:15px;color:var(--on-navy)}
.pz-total i{font:600 32px/1 var(--mono);font-style:normal;color:var(--gold-light);font-variant-numeric:tabular-nums}
.pz-veredicto{margin-top:var(--s4);padding:var(--s4) var(--s5);border-radius:var(--r);font-size:15.5px;line-height:1.5}
.pz-si{background:var(--v-ok-fondo);border:1px solid var(--v-ok-linea);color:var(--v-ok-texto)}
.pz-no{background:var(--v-mal-fondo);border:1px solid var(--v-mal-linea);color:var(--v-mal-texto)}
.pz-quiza{background:var(--v-duda-fondo);border:1px solid var(--v-duda-linea);color:var(--v-duda-texto)}
.pz-nota{margin:var(--s4) 0 0;font-size:13px;color:var(--on-navy-tenue)}
.pz-btn{background:var(--gold-light);color:var(--navy);border:0;border-radius:var(--r);
  padding:11px var(--s5);font:600 15px var(--display);cursor:pointer}

/* ---------- figuras ---------- */
figure{margin:var(--s7) -28px}
figure svg{display:block;width:100%;height:auto;background:var(--paper);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:var(--s5);border:1px solid var(--line)}
figcaption{margin-top:var(--s3);font-size:14px;color:var(--gray);text-align:center}

/* ---------- pie de lección ---------- */
.revisado{margin-top:var(--s8);font-size:13.5px;color:var(--gray);border-top:1px solid var(--line);padding-top:var(--s3)}
.vecinos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s5)}
.vec{display:block;padding:var(--s5);background:var(--paper);border-radius:var(--r-lg);
  text-decoration:none;box-shadow:var(--sh);border:1px solid var(--line);transition:border-color .18s,transform .18s}
.vec span{display:block;font:700 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px}
.vec b{font-family:var(--display);color:var(--navy);font-size:16px;line-height:1.25}
.vec-sig{text-align:right}
.vec:hover{border-color:var(--gold-light);transform:translateY(-2px)}

/* ---------- portada ---------- */
.portada{background:var(--cream)}
.hero{position:relative;overflow:hidden;color:var(--on-navy);padding:var(--s8) var(--s5) calc(var(--s8) + 12px);
  text-align:center;background:var(--navy);
  background-image:
    radial-gradient(100% 90% at 50% 0%, var(--halo-oscuro), transparent 62%),
    linear-gradient(var(--rejilla-oscura) 1px, transparent 1px),
    linear-gradient(90deg, var(--rejilla-oscura) 1px, transparent 1px);
  background-size:100% 100%, 64px 64px, 64px 64px;
  background-repeat:no-repeat, repeat, repeat}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold))}
.kicker{font:700 12px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light);margin:0 0 var(--s4)}
.hero h1{color:var(--on-navy);font-size:clamp(34px,6.2vw,58px);margin:0 auto var(--s4);max-width:16ch}
.lede{max-width:52ch;margin:0 auto var(--s4);font-size:19.5px;color:var(--on-navy-suave)}
.hero-datos{font:500 13px var(--mono);color:var(--on-navy-tenue);margin:0 0 var(--s6)}
.hero-cta{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:15px var(--s6);border-radius:var(--r);font:600 16px var(--display);text-decoration:none}
.btn-oro{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--navy);
  box-shadow:0 12px 30px -14px var(--gold)}
.btn-ghost{border:1px solid var(--linea-oscura);color:var(--on-navy)}
.btn-inactivo{display:inline-block;padding:15px var(--s6);border-radius:var(--r);
  font:600 16px var(--display);border:1px dashed var(--linea-oscura);color:var(--on-navy-tenue)}

.hero-acceso{margin:var(--s5) 0 0;font-size:15px;color:var(--on-navy-tenue)}
.hero-acceso a{color:var(--on-navy);text-decoration-thickness:1px;text-underline-offset:4px;font-weight:600}
.hero-acceso a:hover{color:var(--gold-light)}
.fichas{max-width:1060px;margin:0 auto;padding:var(--s8) var(--s5);display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ficha{position:relative;overflow:hidden;background:var(--paper);border-radius:var(--r-lg);
  padding:var(--s6);box-shadow:var(--sh);border:1px solid var(--line);transition:transform .18s,border-color .18s}
.ficha:hover{transform:translateY(-3px);border-color:var(--gold-light)}
.ficha::before{content:attr(data-n);position:absolute;right:-10px;bottom:-46px;
  font:700 140px/1 var(--display);color:var(--gold);opacity:.07;pointer-events:none}
.ficha-libre{border-color:var(--gold-light);box-shadow:0 18px 44px -30px var(--gold)}
.ficha-libre::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold))}
.ficha-n{font:700 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin:0 0 var(--s2)}
.ficha h3{margin:0 0 var(--s2);font-size:21px;position:relative}
.ficha h3 a{color:var(--navy);text-decoration:none}
.ficha-r{font-size:15px;color:var(--tinta-suave);margin:0 0 var(--s3);position:relative}
.ficha-l{margin:0;padding-left:var(--s5);font-size:14.5px;color:var(--gray);position:relative}
.ficha-l a{color:var(--tinta-suave);text-decoration:none}
.ficha-l a:hover{color:var(--blue);text-decoration:underline}
.pie{color:var(--on-navy-suave);text-align:center;padding:var(--s7) var(--s5);font-size:15px;
  background:var(--navy);
  background-image:radial-gradient(100% 160% at 50% 100%, var(--halo-oscuro), transparent 60%)}
.pie b{color:var(--on-navy)}

/* ---------- el curso hermano ----------
   Venta cruzada explícita entre las dos marcas: el que compró importación es un
   dueño de PyME, que es exactamente el lector del de sistemas, y al revés. Es
   el UNICO enlace a la otra marca que se permite; el resto del aislamiento
   sigue vigente y con test.
   Tarjeta centrada con el mismo lenguaje que .ficha: es una oferta, no una nota
   al pie, y pegada al borde se leía como un descarte. */
.hermano{max-width:1060px;margin:0 auto var(--s8);padding:0 var(--s5)}
.hermano-caja{max-width:620px;margin:0 auto;text-align:center;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s7) var(--s6);
  box-shadow:var(--sh);transition:transform .18s,border-color .18s}
.hermano-caja:hover{transform:translateY(-3px);border-color:var(--gold-light)}
.hermano-k{font:600 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin:0 0 var(--s3)}
.hermano h2{margin:0 0 var(--s3);font-size:26px;line-height:1.25}
.hermano h2 a{color:var(--navy);text-decoration:none}
.hermano h2 a:hover{color:var(--gold)}
.hermano p{margin:0 auto var(--s5);max-width:46ch;color:var(--gray);font-size:16.5px;line-height:1.6}
.hermano-cta{display:inline-block;padding:12px var(--s6);border-radius:var(--r);
  border:1.5px solid var(--gold-light);color:var(--navy);text-decoration:none;
  font:600 15px var(--display);transition:background .18s,border-color .18s}
.hermano-cta:hover{background:var(--gold-pale);border-color:var(--gold)}
@media (max-width:600px){
  .hermano-caja{padding:var(--s6) var(--s5)}
  .hermano h2{font-size:22px}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .callout,.pieza,figure{margin-left:0;margin-right:0}
}
@media (max-width:960px){
  .capa{grid-template-columns:1fr;gap:var(--s5);padding:var(--s5) var(--s4) var(--s8)}
  .nav{position:static;max-height:none;display:none;background:var(--paper);padding:var(--s4);
    border-radius:var(--r-lg);box-shadow:var(--sh);border:1px solid var(--line)}
  .nav.abierto{display:block}
  .menu-btn{display:block}
  .prog{display:none}
  .barra{padding:0 var(--s4)}
  .vecinos{grid-template-columns:1fr}
  .vec-sig{text-align:left}
  .cabecera::before{font-size:110px;top:-26px;right:-4px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ---------- recibimiento: la portada sabe que ya entraste ---------- */
.sesion{background:var(--paper);border-bottom:1px solid var(--line)}
.sesion-in{max-width:1060px;margin:0 auto;padding:var(--s6) var(--s5)}
.sesion-k{margin:0 0 var(--s2);font:700 11px/1 var(--body);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:9px}
.sesion-k::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent);flex:0 0 auto}
.sesion-q{margin:0 0 var(--s4);font-family:var(--display);font-size:20px;color:var(--navy)}
.sesion-barra{height:8px;border-radius:5px;background:var(--line);overflow:hidden;margin-bottom:var(--s3)}
.sesion-barra i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold));transition:width .4s}
.sesion-n{margin:0 0 var(--s2);font-size:14.5px;color:var(--tinta-suave);font-variant-numeric:tabular-nums}
.sesion-n b{color:var(--navy)}
.sesion-sig{margin:0;font-size:15px;color:var(--gray)}
.sesion-sig a{font-weight:600}
.ficha-prog{margin:var(--s4) 0 0;padding-top:var(--s3);border-top:1px solid var(--line);
  font:600 12.5px/1 var(--body);letter-spacing:.05em;color:var(--gray);position:relative}
.ficha-prog b{color:var(--ok)}
.ficha-lista{border-color:var(--ok)}
.ficha-l li.leida > a{color:var(--gray)}
.ficha-l li.leida > a::after{content:" ✓";color:var(--ok);font-weight:700}

/* ---------- progreso del alumno ---------- */
.nav-mod li.leida > a::after{content:"✓";margin-left:auto;color:var(--ok);font-weight:700;flex:0 0 auto}
.nav-mod li.leida .nl-n{opacity:.55}
.fin-curso{margin-top:var(--s7)}

/* ---------- captura de correo ----------
   El lector todavía no compró nada, así que su franja no se pinta con el verde
   de "ya está": va en dorado, que es el color de lo que falta. */
.sesion-lector .sesion-k::before{background:var(--gold-light);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--gold-light) 25%,transparent)}
.tag-correo{background:var(--gold-pale);color:var(--gold)}
.callout-oferta{border-left-color:var(--gold);background:var(--gold-pale)}
.fin-gratis{margin-top:var(--s7)}
.fin-gratis .btn{margin-top:var(--s3)}

.captura{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:color-mix(in srgb,var(--navy) 55%,transparent);backdrop-filter:blur(3px);
  padding:var(--s5);animation:cap-fondo .25s ease}
.captura-caja{position:relative;width:100%;max-width:430px;background:var(--paper);
  border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-lg);
  border-top:4px solid var(--gold-light);animation:cap-sube .3s cubic-bezier(.2,.8,.3,1)}
.captura-x{position:absolute;top:var(--s3);right:var(--s3);width:32px;height:32px;display:grid;
  place-items:center;border:0;border-radius:50%;background:transparent;color:var(--gray);cursor:pointer}
.captura-x:hover{background:var(--cream);color:var(--navy)}
.captura-k{margin:0 0 var(--s2);font:700 10.5px/1 var(--body);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.captura-caja h2{margin:0 0 var(--s3);font-size:23px;line-height:1.2}
.captura-t{margin:0 0 var(--s5);font-size:15.5px;line-height:1.55;color:var(--tinta-suave)}
.captura-f{display:grid;gap:var(--s3)}
.captura-f input{width:100%;padding:13px var(--s3);border:1px solid var(--line);border-radius:var(--r);
  font:400 16.5px var(--body);background:var(--paper)}
.captura-f input:focus{outline:2px solid var(--gold-light);outline-offset:1px;border-color:var(--gold-light)}
.captura-f button{width:100%;border:0;cursor:pointer;font-size:16px}
.captura-err{margin:var(--s3) 0 0;padding:var(--s3);border-radius:var(--r);
  background:var(--tinte-alerta);color:var(--alerta);font-size:14.5px}
.captura-n{margin:var(--s4) 0 0;font-size:12.5px;line-height:1.5;color:var(--gray)}
@keyframes cap-fondo{from{opacity:0}to{opacity:1}}
@keyframes cap-sube{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* En pantalla grande deja de ser una hoja que sube y pasa a estar centrado. */
@media (min-width:700px){
  .captura{align-items:center}
  .captura-caja{padding:var(--s7)}
}