/* =========================================================
   zodiakohz · hoja de estilo única
   Tokens de 06 (Creative Director). No editar a mano fuera
   del bloque :root salvo que cambie el sistema visual.
   ========================================================= */

:root{
  /* Neutros · papel de almanaque */
  --paper:#F5F2EA; --surface:#FFFDF7; --sunk:#EBE7DC;
  --ink:#221F2B; --ink-2:#57536A; --ink-3:#8C879C;
  --rule:#DDD8C9; --rule-soft:#ECE8DD;
  /* Acento único · latón */
  --brass:#8A6D22; --brass-soft:#EFE7CE; --brass-ink:#F1EFE8;
  /* Etiqueta de motor · añil (solo «Curso») */
  --indigo:#2F4E8C; --indigo-soft:#DEE4F1;
  /* Semánticos */
  --crit:#9C3826; --crit-soft:#F4DFD9;
  --warn:#8A5A16; --warn-soft:#F3E8D3;
  --ok:#2E6650; --ok-soft:#DCEBE3;
  /* Tipografía */
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Medidas */
  --measure:34rem; --tap:44px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1A1724; --surface:#241F31; --sunk:#151221;
    --ink:#F0ECE3; --ink-2:#B3ADC0; --ink-3:#847E96;
    --rule:#332C44; --rule-soft:#282235;
    --brass:#D4AE63; --brass-soft:#332A17; --brass-ink:#1A1724;
    --indigo:#9DB2E4; --indigo-soft:#1F2740;
    --crit:#E59180; --crit-soft:#3A211D;
    --warn:#D6A455; --warn-soft:#312619;
    --ok:#6FBC9C; --ok-soft:#17332C;
  }
}
:root[data-theme="dark"]{
  --paper:#1A1724; --surface:#241F31; --sunk:#151221;
  --ink:#F0ECE3; --ink-2:#B3ADC0; --ink-3:#847E96;
  --rule:#332C44; --rule-soft:#282235;
  --brass:#D4AE63; --brass-soft:#332A17; --brass-ink:#1A1724;
  --indigo:#9DB2E4; --indigo-soft:#1F2740;
  --crit:#E59180; --crit-soft:#3A211D;
  --warn:#D6A455; --warn-soft:#312619;
  --ok:#6FBC9C; --ok-soft:#17332C;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brass);text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--serif);margin:0;font-weight:600;line-height:1.16;
 letter-spacing:-.016em;text-wrap:balance}
p{margin:0}
code{font-family:var(--mono);font-size:.86em}

.skip{position:absolute;left:-9999px;top:0;background:var(--brass);color:var(--brass-ink);
 padding:12px 18px;z-index:100;font-family:var(--sans);font-weight:600}
.skip:focus{left:8px;top:8px}

/* ---------- cabecera ---------- */
.bar{border-bottom:1px solid var(--rule);background:var(--paper);position:relative;z-index:10}
.bar-in{max-width:62rem;margin-inline:auto;padding:12px 20px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
 min-height:var(--tap)}
.brand svg{width:26px;height:26px;flex:none;color:var(--brass)}
.brand span{font-family:var(--serif);font-size:1.14rem;font-weight:600;letter-spacing:-.012em}
.brand span i{color:var(--brass);font-style:normal}
.bar nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.bar nav a{font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--ink-2);
 text-decoration:none;padding:11px 12px;min-height:var(--tap);display:flex;align-items:center;
 border-radius:2px}
.bar nav a:hover{color:var(--ink);background:var(--sunk)}
.tgl{background:none;border:1px solid var(--rule);border-radius:2px;color:var(--ink-2);
 width:var(--tap);height:var(--tap);cursor:pointer;display:flex;align-items:center;
 justify-content:center;flex:none;margin-left:4px}
.tgl:hover{border-color:var(--brass);color:var(--brass)}
.tgl svg{width:17px;height:17px}
@media (max-width:640px){.bar nav a{display:none} .bar nav .tgl{display:flex}}

/* ---------- cabecera con imagen ---------- */
.banner{display:grid;margin:0 -20px;border-bottom:1px solid var(--rule);
 background:var(--sunk);overflow:hidden}
/* imagen y velo comparten celda: si el texto crece, el contenedor crece con él */
.banner img,.banner .veil{grid-area:1/1}
.banner img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/1}
.banner.tall img{aspect-ratio:16/9}
.banner .veil{display:flex;align-items:flex-end;
 background:linear-gradient(90deg,rgba(22,24,34,.93) 0%,rgba(22,24,34,.82) 44%,rgba(22,24,34,.10) 82%)}
.banner .veil > div{max-width:62rem;width:100%;margin-inline:auto;padding:56px 20px 26px}
.banner h1{color:#EDEAE2;max-width:20ch}
.banner .lede{color:#CFCDD9;max-width:44ch;margin-top:12px}
@media (max-width:640px){
  .banner img,.banner.tall img{aspect-ratio:1/1}
  .banner .veil{background:linear-gradient(0deg,rgba(22,24,34,.96) 0%,rgba(22,24,34,.86) 48%,rgba(22,24,34,.42) 100%)}
  .banner .veil > div{padding:80px 20px 24px}
}

/* ---------- estructura ---------- */
main{max-width:62rem;margin-inline:auto;padding:0 20px 80px}
.crumb{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
 color:var(--ink-3);padding:20px 0 0}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--brass)}
