/* Páginas internas: archivo de publicaciones, artículos y páginas legales.
   Se carga después de styles.css y reutiliza sus colores, tipografías y botones. */

body.sub main{padding-top:var(--nav-h)}
.wrap-read{width:100%;max-width:740px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.wrap-wide{width:100%;max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.article__hero{margin:36px auto 0}
.article__img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-card)}
.article__img--cover{aspect-ratio:21/8}
@media (max-width:620px){.article__img--cover{aspect-ratio:16/9}}

/* Barra de progreso de lectura: avanza con el cuerpo del artículo, no con la página completa.
   0 % cuando el texto empieza arriba de la pantalla; 100 % cuando su final llega al borde inferior (lo calcula sitio.js). */
.progress{position:fixed;inset:0 0 auto;height:3px;background:var(--lima);transform-origin:left;transform:scaleX(var(--p,0));z-index:60;pointer-events:none}

/* Etiqueta de sección con su ícono */
.sello{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:999px;border:1px solid var(--grafito-4);background:var(--grafito-2);
  font:400 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lima)}
.sello .sec-icon{width:20px;height:20px}

/* ---------- Archivo de publicaciones ---------- */
.blog__head{padding:clamp(56px,8vw,96px) clamp(16px,4vw,40px) 32px}
.blog__head .lead{max-width:62ch}
.filters{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px}
.filters button{display:inline-flex;align-items:center;gap:8px;font:500 14px var(--f-title);color:var(--piedra);background:transparent;cursor:pointer;
  border:1px solid var(--grafito-4);border-radius:999px;padding:9px 16px;transition:all .25s var(--ease)}
.filters button .sec-icon{width:18px;height:18px}
.filters button:hover{color:var(--hueso);border-color:var(--piedra)}
.filters button[aria-pressed="true"]{background:var(--hueso);color:var(--grafito);border-color:var(--hueso)}
.filters button[aria-pressed="true"] .sec-icon{--ic-b:var(--grafito);--ic-a:var(--grafito)}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.post-card{display:flex;flex-direction:column;border-radius:var(--r-card);border:1px solid var(--grafito-3);background:var(--grafito-2);overflow:hidden;
  text-decoration:none;transition:border-color .3s ease,transform .4s var(--ease)}
.post-card:hover{border-color:var(--grafito-4);transform:translateY(-3px)}
.post-card[hidden]{display:none}
.post-card__media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--grafito-3)}
.post-card__img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post-card:hover .post-card__img{transform:scale(1.03)}
.post-card__body{flex:1;display:flex;flex-direction:column;gap:12px;padding:22px 24px 24px}
.post-card__tag{display:flex;align-items:center;gap:10px;font:400 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lima)}
.post-card h3{font:600 21px/1.25 var(--f-title);letter-spacing:-.015em}
.post-card p{color:var(--piedra);font-size:15.5px;line-height:1.55}
.post-card__meta{margin-top:auto;padding-top:6px;font-size:13px;color:var(--piedra-2)}
.post-card--big{display:grid;grid-template-columns:1fr 1.05fr}
.post-card--big .post-card__media{order:2;aspect-ratio:auto;min-height:380px;position:relative}
.post-card--big .post-card__media>*{position:absolute;inset:0}
.post-card--big .post-card__body{padding:clamp(28px,4vw,52px);justify-content:center;gap:16px}
.post-card--big h3{font:600 clamp(28px,3.2vw,40px)/1.1 var(--f-title);max-width:20ch}
.post-card--big p{font-size:17.5px;max-width:52ch}
@media (max-width:860px){.post-card--big{grid-template-columns:1fr}.post-card--big .post-card__media{order:0;aspect-ratio:16/9;min-height:0}}

