/* Articulo del blog (16.9.2026): hero, compartir, barra de progreso e indice.
   Lo monta _build/hero_blogi.py. Hereda la receta de .page-hero de style.css
   (resplandores y rejilla) y la tine del color de la categoria. */

.post.section{padding-top:0}
.page-hero--post{padding-block:clamp(44px,7vw,84px) clamp(36px,5vw,58px);--pc:#9CC2E5;--pc-glow:rgba(156,194,229,.18)}
.page-hero--post[data-cat="seo"]{--pc:#4ADE80;--pc-glow:rgba(74,222,128,.20)}
.page-hero--post[data-cat="content"]{--pc:#D8A6FF;--pc-glow:rgba(216,166,255,.22)}
.page-hero--post[data-cat="ecommerce"]{--pc:#FFB55C;--pc-glow:rgba(255,181,92,.20)}
.page-hero--post[data-cat="systems"]{--pc:#8FE3FF;--pc-glow:rgba(143,227,255,.22)}
.page-hero--post[data-cat="tech"]{--pc:#5EEAD4;--pc-glow:rgba(94,234,212,.20)}
.page-hero--post{background:radial-gradient(90% 120% at 88% -10%,var(--pc-glow),transparent 58%),radial-gradient(80% 110% at 0% 115%,rgba(26,61,99,.22),transparent 55%),var(--navy-2)}
.page-hero--post .post-crumb{margin-bottom:18px}
.page-hero--post h1{font-size:clamp(2rem,1.3rem + 2.9vw,3.4rem);line-height:1.06;margin:0 0 18px;max-width:22ch;color:#fff}
.page-hero--post .lead{max-width:60ch;color:#CAD6E2;margin:0}
.post-hero__inner{max-width:760px;margin-inline:auto}

/* La constelacion: se dibuja al cargar, linea a linea, y se funde hacia el
   texto para no molestar la lectura del titulo */
.post-hero__net{position:absolute;right:-3%;top:-4%;width:min(58vw,760px);height:auto;color:var(--pc);opacity:.6;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 22%,#000 68%);mask-image:linear-gradient(90deg,transparent 22%,#000 68%)}
.post-hero__net line{stroke:currentColor;stroke-width:1.1;opacity:.5;stroke-dasharray:640;stroke-dashoffset:640;animation:post-net 1.5s var(--ease) forwards;animation-delay:var(--d,0s)}
.post-hero__net circle{fill:currentColor;opacity:0;animation:post-node .5s var(--ease) forwards;animation-delay:calc(var(--d,0s) + .45s)}
.post-hero__net .post-hero__halo{fill:none;stroke:currentColor;stroke-width:1;animation-name:post-halo}
@keyframes post-net{to{stroke-dashoffset:0}}
@keyframes post-node{to{opacity:.95}}
@keyframes post-halo{to{opacity:.35}}

/* Imagen propia del articulo (16.9.2026), a caballo entre el hero y el texto.
   El hero crece por abajo lo mismo que la imagen sube, asi no tapa la fila de
   compartir. Mas ancha que el texto en portatil y escritorio. */
.page-hero--post[data-kuva]{padding-bottom:calc(clamp(36px,5vw,58px) + clamp(44px,7vw,110px))}
.post-kuva{position:relative;z-index:2;max-width:760px;margin:calc(-1 * clamp(44px,7vw,110px)) auto 0}
.post-kuva picture{display:block;border-radius:clamp(14px,1.6vw,20px);overflow:hidden;border:1px solid var(--line-strong);background:var(--navy-2);box-shadow:0 34px 80px -34px rgba(0,0,0,.75)}
.post-kuva img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media (min-width:1024px){.post-kuva{max-width:960px}}
@media (min-width:1360px){.post-kuva{max-width:1080px}}

/* Compartir */
.post-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:28px}
.post-share__label{display:inline-flex;align-items:center;gap:7px;margin-right:6px;font-family:var(--font-display);font-size:.76rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
.post-share__label svg{width:15px;height:15px;color:var(--pc)}
.post-share__btn{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:rgba(255,255,255,.05);color:#F8F6F1;font:inherit;font-size:.86rem;line-height:1;cursor:pointer;text-decoration:none;transition:border-color .18s var(--ease),background .18s var(--ease)}
.post-share__btn:hover{border-color:var(--pc);background:rgba(255,255,255,.1)}
.post-share__btn:focus-visible{outline:3px solid var(--blue-bright);outline-offset:2px}
.post-share__btn svg{width:14px;height:14px;color:var(--pc)}

/* Progreso de lectura: una linea arriba del todo, por encima de la cabecera */
.post-progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:1000;pointer-events:none}
.post-progress span{display:block;height:100%;width:100%;background:#9CC2E5;transform-origin:0 50%;transform:scaleX(0)}

/* Cuerpo y su indice */
.post-wrap{max-width:760px;margin-inline:auto;padding-top:clamp(36px,5vw,56px)}
/* Al saltar desde el indice, el titulo no se esconde bajo la cabecera fija */
.article-body h2[id]{scroll-margin-top:calc(var(--header-h) + 20px)}
.post-toc details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}
.post-toc summary::-webkit-details-marker{display:none}
.post-toc summary::after{content:"";width:8px;height:8px;margin-right:4px;border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);transform:rotate(45deg);transition:transform .2s var(--ease)}
.post-toc details[open]>summary::after{transform:rotate(-135deg)}
.post-toc details[open]>summary{margin-bottom:14px}
.post-toc__n{font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-dim);opacity:.8;margin-left:auto}
.post-toc a.is-active{color:var(--blue-bright)}
.post-toc a.is-active::before{background:var(--blue-bright);color:#fff}
@media (min-width:640px) and (max-width:1359px){
  .post-toc ol{grid-template-columns:1fr 1fr;column-gap:24px}
}
@media (min-width:1360px){
  .post-wrap{max-width:1080px;display:grid;grid-template-columns:260px minmax(0,760px);column-gap:60px;justify-content:center;align-items:start}
  .post-wrap>.post-toc{position:sticky;top:calc(var(--header-h) + 24px);margin:0;padding:18px;max-height:calc(100vh - var(--header-h) - 48px);overflow:auto;scrollbar-width:thin}
  .post-wrap>.post-toc ol{gap:6px}
  .post-wrap>.post-toc a{font-size:.86rem;gap:10px}
  .post-wrap>.post-toc a::before{width:22px;height:22px;font-size:.7rem}
  .post-wrap>.post-toc summary::after{display:none}
}

@media (prefers-reduced-motion:reduce){
  .post-hero__net line,.post-hero__net circle{animation:none;stroke-dashoffset:0;opacity:.5}
  .post-hero__net .post-hero__halo{opacity:.3}
  .post-share__btn,.post-toc summary::after{transition:none}
}