/* ==========================================================
   Firessa · aguazmg.firessa.com · blog.css
   Sección «blog» de la portada (#blog), índice /blog/ y plantilla de artículo.
   Se carga DESPUÉS de styles.css y usa sus tokens (:root); no los redefine.
   Las páginas del blog las genera _blog/build_blog.py (no editar el HTML a mano).
   Sin imágenes: los artículos solo llevan el texto del cliente.
   ========================================================== */

/* ---------- Navegación: enlace activo y selección de texto ---------- */
.main-nav a[aria-current="page"]{ color:var(--c-aqua) }
.main-nav a[aria-current="page"]::after{ transform:scaleX(1) }
.blog-home ::selection, .post ::selection, .blog-index ::selection{ background:rgba(100,204,201,.38); color:var(--c-dark) }

/* ---------- Enlace con flecha ---------- */
.blog-link{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.95rem; letter-spacing:.2px;
  color:var(--c-blue-2);
  text-decoration:underline; text-decoration-color:rgba(5,144,177,.35);
  text-decoration-thickness:1.5px; text-underline-offset:5px;
  transition:color .2s, text-decoration-color .2s;
}
.blog-link svg{ transition:transform .35s var(--easing-out) }
.blog-link:hover{ color:var(--c-dark); text-decoration-color:currentColor }
.blog-link:hover svg{ transform:translateX(3px) }
.blog-link:focus-visible{ outline:2px solid var(--c-aqua); outline-offset:4px; border-radius:4px }

/* ==========================================================
   TARJETAS (portada, índice y «sigue leyendo»)
   Toda la tarjeta es clicable con UN solo enlace (el del título).
   ========================================================== */
.post-card{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; gap:14px;
  padding:30px 32px 30px;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(31,42,68,.05), 0 14px 34px -24px rgba(20,48,74,.40);
  transition:transform .55s var(--easing-out), box-shadow .55s var(--easing-out), border-color .3s;
}
.post-card:hover{
  transform:translateY(-3px); border-color:rgba(100,204,201,.7);
  box-shadow:0 2px 4px rgba(31,42,68,.05), 0 24px 46px -26px rgba(0,105,140,.40);
}
.post-card:has(a:focus-visible){ outline:2px solid var(--c-aqua); outline-offset:4px }
.post-card__meta{
  display:flex; flex-wrap:wrap; gap:4px 16px; margin:0;
  font-size:.84rem; color:var(--c-muted); font-variant-numeric:tabular-nums;
}
.post-card__title{ margin:0; font-size:clamp(1.3rem, 2vw, 1.65rem); line-height:1.06; text-wrap:balance }
.post-card__title a{ color:var(--c-dark); transition:color .2s }
.post-card__title a::after{ content:""; position:absolute; inset:0; z-index:1 }
.post-card__title a:focus-visible{ outline:none }
.post-card:hover .post-card__title a{ color:var(--c-blue-2) }
.post-card__excerpt{ margin:0; color:#3B4760; font-size:1rem; line-height:1.62 }
.post-card__more{
  margin-top:auto; padding-top:6px;
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.92rem; color:var(--c-blue-2);
}
.post-card__more svg{ transition:transform .35s var(--easing-out) }
.post-card:hover .post-card__more svg{ transform:translateX(3px) }
.post-card--lead{ padding:38px 40px 36px }
.post-card--lead .post-card__title{ font-size:clamp(1.6rem, 2.9vw, 2.35rem) }
.post-card--lead .post-card__excerpt{ font-size:1.08rem; max-width:60ch }
@media (max-width:540px){
  .post-card, .post-card--lead{ padding:24px 22px 24px }
}

/* ==========================================================
   PORTADA · sección #blog (entre preguntas frecuentes y contacto)
   ========================================================== */
.blog-home{ background:var(--c-bg) }
.blog-home__head{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end;
  gap:18px 40px; margin-bottom:40px;
}
.blog-home__head h2{ margin:0 0 12px; max-width:21ch; text-wrap:balance }
.blog-home__head p{ margin:0; color:var(--c-muted); font-size:1.05rem; max-width:58ch }
.blog-home__head .blog-link{ margin-bottom:6px; white-space:nowrap }
.blog-home__grid{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:28px; align-items:stretch;
}
.blog-home__grid--solo{ grid-template-columns:minmax(0,1fr); max-width:860px }
.blog-home__list{ display:flex; flex-direction:column; gap:20px }
.blog-home__list > .post-card{ flex:1 }
.blog-home__foot{ display:none; margin:26px 0 0 }
@media (max-width:900px){
  .blog-home__grid{ grid-template-columns:minmax(0,1fr) }
  .blog-home__head{ grid-template-columns:minmax(0,1fr); margin-bottom:28px }
  .blog-home__head .blog-link{ display:none }
  .blog-home__foot{ display:block }
}

/* ==========================================================
   ÍNDICE /blog/
   ========================================================== */
.blog-page-head{ padding:40px 0 34px }
.blog-page-head h1{ margin:16px 0 12px; font-size:clamp(2.1rem, 5vw, 3.4rem); text-wrap:balance }
.blog-page-head p{ margin:0; max-width:60ch; color:var(--c-muted); font-size:1.1rem; line-height:1.6 }
.blog-index{ padding:6px 0 84px }
.blog-index__feature{ margin-bottom:28px }
.blog-index__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px }
@media (max-width:900px){ .blog-index__grid{ grid-template-columns:minmax(0,1fr) } }

