:root{
  --crema: #F6F1E7;
  --crema-tarjeta: #FBF8F2;
  --gris: #2E2E2E;
  --gris-suave: #9B9B9B;
  --linea: #e1d8c6;
  --fold: #e9e0cd;
  --serif-texto: 'Cormorant Garamond', serif;
  --serif-marca: 'EB Garamond', serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--crema);color:var(--gris);font-family:var(--serif-texto);min-height:100vh;}
a{color:inherit;text-decoration:none;}
header.site{display:flex;align-items:center;justify-content:space-between;padding:28px 6vw 18px;border-bottom:1px solid var(--linea);}
.logo{font-family:var(--serif-marca);font-size:1.3rem;letter-spacing:0.03em;font-weight:500;}
nav.links{display:flex;gap:32px;font-size:1.05rem;color:var(--gris-suave);}
nav.links a:hover, nav.links a.active{color:var(--gris);}
main{max-width:1040px;margin:0 auto;padding:0 6vw 80px;}
.home-featured{display:flex;gap:48px;align-items:center;justify-content:center;margin-bottom:56px;flex-wrap:wrap;margin-top:56px;}
.home-featured .cover{width:220px;}
.home-featured .info{max-width:360px;}
.info .eyebrow{font-size:0.85rem;letter-spacing:0.12em;color:var(--gris-suave);text-transform:uppercase;margin-bottom:8px;}
.info h2{font-weight:500;font-size:1.6rem;margin:0 0 18px;line-height:1.35;}
.leer-link{font-size:1.05rem;border-bottom:1px solid var(--gris);padding-bottom:2px;}
.accesos{display:flex;gap:48px;justify-content:center;margin:0 0 56px;flex-wrap:wrap;}
.acceso{font-family:var(--serif-marca);font-size:1.05rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--gris);border-bottom:1px solid var(--linea);padding-bottom:6px;}
.acceso:hover{border-color:var(--gris);}
.section-title{font-size:0.85rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--gris-suave);margin:48px 0 24px;text-align:center;}
.cover{position:relative;aspect-ratio:4/5;background:var(--crema-tarjeta);box-shadow:0 1px 3px rgba(58,55,51,0.12), 0 6px 18px rgba(58,55,51,0.06);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cover .num{font-family:var(--serif-marca);font-size:1.3rem;letter-spacing:0.04em;font-weight:500;text-align:center;padding:0 10px;}
.cover .foot{font-family:var(--serif-marca);position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:0.62rem;letter-spacing:0.08em;color:var(--gris-suave);}
.cover::before{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 26px 26px 0;border-color:transparent var(--fold) transparent transparent;filter:drop-shadow(-1px 1px 1px rgba(58,55,51,0.15));}
.cover.play::after{content:"";position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--gris-suave);opacity:0.55;}
.tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:8px 0 40px;}
.tag{font-size:0.85rem;color:var(--gris-suave);border:1px solid var(--linea);padding:5px 16px;border-radius:20px;cursor:pointer;text-transform:lowercase;background:none;font-family:var(--serif-texto);}
.tag:hover{border-color:var(--gris-suave);}
.tag.active{background:var(--gris);color:var(--crema-tarjeta);border-color:var(--gris);}
.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(150px,1fr));gap:22px;margin-bottom:20px;}
.grid a{display:block;cursor:pointer;transition:transform .25s ease, opacity .25s ease;}
.grid a:hover{transform:translateY(-3px);}
.grid a.oculta{display:none;}
.nota-page{max-width:640px;margin:0 auto;}
.nota-cover-wrap{display:flex;justify-content:center;margin:48px 0 8px;}
.nota-cover-wrap .cover{width:150px;}
.nota-tema{font-family:var(--serif-marca);text-align:center;font-size:0.8rem;color:var(--gris-suave);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:44px;}
.nota-texto p{font-size:1.5rem;line-height:1.6;margin:0 0 1.3em;text-align:center;font-weight:400;}
.nota-texto p.final{font-style:italic;}
.escuchar{text-align:center;margin:36px 0 8px;font-size:1rem;color:var(--gris-suave);}
.escuchar a{border-bottom:1px solid var(--gris-suave);}
hr.divider{border:none;border-top:1px solid var(--linea);width:80px;margin:56px auto;}
.interaccion{max-width:520px;margin:0 auto;text-align:center;}
.pregunta{font-size:1.15rem;font-style:italic;color:var(--gris-suave);margin-bottom:28px;}
.cta-rotativo{font-size:0.95rem;color:var(--gris-suave);border:1px solid var(--linea);display:inline-block;padding:9px 22px;border-radius:24px;margin-bottom:28px;}
.interaccion .tags{margin-bottom:0;}
.interaccion .tag{cursor:default;font-size:0.78rem;padding:4px 13px;}
.interaccion .tag:hover{border-color:var(--linea);}
.nota-nav{display:flex;justify-content:space-between;align-items:center;max-width:640px;margin:64px auto 0;font-size:0.95rem;color:var(--gris-suave);border-top:1px solid var(--linea);padding-top:24px;}
.nota-nav a:hover{color:var(--gris);}
.volver{text-align:center;margin-top:18px;}
.volver a{font-size:0.9rem;color:var(--gris-suave);}
footer.site{text-align:center;padding:40px 0 60px;font-size:0.85rem;color:var(--gris-suave);border-top:1px solid var(--linea);margin-top:40px;}
footer.site .brand{font-family:var(--serif-marca);display:block;font-size:1rem;color:var(--gris);margin-bottom:8px;}
footer.site a:hover{color:var(--gris);}
footer.site .azar{margin-top:14px;}
footer.site .azar a{font-style:italic;font-size:0.82rem;}
footer.site .azar a:hover{color:var(--gris);}