.crumb span{margin:0 7px;opacity:.5}

.head{padding:22px 0 6px;max-width:var(--measure)}
h1{font-size:clamp(1.95rem,5.4vw,2.85rem);font-weight:700;line-height:1.1;letter-spacing:-.026em}
.lede{font-family:var(--serif);font-size:1.12rem;color:var(--ink-2);margin-top:15px;line-height:1.58}

.prose{max-width:var(--measure)}
.prose h2{font-size:1.42rem;margin:38px 0 0}
.prose h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;margin:28px 0 0;
 letter-spacing:0;line-height:1.4}
.prose p{margin-top:14px;color:var(--ink-2)}
.prose p strong,.prose li strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:14px 0 0;padding-left:21px;color:var(--ink-2)}
.prose li{margin-top:8px}

/* ---------- aviso de afiliación ---------- */
.disclosure{border:1px dashed var(--rule);border-radius:3px;background:var(--surface);
 padding:14px 16px;margin-top:24px;font-family:var(--sans);font-size:.88rem;color:var(--ink-2);
 line-height:1.58;max-width:var(--measure)}
.disclosure b{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;
 text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;font-weight:500}

/* ---------- aviso honesto ---------- */
.honest{border-left:3px solid var(--crit);background:var(--crit-soft);border-radius:0 3px 3px 0;
 padding:15px 17px;margin-top:22px;font-family:var(--sans);font-size:.92rem;color:var(--ink-2);
 line-height:1.6;max-width:var(--measure);display:flex;gap:12px}
.honest svg{width:19px;height:19px;flex:none;color:var(--crit);margin-top:2px}
.honest strong{color:var(--ink);font-weight:600}

/* ---------- índice de opciones (bloque 04 de 07) ---------- */
.jump{border:1px solid var(--rule);border-radius:3px;background:var(--surface);margin-top:26px;
 max-width:var(--measure);overflow:hidden}
.jump-h{background:var(--sunk);padding:11px 16px;font-family:var(--mono);font-size:.6rem;
 letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.jump ol{margin:0;padding:0;list-style:none;counter-reset:j}
.jump li{counter-increment:j;border-top:1px solid var(--rule-soft)}
.jump a{display:flex;gap:12px;align-items:baseline;padding:13px 16px;min-height:var(--tap);
 text-decoration:none;color:var(--ink);font-family:var(--sans);font-size:.9rem;font-weight:500}
.jump a::before{content:counter(j);font-family:var(--mono);font-size:.7rem;color:var(--brass);
 flex:none;font-weight:600}
.jump a em{font-style:normal;color:var(--ink-3);font-weight:400;font-size:.84rem}
.jump a:hover{background:var(--sunk)}

/* ---------- ficha de producto · lámina enmarcada ---------- */
.item{border:1px solid var(--rule);background:var(--surface);margin-top:30px;
 max-width:var(--measure);scroll-margin-top:20px;position:relative;
 box-shadow:0 1px 0 rgba(22,24,34,.04)}
:root[data-theme="dark"] .item,
:root:not([data-theme="light"]) .item{box-shadow:none}

/* filete interior: el marco de una lámina impresa */
.item::after{content:"";position:absolute;inset:7px;border:1px solid var(--rule-soft);
 pointer-events:none}

/* cartela superior · número de lámina */
.plate{display:flex;align-items:center;gap:10px;padding:14px 20px 0;position:relative;z-index:1}
.plate .num{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.16em;
 text-transform:uppercase;color:var(--brass)}
.plate .line{flex:1;height:1px;background:var(--rule)}

/* zona de imagen enmarcada, con marcas de esquina */
.item-media{margin:12px 20px 0;position:relative;background:var(--sunk);
 aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
 text-align:center;padding:22px;border:1px solid var(--rule-soft);z-index:1}
.item-media::before,.item-media::after{content:"";position:absolute;width:13px;height:13px;
 border:0 solid var(--brass);opacity:.75;pointer-events:none}
.item-media::before{top:-1px;left:-1px;border-top-width:1.5px;border-left-width:1.5px}
.item-media::after{bottom:-1px;right:-1px;border-bottom-width:1.5px;border-right-width:1.5px}
.item-media .ph{font-family:var(--mono);font-size:.57rem;letter-spacing:.12em;
 text-transform:uppercase;color:var(--ink-3);line-height:1.75;display:flex;
 flex-direction:column;align-items:center;gap:13px}
.item-media .ph .mark{width:44px;height:44px;opacity:.5}
.item-media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12px}
/* dos imágenes: producto sobre blanco + ambiente */
.item-media.doble{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-soft);padding:0}
.item-media.doble > img{position:static;inset:auto;width:100%;height:100%;object-fit:cover;padding:0;
 background:var(--surface)}