/* Tarjeta de diagnóstico dentro del índice */
.blog-cta-card{
  display:flex; flex-direction:column; justify-content:flex-end; gap:16px;
  padding:34px 32px 32px; border-radius:var(--radius);
  background:#fff; border:1px solid var(--c-line);
  color:var(--c-text); min-height:300px;
}
.blog-cta-card h2{ color:var(--c-dark); margin:0; font-size:clamp(1.5rem, 2.4vw, 2rem); text-wrap:balance }
.blog-cta-card p{ margin:0; color:var(--c-muted); line-height:1.6; max-width:44ch }
.blog-cta-card .btn{ align-self:flex-start; margin-top:6px }

/* ==========================================================
   RUTA (breadcrumb)
   ========================================================== */
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; margin:0; padding:0; list-style:none; font-size:.86rem; color:var(--c-muted) }
.crumbs li{ display:inline-flex; align-items:center; min-width:0; max-width:100% }
.crumbs li + li::before{ content:"/"; margin:0 10px; color:#9AA6BA }
.crumbs a{ color:var(--c-muted); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; transition:color .2s, text-decoration-color .2s }
.crumbs a:hover{ color:var(--c-dark); text-decoration-color:currentColor }
.crumbs [aria-current="page"]{ color:var(--c-dark); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ==========================================================
   ARTÍCULO
   ========================================================== */
.post{ background:#fff }
.post-wrap{ max-width:1088px; margin:0 auto; padding:0 24px }
@media (min-width:1024px){ .post-wrap{ padding:0 32px } }

.post-top{ background:var(--c-bg); padding:34px 0 46px; border-bottom:1px solid var(--c-line) }
.post-title{
  margin:18px 0 18px; max-width:21ch;
  font-size:clamp(2.05rem, 4.6vw, 3.45rem); line-height:1.03;
  text-wrap:balance;
}
.post-lead{ margin:0 0 22px; max-width:62ch; font-size:clamp(1.1rem, 1.55vw, 1.28rem); line-height:1.6; color:#34405A }
.post-meta{ display:flex; flex-wrap:wrap; gap:6px 20px; margin:0; font-size:.92rem; color:var(--c-muted); font-variant-numeric:tabular-nums }
.post-meta strong{ color:var(--c-dark); font-weight:600 }

.post-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 240px;
  gap:72px; align-items:start;
  padding:48px 0 24px;
}
@media (max-width:1023px){
  .post-layout{ grid-template-columns:minmax(0,1fr); gap:0; padding-top:32px }
  .post-toc{ display:none }
}

/* Índice lateral (escritorio) */
.post-toc{ position:sticky; top:calc(var(--header-h, 72px) + 32px); order:2; font-size:.9rem }
.post-toc__label{ margin:0 0 12px; font-weight:700; color:var(--c-dark); font-size:.86rem; letter-spacing:.2px }
.post-toc ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--c-line) }
.post-toc a{
  display:block; padding:7px 0 7px 16px; margin-left:-1px;
  border-left:1px solid transparent;
  color:var(--c-muted); line-height:1.38;
  transition:color .2s, border-color .2s;
}
.post-toc a:hover{ color:var(--c-dark) }
.post-toc a[aria-current="true"]{ color:var(--c-blue-2); font-weight:600; border-left-color:var(--c-blue) }
.post-toc a:focus-visible{ outline:2px solid var(--c-aqua); outline-offset:2px; border-radius:4px }

/* Índice plegable (celular y tableta) */
.post-toc-m{ display:none; margin:0 0 30px; border:1px solid var(--c-line); border-radius:var(--radius-sm); background:var(--c-bg-alt) }
@media (max-width:1023px){ .post-toc-m{ display:block } }
.post-toc-m summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; font-weight:700; color:var(--c-dark); font-size:.98rem;
}
.post-toc-m summary::-webkit-details-marker{ display:none }
.post-toc-m summary svg{ transition:transform .3s var(--easing-out); color:var(--c-blue-2) }
.post-toc-m[open] summary svg{ transform:rotate(180deg) }
.post-toc-m ol{ margin:0; padding:0 18px 14px 38px; color:var(--c-muted) }
.post-toc-m li{ padding:5px 0 }
.post-toc-m a{ color:var(--c-dark); text-decoration:underline; text-decoration-color:rgba(31,42,68,.25); text-underline-offset:3px }
.post-toc-m summary:focus-visible{ outline:2px solid var(--c-aqua); outline-offset:2px; border-radius:var(--radius-sm) }