/* Portada automática cuando la publicación no tiene foto: color e ícono de su sección */
.cover{position:relative;display:grid;place-items:center;overflow:hidden;width:100%;height:100%;background:var(--grafito-3);--pat:none}
.cover::before{content:"";position:absolute;inset:0;background:var(--pat) 0 0/220px;opacity:.75}
.cover .cover__icon{position:relative;width:26%;max-width:128px;height:auto}
.cover__num{position:absolute;left:18px;bottom:14px;font:400 12px var(--f-mono);letter-spacing:.1em;color:var(--piedra)}
.cover--al-cierre,.cover--letra-pequena{background:var(--hueso)}
.cover--al-cierre .cover__icon,.cover--letra-pequena .cover__icon{--ic-a:var(--grafito);--ic-b:var(--grafito)}
.cover--al-cierre .cover__num,.cover--letra-pequena .cover__num{color:var(--grafito-4)}
.cover--doble-check,.cover--de-cerca{background:var(--verde);--pat:url('../assets/logo/cintas-sutil-verde-tile.svg')}
.cover--con-metodo{background:var(--verde-2);--pat:url('../assets/logo/monograma-profesional-verde-tile.svg')}
.cover--con-metodo::before{opacity:.35}

.badge{margin-left:4px;padding:2px 8px;border-radius:999px;border:1px solid var(--piedra-2);color:var(--piedra);font-size:10.5px}
.empty{margin:28px 0 0;color:var(--piedra)}
.empty a{color:var(--lima)}
.blog section{padding-bottom:clamp(80px,10vw,120px)}
@media (max-width:980px){.post-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.post-grid{grid-template-columns:1fr}}

/* ---------- Artículo ---------- */
.article__head{padding-top:clamp(40px,6vw,72px);display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.back{display:inline-flex;align-items:center;gap:8px;font:500 14px var(--f-title);color:var(--piedra);text-decoration:none}
.back:hover{color:var(--hueso)}
.article h1{font:600 clamp(34px,4.8vw,56px)/1.06 var(--f-title);letter-spacing:-.028em}
.article__dek{font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--piedra)}
.byline{display:flex;align-items:center;gap:14px;padding:18px 0;border-block:1px solid var(--grafito-3);width:100%}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 12%;background:var(--grafito-3)}
.byline strong{display:block;font:600 15px var(--f-title)}
.byline span{font-size:13.5px;color:var(--piedra-2)}
.draft-note{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:12px;border:1px dashed var(--grafito-4);color:var(--piedra);font-size:14.5px}
.draft-note i{color:var(--lima);font-size:18px;margin-top:2px}

.article__body{padding-top:36px;font-size:19px;line-height:1.75;color:var(--texto-largo)}
.article__body>*+*{margin-top:1.15em}
.article__body h2{margin-top:2.1em;font:600 clamp(25px,2.6vw,31px)/1.2 var(--f-title);letter-spacing:-.02em;color:var(--hueso)}
.article__body h3{margin-top:1.7em;font:600 21px/1.3 var(--f-title);color:var(--hueso)}
.article__body h2+*,.article__body h3+*{margin-top:.6em}
.article__body strong{color:var(--hueso);font-weight:700}
.article__body a{color:var(--hueso);text-decoration:underline;text-decoration-color:var(--lima);text-underline-offset:3px;text-decoration-thickness:2px}
.article__body ul,.article__body ol{padding-left:1.3em}
.article__body ul{list-style:none;padding-left:0}
.article__body ul li{position:relative;padding-left:26px}
.article__body ul li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:6px;border-radius:12px 12px 0 0;background:var(--lima)}
.article__body ol{list-style:decimal}
.article__body li+li{margin-top:.5em}
.article__body blockquote{margin-inline:0;padding:4px 0 4px 26px;border-left:3px solid var(--lima);font:500 clamp(21px,2.3vw,25px)/1.45 var(--f-title);color:var(--hueso);letter-spacing:-.01em}
.article__body .src{font:400 12.5px/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lima)}
.article__body h2+.src{margin-top:.5em}
.article__body hr{border:0;height:7px;width:64px;border-block:2px solid var(--grafito-4);margin:2.4em 0}
.article__body em{color:var(--piedra)}
.article__body code{font:400 .85em var(--f-mono);background:var(--grafito-3);padding:2px 6px;border-radius:4px}
.article__body figure{margin:2em 0}
.article__body figure img{display:block;width:auto;max-width:100%;margin-inline:auto;height:auto;max-height:82vh;object-fit:contain;border-radius:12px;background:var(--grafito-2)}
.article__body figcaption,.article__hero figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--piedra-2);text-align:center}
.article__body .tabla{margin:1.6em 0;overflow-x:auto}
.article__body table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.article__body th{font:400 11.5px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--piedra-2);text-align:right;padding:0 12px 10px;border-bottom:1px solid var(--grafito-4)}
.article__body td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--grafito-3)}
.article__body th:first-child,.article__body td:first-child{text-align:left;padding-left:0}
.article__body p img{border-radius:8px;display:inline-block;vertical-align:middle}

