/* ============================================================
   CURSAR — Hoja de estilos

   Sistema de impresión offset: tres tintas (cian, magenta,
   amarillo), trama de semitono y línea negra. Las fotos se
   tiñen con la tinta de su familia para que un catálogo con
   fotos de orígenes distintos se vea como un conjunto.
   ============================================================ */

:root{
  /* ---- tintas ---- */
  --paper:#DEDDD8;
  --paper-alto:#E8E7E2;
  --card:#F7F6F3;
  --ink:#14141A;
  --ink-soft:#56565F;
  --ink-tenue:#65646D;
  --line:#C6C5BE;
  --line-suave:#D6D5CE;
  --cyan:#0086C3;
  --magenta:#D4006F;
  --yellow:#E8AE00;
  --verde:#2E7D4F;

  /* ---- tipografía ---- */
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Space Grotesk",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  /* ---- escala de espaciado ---- */
  --e1:6px; --e2:12px; --e3:18px; --e4:26px;
  --e5:38px; --e6:56px; --e7:80px; --e8:112px;

  --pad:clamp(20px,5vw,60px);
  --sombra:5px 5px 0 var(--ink);
  --sombra-alta:8px 8px 0 var(--ink);
}

/* ============================================================
   MODO OSCURO

   La metáfora del sitio es la impresión: tinta sobre papel. En
   oscuro no se invierte cualquier color, se cambia el papel: pasa
   a ser negro y las tintas se aclaran para seguir teniendo
   contraste sobre él. Los bordes y las sombras duras se mantienen
   porque son lo que le da el carácter gráfico.
   ============================================================ */
[data-tema="oscuro"]{
  --paper:#15161A;
  --paper-alto:#1E1F26;
  --card:#1B1C22;
  --ink:#EAE9E4;
  --ink-soft:#A6A5AD;
  --ink-tenue:#75747D;
  --line:#35363E;
  --line-suave:#2A2B32;
  --cyan:#3FB2E6;
  --magenta:#FF4C9C;
  --yellow:#F2C63F;
  --verde:#54C287;
  --sombra:5px 5px 0 var(--line);
  --sombra-alta:8px 8px 0 var(--line);
}

/* Las capas de tinta se superponen multiplicando sobre papel claro.
   Sobre papel oscuro hay que hacer lo contrario o desaparecen. */
[data-tema="oscuro"] .capa,
[data-tema="oscuro"] .medio .tinte,
[data-tema="oscuro"] .logo-fantasma{
  mix-blend-mode:screen;
}
[data-tema="oscuro"] .medio img{
  filter:grayscale(1) contrast(1.05) brightness(.75);
}
[data-tema="oscuro"] .medio .tinte{opacity:.34}
[data-tema="oscuro"] .medio .tinte::after{
  background:linear-gradient(to top,rgba(0,0,0,.5),transparent 58%);
}

/* Este bloque es papel oscuro sobre papel claro. En modo oscuro se
   daría vuelta y quedaría un rectángulo blanco enorme. */
[data-tema="oscuro"] .cierre{
  background:var(--card);color:var(--ink);border-color:var(--line);
}
[data-tema="oscuro"] .cierre p{color:var(--ink-soft)}
[data-tema="oscuro"] .cierre .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
[data-tema="oscuro"] .cierre .btn:hover{background:var(--canal);color:var(--paper)}

[data-tema="oscuro"] .pendiente{background:#2A2413;border-color:var(--yellow)}
[data-tema="oscuro"] ::selection{background:var(--ink);color:var(--paper)}

/* ---------- interruptor de tema ---------- */
.tema{
  background:none;border:1.5px solid var(--line);
  width:34px;height:34px;flex:none;cursor:pointer;
  display:grid;place-items:center;color:var(--ink-soft);
  transition:color .15s,border-color .15s;
}
.tema:hover{color:var(--ink);border-color:var(--ink)}
.tema svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round}
.tema .luna{display:none}
[data-tema="oscuro"] .tema .sol{display:none}
[data-tema="oscuro"] .tema .luna{display:block}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}
::selection{background:var(--ink);color:var(--card)}

