/* ==========================================================================
   Blog · capa de compatibilidad con el diseño de 2026-09-10
   --------------------------------------------------------------------------
   El blog no es estático: lo generan netlify/functions/blog-index.mjs y
   blog-render.mjs con sus propias clases. En lugar de reescribir el markup de
   las funciones (y arriesgar las URLs que Google ya tiene indexadas), esta
   hoja traduce esas clases al sistema de /styles/base.css.

   Regla: aquí NO se inventan colores ni tamaños. Todo sale de los tokens.
   ========================================================================== */

/* --- Contenedores generales ---------------------------------------------- */
.blog-hero,
.blog-post-page > *,
.blog-listing-grid,
.post-extras {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Portada del blog ----------------------------------------------------- */
.blog-hero {
  padding-block: clamp(48px, 7vw, 88px) clamp(24px, 3vw, 36px);
}
.blog-hero h1 {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 20ch;
}
.blog-hero > p {
  color: var(--muted);
  font-size: clamp(16px, 1.3vw, 18px);
  max-width: 60ch;
  margin: 0;
}
.blog-hero > p a {
  color: var(--coral);
  text-decoration: none;
  font-weight: 600;
}
.blog-hero > p a:hover { text-decoration: underline; }

/* El gradiente del diseño anterior pasa a ser el acento plano. */
.gradient-text {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  color: var(--coral);
}

/* --- Filtros por categoría (pills) ---------------------------------------- */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sand);
  color: var(--muted);
  font: 600 13px/1 var(--head);
  letter-spacing: 0.02em;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.filter-btn:hover { color: var(--ink); border-color: var(--line); }
.filter-btn.active {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

/* --- Rejilla de artículos -------------------------------------------------- */
.blog-listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap-lg);
  padding-block: clamp(28px, 4vw, 44px) clamp(56px, 8vw, 96px);
}
.blog-listing-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.blog-listing-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.blog-listing-card > a { text-decoration: none; color: inherit; display: contents; }
.card-visual { display: block; aspect-ratio: 16 / 9; background: var(--sand); overflow: hidden; }
.card-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1 1 auto; }
.card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meta-tag {
  /* La función inyecta un color por categoría en style="": lo neutralizamos
     para que el listado tenga un solo acento y no un arcoíris. */
  color: var(--coral-dark) !important;
  background: var(--coral-soft);
  font: 700 11px/1 var(--head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--r-pill);
}
.meta-date { font-size: 12.5px; color: var(--muted); }
.card-title {
  font-family: var(--head);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.card-excerpt { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0; }
.card-footer-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line-dash);
  font-size: 12.5px;
  color: var(--muted);
}

/* --- Artículo -------------------------------------------------------------- */
.blog-post-page { padding-bottom: clamp(48px, 7vw, 80px); }
.blog-post-hero { padding-block: clamp(40px, 6vw, 72px) 0; max-width: 820px; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 20px;
}
.back-link:hover { color: var(--coral); }
.blog-post-hero h1 {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 12px 0 16px;
}
.blog-post-tag {
  display: inline-flex;
  background: var(--coral-soft);
  color: var(--coral-dark);
  font: 700 11px/1 var(--head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 11px;
  border-radius: var(--r-pill);
}
.blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 14px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--line-dash);
}
.blog-post-cover img { border-radius: var(--r) !important; box-shadow: var(--shadow); }

