/* =====================================================================
   article.css · páginas de artículo del blog · joaquinromero.com
   Sistema tipográfico del sitio: Archivo (titulares) + Inter (texto).
   Sustituye al <style> que cada artículo llevaba embebido.
   ===================================================================== */
:root{
  --paper:#f6f7fb; --card:#fff;
  --ink:#16211f; --body:#2f3a36; --mut:#8b938f; --dim:#b3bab6;
  --hair:#e2e0d9; --hair2:#e6e4de;
  --brand:#32717E; --teal:#32717E; --teal-d:#22525C; --teal-soft:#EAF0F1;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:18px;line-height:1.48;letter-spacing:-.008em;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img,video,iframe{max-width:100%;height:auto;display:block}
figure{margin:0}

/* barra de progreso de lectura */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--brand);z-index:70}

/* ---------------------- columna de lectura ---------------------- */
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.article-grid.container,.article-grid{display:block;width:100%;max-width:812px;
  margin:0 auto;padding:0 26px}
.article{max-width:none;margin:0 0 40px}

/* ---------------------- apertura ---------------------- */
.article .kicker{margin:52px 0 22px;font-size:13.5px;font-weight:600;letter-spacing:.01em;
  color:var(--brand);text-transform:none}
.article .kicker a{color:var(--brand)}
.art-tags{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.art-tags i{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal-d);background:var(--teal-soft);padding:5px 10px;border-radius:2px}

.article h1{font-family:'Archivo',system-ui,sans-serif;font-weight:600;
  font-size:clamp(33px,5vw,58px);line-height:1.05;letter-spacing:-.035em;
  margin:0 0 24px;max-width:19ch;color:var(--ink)}

.standfirst{margin:0 0 30px;max-width:56ch;font-size:clamp(18px,1.7vw,21px);
  line-height:1.5;color:#5c6662;letter-spacing:-.01em}

.article > .meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  margin:0;padding:17px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.article > .meta span[itemprop="author"]{color:var(--ink)}

/* imagen: acompaña, no encabeza */
.hero{position:relative;margin:40px 0 0;border-radius:0;overflow:hidden;width:100%;
  aspect-ratio:16/9;background:#efeee9;border:1px solid var(--hair)}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero figcaption{display:none}
img[width],img[height]{width:100% !important;height:auto !important}

/* ---------------------- cuerpo ---------------------- */
.prose{margin:44px 0 0;font-size:20px;line-height:1.64;color:var(--body);letter-spacing:-.006em}
.prose > p{margin:0 0 26px}
.prose > p:empty{display:none;margin:0}
.prose > p:first-of-type{font-size:22px;line-height:1.55;color:var(--ink)}

/* pie de foto colado dentro del cuerpo como .meta */
.prose .meta{margin:-30px 0 34px;font-size:14px;line-height:1.5;color:var(--mut);
  font-style:italic;letter-spacing:0;text-transform:none;font-weight:400;max-width:62ch}

/* párrafos que en realidad son títulos de sección: <p><strong>…</strong></p> */
.prose > p:has(> strong:only-child){
  font-family:'Archivo',system-ui,sans-serif;font-weight:600;
  font-size:clamp(23px,2.2vw,30px);line-height:1.18;letter-spacing:-.03em;
  color:var(--ink);margin:50px 0 16px}
.prose > p:has(> strong:only-child) strong{font-weight:inherit;color:inherit}

.prose h2,.prose h3{font-family:'Archivo',system-ui,sans-serif;font-weight:600;color:var(--ink)}
.prose h2{font-size:clamp(23px,2.2vw,30px);line-height:1.18;letter-spacing:-.03em;margin:50px 0 16px}
.prose h3{font-size:clamp(19px,1.9vw,23px);line-height:1.25;letter-spacing:-.028em;margin:44px 0 14px}
.prose strong,.prose b{font-weight:600;color:var(--ink)}
.prose em{font-style:italic}

.prose ul,.prose ol{margin:0 0 26px;padding-left:1.15em}
.prose li{margin:0 0 9px;line-height:1.55}
.prose li::marker{color:var(--dim)}

.prose blockquote{margin:38px 0;padding:4px 0 4px 24px;background:none;border-radius:0;
  border-left:2px solid var(--brand);max-width:52ch;
  font-family:'Archivo',system-ui,sans-serif;font-style:italic;font-weight:400;
  font-size:clamp(21px,2.1vw,27px);line-height:1.3;letter-spacing:-.025em;color:var(--ink)}
.prose blockquote p{margin:0}

.prose hr{border:0;border-top:1px solid var(--hair);margin:42px 0}

/* ---------------------- compartir y navegación ---------------------- */
.share{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  margin:44px 0 0;padding-top:26px;border-top:1px solid var(--hair)}
.share > span{font-size:11px !important;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim) !important;margin-right:5px}
.share a{font-size:12.5px;font-weight:600;color:var(--body);border:1px solid var(--hair);
  background:#fff;padding:7px 14px;border-radius:2px;transition:border-color .16s,color .16s}
.share a:hover{border-color:var(--brand);color:var(--teal-d);text-decoration:none}

.back{display:none}

.next{margin:56px 0 0}
.next-h{margin:0 0 18px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.next-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.next-grid:has(> a:only-child){grid-template-columns:1fr}
.next-grid a{background:var(--paper);padding:24px 22px;transition:background .2s}
.next-grid a:hover{background:var(--card);text-decoration:none}
.next-grid .dir{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brand);margin-bottom:9px}
.next-grid .t{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:19px;
  line-height:1.24;letter-spacing:-.028em;color:var(--ink)}
.next-grid .d{margin:8px 0 0;font-size:14px;line-height:1.5;color:#6f7773}

.art-cta{margin:56px 0 80px;padding:34px 36px;background:var(--card);border:1px solid var(--hair2);
  display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.art-cta h2{margin:0;font-family:'Archivo',sans-serif;font-weight:600;
  font-size:clamp(20px,2vw,26px);line-height:1.2;letter-spacing:-.03em;max-width:24ch;color:var(--ink)}
.art-cta p{margin:9px 0 0;font-size:15px;line-height:1.55;color:#6f7773;max-width:52ch}
.art-cta a{flex:none;font-size:14.5px;font-weight:600;color:#fff;background:var(--brand);
  padding:14px 26px;border-radius:2px;transition:background .18s}
.art-cta a:hover{background:var(--teal-d);text-decoration:none}

footer{border-top:1px solid var(--hair2);padding:30px 0 40px}
footer p{margin:0;font-size:13.5px;color:var(--mut) !important}

/* ---------------------- móvil ---------------------- */
@media (max-width:720px){
  .article-grid.container,.article-grid{padding:0 20px}
  .article .kicker{margin-top:32px}
  .prose{font-size:18.5px;line-height:1.6;margin-top:34px}
  .prose > p:first-of-type{font-size:20px}
  .hero{aspect-ratio:16/9;margin-top:30px}
  .next-grid{grid-template-columns:1fr}
  .art-cta{padding:26px 22px;margin-bottom:56px}
}