.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--pad)}
.estrecho{max-width:1080px}

/* ---- marca ---- */
.logo{flex:none;overflow:visible}
.logo-fantasma{
  /* La tinta magenta corrida un pelo: la desalineación de imprenta
     que da nombre al lenguaje visual del sitio. */
  transform:translate(1.4px,-1.4px);
  mix-blend-mode:multiply;
  opacity:.85;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.marca:hover .logo-fantasma{transform:translate(3px,-3px)}
.palabra{letter-spacing:-.045em}
.dominio{color:var(--ink-tenue)}

/* ============================================================
   IMÁGENES · el sistema duotono
   ============================================================ */
.medio{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--paper-alto);
  line-height:0;
}
.medio img{
  width:100%;height:100%;
  object-fit:cover;
  /* La foto se desatura para que la tinta mande sobre el color
     original. Sin esto, doce fotos distintas nunca combinan. */
  filter:grayscale(1) contrast(1.06) brightness(1.04);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.medio .tinte{
  position:absolute;inset:0;
  background:var(--canal,var(--cyan));
  mix-blend-mode:multiply;
  opacity:.42;
  pointer-events:none;
}
.medio .tinte::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,20,26,.34),transparent 58%);
  mix-blend-mode:normal;
}
.medio-svg svg{width:100%;height:100%;object-fit:cover}

/* ============================================================
   CABECERA
   ============================================================ */
.top{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(10px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);padding-block:14px}
.marca{
  display:flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:800;letter-spacing:-.035em;font-size:20px;
  text-decoration:none;
}
.marca .logo-tinta{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.marca:hover .logo-tinta{transform:translate(-1px,1px)}
.top nav{display:flex;gap:var(--e4);font-size:14.5px;align-items:center}
.top nav a{text-decoration:none;color:var(--ink-soft);transition:color .15s}
.top nav a:hover{color:var(--ink)}
@media(max-width:820px){.top nav{display:none}}

/* ============================================================
   PORTADA · hero
   ============================================================ */
.hero{padding-block:clamp(48px,8vw,var(--e8)) clamp(32px,5vw,var(--e6))}
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;align-items:center;gap:12px;margin-bottom:var(--e4);
}
.eyebrow::after{content:"";height:1px;background:var(--line);flex:1}

.titular{
  position:relative;font-family:var(--display);font-weight:800;
  font-size:clamp(46px,10.5vw,124px);line-height:.88;letter-spacing:-.05em;
  text-transform:uppercase;
}
.titular span{display:block}
.capa{position:absolute;inset:0;mix-blend-mode:multiply;pointer-events:none;user-select:none}
.capa-c{color:var(--cyan);animation:reg-c 1.2s cubic-bezier(.16,1,.3,1) forwards}
.capa-m{color:var(--magenta);animation:reg-m 1.2s cubic-bezier(.16,1,.3,1) forwards}
@keyframes reg-c{from{transform:translate(-16px,8px);opacity:.9}to{transform:translate(-2px,1px);opacity:.46}}
@keyframes reg-m{from{transform:translate(15px,-9px);opacity:.9}to{transform:translate(2px,-1px);opacity:.46}}

.hero-pie{display:flex;gap:var(--e6);align-items:flex-end;flex-wrap:wrap;margin-top:var(--e5)}
.bajada{max-width:46ch;font-size:clamp(16.5px,1.7vw,19.5px);color:var(--ink-soft)}
.bajada strong{color:var(--ink);font-weight:500}
.hero-acciones{display:flex;gap:var(--e2);flex-wrap:wrap}

/* banda de cifras */
.cifras{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.5px;background:var(--ink);border:1.5px solid var(--ink);
  margin-top:var(--e6);
}
.cifra{background:var(--card);padding:var(--e3) var(--e4)}
.cifra b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(26px,3.4vw,36px);letter-spacing:-.04em;line-height:1;
}
.cifra span{
  display:block;margin-top:7px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}

/* ============================================================
   SECCIONES
   ============================================================ */