.article__foot{margin-top:56px;display:flex;flex-direction:column;gap:28px}
.article__actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding-top:28px;border-top:1px solid var(--grafito-3)}
.share{display:flex;align-items:center;gap:8px;margin-left:auto}
.share span{font:400 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--piedra-2);margin-right:6px}
.share a,.share button{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--grafito-4);background:transparent;color:var(--hueso);font-size:19px;cursor:pointer;text-decoration:none;transition:border-color .2s,color .2s}
.share a:hover,.share button:hover{border-color:var(--lima);color:var(--lima)}
.disclaimer{font-size:14px;color:var(--piedra-2);padding:16px 18px;border-radius:12px;background:var(--grafito-2)}
.author-box{display:flex;gap:20px;align-items:flex-start;padding:26px;border-radius:var(--r-card);border:1px solid var(--grafito-3)}
.author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 12%;flex-shrink:0;background:var(--grafito-3)}
.author-box strong{font:600 18px var(--f-title)}
.author-box p{margin-top:6px;color:var(--piedra);font-size:15.5px}
.author-box .link-arrow{margin-top:14px;font-size:15px}
.related{padding:clamp(72px,9vw,110px) clamp(16px,4vw,40px)}
.related .post-grid{grid-template-columns:1fr 1fr;margin-top:24px}
@media (max-width:620px){.related .post-grid{grid-template-columns:1fr}.share{margin-left:0}.author-box{flex-direction:column}}

/* ---------- Páginas legales ---------- */
.article--legal{padding-bottom:clamp(80px,10vw,120px)}
.article--legal .article__body{font-size:17px}
.article--legal .article__body h2{font-size:22px;margin-top:1.8em}

/* Etiquetas del artículo */
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.tags li{padding:6px 12px;border-radius:999px;border:1px solid var(--grafito-4);font:400 12.5px var(--f-mono);color:var(--piedra)}
.tags li::before{content:"#";color:var(--lima);margin-right:2px}

/* Página 404: las dos mitades del isotipo, separadas */
.e404{min-height:calc(100svh - 80px);display:grid;align-items:center;padding:clamp(120px,16vh,180px) 0 clamp(72px,10vh,120px)}
.e404__sym{width:clamp(150px,22vw,220px);height:auto;margin-bottom:36px;overflow:visible}
.e404__top{fill:var(--hueso);transform:translate(-34px,-26px);animation:e404-top 4s var(--ease,ease) infinite alternate}
.e404__bottom{fill:var(--lima);transform:translate(34px,26px);animation:e404-bottom 4s var(--ease,ease) infinite alternate}
@keyframes e404-top{to{transform:translate(-48px,-40px)}}
@keyframes e404-bottom{to{transform:translate(48px,40px)}}
.e404 .lead{max-width:52ch}
.e404__ctas{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
@media (prefers-reduced-motion:reduce){.e404__top,.e404__bottom{animation:none}}