/* ---------- Texto del artículo ---------- */
.prose{ font-size:1.125rem; line-height:1.72; color:var(--c-text); min-width:0 }
.prose > :first-child{ margin-top:0 }
.prose h2{
  margin:2.2em 0 .65em; font-size:clamp(1.45rem, 2.5vw, 1.95rem); line-height:1.06;
  scroll-margin-top:calc(var(--header-h, 72px) + 28px); text-wrap:balance;
}
.prose > .post-toc-m + h2{ margin-top:0 }
.prose p{ margin:0 0 1.15em }
/* Texto justificado (pedido de Angel, 14-oct). Con guiones automáticos para que no queden huecos grandes en celular. */
.prose p, .prose li, .post-lead, .post-cta p, .post-card__excerpt{
  text-align:justify; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:7 4 3;
}
.prose strong{ font-weight:600; color:var(--c-dark) }
.prose em{ font-style:italic }
/* Solo los enlaces dentro del texto (párrafos, listas, tablas); los botones y «compartir» llevan su propio estilo */
.prose :where(p, li, td, th) a{ color:var(--c-blue-2); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px }
.prose :where(p, li, td, th) a:hover{ text-decoration-thickness:2px; color:var(--c-dark) }
.prose :where(p, li, td, th) a:focus-visible{ outline:2px solid var(--c-aqua); outline-offset:2px; border-radius:3px }
.post-share a{ text-decoration:none }
.prose ul, .prose ol{ margin:0 0 1.3em; padding-left:1.35em }
.prose ul{ list-style:disc }
.prose ol{ list-style:decimal }
.prose li{ margin-bottom:.5em; padding-left:.25em }
.prose li::marker{ color:var(--c-blue) }
.prose ol > li::marker{ font-weight:700; color:var(--c-blue-2) }

