/* Guardian · blog (solo inglés): índice y artículo. El contenido usa .prose (ui.css). */

/* ---------- Índice ---------- */
.b-hero{position:relative;isolation:isolate;padding:clamp(28px,4.5vw,64px) 0 clamp(36px,4vw,56px);overflow:clip}
.b-hero .wrap{display:grid;gap:20px;justify-items:start}
.b-hero .wrap>*{max-width:760px;animation:rise 900ms var(--ease-out) both}
.b-hero .wrap>.b-title{animation:none;max-width:16ch}
.b-hero .lead{animation-delay:340ms}
.b-title{font:400 clamp(2.5rem,1.25rem + 3.6vw,4.4rem)/1.03 var(--f-display);letter-spacing:-.012em;word-spacing:.05em}
.b-title em{font-family:var(--f-serif);font-style:italic;font-size:1.06em;color:var(--lav-strong)}
.post-card-link{display:grid;height:100%;color:inherit;text-decoration:none}
.post-thumb{position:relative;display:block;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:linear-gradient(140deg,var(--tint),var(--cream))}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-out)}
.post-thumb--empty,.post-thumb--art{display:grid;place-items:center}
.post-thumb--empty img{width:72px;height:72px;object-fit:contain}
.post-thumb--art img{width:78%;height:88%;object-fit:contain;object-position:bottom}
.post-thumb--night{background:radial-gradient(80% 90% at 70% 10%,#3A2470,var(--night))}
.post-thumb--cream{background:linear-gradient(160deg,var(--cream),#fff)}
.post-thumb--lav{background:linear-gradient(160deg,#E9E0FB,var(--tint))}
.post-body{display:grid;align-content:start;gap:10px;padding:18px 4px 4px}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font:500 .7rem/1.2 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.post-meta>span+span::before{content:"·";margin-right:12px;color:var(--soft)}
.post-category{padding:5px 9px;border-radius:999px;background:var(--tint);color:var(--lav-strong)}
.post-meta .post-category+span::before{display:none}
.post-title{font:400 clamp(1.25rem,1.1rem + .5vw,1.5rem)/1.2 var(--f-display);letter-spacing:-.005em;color:var(--ink);text-wrap:balance}
.post-excerpt{color:var(--muted);font-size:.96rem;line-height:1.6}
.post-more{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-weight:600;font-size:.94rem;color:var(--ink)}
.post-more svg{width:18px;height:18px;transition:transform var(--d-base) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .post-card-link:hover .post-thumb img{transform:scale(1.04)}
  .post-card-link:hover .post-more svg{transform:translateX(4px)}
  .post-card-link:hover .post-title{color:var(--lav-strong)}
}
.post-card--featured .post-card-link{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:center;padding:12px;border-radius:var(--r-xl);background:#fff;border:1px solid #ECE7F6;box-shadow:var(--sh-2)}
.post-card--featured .post-thumb{aspect-ratio:16/11;border-radius:calc(var(--r-xl) - 12px)}
.post-card--featured .post-body{gap:14px;padding:12px clamp(8px,2vw,24px) 12px 0}
.post-card--featured .post-title{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);line-height:1.08}
.post-card--featured .post-excerpt{font-size:1.05rem}
.featured-tag{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--ink);color:var(--lime);font:500 .66rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.featured-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px) 20px;margin-top:clamp(40px,5vw,64px)}
.blog-pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(40px,5vw,64px)}
.blog-pagination a,.blog-pagination span{display:grid;place-items:center;min-width:46px;height:46px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:500 .82rem/1 var(--f-mono);text-decoration:none;color:var(--ink);transition:background-color var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out)}
.blog-pagination .current{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.blog-pagination .dots{border-color:transparent;background:transparent}
@media (hover:hover){.blog-pagination a:hover{border-color:var(--soft);background:var(--panel)}}

/* ---------- Artículo ---------- */
.post-progress{position:fixed;left:0;right:0;top:0;z-index:60;height:3px;pointer-events:none}
.post-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--lav),var(--lav-strong) 70%,var(--lime));transform:scaleX(0);transform-origin:left}
.post-hero{position:relative;isolation:isolate;padding:clamp(28px,4.5vw,64px) 0 clamp(36px,4vw,56px);text-align:center;overflow:clip}
.post-hero-in{display:grid;justify-items:center;gap:20px;max-width:900px;margin-inline:auto}
.post-hero-in>*{animation:rise 900ms var(--ease-out) both}
.post-crumb{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600}
.post-crumb a{color:var(--muted);text-decoration:none}
.post-crumb a:hover{color:var(--ink)}
.post-cat{padding:6px 12px;border-radius:999px;background:var(--tint);color:var(--lav-strong);font:500 .7rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.post-hero h1{max-width:22ch;font:400 clamp(2.3rem,1.3rem + 3vw,3.9rem)/1.06 var(--f-display);letter-spacing:-.012em;word-spacing:.04em;text-wrap:balance;animation-delay:80ms}
.post-byline{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;animation-delay:200ms}
.post-byline>span{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid #ECE7F6;font-size:.84rem;color:var(--ink-2)}
.post-author i{width:22px;height:22px;border-radius:50%;background:var(--tint) url("../images/guardian-icon.webp") center/18px no-repeat}
.post-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 220px;gap:clamp(32px,4vw,56px);align-items:start;max-width:1240px}
.post-col-c{max-width:720px;width:100%;margin-inline:auto}
.post-side{position:sticky;top:110px;display:grid;gap:28px;max-height:calc(100vh - 130px);overflow:auto;scrollbar-width:none}
.post-side::-webkit-scrollbar{display:none}
.post-label{margin-bottom:12px;font:500 .7rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.post-toc ol{display:grid;gap:2px;list-style:none;padding:0;margin:0;border-left:1.5px solid var(--line)}
.post-toc a{display:block;margin-left:-1.5px;padding:7px 0 7px 14px;border-left:1.5px solid transparent;font-size:.88rem;line-height:1.35;color:var(--muted);text-decoration:none;transition:color var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out)}
.post-toc a[aria-current]{border-left-color:var(--lav-strong);color:var(--ink);font-weight:600}
.post-toc ol ol{border-left:0}
.post-toc ol ol a{padding-left:28px;font-size:.84rem}
@media (hover:hover){.post-toc a:hover{color:var(--ink)}}
.post-share div{display:flex;gap:8px}
.post-share button,.post-share a{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink-2);transition:transform var(--d-fast) var(--ease-out),background-color var(--d-base) var(--ease-out)}
.post-share button[hidden]{display:none}
.post-share svg{width:18px;height:18px}
.post-share button svg+svg{display:none}
.post-share .is-done svg:first-child{display:none}
.post-share .is-done svg+svg{display:block;color:var(--up)}
.post-share button:active,.post-share a:active{transform:scale(.94)}
@media (hover:hover){.post-share button:hover,.post-share a:hover{background:var(--tint);color:var(--lav-strong)}}
.post-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.post-cover{margin:0 0 36px;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2)}
.post-cover img{width:100%}
.post-toc-mini{display:none;margin-bottom:28px;border:1px solid var(--line);border-radius:18px;background:#fff}
.post-toc-mini summary{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;cursor:pointer;list-style:none;font-weight:600}
.post-toc-mini summary::-webkit-details-marker{display:none}
.post-toc-mini summary svg{width:18px;height:18px;transition:transform var(--d-base) var(--ease-out)}
.post-toc-mini[open] summary svg{transform:rotate(180deg)}
.post-toc-mini ol{display:grid;gap:4px;margin:0;padding:0 18px 16px 36px;color:var(--muted)}
.post-toc-mini a{color:var(--ink-2);text-decoration:none;font-size:.95rem}
.post-toc-mini ol ol{padding:4px 0 2px 16px}
.post-toc-mini ol ol a{font-size:.9rem}
.post-also{display:grid;gap:4px}
.post-also a{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--line);font:400 1.02rem/1.3 var(--f-display);color:var(--ink);text-decoration:none}
.post-also small{font:500 .66rem/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
@media (hover:hover){.post-also a:hover{color:var(--lav-strong)}}
.post-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(56px,7vw,96px)}
.post-nav-item{display:grid;gap:8px;padding:22px 24px;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out)}
.post-nav-item span{font:500 .7rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.post-nav-item strong{font:400 1.2rem/1.25 var(--f-display);font-weight:400}
.post-nav-item--next{text-align:right}
@media (hover:hover) and (pointer:fine){.post-nav-item:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}}
.post-related{margin-top:clamp(56px,7vw,96px)}
.post-related h2{font:400 clamp(2rem,1.4rem + 2vw,3rem)/1.05 var(--f-display);letter-spacing:-.012em}
.post-related h2 em{font-family:var(--f-serif);font-style:italic;color:var(--lav-strong)}
.post-related .blog-grid{margin-top:28px}
/* Sin «Previous/Next» ni «Keep reading», el cierre va justo después del artículo: la mascota sube la mitad de su ancho
   (min(400px,72vw)) sobre el cierre; se le suma ese espacio para que no toque el final del artículo. */
.post-closing-solo .blog-cta-wrap{padding-top:calc(min(400px,72vw)*.51 + clamp(48px,6vw,80px))}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .post-card--featured .post-card-link{grid-template-columns:minmax(0,1fr)}
  .post-card--featured .post-body{padding:8px 12px 16px}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-layout{grid-template-columns:minmax(0,1fr) 260px}
  .post-layout--solo{grid-template-columns:minmax(0,1fr)} /* sin otros artículos no hay columna derecha */
  .post-col-l{display:none}
  .post-toc-mini{display:block}
}
@media (max-width:760px){
  .blog-grid{grid-template-columns:minmax(0,1fr)}
  .post-layout{grid-template-columns:minmax(0,1fr)}
  .post-col-r{display:none}
  .post-nav{grid-template-columns:minmax(0,1fr)}
  .post-nav-item--next{text-align:left}
  .prose{font-size:1.06rem}
}