/* /notas/<slug>/ — cada nota (el artículo). Lo común está en base.css. Lo enlaza tools/plantilla-nota.html */
/* Lo común está en /css/base.css; aquí solo el artículo */
body{font-size:19px;line-height:1.72;letter-spacing:.1px}
/* Grano sutil (5-8%), rastro analogico del sistema */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ---------- cabecera del articulo ---------- */
.wrap{max-width:var(--lectura); position:relative; z-index:1}
header.art{padding:clamp(22px,4vw,40px) 0 30px}
.meta{font-family:var(--mono); font-size:12px; letter-spacing:4px; color:var(--primary); text-transform:uppercase; margin-bottom:22px; display:flex; flex-wrap:wrap; gap:10px 16px}
.meta .sep{color:var(--inactive)}
.meta .n{color:var(--dim)}
.meta .ia{color:var(--dim); border:1px solid rgba(58,72,112,.55); padding:2px 8px; letter-spacing:2.6px}
h1{
  font-weight:700; font-size:clamp(34px,6.4vw,54px); line-height:1.04; letter-spacing:-1.6px;
  color:var(--white); margin-bottom:20px;
}
.bajada{font-size:clamp(18px,2.4vw,22px); line-height:1.5; color:var(--mid); font-style:italic; max-width:31rem}
.regla{height:1px; background:linear-gradient(90deg,var(--primary) 0%, var(--inactive) 32%, transparent 100%); margin:36px 0 8px}

/* ---------- origen: de dónde sale este texto ----------
   Va ANTES del cuerpo y con el vídeo dentro, para que quede claro de entrada
   que esto resume un directo y que el original está a un clic. */
.origen{border:1px solid rgba(247,67,11,.32); background:rgba(247,67,11,.055); padding:20px 22px; margin:34px 0 4px}
.origen .et{font-family:var(--mono); font-size:11px; letter-spacing:3.4px; color:var(--primary); text-transform:uppercase; margin-bottom:11px}
.origen p{font-size:16.5px; line-height:1.56; color:var(--mid); margin:0}
.origen p b{color:var(--text)}
.video{position:relative; width:100%; aspect-ratio:16/9; margin-top:17px; background:var(--navy-2);
  border:1px solid rgba(58,72,112,.5); overflow:hidden}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ---------- cuerpo ---------- */
article{padding-bottom:60px}
article > * + *{margin-top:1.35em}
article p{max-width:100%}
article h2{
  font-weight:700; font-size:clamp(23px,3.4vw,31px); line-height:1.18; letter-spacing:-.6px;
  color:var(--white); margin-top:2.2em; margin-bottom:.1em; padding-top:.4em;
}
article h2::before{
  content:""; display:block; width:38px; height:2px; background:var(--primary); margin-bottom:18px;
}
article h3{font-weight:700; font-size:20px; color:var(--text); margin-top:1.8em; letter-spacing:-.2px}
article strong,article b{color:var(--white); font-weight:700}
article em,article i{color:var(--mid)}
article a{color:var(--primary); text-decoration:none; border-bottom:1px solid rgba(247,67,11,.34); transition:border-color .2s,background .2s}
article a:hover{border-bottom-color:var(--primary); background:rgba(247,67,11,.09)}

article ul,article ol{padding-left:0; list-style:none}
article li{position:relative; padding-left:26px; margin-top:.72em; line-height:1.62}
article ul li::before{content:"›"; position:absolute; left:2px; top:-1px; color:var(--primary); font-family:var(--mono); font-size:17px}
article ol{counter-reset:li}
article ol li{counter-increment:li}
article ol li::before{content:counter(li,decimal-leading-zero); position:absolute; left:0; top:2px; color:var(--primary); font-family:var(--mono); font-size:12px; letter-spacing:1px}

/* Cita destacada: la voz de otro, no la de Oli */
article blockquote{
  border-left:3px solid var(--primary); padding:2px 0 2px 26px; margin-top:1.7em;
  font-size:clamp(19px,2.5vw,23px); line-height:1.42; color:var(--white); font-style:italic;
}
article hr{border:0; height:1px; background:rgba(58,72,112,.34); margin:2.6em 0}
article code{font-family:var(--mono); font-size:.86em; background:rgba(18,24,55,.8); border:1px solid rgba(58,72,112,.4); padding:1px 6px; border-radius:3px; color:var(--text)}
article img{max-width:100%; height:auto; border-radius:6px; display:block}

/* Pie de fuentes: mismo tono que un caption */
article > p:last-child em{color:var(--dim); font-size:15px; font-style:normal; font-family:var(--mono); letter-spacing:.6px; line-height:1.7}

/* ---------- cierre ---------- */
footer.art{border-top:1px solid rgba(58,72,112,.3); padding:34px 0 70px; margin-top:20px}
.firma{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.firma img{width:52px; height:52px; border-radius:50%; border:1px solid var(--inactive)}
.firma .txt{font-size:15.5px; color:var(--mid); line-height:1.5; max-width:26rem}
.firma .txt b{color:var(--white)}

/* ---------- autoría ----------
   Estas notas las escribe una IA con el material de Óliver. Se dice claro y
   sin letra pequeña: la web va justamente de esto. */
.autoria{margin-top:30px; border:1px solid rgba(58,72,112,.42); background:rgba(18,24,55,.4); padding:19px 21px}
.autoria .et{font-family:var(--mono); font-size:10.5px; letter-spacing:3.2px; color:var(--primary);
  text-transform:uppercase; margin-bottom:10px; display:flex; align-items:center; gap:9px}
.autoria .et::before{content:""; width:6px; height:6px; background:var(--primary); border-radius:50%; display:inline-block}
.autoria p{font-size:15px; line-height:1.58; color:var(--mid); margin:0}
.autoria p b{color:var(--text)}
.autoria p + p{margin-top:9px}

@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto}}
@media (max-width:640px){ body{font-size:18px} article h2::before{width:30px} }