@font-face{font-family:"Playfair Display";src:url("/assets/fonts/PlayfairDisplay-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("/assets/fonts/EBGaramond.ttf") format("truetype");font-weight:400;font-display:swap}

:root{
  --paper:#F8F8F6; --ink:#14181A; --muted:#4B5457; --rule:#D8DAD4; --accent:#0F5C55;
  --max:1120px; --col:64ch;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#0F1314; --ink:#EDEDE8; --muted:#B0B8B7; --rule:#283032; --accent:#6FC0B2}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"EB Garamond",Georgia,serif;font-size:19px;line-height:1.7;
  font-variant-ligatures:common-ligatures;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none;text-underline-offset:.18em}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.salto{position:absolute;left:-9999px}
.salto:focus{left:12px;top:12px;background:var(--paper);padding:8px 12px;z-index:9}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

header.nav{border-bottom:1px solid var(--rule)}
header.nav .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:24px;height:68px}
.marca{font-family:"Playfair Display",serif;font-size:21px;color:var(--ink);letter-spacing:.01em}
.marca span{color:var(--accent)}
nav.menu{display:flex;gap:26px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
nav.menu a{color:var(--muted)}
nav.menu a[aria-current]{color:var(--ink)}

.hero{padding:56px 0 48px;border-bottom:1px solid var(--rule)}
.hero .grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:end}
.hero h1{font-family:"Playfair Display",serif;font-weight:400;font-size:clamp(34px,4.6vw,58px);
  line-height:1.06;margin:0 0 18px;letter-spacing:-.01em}
.hero p.lead{font-size:20px;color:var(--muted);max-width:36ch;margin:0 0 26px}
.cta{display:inline-block;border:1.5px solid var(--ink);padding:12px 20px;
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink)}
.cta:hover{background:var(--ink);color:var(--paper);text-decoration:none}

.hoy{border-top:3px solid var(--accent);padding-top:16px}
.hoy .fecha{font-family:ui-sans-serif,system-ui,sans-serif;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.hoy h2{font-family:"Playfair Display",serif;font-weight:400;font-size:25px;line-height:1.22;margin:0 0 12px}
.hoy p{margin:0 0 14px;color:var(--muted);font-size:16.5px}
.hoy .nota{font-family:ui-sans-serif,system-ui,sans-serif;font-size:11.5px;letter-spacing:.04em;
  color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}

section{padding:52px 0}
h2.sec{font-family:"Playfair Display",serif;font-weight:400;font-size:clamp(24px,2.6vw,32px);
  margin:0 0 10px;line-height:1.2}
.regla{border-top:1px solid var(--rule)}
.aviso{color:var(--muted);font-size:16.5px;max-width:60ch;margin:0 0 26px}

.lista{list-style:none;margin:0;padding:0}
.lista li{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--rule)}
.lista li:first-child{border-top:1px solid var(--rule)}
.lista .f{font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.lista .t{font-size:20px}

article.lectura{max-width:var(--col);margin:0 auto;padding:48px 0 64px}
article.lectura .fecha{font-family:ui-sans-serif,system-ui,sans-serif;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
article.lectura h1{font-family:"Playfair Display",serif;font-weight:400;font-size:clamp(30px,4vw,45px);
  line-height:1.12;margin:12px 0 8px;letter-spacing:-.01em}
article.lectura .fuente{font-size:15px;color:var(--muted);margin:0 0 32px;
  padding-bottom:20px;border-bottom:1px solid var(--rule)}
article.lectura .cuerpo p{margin:0 0 1.1em;hyphens:auto;text-align:left}
article.lectura .cuerpo > p:first-child::first-letter{float:left;font-family:"Playfair Display",serif;
  font-size:3.4em;line-height:.82;padding:.06em .1em 0 0;color:var(--accent)}
article.lectura .ref{font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;
  color:var(--muted);vertical-align:super;margin-left:.35em;letter-spacing:.02em}
article.lectura .atrib{display:block;margin-top:26px;padding-top:14px;border-top:1px solid var(--rule);
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:12.5px;color:var(--muted);letter-spacing:.02em}

.cierre-libro{margin:46px 0 0;padding:24px 0 0;border-top:1px solid var(--rule)}
.cierre-libro .et{font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 15px}
.cierre-libro .fila{display:grid;grid-template-columns:86px 1fr;gap:20px;align-items:center}
.cierre-libro .fila.sin-portada{grid-template-columns:1fr}
.cierre-libro img{width:86px;height:auto;display:block;border:1px solid var(--rule)}
.cierre-libro .mas{display:block;margin-top:10px;font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:11.5px;letter-spacing:.05em;color:var(--muted)}
.cierre-libro .tit{font-family:"Playfair Display",serif;font-size:19px;line-height:1.26;
  color:var(--ink);display:block;margin-bottom:5px}
.cierre-libro .porque{font-size:15px;color:var(--muted);margin:0 0 9px;line-height:1.45}
.cierre-libro .enlace{font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px;
  letter-spacing:.07em;text-transform:uppercase}

.pasos{display:flex;justify-content:space-between;gap:24px;margin-top:44px;padding-top:22px;
  border-top:1px solid var(--rule);font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px}
.pasos a{color:var(--muted);max-width:46%}
.pasos .dir{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:4px}

.rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px}
.libro{display:block}
.libro .marco{aspect-ratio:2/3;overflow:hidden;border:1px solid var(--rule);background:var(--rule)}
.libro img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.libro .tt{font-size:14.5px;line-height:1.32;margin-top:9px;color:var(--ink)}
.libro:hover .tt{color:var(--accent)}

footer{border-top:1px solid var(--rule);padding:34px 0 48px;color:var(--muted);font-size:15px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:var(--muted)}

@media (max-width:1020px){.rejilla{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){
  .rejilla{grid-template-columns:repeat(2,1fr);gap:20px 16px}
  .hero .grid{grid-template-columns:1fr;gap:32px}
  .hero{padding:34px 0}
  header.nav .wrap{height:auto;flex-direction:column;align-items:flex-start;
    gap:5px;padding-top:11px;padding-bottom:11px}
  nav.menu{display:flex;gap:17px;font-size:11px;letter-spacing:.05em}
  .lista li{grid-template-columns:1fr;gap:3px;padding:12px 0}
  body{font-size:18px}
  article.lectura{padding:30px 0 44px}
  .pasos a{max-width:48%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}