/* Blog (septiembre 2026): índice (blog.html) y plantilla de guía
   (blog/*.html). Reutiliza los tokens de assets/styles.css (--indigo,
   --card-line, --card-radius, --card-shadow, --wrap, .btn...) en vez de
   redefinirlos, para que se sienta parte del mismo sitio y no una
   sección aparte. */

/* ---------- Índice del blog ---------- */
/* La cabecera de blog.html ya no tiene reglas propias aquí (era
   .blog-hero, con su propio relleno y tamaño de título, distinto del
   resto del sitio) -- copiada tal cual de faq.html (septiembre 2026):
   mismo id de sección (#faq-hero), misma clase de contenedor
   (.hero-faq, con su bg-blueprint), así que su tamaño y su alto salen
   enteros de assets/faq.css, sin nada que mantener por separado aquí. */

.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;padding:32px 0 var(--space-section)}

/* Toda la tarjeta es el enlace -- mismo lenguaje visual que .dep-card en
   cobertura (borde suave, radio, tinte índigo al pasar el cursor), pero
   con más contenido (etiqueta, resumen, tiempo de lectura) así que usa
   .card como base en vez de duplicar sombra/borde/radio a mano. */
.blog-card{display:flex;flex-direction:column;gap:12px;padding:24px;
  text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.blog-card:hover{border-color:rgba(79,70,229,.35);transform:translateY(-2px)}
.blog-card-tag{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--indigo-bright);background:#eae8fb;
  padding:5px 10px;border-radius:999px}
.blog-card h2{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.35;margin:0}
.blog-card p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0}
.blog-card-meta{margin-top:auto;padding-top:8px;font-size:12px;color:var(--faint)}

/* ---------- Cabecera de guía ---------- */
.guide-hero{background:#f2f1f7}
.guide-hero .wrap{padding-top:36px;padding-bottom:32px}
.guide-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--muted)}
.guide-crumbs a{color:var(--muted);text-decoration:none}
.guide-crumbs a:hover{color:var(--ink)}
.guide-crumbs .sep{color:var(--faint)}
.guide-crumbs .current{color:var(--ink)}

.guide-tag{display:inline-block;margin-top:18px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--indigo-bright);background:#eae8fb;padding:6px 12px;border-radius:999px}

.guide-hero h1{margin-top:14px;font-size:36px;font-weight:600;letter-spacing:-.03em;line-height:1.2;max-width:820px}

.guide-meta{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:13px;color:var(--muted)}
.guide-meta .hook{color:var(--indigo-bright);font-weight:650}
.guide-meta .dot{color:var(--faint)}

/* ---------- Cuerpo a dos columnas ---------- */
.guide-layout{display:grid;grid-template-columns:210px 1fr;gap:56px;align-items:start;padding:var(--space-section) 0}

/* top:92px deja aire bajo el nav (sticky, ~64px) al fijar el índice. */
.guide-toc{position:sticky;top:92px}
.guide-toc-label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.guide-toc ol{list-style:none;display:flex;flex-direction:column;gap:2px;margin:0;padding:0}
/* El filo gris que pasa a índigo + negrita en el apartado visible --
   assets/blog-guide.js decide cuál según la posición del scroll y le
   pone .is-active; aquí solo se define cómo se ve cada estado. */
.guide-toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--line);
  font-size:13.5px;line-height:1.4;color:var(--muted);text-decoration:none;
  transition:border-color .15s ease,color .15s ease}
.guide-toc a:hover{color:var(--ink)}
.guide-toc a.is-active{border-left-color:var(--indigo-bright);color:var(--ink);font-weight:650}

.guide-article{max-width:660px;min-width:0}
.guide-article h2{font-size:23px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  margin:40px 0 16px;scroll-margin-top:96px}
.guide-article h2:first-of-type{margin-top:0}
.guide-article p{font-size:15.5px;line-height:1.75;color:var(--ink-2);margin:0 0 18px}
.guide-article strong{color:var(--ink);font-weight:650}

/* Tarjetas de cifras: para los datos duros del artículo. En fila en
   escritorio, apiladas en pantallas estrechas (ver el media query). */
.stat-row{display:flex;gap:14px;margin:22px 0 28px}
.stat-card{flex:1;min-width:0;background:var(--charcoal);border:1px solid var(--card-line);
  border-radius:12px;padding:18px}
.stat-card b{display:block;font-size:32px;font-weight:700;letter-spacing:-.02em;color:var(--indigo-bright);line-height:1}
.stat-card span{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);line-height:1.4}

/* Bloques de norma: las citas normativas del Markdown llegan como
   blockquote -- aquí se resuelven con filo índigo, fondo muy pálido y
   texto en cursiva, distinto del resto del cuerpo. */
.norm-block{background:#f6f5fd;border:1px solid rgba(79,70,229,.16);border-left:3px solid var(--indigo-bright);
  border-radius:0 8px 8px 0;padding:16px 20px;margin:24px 0}
.norm-block .norm-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--indigo-bright);margin-bottom:8px}
.norm-block p{font-style:italic;color:var(--ink-2);margin:0;font-size:14.5px;line-height:1.65}

/* Llamada a la acción hacia /cobertura.html en el punto del artículo
   donde el texto la menciona. El radar de fondo es puramente decorativo
   (aria-hidden) y vive recortado por la esquina superior derecha gracias
   al overflow:hidden del contenedor. */
.guide-cta{position:relative;overflow:hidden;border-radius:14px;padding:30px 32px;margin:28px 0;
  background:linear-gradient(135deg,#5b52ec,#3c34c9);color:#fff}
.guide-cta-radar{position:absolute;top:-34px;right:-34px;width:200px;height:200px;opacity:.13;pointer-events:none}
.guide-cta-body{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:24px}
.guide-cta-text h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px;color:#fff}
.guide-cta-text p{font-size:14px;color:#cfcbff;margin:0;max-width:420px;line-height:1.5}
/* btn-white va siempre junto a la clase btn compartida en el HTML
   (class="btn btn-white") -- de ahí saca el padding, el radio de esquina,
   el tamaño y peso de letra y el hueco entre texto e icono, iguales a
   cualquier otro botón del sitio (unificación de septiembre 2026, ver la
   nota junto a .btn en styles.css). Aquí solo queda lo que de verdad es
   propio de este botón: blanco sobre el morado del bloque, en vez de
   índigo sobre gris -- porque vive encima de un fondo de color, no del
   fondo general de la página. */
.guide-cta .btn-white{flex:none;background:#fff;color:#3c34c9;white-space:nowrap}
.guide-cta .btn-white:hover{background:#eef0ff}

.guide-sources{margin-top:36px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:12.5px;color:var(--faint);line-height:1.6}

/* ---------- Tableta y móvil ---------- */
@media (max-width:999px){
  /* El índice de 210px fijo no tiene sitio digno por debajo de 1000px
     (210 + 56 de separación + 660 del artículo ya suman 926, al límite
     justo del propio quiebre) -- se quita del todo, no solo se destaca,
     y el artículo pasa a ser la única columna. */
  .guide-toc{display:none}
  .guide-layout{display:block;padding:32px 0}
  .guide-article{max-width:none}

  .guide-hero .wrap{padding-top:28px;padding-bottom:24px}
  .guide-hero h1{font-size:28px}

  .stat-row{flex-direction:column}

  .guide-cta{padding:24px 22px}
  .guide-cta-body{flex-direction:column;align-items:stretch;text-align:left}
  .guide-cta .btn-white{width:100%;text-align:center}

  .blog-grid{grid-template-columns:1fr;padding:24px 0 var(--space-section-sm)}
}