.item-media.doble > img:first-child{object-fit:contain;padding:14px}

.item-b{padding:20px 20px 22px;position:relative;z-index:1}
.item h3{font-family:var(--sans);font-size:1.08rem;font-weight:600;margin:0;
 letter-spacing:-.005em;line-height:1.36}
.item h3::after{content:"";display:block;width:34px;height:2px;background:var(--brass);
 margin-top:11px}
.item .facts{font-family:var(--mono);font-size:.71rem;color:var(--ink-3);margin-top:11px;
 font-variant-numeric:tabular-nums;line-height:1.65}
.item .badge{display:inline-block;background:transparent;color:var(--brass);
 box-shadow:inset 0 0 0 1px var(--brass);font-family:var(--mono);font-size:.55rem;
 font-weight:600;letter-spacing:.11em;text-transform:uppercase;padding:3px 7px;
 margin-left:7px;vertical-align:1px}
.item p{margin-top:14px;color:var(--ink-2);font-family:var(--sans);font-size:.93rem;
 line-height:1.64}
.item p strong{color:var(--ink);font-weight:600}
.say{border-left:2px solid var(--brass);padding:3px 0 3px 14px;margin-top:16px}
.say b{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;
 text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;font-weight:500}
.say p{margin-top:0;font-family:var(--serif);font-size:1.02rem;color:var(--ink);line-height:1.5}

/* especificaciones */
.spec{margin-top:18px;border:1px solid var(--rule-soft);overflow:hidden}
.spec-h{background:var(--sunk);padding:8px 13px;font-family:var(--mono);font-size:.57rem;
 letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.spec dl{margin:0;display:grid;grid-template-columns:9.5rem 1fr}
.spec dt,.spec dd{margin:0;padding:8px 13px;font-size:.85rem;border-top:1px solid var(--rule-soft);
 font-family:var(--sans)}
.spec dt{color:var(--ink-3);font-family:var(--mono);font-size:.7rem}
.spec dd{color:var(--ink)}
@media (max-width:520px){.spec dl{grid-template-columns:1fr}
 .spec dd{padding-top:0;border-top:none}}

/* ---------- CTA ---------- */
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
 min-height:var(--tap);margin-top:19px;letter-spacing:.01em;background:var(--brass);color:var(--brass-ink);
 font-family:var(--sans);font-size:.96rem;font-weight:600;text-decoration:none;
 border:none;border-radius:2px;padding:13px 18px;text-align:center;cursor:pointer}
.cta:hover{filter:brightness(1.09)}
.cta svg{width:15px;height:15px;flex:none}
.cta-note{font-family:var(--mono);font-size:.62rem;color:var(--ink-3);text-align:center;
 margin-top:8px;letter-spacing:.04em}
.cta.ghost{background:transparent;color:var(--brass);box-shadow:inset 0 0 0 1.5px var(--brass)}

/* ---------- FAQ ---------- */
.faq{margin-top:34px;max-width:var(--measure);border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq summary{padding:15px 0;cursor:pointer;font-family:var(--sans);font-size:.96rem;
 font-weight:600;color:var(--ink);list-style:none;display:flex;gap:12px;align-items:flex-start;
 min-height:var(--tap)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--brass);font-family:var(--mono);
 font-size:1.1rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 16px;color:var(--ink-2);font-family:var(--sans);font-size:.92rem;
 line-height:1.62;max-width:52ch}

/* ---------- hermanas ---------- */
.siblings{margin-top:40px;max-width:var(--measure);border-top:1px solid var(--rule);padding-top:20px}
.siblings b{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
 color:var(--ink-3);font-weight:500}
.siblings ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.siblings a{display:block;padding:12px 14px;min-height:var(--tap);background:var(--surface);
 border:1px solid var(--rule-soft);border-radius:2px;text-decoration:none;color:var(--ink);
 font-family:var(--sans);font-size:.9rem;font-weight:500}
.siblings a:hover{border-color:var(--brass)}
.siblings a em{display:block;font-style:normal;font-weight:400;font-size:.8rem;color:var(--ink-3);
 margin-top:3px}

/* ---------- pie ---------- */
footer{border-top:1px solid var(--rule);background:var(--surface);margin-top:60px}
.foot{max-width:62rem;margin-inline:auto;padding:32px 20px 44px;font-family:var(--sans);
 font-size:.83rem;color:var(--ink-3);line-height:1.65}
.foot nav{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.foot nav a{color:var(--ink-2);text-decoration:none;font-weight:500;padding:6px 0}
.foot nav a:hover{color:var(--brass)}
.foot p{max-width:70ch;margin-top:10px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.bar,.cta,.tgl{display:none}}

/* --- cabeceras de silo generadas + glifo en cabecera + imagen de curso --- */
.head .glifo{width:44px;height:44px;opacity:.85;margin-bottom:12px;display:block}
.item-media.cuadrada{aspect-ratio:1/1;padding:0}
.item-media.cuadrada > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:0}
.banner img{background:var(--sunk)}