/* Cuerpo del artículo: misma tipografía que .prose de base.css */
.blog-post-body {
  color: var(--ink);
  font-size: 17.5px;
  line-height: 1.72;
}
.blog-post-body > * { max-width: 68ch; }
.blog-post-body h2 {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(23px, 2.4vw, 31px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 2.2em 0 0.6em;
  scroll-margin-top: 96px;
}
.blog-post-body h3 {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.3;
  margin: 1.8em 0 0.5em;
  scroll-margin-top: 96px;
}
.blog-post-body p { margin: 0 0 1.15em; }
.blog-post-body a { color: var(--coral); text-decoration: underline; text-underline-offset: 3px; }
.blog-post-body a:hover { color: var(--coral-dark); }
.blog-post-body ul,
.blog-post-body ol { margin: 0 0 1.25em; padding-left: 1.3em; }
.blog-post-body li { margin-bottom: 0.5em; }
.blog-post-body li::marker { color: var(--coral); }
.blog-post-body strong { font-weight: 700; }
.blog-post-body blockquote {
  margin: 1.6em 0;
  padding: 18px 22px;
  background: var(--sand-2);
  border-left: 3px solid var(--coral);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink);
  font-size: 17px;
}
.blog-post-body blockquote p:last-child { margin-bottom: 0; }
.blog-post-body code {
  background: var(--sand);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.blog-post-body pre {
  max-width: 100%;
  background: var(--ink);
  color: #e8edf7;
  padding: 18px 20px;
  border-radius: var(--r-sm);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 1.4em;
}
.blog-post-body pre code { background: none; padding: 0; color: inherit; }
.blog-post-body img { max-width: 100%; height: auto; border-radius: var(--r-sm); }

/* Código en línea largo (rutas, comandos) y tablas anchas: no pueden empujar
   la página. El código parte por caracteres; la tabla scrollea en su caja. */
.blog-post-body code { overflow-wrap: anywhere; word-break: break-word; }
.blog-post-body :not(pre) > code { max-width: 100%; display: inline; }
.blog-post-body .table-wrap,
.blog-post-body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.blog-post-body table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5em;
  font-size: 15.5px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.blog-post-body th,
.blog-post-body td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.blog-post-body th { background: var(--sand); font: 700 13px/1.3 var(--head); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.blog-post-body tr:last-child td { border-bottom: 0; }
.blog-post-body hr { border: 0; border-top: 1px dashed var(--line-dash); margin: 2.2em 0; }

/* --- Cierre del artículo: CTA, autor y relacionados ------------------------ */
.post-extras { display: grid; gap: clamp(28px, 4vw, 40px); padding-bottom: clamp(56px, 8vw, 96px); }
.post-cta {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 40px);
  text-align: center;
}
.post-cta h2,
.post-cta h3 { font-family: var(--head); font-weight: 800; color: #fff; margin: 0 0 10px; font-size: clamp(21px, 2.2vw, 28px); letter-spacing: -0.02em; }
.post-cta p { color: rgba(255, 255, 255, .78); margin: 0 auto 18px; max-width: 52ch; }
.post-cta-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.post-cta-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font: 600 15px/1 var(--head);
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, .3);
  color: #fff;
}
.post-cta-links a.primary,
.post-cta-links a.btn-primary {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
  box-shadow: var(--shadow-coral);
}
.post-cta-links a:hover { border-color: #fff; }

.author-box {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.author-box img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.author-box h3,
.author-box h4 { font-family: var(--head); font-weight: 700; margin: 0 0 4px; font-size: 17px; }
.author-box p { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0; }
.author-box a { color: var(--coral); font-weight: 600; text-decoration: none; }

.related-posts h2,
.related-posts h3 {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(21px, 2.2vw, 28px);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); }
.related-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.rc-cat {
  display: inline-block;
  background: var(--coral-soft);
  color: var(--coral-dark);
  font: 700 10.5px/1 var(--head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  margin-bottom: 10px;
}

/* Botón suelto que emite blog-render fuera del CTA */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--coral);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font: 600 15px/1 var(--head);
  text-decoration: none;
  box-shadow: var(--shadow-coral);
}
.btn-primary:hover { background: var(--coral-dark); }

/* --- Móvil ---------------------------------------------------------------- */
/* Cinturón de seguridad: nada puede desbordar el ancho de la página. */
.blog-post-page, .blog-post-body, .post-extras { max-width: 100%; overflow-x: clip; }

@media (max-width: 640px) {
  .blog-post-hero,
  .blog-post-body,
  .blog-post-cover { padding-inline: var(--gutter) !important; }
  .blog-post-body { font-size: 16.5px; }
  .author-box { flex-direction: column; }
}