/* ============================================================
   Retorika — páginas de Recursos: /recursos/ y /recursos/<slug>
   Las genera el servidor (api/lib/paginas.php). Sin JavaScript.
   ============================================================ */
:root{
  --azul:#1D6DF0;
  --rosa:#E8005F;
  --verde:#12A45F;
  --tinta:#0E1626;
  --texto:#26344B;
  --gris:#46536B;
  --suave:#8FA2BE;
  --papel:#FBFCFD;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nav:"Space Grotesk", "Inter", system-ui, sans-serif;
  --margen:clamp(20px, 5vw, 72px);
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--sans); color:var(--tinta); background:var(--papel);
  background-image:linear-gradient(180deg, rgba(29,109,240,.06), rgba(251,252,253,0) 420px);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--azul); }
img, video{ max-width:100%; }
:focus-visible{ outline:2px solid var(--azul); outline-offset:3px; }


/* ---- cabecera y pie ---- */
.pag__cab{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:1240px; margin:0 auto; padding:24px var(--margen);
}
.pag__logo img{ display:block; width:auto; height:clamp(16px, 1.4vw, 20px); }
.pag__volver{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  border:1px solid rgba(18,40,78,.12); background:#fff; color:var(--gris);
  font-family:var(--nav); font-size:14px; font-weight:500; text-decoration:none;
  transition:color .25s ease, border-color .25s ease;
}
.pag__volver svg{ width:16px; height:16px; }
.pag__volver:hover{ color:var(--azul); border-color:rgba(29,109,240,.4); }
.pag__borrador{
  width:min(760px, calc(100% - 2 * var(--margen))); margin:0 auto 12px; padding:12px 18px;
  border-radius:12px; background:#FFF4D6; color:#6B4E00; font-size:14px; line-height:1.45;
}
.pag__main{ padding:clamp(10px, 3vh, 40px) var(--margen) clamp(56px, 9vh, 100px); }
.pag__pie{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 20px;
  max-width:1240px; margin:0 auto; padding:26px var(--margen) 34px;
  border-top:1px solid rgba(18,40,78,.08); color:#8A94A5; font-size:13px;
}
.pag__pie a{ color:inherit; }
.pag__eyebrow{
  margin:0 0 14px; color:#6C7A91; font-family:var(--nav); font-size:12px;
  font-weight:500; letter-spacing:.32em; text-transform:uppercase;
}
.pag__boton{
  display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 26px; border-radius:999px;
  background:var(--azul); color:#fff; font-family:var(--nav); font-size:15px; font-weight:600; text-decoration:none;
  box-shadow:0 14px 30px -12px rgba(29,109,240,.6); transition:transform .25s ease;
}
.pag__boton svg{ width:16px; height:16px; }
.pag__boton:hover{ transform:translateY(-2px); }
.pag__vacio{ max-width:560px; margin:8vh auto; text-align:center; }
.pag__vacio h1{ margin:0 0 12px; font-size:clamp(28px, 3vw, 40px); letter-spacing:-.02em; }
.pag__vacio p{ margin:0 0 26px; color:var(--gris); line-height:1.55; }