.seccion{padding-block:clamp(44px,6vw,var(--e7));border-top:1px solid var(--line)}
.seccion-cab{margin-bottom:var(--e5)}
.seccion-cab h2,.familia-cab h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(28px,4.4vw,44px);letter-spacing:-.04em;
  text-transform:uppercase;line-height:.98;
}
/* Grilla en vez de flex: con flex-wrap, el max-width de la descripción
   la achica lo suficiente como para volver a entrar en el mismo renglón
   que el título, y el salto de línea nunca ocurre. */
.familia-cab{
  display:grid;grid-template-columns:auto 1fr;
  align-items:baseline;gap:var(--e2) var(--e3);
  margin-bottom:var(--e5);
}
.familia-cab h2{grid-column:1}
.familia-cab .canal{
  grid-column:2;justify-self:start;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;align-items:center;gap:8px;
}
.familia-cab .tinta{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink)}
.familia-cab .desc{
  grid-column:1 / -1;
  font-size:15.5px;color:var(--ink-soft);max-width:58ch;
}
@media(max-width:560px){
  .familia-cab{grid-template-columns:1fr}
  .familia-cab .canal{grid-column:1}
}

.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--e3)}

/* ============================================================
   TARJETA DE CURSO
   ============================================================ */
.curso{
  --canal:var(--cyan);
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1.5px solid var(--ink);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s cubic-bezier(.2,.7,.3,1);
}
.curso:hover,.curso:focus-within{
  transform:translate(-5px,-5px);
  box-shadow:5px 5px 0 var(--canal),10px 10px 0 var(--ink);
}
.curso:hover .medio img{transform:scale(1.06)}
.curso .medio{border-bottom:1.5px solid var(--ink)}
.curso .marco{position:relative}

.insignia{
  position:absolute;top:11px;left:11px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--card);border:1.5px solid var(--ink);padding:4px 9px;
}
.duracion{
  position:absolute;bottom:12px;right:12px;z-index:2;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  background:var(--card);border:1.5px solid var(--ink);padding:3px 8px;
}

.cuerpo{display:flex;flex-direction:column;flex:1;padding:var(--e3)}
.curso-meta{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-tenue);
}
.curso h3{font-family:var(--display);font-weight:800;font-size:22.5px;letter-spacing:-.035em;line-height:1.06;margin-top:9px}
.curso h3 a{text-decoration:none}
.curso h3 a::after{content:"";position:absolute;inset:0}
.curso .resumen{font-size:14.5px;color:var(--ink-soft);margin-top:9px;line-height:1.5}
.curso .pie{
  margin-top:auto;padding-top:var(--e3);
  border-top:1px solid var(--line-suave);
  display:flex;align-items:center;justify-content:space-between;gap:var(--e2);
}
.curso .pie{margin-top:var(--e3)}
.precio{font-family:var(--mono);font-weight:700;font-size:22px;letter-spacing:-.03em;line-height:1}
.precio small{
  display:block;font-size:9px;font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-tenue);margin-bottom:5px;
}
.ver{
  position:relative;z-index:1;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  text-decoration:none;display:flex;align-items:center;gap:6px;
}
.ver::after{content:"→";transition:transform .18s}
.curso:hover .ver{color:var(--ink)}
.curso:hover .ver::after{transform:translateX(4px)}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  font-family:var(--body);font-weight:700;font-size:14.5px;
  background:var(--ink);color:var(--card);
  border:1.5px solid var(--ink);padding:11px 22px;cursor:pointer;
  transition:background .16s,color .16s,transform .1s;
  text-decoration:none;display:inline-block;text-align:center;
}
.btn:hover{background:var(--canal,var(--magenta))}
.btn:active{transform:translateY(1px)}
.btn-linea{background:transparent;color:var(--ink)}
.btn-linea:hover{background:var(--ink);color:var(--card)}
.btn-grande{font-size:16px;padding:15px 30px}
.btn-ancho{width:100%}

/* ============================================================
   FICHA DE CURSO
   ============================================================ */
.miga{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-tenue);padding-top:var(--e4);display:flex;gap:9px;flex-wrap:wrap;
}
.miga a{text-decoration:none}
.miga a:hover{color:var(--ink)}

