@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-600-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-800-normal.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* Paleta tomada de la portada: tinta de imprenta, pan de oro sobre planos náuticos y la banda negra que tapa los ojos. */
:root{
 --tinta:#14100b;--tinta-2:#211a12;--hueso:#ece3cf;--hueso-2:#cdbf9f;
 --oro:#8f6a2c;--oro-c:#c9a05a;--azul:#2b4864;--ceniza:#5b574c;--papel:#e6e3d8;--filete:#c6c1ae;--barra:#000;
 --sombra-portada:0 2px 0 #3a2f20,0 30px 70px -20px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"EB Garamond",Garamond,Georgia,serif;font-size:1.25rem;line-height:1.6;color:var(--tinta);background:var(--papel);font-variant-numeric:oldstyle-nums}
a{color:inherit;text-decoration-color:var(--oro);text-underline-offset:.18em;text-decoration-thickness:.07em}
a:hover{text-decoration-color:currentColor}
a:focus-visible{outline:3px solid var(--oro-c);outline-offset:3px}

/* cabecera: se queda quieta al pasar de página */
.top{view-transition-name:cabecera;display:flex;justify-content:space-between;align-items:center;gap:.6rem 1rem;flex-wrap:wrap;padding:.85rem clamp(1rem,4vw,3rem);background:var(--tinta);color:var(--hueso);border-bottom:1px solid #3a2f20}
.top a{text-decoration:none}
.top nav{display:flex;align-items:center;gap:1.4rem;font-size:1.05rem}
.top nav a:hover{text-decoration:underline;text-decoration-color:var(--oro-c)}
.top .marca{font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--oro-c)}
.top .ig{display:inline-flex;color:var(--oro-c)}.top .ig:hover{color:var(--hueso)}

/* banda negra: el nombre olvidado */
.tachado,.idx .nombre{position:relative;display:inline-block}
.tachado::after,.idx .nombre::after{content:"";position:absolute;left:-.08em;right:-.08em;top:.18em;bottom:.12em;background:var(--barra);transform:scaleX(0);transform-origin:right}

/* portada */
.hero{position:relative;overflow:hidden;background:var(--tinta);color:var(--hueso);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding:clamp(2.5rem,7vw,6rem) clamp(1.25rem,6vw,6rem)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 75% 45%,rgba(201,160,90,.16),transparent 70%);pointer-events:none}
.hero-t{position:relative}
.hero h1{margin:0 0 1.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(2.4rem,6.4vw,5.6rem);line-height:.98;color:#e6cf9c;text-wrap:balance}
.hero h1 .a-pesar{display:block;text-transform:none;font-style:italic;font-weight:400;letter-spacing:0;font-size:.62em;line-height:1.25;color:var(--hueso)}
.lema{font-size:clamp(1.2rem,2.1vw,1.5rem);line-height:1.45;max-width:27em;margin:0;color:#d6cab0}
.hero-i{position:relative;width:100%;height:auto;max-width:440px;justify-self:center;box-shadow:var(--sombra-portada);transform:rotate(1.2deg)}
.botones{display:flex;gap:.8rem;flex-wrap:wrap;margin:2rem 0 0}
.b{display:inline-block;padding:.7rem 1.35rem;border:1.5px solid var(--hueso-2);text-decoration:none;font-size:1.1rem;line-height:1.2}
.b:hover{background:rgba(201,160,90,.14)}
.b-oro{background:var(--oro-c);border-color:var(--oro-c);color:var(--tinta);font-weight:600}
.b-oro:hover{background:#dcb672}

.gancho-i{max-width:40rem;margin:0 auto;padding:clamp(3rem,8vw,6rem) 1.25rem 0;font-size:clamp(1.4rem,2.8vw,1.95rem);line-height:1.42}
.gancho-i p:last-child{margin-top:1.6rem;font-size:1.15em;font-weight:600}

/* índice: cada nombre aparece tapado y se destapa al llegar a él */
.indice{max-width:54rem;margin:0 auto;padding:clamp(3rem,7vw,5rem) 1.25rem}
.indice h2,.descarga h2{font-size:clamp(2rem,4vw,2.6rem);font-weight:500;margin:0 0 .5rem;line-height:1.1}
.descarga h2{margin:0 auto .5rem}
.intro{color:var(--ceniza);margin:0 0 2.5rem;max-width:34em}
.bloque{margin-top:3.5rem}
.bloque h3{font-size:clamp(1.45rem,3vw,1.85rem);font-weight:600;margin:0;line-height:1.2}
.bloque h3 a{text-decoration:none}.bloque h3 a:hover{text-decoration:underline}
.era{font-style:italic;color:var(--oro);margin:.1rem 0 1rem}
.idx{list-style:none;margin:0;padding:0;border-top:2px solid var(--tinta)}
.idx li{border-bottom:1px solid var(--filete)}
.idx a{display:grid;grid-template-columns:3.2rem 1fr;grid-template-areas:"n nombre" "n gancho";column-gap:.6rem;padding:1.05rem .4rem 1.1rem 0;text-decoration:none}
.idx a:hover{background:rgba(143,106,44,.07)}
.idx .n{grid-area:n;font-size:2rem;color:var(--oro);line-height:1}
.idx .nombre{grid-area:nombre;justify-self:start;font-weight:800;font-size:clamp(1.45rem,3vw,1.85rem);line-height:1.15;padding:0 .05em}
.idx .gancho{grid-area:gancho;font-style:italic;font-size:1.28rem;line-height:1.35;color:#38332a;margin-top:.3rem}
.aparte{margin-top:3rem;color:var(--ceniza);display:flex;flex-wrap:wrap;gap:.4rem 2rem}

.descarga{background:var(--tinta);color:var(--hueso);padding:clamp(3rem,7vw,5rem) 1.25rem}
.descarga>*{max-width:54rem;margin-left:auto;margin-right:auto}
.descarga ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:1rem 2.5rem}
.descarga li{font-size:1.6rem}
.descarga li a{color:var(--oro-c);font-weight:600}
.descarga li span{display:block;font-size:1.05rem;color:#bfb298}
.lic{font-size:1rem;color:#bfb298;margin-top:1.6rem}

/* lectura */
.lee main{padding:clamp(2.5rem,6vw,5rem) 1.25rem}
.lee article{max-width:34em;margin:0 auto;font-size:clamp(1.25rem,1.1rem + .6vw,1.45rem)}
.cap-n{margin:0;color:var(--oro);font-style:italic;font-size:1.3rem}
.lee h1{font-size:clamp(2.3rem,6vw,3.8rem);line-height:1.02;font-weight:600;text-transform:uppercase;letter-spacing:.025em;margin:.3rem 0 .7rem;text-wrap:balance}
.sub{font-style:italic;font-size:clamp(1.3rem,2.4vw,1.55rem);color:var(--ceniza);margin:0 0 2.6rem;line-height:1.35;padding-bottom:1.8rem;border-bottom:1px solid var(--filete)}
.lee article p{margin:0 0 1em;hyphens:auto}
.lee .sub+p::first-letter,.lee .cabeza+p::first-letter{float:left;font-size:4.1em;line-height:.82;padding:.06em .08em 0 0;font-weight:500;color:var(--oro)}
.lee h2{font-size:1.55rem;font-weight:600;margin:2.8rem 0 .6rem;line-height:1.25}
.lee h3{font-size:1.2rem;font-style:italic;font-weight:600;margin:1.8rem 0 .4rem}
.lee hr{border:0;text-align:center;margin:2.4rem 0;height:1em}.lee hr::after{content:"✦";color:var(--oro)}
.lee blockquote{margin:1.6rem 0;padding-left:1.2rem;border-left:3px solid var(--oro);font-style:italic}
.lee .footnotes{font-size:1rem;margin-top:3rem}.lee .footnotes hr{margin:1.5rem 0}
.en-bloque ol{list-style:none;padding:0;margin:2rem 0 0;border-top:2px solid var(--tinta)}
.en-bloque li{border-bottom:1px solid var(--filete)}.en-bloque a{display:block;padding:.75rem 0;text-decoration:none;font-weight:600}
.en-bloque a:hover{background:rgba(143,106,44,.07)}.en-bloque .n{color:var(--oro);display:inline-block;width:2.4rem;font-weight:400}
.pasa{max-width:34em;margin:4rem auto 0;display:flex;justify-content:space-between;gap:1rem;border-top:2px solid var(--tinta);padding-top:1.4rem}
.pasa a{text-decoration:none;max-width:48%;font-weight:600;font-size:1.3rem;line-height:1.25}
.pasa a:hover{text-decoration:underline;text-decoration-color:var(--oro)}
.pasa a span{display:inline-block}
.pasa small{display:block;color:var(--ceniza);font-size:.95rem;font-weight:400;font-style:italic;margin-bottom:.2rem}
.pasa .next{text-align:right;margin-left:auto}

.pie{padding:2.2rem clamp(1rem,4vw,3rem);font-size:.95rem;color:var(--ceniza);text-align:center;border-top:1px solid var(--filete)}
.pie p{margin:.3rem auto;max-width:44rem}
.pie p+p{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.6rem;margin-top:.8rem}
.home .pie{background:var(--tinta);color:#bfb298;border-top:1px solid #3a2f20}
.home .pie a{color:var(--hueso)}

.hero-apoyo{margin:1.2rem 0 0;font-size:1.05rem;color:#bfb298}.hero-apoyo a{color:var(--oro-c)}

/* antes de los veintitrés: prefacio e introducción, la puerta del libro */
.umbral{max-width:64rem;margin:0 auto;padding:clamp(3.5rem,8vw,6rem) 1.25rem 0}
.umbral h2{font-size:clamp(2rem,4vw,2.6rem);font-weight:500;margin:0 0 .4rem;line-height:1.1}
.umbral-i{margin:0 0 2rem;color:var(--ceniza)}
.puertas{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1.25rem,3vw,2.5rem)}
.puerta{display:flex;flex-direction:column;gap:.9rem;padding:clamp(1.5rem,3vw,2.4rem);text-decoration:none;background:var(--tinta);color:var(--hueso);border-top:4px solid var(--oro-c)}
.puerta+.puerta{background:transparent;color:var(--tinta);border:1px solid var(--filete);border-top:4px solid var(--tinta)}
.puerta-t{font-size:clamp(1.5rem,2.6vw,1.9rem);font-weight:600;line-height:1.1;color:var(--oro-c)}
.puerta+.puerta .puerta-t{color:var(--oro)}
.puerta-q{font-style:italic;font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.32;flex:1}
.puerta-d{font-size:1.02rem;opacity:.8}
.puerta-l{align-self:flex-start;font-weight:600;border-bottom:2px solid currentColor;padding-bottom:.05em}
.puerta:hover .puerta-l{color:var(--oro-c)}.puerta+.puerta:hover .puerta-l{color:var(--oro)}

/* apoyar al autor */
.apoyo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center;max-width:61.5rem;width:calc(100% - 2.5rem);margin:clamp(2rem,4vw,3rem) auto 0;padding:clamp(2rem,5vw,3.5rem);background:var(--oro-c);color:var(--tinta)}
.apoyo h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:600;line-height:1.12;margin:0;text-wrap:balance}
.apoyo p{margin:0 0 1.4rem;font-size:1.2rem}
.apoyo p:last-child{margin:0}
.b-tinta{background:var(--tinta);border-color:var(--tinta);color:var(--hueso);font-weight:600;font-size:1.2rem;padding:.8rem 1.6rem}
.b-tinta:hover{background:#2c2318}
.apoyo-linea{margin:3rem 0 0;padding:1.1rem 1.3rem;border-left:4px solid var(--oro-c);background:rgba(201,160,90,.13);font-size:1.12rem;font-style:italic}
.apoyo-linea a{font-style:normal;font-weight:600}

/* retratos: llegan con la banda negra en los ojos, como en la portada */
.retrato,.mini{position:relative;margin:0}
.retrato img,.mini img{display:block;width:100%;height:auto;background:var(--tinta)}
.retrato::after,.mini::after{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:4/5;background:var(--barra);transform:scaleX(0);transform-origin:right}
.retrato figcaption{margin-top:.45rem;font-size:.9rem;font-style:italic;color:var(--ceniza)}
.cabeza{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.2rem);align-items:end;margin-bottom:2.6rem;padding-bottom:1.8rem;border-bottom:1px solid var(--filete)}
.cabeza .sub{margin:0;padding:0;border:0}
.retrato img{box-shadow:0 18px 40px -18px rgba(0,0,0,.55)}
.idx a:has(.mini){grid-template-columns:3.2rem 4.4rem 1fr;grid-template-areas:"n mini nombre" "n mini gancho"}
.mini{grid-area:mini;align-self:start;width:3.6rem}

@media (prefers-color-scheme:dark){
 body.lee{background:var(--tinta-2);color:var(--hueso)}
 .lee .sub,.lee .pie,.pasa small{color:#a99d86}
 .lee .sub,.lee .pie,.en-bloque li{border-color:#3d3324}
 .lee .pasa,.en-bloque ol{border-color:var(--hueso-2)}
 .lee .cap-n,.lee hr::after,.en-bloque .n,.lee .sub+p::first-letter,.lee .cabeza+p::first-letter{color:var(--oro-c)}
 .lee blockquote{border-color:var(--oro-c)}
 .lee .cabeza{border-color:#3d3324}
 .lee .apoyo-linea{background:rgba(201,160,90,.1)}
 .lee{--barra:#000}
}

@media (max-width:1100px){.apoyo{grid-template-columns:1fr;gap:1.2rem}.apoyo p{max-width:36em}}
@media (max-width:760px){
 .hero{grid-template-columns:1fr}
 .hero-i{max-width:220px}
 .puertas,.apoyo{grid-template-columns:1fr}
  .idx a{grid-template-columns:2.4rem 1fr}
 .idx .n{font-size:1.5rem}
 .cabeza{grid-template-columns:1fr;align-items:start}
 .retrato{max-width:16rem}
 .idx a:has(.mini){grid-template-columns:2.4rem 3.8rem 1fr}
 .mini{width:3.2rem}
}

/* ---------- movimiento: solo si la persona no ha pedido reducirlo ---------- */
@media (prefers-reduced-motion:no-preference){

 /* pasar de página como una hoja; el nombre del capítulo viaja del índice al título */
 @view-transition{navigation:auto}
 ::view-transition-old(root){animation:hoja-sale .55s cubic-bezier(.55,0,.35,1) both;transform-origin:0 50%}
 ::view-transition-new(root){animation:hoja-entra .55s cubic-bezier(.2,.6,.3,1) .08s both}
 ::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
 @keyframes hoja-sale{to{transform:perspective(2200px) rotateY(-24deg) translateX(-8%);opacity:0;filter:brightness(.75)}}
 @keyframes hoja-entra{from{transform:translateX(3%);opacity:0}}

 /* portada al cargar: el libro se posa y el título aparece detrás */
 .hero-i{animation:posa 1.1s cubic-bezier(.2,.7,.2,1) both}
 .hero-t>*{animation:aparece .9s cubic-bezier(.2,.7,.2,1) both}
 .hero-t>:nth-child(2){animation-delay:.12s}.hero-t>:nth-child(3){animation-delay:.24s}.hero-t>:nth-child(4){animation-delay:.36s}
 @keyframes posa{from{opacity:0;transform:translateY(28px) rotate(3.5deg) scale(.97)}}
 @keyframes aparece{from{opacity:0;transform:translateY(14px)}}

 /* el nombre del capítulo llega tapado y se destapa */
 .tachado::after{animation:destapa .7s cubic-bezier(.7,0,.2,1) .45s backwards}
 .retrato::after{animation:destapa .9s cubic-bezier(.7,0,.2,1) .3s backwards}
 @keyframes destapa{from{transform:scaleX(1)}to{transform:scaleX(0)}}

 /* en el índice: con el ratón, la banda tapa el nombre hasta pasar por encima */
 @media (hover:hover){
  .idx .nombre::after{transform:scaleX(1);transition:transform .45s cubic-bezier(.6,.1,.2,1)}
  .mini::after{transform:scaleX(1);transition:transform .45s cubic-bezier(.6,.1,.2,1)}
  .idx a:hover .mini::after,.idx a:focus-visible .mini::after{transform:scaleX(0)}
  .idx a:hover .nombre::after,.idx a:focus-visible .nombre::after{transform:scaleX(0)}
 }
 /* y donde el navegador sabe, cada nombre se destapa solo al aparecer en pantalla */
 @supports (animation-timeline:view()){
  .idx .nombre{view-timeline:--nombre}
  .mini{view-timeline:--mini}
  .mini::after{transform:scaleX(0);transition:none;animation:destapa linear both;animation-timeline:--mini;animation-range:entry 90% cover 38%}
  .idx .nombre::after{transform:scaleX(0);transition:none;animation:destapa linear both;animation-timeline:--nombre;animation-range:entry 90% cover 38%}
 }
}