@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/atkinson-hyperlegible-next-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:800;font-style:normal;font-display:swap;src:url(fonts/atkinson-hyperlegible-next-latin-800-normal.woff2) format("woff2")}

:root{
  --marino:#00314a; --marino-2:#00263a; --marino-3:#0a4260;
  --oro:#e8c068; --oro-osc:#c99a2e; --azul:#4cc3f5;
  --texto:#f2f6f8; --suave:#c3d3dc; --linea:rgba(232,192,104,.35);
  --crema:#fbf1e1;
  --radio:1rem;
  --btn-bg:#e8c068; --btn-fg:#00263a; --btn-hover-bg:#fff; --btn-hover-fg:#00263a;
  --hover:#fff; --cab-bg:rgba(0,38,58,.94); --chip:transparent; --foco:#4cc3f5;
  --hero-1:rgba(232,168,70,.28); --hero-2:rgba(76,195,245,.14);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--marino);color:var(--texto);font:400 1.125rem/1.65 "Atkinson Hyperlegible Next",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--oro);text-underline-offset:.2em}
a:hover{color:var(--hover)}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:.25rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:1rem;top:-4rem;background:var(--btn-bg);color:var(--btn-fg);padding:.75rem 1.25rem;border-radius:.5rem;font-weight:700;z-index:20;transition:top .15s}
.saltar:focus{top:1rem}
.caja{width:min(100% - 2.5rem,72rem);margin-inline:auto}
.caja--estrecha{max-width:46rem}