.ficha-hero{
  display:grid;grid-template-columns:1.3fr .85fr;
  gap:clamp(26px,4vw,var(--e6));
  padding-block:var(--e4) clamp(40px,5vw,var(--e6));
  align-items:start;
}
@media(max-width:900px){.ficha-hero{grid-template-columns:1fr}}

.ficha-canal{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;align-items:center;gap:9px;margin-bottom:var(--e3);
}
.ficha-canal .tinta{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink)}
.ficha-hero h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(36px,6.2vw,66px);letter-spacing:-.045em;line-height:.96;
}
.gancho{font-size:clamp(17px,2vw,21px);color:var(--ink-soft);margin-top:var(--e3);max-width:42ch;line-height:1.45}

.ficha-imagen{margin-top:var(--e4);border:1.5px solid var(--ink)}
.ficha-imagen .medio{aspect-ratio:21/9}

.fichas-datos{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--e4)}
.dato{
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  background:var(--card);border:1.5px solid var(--ink);padding:8px 13px;
}
.dato b{font-weight:700}

/* tarjeta de compra */
.compra{
  background:var(--card);border:1.5px solid var(--ink);
  box-shadow:var(--sombra-alta);position:sticky;top:88px;
}
@media(max-width:900px){.compra{position:static}}
.compra .medio{border-bottom:1.5px solid var(--ink)}
.compra .interior{padding:var(--e4)}
.compra .valor{font-family:var(--mono);font-weight:700;font-size:38px;letter-spacing:-.035em;line-height:1}
.compra .valor small{
  display:block;font-size:10px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-tenue);margin-bottom:7px;
}
.compra ul{
  list-style:none;margin-top:var(--e3);padding-top:var(--e3);
  border-top:1px solid var(--line-suave);
  display:flex;flex-direction:column;gap:10px;font-size:14px;
}
.compra li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft)}
.compra li::before{content:"✓";color:var(--verde);font-weight:700;flex:none}
.compra .btn{margin-top:var(--e4)}
.garantia{font-size:12.5px;color:var(--ink-tenue);text-align:center;margin-top:var(--e2);line-height:1.45}

/* barra fija de compra en móvil */
.barra-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:38;
  display:none;align-items:center;justify-content:space-between;gap:var(--e3);
  background:var(--card);border-top:1.5px solid var(--ink);
  padding:11px var(--pad);
  box-shadow:0 -6px 20px rgba(20,20,26,.1);
}
.barra-movil .valor{font-family:var(--mono);font-weight:700;font-size:20px;line-height:1.1}
.barra-movil .valor small{display:block;font-size:9.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-tenue)}
@media(max-width:900px){
  .barra-movil{display:flex}
  body{padding-bottom:74px}
}

/* bloques de contenido */
.bloque{padding-block:clamp(36px,5vw,var(--e6));border-top:1px solid var(--line)}
.bloque h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(24px,3.6vw,36px);letter-spacing:-.04em;
  text-transform:uppercase;line-height:1;margin-bottom:var(--e4);
}
.bloque p{max-width:68ch;margin-bottom:var(--e3);color:var(--ink-soft);font-size:16.5px}
.bloque p.entrada{
  color:var(--ink);font-size:clamp(17px,1.9vw,20px);line-height:1.55;
  border-left:3px solid var(--canal);padding-left:var(--e3);
}

.dos-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--e4)}
.lista{list-style:none;display:flex;flex-direction:column;gap:12px}
.lista li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.lista li::before{content:"→";color:var(--canal);font-weight:700;flex:none}
.lista.check li::before{content:"✓";color:var(--verde)}
.lista-doble{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px 34px}

.caja{background:var(--card);border:1.5px solid var(--ink);padding:var(--e4)}
.caja h3{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.025em;margin-bottom:var(--e3)}

