/* ==========================================================
   NARA | MANUAL DE IDENTIDAD NARRATIVA
   Línea gráfica editorial
   ========================================================== */

:root{
  --marfil:#F8F5EF;
  --papel:#FCFAF7;
  --azul:#4D578C;
  --rosa:#F2529D;
  --turquesa:#4BBFB4;
  --durazno:#F2AB6D;
  --coral:#F28A80;
  --texto:#4E4E4E;
  --texto-sec:#767676;
  --linea:#E8E1D9;
  --radius:18px;
  --radius-xl:28px;
  --shadow:0 12px 35px rgba(0,0,0,.08);
  --font-display:'Cormorant Garamond',serif;
  --font-body:'DM Sans',sans-serif;
  --transition:.35s ease;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 font-family:var(--font-body);
 color:var(--texto);
 line-height:1.8;
 background:
 radial-gradient(circle at top right,rgba(242,82,157,.05),transparent 30%),
 radial-gradient(circle at bottom left,rgba(75,191,180,.05),transparent 30%),
 var(--marfil);
}
.three-col-layout{
 display:grid;
 grid-template-columns:260px 1fr 240px;
 gap:56px;
 max-width:1800px;
 margin:auto;
 padding:48px;
}
.col-sticky{position:sticky;top:40px}
.col-heading{margin-bottom:24px;border-bottom:1px solid var(--linea);padding-bottom:12px}
.col-label,.brand-name,.section-title,.footer-brand{
 font-family:var(--font-display);
 color:var(--azul);
}
.brand-box{margin-bottom:36px}
.brand-name{font-size:2.4rem;font-weight:500;text-transform:lowercase}
.brand-job{font-size:.8rem;letter-spacing:.18em;color:var(--azul);text-transform:uppercase}
.index-list,.phases-list{display:flex;flex-direction:column;gap:8px}
.index-item,.phase-item{
 display:flex;align-items:center;gap:12px;
 padding:12px 14px;border-radius:10px;
 color:var(--texto-sec);text-decoration:none;
 transition:.3s;border-left:2px solid transparent;
}
.index-item:hover,.index-item.active,.phase-item:hover{
 background:#fff;color:var(--azul);border-left-color:var(--rosa)
}
.index-num{font-family:var(--font-display);color:var(--rosa)}
.doc-section{padding:80px 0;border-bottom:1px solid var(--linea)}
.section-header{display:flex;gap:24px;margin-bottom:34px}
.section-number{font-family:var(--font-display);font-size:3rem;color:var(--rosa)}
.section-title{font-size:3rem;font-weight:500}
.section-title-wrap:after{
content:"";display:block;width:80px;height:2px;background:var(--rosa);margin-top:12px}
.doc-card{
background:var(--papel);
border:1px solid var(--linea);
border-radius:28px;
overflow:hidden;
box-shadow:var(--shadow);
position:relative;
}
.doc-card:before{
content:"";
position:absolute;
right:24px;
top:18px;
width:72px;
height:18px;
background:#E8D8A5;
border-radius:3px;
transform:rotate(-4deg);
opacity:.65;
}
.doc-card-label{
padding:18px 28px;
background:#fff;
border-bottom:1px solid var(--linea);
font-size:.85rem;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--azul);
}
.pdf-wrapper,.video-wrapper{
background:#fff;
padding:18px;
text-align:center;
}
.pdf-wrapper iframe,
.pdf-wrapper img{
width:100%;
border:none;
border-radius:12px;
display:block;
}
.video-wrapper video{
width:70%;
max-width:650px;
height:auto;
border-radius:12px;
display:block;
margin:auto;
background:#000;
}
.footer{
margin-top:70px;
padding:36px 0;
text-align:center;
border-top:1px solid var(--linea);
color:var(--texto-sec);
}
.footer-brand{font-size:2rem}
@media(max-width:900px){
.three-col-layout{grid-template-columns:1fr;padding:24px;gap:24px}
.col-sticky{position:static}
.section-title{font-size:2.2rem}
.video-wrapper video{width:100%}
}