/* Cabecera */
.cabecera{position:sticky;top:0;z-index:10;background:var(--cab-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.cabecera__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.6rem}
.marca{display:block;background:var(--chip);border-radius:.6rem;padding:.25rem .6rem}
.marca img{height:2.4rem;width:auto}
.cabecera nav>ul{display:flex;gap:.25rem;margin:0;padding:0;list-style:none}
.cabecera nav a{display:inline-block;padding:.5rem .85rem;color:var(--texto);text-decoration:none;font-weight:700;font-size:1rem;border-radius:.5rem}
.cabecera nav a:hover{background:var(--marino-2);color:var(--oro)}

/* Tipografía común */
.eyebrow{margin:0 0 .6rem;color:var(--oro);font-weight:700;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase}
h1,h2,h3{font-weight:800;line-height:1.15;margin:0 0 .75rem;text-wrap:balance}
h2{font-size:clamp(1.8rem,3.2vw,2.5rem)}
h3{font-size:1.6rem}
.intro{max-width:44rem;color:var(--suave);font-size:1.2rem}

/* Botones */
.btn{display:inline-block;padding:.85rem 1.5rem;border-radius:999px;font-weight:700;font-size:1.05rem;text-decoration:none;border:2px solid var(--oro);cursor:pointer;font-family:inherit;line-height:1.2}
.btn--oro{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.btn--oro:hover{background:var(--btn-hover-bg);border-color:var(--btn-hover-bg);color:var(--btn-hover-fg)}
.btn--linea{background:transparent;color:var(--oro);border-color:var(--oro)}
.btn--linea:hover{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}

/* Hero */
.hero{background:
  radial-gradient(60rem 28rem at 85% 105%,var(--hero-1),transparent 65%),
  radial-gradient(40rem 30rem at 10% -10%,var(--hero-2),transparent 70%),
  var(--marino);
  padding-block:clamp(2.5rem,6vw,5rem)}
.hero__in{display:grid;gap:2.5rem;align-items:center;grid-template-columns:1fr}
.hero h1{font-size:clamp(2.4rem,6vw,4.2rem);margin-bottom:1rem}
.hero h1 span{display:block;color:var(--oro)}
.hero__sub{font-size:1.35rem;color:var(--suave);margin:0 0 1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--linea);max-width:30rem}
.autor{margin:0 0 1.25rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:1rem}
.hero__lead{max-width:34rem;margin:0 0 1.75rem}
.hero__portada{margin:0;justify-self:center;width:min(80%,26rem)}
.hero__portada img{border-radius:.35rem;box-shadow:0 1.5rem 3.5rem rgba(0,0,0,.55),0 0 0 1px rgba(232,192,104,.25)}

/* Secciones */
.seccion{padding-block:clamp(3rem,7vw,5.5rem)}
.seccion--piezas{background:var(--marino-2);border-block:1px solid var(--linea)}
.formatos{display:grid;gap:1.25rem;margin:2.25rem 0 0;padding:0;list-style:none;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.formatos li{background:var(--marino-3);border:1px solid var(--linea);border-radius:var(--radio);padding:1.5rem 1.5rem 1.25rem;border-top:4px solid var(--oro)}
.formatos li:nth-child(2){border-top-color:var(--azul)}
.formatos li:nth-child(3){border-top-color:#f08a24}
.formatos h3{font-size:1.45rem;margin-bottom:.4rem}
.formatos p{margin:0;color:var(--suave)}

/* Pieza */
.pieza{margin-top:3rem;display:grid;gap:1.75rem;grid-template-columns:1fr;align-items:start}
.pieza + .pieza{margin-top:4.5rem;padding-top:3.5rem;border-top:1px solid var(--linea)}
.pieza__imagen{margin:0}
.pieza__imagen img{width:100%;border-radius:var(--radio);background:var(--crema);box-shadow:0 .75rem 2rem rgba(0,0,0,.3),0 0 0 1px var(--linea)}
.pieza__imagen figcaption,.nota{margin-top:.6rem;font-size:.95rem;color:var(--suave)}
.pieza__sub{color:var(--oro);font-size:1.2rem;font-weight:700;margin:0 0 1rem}
.pieza__texto p{margin:0 0 1rem}
.pieza__texto .eyebrow{margin-bottom:.4rem}
.audio{margin-top:1.75rem;padding:1.25rem 1.25rem 1rem;background:var(--marino-3);border:1px solid var(--linea);border-radius:var(--radio)}
.audio__titulo{margin:0 0 .85rem!important;font-weight:800}
.audio__acciones{display:flex;flex-wrap:wrap;gap:.75rem}
.audio__marco{margin-top:.25rem}
.audio__marco iframe{border:0;border-radius:.75rem;display:block}
.audio .nota{margin:.9rem 0 0}

/* Pie */
.pie{background:var(--marino-2);border-top:1px solid var(--linea);padding-block:2.5rem;font-size:1rem;color:var(--suave)}
.pie__in{display:grid;gap:1.25rem}
.pie__logo{height:3.2rem;width:auto;background:var(--chip);border-radius:.6rem;padding:.3rem .7rem;box-sizing:content-box}
.pie address{font-style:normal;line-height:1.7}
.pie strong{color:var(--texto)}
.pie__legal{margin:0;font-size:.95rem}

@media (min-width:62rem){
  .hero__in{grid-template-columns:1.15fr .85fr}
  .pieza{grid-template-columns:1.25fr 1fr;gap:3rem}
  .pie__in{grid-template-columns:auto 1fr auto;align-items:center;gap:2.5rem}
}
@media (max-width:40rem){
  .marca img{height:2.3rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.saltar{transition:none}}
@media (forced-colors:active){.btn{border:2px solid ButtonText}}

/* Capítulos desplegables */
.capitulo{margin-top:1.25rem;background:var(--marino);border:1px solid var(--linea);border-radius:var(--radio)}
.capitulo + .capitulo{margin-top:1rem}
.capitulo summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;column-gap:1rem;align-items:center;padding:1.25rem 1.5rem;border-radius:var(--radio)}
.capitulo summary::-webkit-details-marker{display:none}
.capitulo summary::after{content:"";grid-column:2;grid-row:1 / span 3;width:.8rem;height:.8rem;border-right:3px solid var(--oro);border-bottom:3px solid var(--oro);transform:rotate(45deg);transition:transform .2s;margin-right:.4rem}
.capitulo[open] summary::after{transform:rotate(-135deg)}
.capitulo summary:hover{background:var(--marino-3)}
.capitulo summary .eyebrow{margin:0 0 .2rem}
.capitulo summary h3{margin:0;font-size:1.5rem}
.capitulo__sub{color:var(--suave)}
.capitulo .pieza{margin:0;padding:0 1.5rem 1.75rem}
.acciones{display:flex;flex-wrap:wrap;gap:.75rem}
.comprar{margin:1.25rem 0 0!important;font-size:1rem;color:var(--suave)}
@media (prefers-reduced-motion:reduce){.capitulo summary::after{transition:none}}

/* Modo claro (preferencia del sistema o elección de la persona usuaria) */
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --marino:#fbf1e1; --marino-2:#f1e4cb; --marino-3:#ffffff;
  --oro:#7a4f00; --azul:#0b6fa3; --texto:#00314a; --suave:#34556a; --linea:rgba(0,49,74,.28);
  --btn-bg:#00314a; --btn-fg:#fbf1e1; --btn-hover-bg:#7a4f00; --btn-hover-fg:#ffffff;
  --hover:#00314a; --cab-bg:rgba(251,241,225,.94); --chip:#00314a; --foco:#0b6fa3;
  --hero-1:rgba(232,168,70,.35); --hero-2:rgba(76,195,245,.18);
  color-scheme:light;
}}
:root[data-theme="light"]{
  --marino:#fbf1e1; --marino-2:#f1e4cb; --marino-3:#ffffff;
  --oro:#7a4f00; --azul:#0b6fa3; --texto:#00314a; --suave:#34556a; --linea:rgba(0,49,74,.28);
  --btn-bg:#00314a; --btn-fg:#fbf1e1; --btn-hover-bg:#7a4f00; --btn-hover-fg:#ffffff;
  --hover:#00314a; --cab-bg:rgba(251,241,225,.94); --chip:#00314a; --foco:#0b6fa3;
  --hero-1:rgba(232,168,70,.35); --hero-2:rgba(76,195,245,.18);
  color-scheme:light;
}

/* Botón de tema */
.tema{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border:2px solid var(--oro);border-radius:999px;background:transparent;color:var(--oro);font-family:inherit;font-size:.95rem;font-weight:700;line-height:1.2;cursor:pointer}
.tema:hover{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.tema[aria-pressed="true"] svg{fill:currentColor}
.cabecera__in nav{margin-left:auto}

/* Pie: enlaces legales */
.pie__legal-nav ul{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin:0;padding:0;list-style:none}
.pie__legal-nav a{display:inline-block;padding:.35rem 0}
@media (min-width:62rem){.pie__in{grid-template-columns:auto 1fr;grid-template-areas:"logo dir" "nav nav" "leg leg"}.pie__logo{grid-area:logo}.pie address{grid-area:dir}.pie__legal-nav{grid-area:nav}.pie__legal{grid-area:leg}}

/* Páginas legales */
.legal{padding-block:clamp(2.5rem,6vw,4.5rem)}
.legal h1{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:.5rem}
.legal h2{font-size:1.5rem;margin-top:2.25rem}
.legal h3{font-size:1.2rem;margin-top:1.5rem}
.legal p,.legal li,.legal dd{max-width:44rem}
.legal li{margin-bottom:.5rem}
.actualizacion{color:var(--suave);margin:0 0 1.5rem}
.destacado{padding:1rem 1.25rem;background:var(--marino-3);border:1px solid var(--linea);border-left:5px solid var(--oro);border-radius:.75rem}
.datos{display:grid;grid-template-columns:minmax(10rem,14rem) 1fr;gap:.5rem 1.25rem;margin:1rem 0;padding:1.25rem;background:var(--marino-3);border:1px solid var(--linea);border-radius:var(--radio)}
.datos dt{font-weight:800}
.datos dd{margin:0}
.legal table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:1rem}
.legal caption{text-align:left;font-weight:800;padding-bottom:.5rem}
.legal th,.legal td{border:1px solid var(--linea);padding:.65rem .8rem;text-align:left;vertical-align:top}
.legal thead th{background:var(--marino-3)}
.volver{margin-top:3rem}
@media (max-width:40rem){.datos{grid-template-columns:1fr}.tema span{display:none}.tema{padding:.55rem}}
@media (max-width:40rem){.cabecera nav>ul>li:not(.menu){display:none}}

/* Desplegable de capítulos */
.menu{position:relative}
.menu__btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border:0;border-radius:.5rem;background:transparent;color:var(--texto);font-family:inherit;font-size:1rem;font-weight:700;line-height:1.2;cursor:pointer}
.menu__btn:hover{background:var(--marino-2);color:var(--oro)}
.menu__btn svg{transition:transform .2s}
.menu__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu__btn[aria-expanded="true"]{background:var(--marino-2);color:var(--oro)}
.menu__lista{position:absolute;left:0;top:calc(100% + .5rem);z-index:30;width:min(24rem,90vw);margin:0;padding:.5rem;list-style:none;background:var(--marino-3);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:0 1rem 2.5rem rgba(0,0,0,.4);max-height:calc(100vh - 6.5rem);max-height:calc(100dvh - 6.5rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--oro) transparent}
.menu__lista[hidden]{display:none}
.menu__lista a{display:block;padding:.65rem .85rem;border-radius:.6rem;color:var(--texto);text-decoration:none}
.menu__lista a:hover{background:var(--marino-2);color:var(--oro)}
.menu__et{display:block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--oro)}
.menu__ti{display:block;font-weight:700;line-height:1.3}
.menu__lista li:first-child a .menu__ti{font-weight:800}
@media (max-width:40rem){
  .menu{position:static}
  .menu__lista{position:fixed;left:1rem;right:1rem;top:4.2rem;width:auto;max-height:calc(100vh - 5.5rem);max-height:calc(100dvh - 5.5rem);overflow-y:auto}
}
@media (prefers-reduced-motion:reduce){.menu__btn svg{transition:none}}