/* temario */
.modulo{border:1.5px solid var(--ink);background:var(--card);margin-bottom:9px;transition:box-shadow .16s}
.modulo[open]{box-shadow:var(--sombra)}
.modulo summary{cursor:pointer;list-style:none;padding:16px var(--e3);display:flex;align-items:center;gap:var(--e3);font-weight:500}
.modulo summary::-webkit-details-marker{display:none}
.modulo summary:hover{background:var(--paper-alto)}
.modulo .num{
  font-family:var(--mono);font-size:12px;font-weight:700;color:var(--canal);
  flex:none;width:26px;
}
.modulo .tit{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.025em;flex:1;line-height:1.2}
.modulo .cant{font-family:var(--mono);font-size:10.5px;color:var(--ink-tenue);flex:none;letter-spacing:.06em}
.modulo summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--ink-soft);flex:none;width:14px;text-align:center}
.modulo[open] summary::after{content:"–"}
.modulo[open] summary{border-bottom:1px solid var(--line-suave)}
.modulo ol{list-style:none;counter-reset:c;padding:var(--e2) var(--e3) var(--e3) 52px}
.modulo li{counter-increment:c;display:flex;gap:12px;padding:8px 0;font-size:15px;color:var(--ink-soft);border-bottom:1px solid var(--line-suave)}
.modulo li:last-child{border-bottom:0}
.modulo li::before{content:counter(c,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--ink-tenue);flex:none;padding-top:3px}

/* llamada final */
.cierre{
  background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);
  padding:clamp(26px,4vw,var(--e5));
  display:flex;gap:var(--e4);align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.cierre h3{font-family:var(--display);font-weight:800;font-size:clamp(22px,3vw,30px);letter-spacing:-.035em;line-height:1.05}
.cierre p{color:var(--ink-tenue);font-size:15px;margin-top:8px;max-width:46ch}
.cierre .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cierre .btn:hover{background:var(--canal);color:#fff;border-color:var(--canal)}

.otros{padding-block:clamp(36px,5vw,var(--e6));border-top:1px solid var(--line)}

/* ============================================================
   PASOS Y PREGUNTAS
   ============================================================ */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--e4)}
.paso{border-top:2.5px solid var(--ink);padding-top:var(--e3)}
.paso .n{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-tenue)}
.paso h4{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.025em;margin-top:9px}
.paso p{font-size:15px;color:var(--ink-soft);margin-top:8px}

.faq details{border-bottom:1px solid var(--line);padding:var(--e3) 0}
.faq summary{cursor:pointer;font-weight:500;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:var(--e3);align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--ink-soft);font-size:21px;flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:12px;color:var(--ink-soft);font-size:15.5px;max-width:68ch}

/* ============================================================
   PIE
   ============================================================ */
footer{border-top:1.5px solid var(--ink);padding-block:var(--e6) var(--e4);margin-top:var(--e5);background:var(--card)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--e4);margin-bottom:var(--e6)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-tenue);margin-bottom:var(--e2)}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot-grid a{text-decoration:none;font-size:14.5px;color:var(--ink-soft)}
.foot-grid a:hover{color:var(--ink)}
.foot-marca{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.035em;display:flex;align-items:center;gap:10px}
.foot-nota{font-size:14px;color:var(--ink-soft);margin-top:var(--e2);max-width:32ch}
.foot-base{display:flex;justify-content:space-between;gap:var(--e3);flex-wrap:wrap;padding-top:var(--e3);border-top:1px solid var(--line);font-size:13px;color:var(--ink-tenue)}

/* ============================================================
   MODAL DE COMPRA
   ============================================================ */