/* ---- un recurso ---- */
.art{ max-width:760px; margin:0 auto; }
.art__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 16px;
  color:var(--suave); font-family:var(--nav); font-size:12px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
}
.art__tag{ padding:5px 11px; border-radius:7px; color:#fff; font-size:11px; font-weight:600; letter-spacing:.11em; }
.art__tag--azul{ background:var(--azul); }
.art__tag--rosa{ background:var(--rosa); }
.art__tag--verde{ background:var(--verde); }
.art__titulo{ margin:0 0 18px; font-size:clamp(30px, 4.2vw, 52px); line-height:1.08; letter-spacing:-.028em; }
.art__entradilla{ margin:0 0 30px; color:var(--gris); font-size:clamp(17px, 1.5vw, 21px); line-height:1.55; }
.art__portada{
  margin:0 0 34px; border-radius:18px; overflow:hidden; background:#E9EEF6;
  box-shadow:0 24px 50px -30px rgba(22,40,72,.5);
}
.art__portada > img, .art__portada > video{ display:block; width:100%; height:auto; max-height:560px; object-fit:cover; }
.art__portada .art__marco{ border-radius:0; }

.art__cuerpo{ color:var(--texto); font-size:clamp(16px, 1.2vw, 18px); line-height:1.75; }
.art__cuerpo p{ margin:0 0 1.2em; }
.art__cuerpo h2{ margin:1.8em 0 .6em; color:var(--tinta); font-size:clamp(22px, 2vw, 28px); line-height:1.2; letter-spacing:-.015em; }
.art__cuerpo ul{ margin:0 0 1.2em; padding-left:1.3em; }
.art__cuerpo li{ margin:.35em 0; }
.art__cuerpo li::marker{ color:var(--azul); }
.art__cuerpo blockquote{ margin:1.6em 0; padding:4px 0 4px 22px; border-left:3px solid var(--azul); }
.art__cuerpo blockquote p{ margin:0 0 .4em; color:var(--tinta); font-size:1.14em; font-weight:500; line-height:1.5; }
.art__cuerpo cite{ color:var(--suave); font-size:14px; font-style:normal; }
.art__cuerpo cite::before{ content:"— "; }
.art__img, .art__video{ margin:1.8em 0; }
.art__img img, .art__video video{ display:block; width:100%; height:auto; border-radius:14px; }
.art__cuerpo figcaption{ margin-top:8px; color:var(--suave); font-size:14px; line-height:1.45; text-align:center; }
.art__marco{ position:relative; aspect-ratio:16 / 9; border-radius:14px; overflow:hidden; background:#0B1220; }
.art__marco iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.art__doc a{
  display:inline-flex; align-items:center; gap:12px; padding:14px 18px; border-radius:14px;
  border:1px solid rgba(18,40,78,.12); background:#fff; color:var(--tinta); font-weight:600; text-decoration:none;
}
.art__doc a:hover{ border-color:rgba(29,109,240,.4); }
.art__doc svg{ flex:0 0 auto; width:24px; height:24px; color:var(--azul); }
.art__doc small{ color:var(--suave); font-family:var(--nav); font-size:11px; letter-spacing:.12em; }
.art__fuera{ margin:34px 0 0; }
.art__temas{
  display:flex; flex-wrap:wrap; gap:8px; margin:38px 0 0; padding:24px 0 0; list-style:none;
  border-top:1px solid rgba(18,40,78,.08);
}
.art__temas li{ padding:6px 14px; border-radius:999px; border:1px solid rgba(18,40,78,.14); background:#fff; color:var(--gris); font-size:13.5px; }


/* ---- todos los recursos ---- */
.indice{ max-width:1240px; margin:0 auto; }
.indice h1{ max-width:18ch; margin:0 0 16px; font-size:clamp(32px, 4vw, 56px); line-height:1.05; letter-spacing:-.028em; }
.indice h1 em{ font-style:normal; color:var(--azul); }
.indice__lead{ max-width:40em; margin:0 0 clamp(26px, 4vh, 44px); color:var(--gris); font-size:clamp(15px, 1.2vw, 18px); line-height:1.55; }
.indice__lista{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:clamp(14px, 1.4vw, 22px);
  margin:0; padding:0; list-style:none;
}
.indice__vacio{ color:var(--gris); }
.tarjeta{
  display:flex; flex-direction:column; height:100%; border-radius:18px; overflow:hidden;
  background:#fff; color:inherit; text-decoration:none;
  box-shadow:0 18px 40px -26px rgba(22,40,72,.55), inset 0 0 0 1px rgba(18,40,78,.06);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.tarjeta:hover{ transform:translateY(-3px); box-shadow:0 26px 52px -24px rgba(22,40,72,.7), inset 0 0 0 1px rgba(29,109,240,.22); }
.tarjeta__foto{ display:block; aspect-ratio:16 / 10; overflow:hidden; background:#E9EEF6; }
.tarjeta__foto img, .tarjeta__foto video{ display:block; width:100%; height:100%; object-fit:cover; }
.tarjeta__texto{ display:flex; flex-direction:column; gap:10px; padding:20px 22px 24px; }
.tarjeta .art__meta{ margin:0; }
.tarjeta strong{ font-size:19px; line-height:1.25; letter-spacing:-.012em; }
.tarjeta__entradilla{ color:#5A6577; font-size:14.5px; line-height:1.5; }


@media (max-width:560px){
  .pag__volver{ padding:8px 12px; font-size:13px; }
  .indice__lista{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}