/* ---------- Tablas ---------- */
.post-table{ margin:1.7em 0 1.9em }
.post-table table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:.96rem; line-height:1.5;
  border:1px solid var(--c-line); border-radius:var(--radius-sm); overflow:hidden;
}
.post-table thead th{
  background:var(--c-dark); color:#fff; text-align:left; vertical-align:bottom;
  font-weight:600; font-size:.88rem; padding:13px 16px;
}
.post-table thead th:last-child{ color:var(--c-yellow) }
.post-table tbody th, .post-table td{ padding:14px 16px; vertical-align:top; border-top:1px solid var(--c-line); text-align:left }
.post-table tbody tr:first-child > *{ border-top:0 }
.post-table tbody th{ font-weight:600; color:var(--c-dark); width:24% }
.post-table td{ color:#2C3852 }
.post-table td:last-child{ background:#FFFAE6 }
@media (max-width:720px){
  .post-table table, .post-table tbody, .post-table tr, .post-table th, .post-table td{ display:block; width:100% }
  .post-table table{ border:0; border-radius:0; overflow:visible }
  .post-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
  .post-table tr{ border:1px solid var(--c-line); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:12px; background:#fff }
  .post-table tbody th{ width:auto; border:0; padding:14px 16px 4px; font-size:1.05rem }
  .post-table td{ border:0; padding:8px 16px }
  .post-table td::before{ content:attr(data-label); display:block; margin-bottom:2px; font-size:.78rem; font-weight:700; color:var(--c-muted) }
  .post-table td:last-child{ padding:10px 16px 14px; margin-top:4px }
  .post-table td:last-child::before{ color:#7A5C00 }
}

/* ---------- Cierre del artículo (texto de Firessa + botones) ---------- */
.post-cta{
  margin:2.6em 0 2.4em; padding:30px 32px 28px;
  border-radius:var(--radius);
  background:var(--c-bg); border:1px solid var(--c-line);
  color:var(--c-text);
}
.post-cta p{ margin:0 0 22px; max-width:56ch; font-size:1.1rem; line-height:1.65; color:var(--c-text) }
/* Botón secundario sobre fondo claro (el .btn-ghost del chasis es para fondos oscuros) */
.post-cta .btn-ghost{ background:transparent; color:var(--c-dark); border-color:rgba(31,42,68,.35); -webkit-backdrop-filter:none; backdrop-filter:none }
.post-cta .btn-ghost:hover{ background:#fff; color:var(--c-dark); border-color:var(--c-dark) }
.post-cta__actions{ display:flex; flex-wrap:wrap; gap:12px }
@media (max-width:540px){
  .post-cta{ padding:26px 22px 24px }
  .post-cta__actions .btn{ width:100%; white-space:normal }
}

/* ---------- Fuentes ---------- */
.post-sources{ margin-top:2.4em; padding-top:1.6em; border-top:1px solid var(--c-line) }
.post-sources h2{ margin-top:0; font-size:1.5rem }
.post-sources ol{ list-style:none; counter-reset:fuente; margin:0; padding:0; display:grid; gap:14px }
.post-sources li{
  counter-increment:fuente; margin:0; padding:0;
  display:grid; grid-template-columns:30px minmax(0,1fr); gap:0 10px;
  font-size:.96rem; line-height:1.45;
}
.post-sources li::before{ content:counter(fuente); font-family:'Kenyan Coffee', sans-serif; font-weight:700; font-size:1.15rem; line-height:1.3; color:var(--c-blue-2) }
.post-sources a{ color:var(--c-dark); font-weight:600; text-decoration:underline; text-decoration-color:rgba(0,169,206,.45); text-underline-offset:3px; overflow-wrap:anywhere }
.post-sources a:hover{ text-decoration-color:currentColor; color:var(--c-blue-2) }
.post-sources a svg{ display:inline-block; vertical-align:-2px; margin-left:4px; color:var(--c-blue-2) }
.post-sources .medio{ display:block; margin-top:2px; color:var(--c-muted); font-size:.86rem }

/* ---------- Compartir ---------- */
.post-share{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; margin-top:2.2em }
.post-share__label{ font-weight:700; color:var(--c-dark); font-size:.95rem; margin-right:4px }
.post-share a, .post-share button{
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 16px; border-radius:var(--radius-pill);
  border:1.5px solid var(--c-line); background:#fff; color:var(--c-dark);
  font-size:.9rem; font-weight:600; cursor:pointer;
  transition:border-color .2s, color .2s, background .2s, transform .2s var(--easing-spring);
}
.post-share a:hover, .post-share button:hover{ border-color:var(--c-aqua); color:var(--c-blue-2); background:var(--c-bg-alt) }
.post-share a:active, .post-share button:active{ transform:translateY(1px) }
.post-share svg{ width:18px; height:18px; fill:currentColor; flex:none }
.post-share a:focus-visible, .post-share button:focus-visible{ outline:2px solid var(--c-aqua); outline-offset:3px }
.post-share button[data-copiado="1"]{ border-color:var(--c-aqua-2); color:var(--c-blue-2) }

/* ---------- Sigue leyendo ---------- */
.post-next{ background:var(--c-bg); padding:64px 0 76px }
.post-next__head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px 32px; margin-bottom:28px }
.post-next__head h2{ margin:0 }
.post-next__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px }
.post-next__grid--uno{ grid-template-columns:minmax(0,1fr); max-width:860px }
@media (max-width:860px){ .post-next__grid{ grid-template-columns:minmax(0,1fr) } }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .post-card, .post-card__more svg, .blog-link svg{ transition:none }
  .post-card:hover{ transform:none }
}