.velo{position:fixed;inset:0;z-index:60;display:none;background:color-mix(in srgb,var(--ink) 62%,transparent);padding:20px;overflow-y:auto}
.velo.abierto{display:flex;align-items:flex-start;justify-content:center}
.panel{
  background:var(--card);border:1.5px solid var(--ink);
  width:100%;max-width:460px;margin-block:auto;
  box-shadow:var(--sombra-alta);
  animation:subir .24s cubic-bezier(.16,1,.3,1);
}
@keyframes subir{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.panel-portada{border-bottom:1.5px solid var(--ink);line-height:0}
.panel-cuerpo{padding:var(--e4)}
.panel-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--e3);margin-bottom:var(--e3)}
.panel-cab .canal{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.panel-cab h3{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:-.035em;line-height:1.05;margin-top:6px}
.cerrar{background:none;border:none;cursor:pointer;font-size:27px;line-height:1;color:var(--ink-soft);padding:0 4px}
.cerrar:hover{color:var(--ink)}
.desglose{font-family:var(--mono);font-size:13px;border-block:1px solid var(--line-suave);padding:6px 0;margin-bottom:var(--e3)}
.desglose .fila{display:flex;justify-content:space-between;align-items:center;gap:var(--e3);padding:7px 0;color:var(--ink-soft)}
.desglose .fila.total{border-top:1px solid var(--line-suave);margin-top:3px;padding-top:11px;color:var(--ink)}
.desglose .fila.total b{font-size:20px;letter-spacing:-.03em}

/* nota del cargo bajo el precio, en tarjetas y ficha */
.nota-cargo{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-tenue);
  margin-top:5px;line-height:1.35;max-width:16ch;
}
.compra .nota-cargo{
  font-family:var(--body);font-size:12.5px;letter-spacing:0;
  text-transform:none;color:var(--ink-soft);
  margin-top:10px;max-width:none;line-height:1.45;
}
.compra .nota-cargo b{color:var(--ink);font-weight:500}
/* En la tarjeta, el precio y la nota comparten columna: que no
   empujen al botón «Ver curso» fuera de su lugar. */
.curso .pie{align-items:flex-start}
.ver{padding-top:6px}

.linea-precio{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:13.5px;padding:14px 0;border-block:1px solid var(--line-suave);margin-bottom:var(--e3)}
.linea-precio b{font-size:20px}
label{display:block;font-size:13px;font-weight:500;margin-bottom:7px}
input[type=email]{width:100%;font-family:var(--mono);font-size:14.5px;padding:13px;background:var(--paper);border:1.5px solid var(--ink);color:var(--ink)}
input[type=email]::placeholder{color:var(--ink-tenue)}
.ayuda{font-size:12.5px;color:var(--ink-soft);margin-top:9px;line-height:1.45}
.error{font-size:13px;color:var(--magenta);margin-top:11px;font-weight:500;display:none}
.error.visible{display:block}
#paypal-boton{margin-top:var(--e3);min-height:52px}
.cargando{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);text-align:center;padding:var(--e3) 0}

.pendiente{border:1.5px solid var(--yellow);background:#FDF6E3;padding:var(--e3)}
.pendiente p{font-size:14.5px;line-height:1.5;margin-bottom:10px}
.pendiente p:last-of-type{margin-bottom:0}
.pendiente a{color:var(--ink);font-weight:500}
.pendiente .orden{
  margin-top:var(--e3);padding-top:var(--e3);border-top:1px solid var(--yellow);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
.pendiente .orden span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.pendiente .orden b{font-family:var(--mono);font-size:15px;letter-spacing:.04em}

.comprobante{position:relative;border:1.5px dashed var(--ink);padding:var(--e4) var(--e3);background:var(--paper)}
.corte{position:absolute;width:11px;height:11px;border:1.5px solid var(--ink)}
.corte.tl{top:-1.5px;left:-1.5px;border-right:0;border-bottom:0}
.corte.tr{top:-1.5px;right:-1.5px;border-left:0;border-bottom:0}
.corte.bl{bottom:-1.5px;left:-1.5px;border-right:0;border-top:0}
.corte.br{bottom:-1.5px;right:-1.5px;border-left:0;border-top:0}
.comprobante .rotulo{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);text-align:center}
.codigo{font-family:var(--mono);font-weight:700;font-size:clamp(21px,5.4vw,29px);letter-spacing:.06em;text-align:center;margin-block:var(--e3);word-break:break-all}
.aviso-mail{font-size:13px;color:var(--ink-soft);margin-top:var(--e3);text-align:center;line-height:1.45}

/* ============================================================
   PREFERENCIAS DE ACCESIBILIDAD
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .capa-c{transform:translate(-2px,1px);opacity:.46}
  .capa-m{transform:translate(2px,-1px);opacity:.46}
}

@media print{
  .top,.velo,.barra-movil,.compra .btn{display:none}
  body{background:#fff}
  .modulo{break-inside:avoid}
}