/**
 * ts-blog.css — True Surfing Blog
 * Reescrito 2026-07-10 (REDISEÑO PILOTO) siguiendo SKILL-DISENO-TRUESURFING.md
 *
 * Reglas bloqueadas: border-radius 0 · fondos #fff / #f8f7f4 · font-weight <=500
 * acento #4ECDC4 solo funcional (dato o CTA) · cero emojis · sin box-shadow
 *
 * TODO SCOPED bajo .ts-blog / .ts-blog-page.
 * ts-blog.css se carga en page_name == "cms" (que incluye las páginas LEGALES),
 * así que ninguna regla puede colgar de un selector global.
 *
 * Cargado via head.tpl condicionado a page_name == "cms" || "cms-category"
 */

/* ─── Tokens ──────────────────────────────────────────────── */
.ts-blog {
  --ts-ink:    #16181a;
  --ts-bg:     #ffffff;
  --ts-bone:   #f8f7f4;
  --ts-line:   #e3e1dc;
  --ts-mute:   #6b7177;
  --ts-accent: #4ECDC4;

  /* Space Grotesk (display) + Inter (cuerpo, grotesca neutra) + Space Mono
     (etiquetas). Cargadas en head.tpl para page_name cms/cms-category.
     El fallback NO usa las del tema (Archivo/Poppins) a propósito: si Google
     Fonts no cargara, cae a grotescas de sistema, no a la geométrica redonda. */
  --ts-disp: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ts-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ts-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* escala 8 / 16 / 24 / 40 / 64 / 96 */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px;

  font-family: var(--ts-body);
  color: var(--ts-ink);
  line-height: 1.6;
  font-weight: 400;
  background: var(--ts-bg);
}

/* El tema aplica text-align:justify al contenido CMS. En texto de columna
   estrecha produce ríos y huecos entre palabras: bandera a la izquierda. */
.ts-blog,
.ts-blog p,
.ts-blog li,
.ts-blog h1,
.ts-blog h2,
.ts-blog h3 { text-align: left; }

/* ─── Reset scoped ────────────────────────────────────────── */
.ts-blog *,
.ts-blog *::before,
.ts-blog *::after { box-sizing: border-box; }

/* regla bloqueada nº1: radio 0 en TODO lo que cuelgue del blog */
.ts-blog,
.ts-blog *,
.ts-blog *::before,
.ts-blog *::after { border-radius: 0 !important; }

/* nada de sombras dentro del blog */
.ts-blog,
.ts-blog * { box-shadow: none !important; }

.ts-blog img { display: block; max-width: 100%; height: auto; }
.ts-blog a { color: inherit; text-decoration: none; }

/* ─── Layout full-bleed ───────────────────────────────────── */
/* Quitar el card wrapper de PS8 en páginas de blog */
.ts-blog-page#content.page-content,
.ts-blog-page #content.page-content,
#content.page-cms.ts-blog-page {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

/* El sidebar de tienda no pinta nada en una página editorial.
   :has() se evalúa sobre body — las páginas LEGALES no tienen .ts-blog-page,
   así que su layout queda intacto (test B21). */
body:has(.ts-blog-page) #left-column { display: none; }

body:has(.ts-blog-page) #content-wrapper {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  padding-left: 0;
  padding-right: 0;
}

body:has(.ts-blog-page) #wrapper > .container {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

body:has(.ts-blog-page) #wrapper { padding: 0; }
body:has(.ts-blog-page) #columns_inner { margin-left: 0; margin-right: 0; }

/* El tema hace flotar el menú sobre el contenido con `#header .header-top
   { position: absolute }`, pensando en un banner claro. Sobre nuestro hero
   oscuro el menú (texto oscuro) queda ilegible.
   Mismo remedio que aplica el propio tema en #pagenotfound: devolverlo al flujo.
   El selector necesita el #header para ganar en especificidad. */
body:has(.ts-blog-page) #header .header-top {
  position: static;
  background: #fff;
}

.ts-blog-site-header {
  background: #fff;
  border-bottom: 1px solid #e3e1dc;
}

.ts-blog-site-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ts-blog-site-logo {
  display: inline-flex;
  align-items: center;
}

.ts-blog-site-logo img {
  display: block;
  width: 64px;
  height: 64px;
  max-height: 64px;
  object-fit: contain;
  border-radius: 0;
}

.ts-blog-site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  flex-wrap: wrap;
}

.ts-blog-site-link {
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #16181a;
  font-weight: 400;
  text-decoration: none;
}

.ts-blog-site-link:hover,
.ts-blog-site-link--products {
  color: #4ECDC4;
}

/* El breadcrumb del tema trae una foto de stock de fondo: fuera en el blog. */
body:has(.ts-blog-page) nav.breadcrumb {
  background: none;
  min-height: 0;
  height: auto;
  padding: var(--s2) 0;
  margin: 0;
  border-bottom: 1px solid #e3e1dc;
}
body:has(.ts-blog-page) nav.breadcrumb::before,
body:has(.ts-blog-page) nav.breadcrumb::after { display: none; }
body:has(.ts-blog-page) nav.breadcrumb ol { margin: 0; }
body:has(.ts-blog-page) nav.breadcrumb a,
body:has(.ts-blog-page) nav.breadcrumb li { color: #6b7177; font-size: 13px; }

/* ─── Utilidades ──────────────────────────────────────────── */
.ts-blog-wrap  { max-width: 1120px; margin: 0 auto; padding: 0 var(--s3); }
.ts-blog-medida{ max-width: 680px;  margin: 0 auto; padding: 0 var(--s3); }

.ts-blog-eyebrow {
  font-family: var(--ts-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ts-mute);
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════
   BLOQUE 1 — HERO a sangre
   ═══════════════════════════════════════════════════════════ */
.ts-blog-hero {
  position: relative;
  width: 100%;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: #fff;
}

/* Estado PENDIENTE-FOTO: tratamiento de color sólido oscuro.
   NO es un placeholder gris: es el espacio reservado a la fotografía real.
   Cuando llegue la foto: añadir .ts-blog-hero--foto y
   style="--ts-hero-img:url('/img/blog/cantabrico.jpg')" */
.ts-blog-hero--sin-foto {
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(78, 205, 196, 0.22), transparent 55%),
    linear-gradient(180deg, #0d2a31 0%, #102a30 38%, #0a1417 100%);
}

.ts-blog-hero--foto {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55)),
    var(--ts-hero-img);
  background-size: cover;
  background-position: center;
}

.ts-blog-hero--arte {
  display: block;
  min-height: 0;
  background: #102a30;
}

.ts-blog-hero-arte-img {
  display: block;
  width: 100%;
  height: auto;
}

.ts-blog-hero-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ts-blog-hero--sin-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55));
  pointer-events: none;
}

/* Texto del hero en la MEDIDA DE LECTURA (680), mismo eje centrado que el
   cuerpo → el H1 arranca en la misma columna que el primer párrafo (404px a
   1440). La tira de dato de debajo usa la medida ancha (1120). Dos medidas,
   un eje. */
.ts-blog-hero-top,
.ts-blog-hero-overlay {
  position: relative;
  z-index: 2;
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  padding: var(--s4) var(--s3);
}

.ts-blog-hero-top {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.ts-blog-hero-top .ts-blog-eyebrow { color: rgba(255,255,255,0.82); }
.ts-blog-hero-dato { color: var(--ts-accent); }

.ts-blog-hero-overlay { padding-top: var(--s4); padding-bottom: 48px; }

.ts-blog-hero-h1 {
  font-family: var(--ts-disp);
  font-weight: 500;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
  text-transform: none;
}

.ts-blog-hero-entradilla {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
}

.ts-blog-meta {
  margin-top: 22px;
  font-family: var(--ts-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.ts-blog-meta-sep { margin: 0 var(--s1); }

/* ═══════════════════════════════════════════════════════════
   FIRMA — Tira de dato agua <-> grosor
   Codifica la tabla real del post. No es decoración.
   ═══════════════════════════════════════════════════════════ */
.ts-blog-datastrip {
  background: var(--ts-bone);
  border-bottom: 1px solid var(--ts-line);
}

.ts-blog-datastrip-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  padding: 0 32px;
}

.ts-blog-dato {
  flex: 1;
  min-width: 180px;
  padding: 22px var(--s3);
  border-left: 1px solid var(--ts-line);
}
.ts-blog-dato:first-child { border-left: 0; }

.ts-blog-dato-label {
  display: block;
  font-family: var(--ts-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ts-mute);
}

.ts-blog-dato-valor {
  display: block;
  font-family: var(--ts-disp);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ts-ink);
  margin-top: 6px;
  line-height: 1.2;
}
/* acento SOLO sobre la cifra / la unidad */
.ts-blog-dato-valor .acc { color: var(--ts-accent); font-style: normal; }

/* ═══════════════════════════════════════════════════════════
   BLOQUE 2 — Respuesta rápida ("En 30 segundos")
   ═══════════════════════════════════════════════════════════ */
.ts-blog-resumen {
  max-width: 680px;
  margin: var(--s5) auto 0;
  padding: 0 var(--s3);
}

/* Caja AEO abierta: borde superior fino, sin barra lateral decorativa. */
.ts-blog-resumen-box {
  border-top: 1px solid var(--ts-line);
  background: transparent;
  padding: var(--s3) 0;
}

.ts-blog-resumen-titulo {
  font-family: var(--ts-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ts-mute);
  margin: 0 0 14px;
}

.ts-blog-resumen p {
  font-size: 21px;
  line-height: 1.5;
  margin: 0 0 var(--s2);
  font-weight: 400;
}
.ts-blog-resumen p:last-child { margin-bottom: 0; }
.ts-blog-resumen strong { font-weight: 500; }

/* el tema fuerza list-style:disc desde un selector con #id — de ahí el !important:
   sin él conviven la viñeta nativa y nuestro guion de acento. */
.ts-blog-resumen ul,
.ts-blog-resumen li {
  list-style: none !important;
}
.ts-blog-resumen li::marker { content: none; }

.ts-blog-resumen ul {
  margin: 0 0 var(--s2);
  padding: 0;
}
.ts-blog-resumen li {
  font-size: 18px;
  line-height: 1.5;
  padding: var(--s1) 0 var(--s1) var(--s3);
  border-top: 1px solid var(--ts-line);
  position: relative;
}
.ts-blog-resumen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 10px;
  height: 1px;
  background: var(--ts-accent);
}

/* ═══════════════════════════════════════════════════════════
   BLOQUE 3 — Cuerpo editorial (medida 680px)
   ═══════════════════════════════════════════════════════════ */
.ts-blog-cuerpo {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px var(--s3) 0;
}

.ts-blog-cuerpo h2 {
  font-family: var(--ts-disp);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: var(--s5) 0 var(--s2);
  color: var(--ts-ink);
  text-transform: none;
}
.ts-blog-cuerpo h2:first-child { margin-top: 0; }

.ts-blog-cuerpo h3 {
  font-family: var(--ts-disp);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.2;
  margin: var(--s4) 0 var(--s2);
  color: var(--ts-ink);
  text-transform: none;
}

.ts-blog-cuerpo p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 var(--s3);          /* 24, dentro de la escala (antes 20) */
}
/* sin margen colgando al final: el hueco hasta Productos queda exactamente
   en s6 (96), no en 96+24 */
.ts-blog-cuerpo > p:last-child { margin-bottom: 0; }
.ts-blog-cuerpo strong { font-weight: 500; }

.ts-blog-nota {
  font-family: var(--ts-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-mute);
  border-top: 1px solid var(--ts-line);
  padding-top: 12px;
  margin: var(--s3) 0;
  line-height: 1.5;
}

/* ── Tablas de dato ── */
.ts-blog-tabla-wrap {
  overflow-x: auto;
  margin: var(--s3) 0 var(--s2);
  -webkit-overflow-scrolling: touch;
}

.ts-blog-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  min-width: 460px;
}

.ts-blog-tabla th {
  font-family: var(--ts-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-mute);
  text-align: left;
  padding: var(--s2) 14px;
  border-bottom: 1px solid var(--ts-ink);
  white-space: nowrap;
}

.ts-blog-tabla td {
  padding: 14px;
  border-bottom: 1px solid var(--ts-line);
  font-weight: 400;
}
/* Sin zebra striping: el lenguaje es de líneas 1px, no de rellenos de color.
   La cabecera ya lleva un borde inferior más marcado (1px tinta). */
.ts-blog-tabla td:first-child { font-weight: 500; }

.ts-blog-tabla-fuente {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ts-mute);
  margin: 0 0 var(--s3);
}

/* ═══════════════════════════════════════════════════════════
   BLOQUE 4 — Productos (tiles editoriales)
   Sin sombra, sin radio, separadas por líneas de 1px.
   ═══════════════════════════════════════════════════════════ */
.ts-blog-productos {
  max-width: 1120px;
  margin: var(--s6) auto 0;
  padding: 0 var(--s3);
}

.ts-blog-productos-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  border-bottom: 1px solid var(--ts-ink);
  padding-bottom: 14px;
}

.ts-blog-productos-titulo {
  font-family: var(--ts-disp);
  font-weight: 500;
  font-size: 22px;
  margin: 0;
  line-height: 1.2;
  text-transform: none;
}

/* especificidad reforzada: el reset de text-align de arriba usa `.ts-blog p` */
.ts-blog .ts-blog-productos-subtitulo {
  font-family: var(--ts-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-mute);
  margin: 0;
  text-align: right;
}

.ts-blog-productos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.ts-blog-producto-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--ts-line);
  border-bottom: 1px solid var(--ts-line);
  padding-bottom: 22px;
  background: var(--ts-bg);
}
.ts-blog-producto-card:first-child { border-left: 0; }

/* Fotografía REAL de catálogo. Fondo blanco (no hueso): las fotos de estudio de
   Rip Curl vienen recortadas sobre blanco y sobre hueso se les ve la caja. */
.ts-blog-producto-img-wrap {
  position: relative;
  background: var(--ts-bg);
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s3) var(--s3) 0;
  overflow: hidden;
}

.ts-blog-producto-img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.ts-blog-producto-badge {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  font-family: var(--ts-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ts-mute);
  background: var(--ts-bg);
  border-right: 1px solid var(--ts-line);
  border-bottom: 1px solid var(--ts-line);
  padding: var(--s1) 12px;
}
/* el acento marca UNA cosa: el que recomendamos */
.ts-blog-producto-badge--destacado {
  color: var(--ts-ink);
  border-right-color: var(--ts-accent);
  border-bottom-color: var(--ts-accent);
}

.ts-blog-producto-info {
  padding: var(--s3) var(--s3) 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ts-blog-producto-marca {
  font-family: var(--ts-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-mute);
  margin: 0 0 var(--s1);
}

.ts-blog-producto-nombre {
  font-family: var(--ts-disp);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 12px;
  text-transform: none;
}

.ts-blog-producto-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ts-mute);
  margin: 0 0 var(--s3);
  flex: 1;
}

.ts-blog-producto-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  border-top: 1px solid var(--ts-line);
  padding-top: 14px;
}

.ts-blog-producto-precio {
  font-family: var(--ts-disp);
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

.ts-blog-producto-cta {
  font-family: var(--ts-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ts-accent);
  white-space: nowrap;
}
.ts-blog-producto-cta:hover { color: var(--ts-ink); }

.ts-blog-productos-nota {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ts-mute);
  margin: var(--s3) 0 0;
}
.ts-blog-productos-nota a {
  color: var(--ts-ink);
  border-bottom: 1px solid var(--ts-accent);
  padding-bottom: 1px;
}

/* ═══════════════════════════════════════════════════════════
   BLOQUE 5 — FAQ
   ═══════════════════════════════════════════════════════════ */
.ts-blog-faq {
  max-width: 680px;
  margin: var(--s6) auto 0;
  padding: 0 var(--s3);
}

.ts-blog-faq-titulo {
  font-family: var(--ts-disp);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 var(--s4);
  text-transform: none;
}

.ts-blog-faq-item {
  border-top: 1px solid var(--ts-line);
  padding: var(--s3) 0;
}
.ts-blog-faq-item:last-child { border-bottom: 1px solid var(--ts-line); }

.ts-blog-faq-pregunta {
  font-family: var(--ts-disp);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 12px;
  text-transform: none;
}

.ts-blog-faq-respuesta p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ts-mute);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   BLOQUE 6 — Conclusión (patrón .ts-conclusion existente)
   ═══════════════════════════════════════════════════════════ */
/* Veredicto abierto: solo borde superior 1px. Menos caja, más aire. */
.ts-blog-conclusion {
  max-width: 680px;
  margin: var(--s6) auto 0;
  border-top: 1px solid var(--ts-line);
  padding: var(--s4) 0 0;
  background: transparent;
}

.ts-blog-conclusion-titulo {
  font-family: var(--ts-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ts-mute);
  margin: 0 0 var(--s3);
}

.ts-blog-conclusion p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 var(--s2);
}
.ts-blog-conclusion p:last-child { margin-bottom: 0; }
.ts-blog-conclusion strong { font-weight: 500; }

/* ═══════════════════════════════════════════════════════════
   BLOQUE 7 — Relacionados
   Sin foto real => NO hay caja gris. Filas tipográficas.
   ═══════════════════════════════════════════════════════════ */
.ts-blog-relacionados {
  max-width: 1120px;
  margin: var(--s6) auto var(--s6);
  padding: 0 var(--s3);
}

.ts-blog-relacionados-titulo {
  font-family: var(--ts-disp);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ts-ink);
  text-transform: none;
}

.ts-blog-relacionado-card {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--ts-line);
}

.ts-blog-relacionado-tag {
  font-family: var(--ts-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-mute);
}

.ts-blog-relacionado-info h3 {
  font-family: var(--ts-disp);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 6px;
  text-transform: none;
}

.ts-blog-relacionado-info p {
  font-size: 15px;
  color: var(--ts-mute);
  margin: 0;
  line-height: 1.5;
}

.ts-blog-relacionado-estado {
  font-family: var(--ts-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-mute);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   ÍNDICE DEL BLOG — jerarquía editorial (destacado + lista)
   ═══════════════════════════════════════════════════════════ */
.ts-blog-index-masthead {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--s5) var(--s3) var(--s4);
}
/* la regla se dibuja dentro del padding para alinear con el borde del
   destacado; un border-bottom normal sobresaldría 24px por cada lado */
.ts-blog-index-masthead::after {
  content: "";
  position: absolute;
  left: var(--s3);
  right: var(--s3);
  bottom: 0;
  height: 1px;
  background: var(--ts-ink);
}

.ts-blog-index-titulo {
  font-family: var(--ts-disp);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 12px 0 0;
  max-width: 18ch;
  text-transform: none;
}

.ts-blog-index-subtitulo {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ts-mute);
  margin: var(--s2) 0 0;
  max-width: 52ch;
}

.ts-blog-index-filters {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--s3) var(--s3) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ts-blog-filter-btn {
  appearance: none;
  border: 1px solid var(--ts-line);
  background: #fff;
  color: var(--ts-ink);
  font-family: var(--ts-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 0;
}

.ts-blog-filter-btn:hover {
  border-color: var(--ts-ink);
}

.ts-blog-filter-btn.is-active {
  border-color: var(--ts-accent);
  background: var(--ts-accent);
  color: var(--ts-ink);
}

.ts-blog-filter-item.is-hidden {
  display: none;
}

.ts-blog-index-empty-filter {
  max-width: 1120px;
  margin: var(--s3) auto 0;
  padding: 0 var(--s3);
  font-family: var(--ts-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ts-mute);
}

/* ── Destacado: conserva .ts-blog-index-card (contrato del test B02/B20) ── */
.ts-blog-index-destacado {
  max-width: 1120px;
  margin: var(--s4) auto 0;
  padding: 0 var(--s3);
}

.ts-blog-index-card {
  position: relative;
  min-height: 460px;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* mismo tratamiento PENDIENTE-FOTO que el hero: sólido oscuro, jamás gris */
.ts-blog-index-card--sin-foto {
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(78,205,196,0.20), transparent 55%),
    linear-gradient(180deg, #0d2a31 0%, #102a30 40%, #0a1417 100%);
}

.ts-blog-index-card-body {
  position: relative;
  z-index: 2;
  padding: var(--s4) 48px 48px;
  max-width: 720px;
}

/* eyebrow en gris claro sobre el hero oscuro — el acento se reserva para el
   dato y el CTA, igual que en el post (coherencia del acento funcional) */
.ts-blog-index-card-categoria {
  font-family: var(--ts-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 var(--s2);
}

.ts-blog-index-card-titulo {
  font-family: var(--ts-disp);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
  text-transform: none;
}

.ts-blog-index-card-entradilla {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  margin: var(--s2) 0 0;
  max-width: 54ch;
}

.ts-blog-index-card-meta {
  font-family: var(--ts-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin: var(--s3) 0 0;
}

/* ── Lista de próximas guías: filas, no cards ── */
.ts-blog-index-lista {
  max-width: 1120px;
  margin: var(--s6) auto var(--s6);
  padding: 0 var(--s3);
}

.ts-blog-index-lista-titulo {
  font-family: var(--ts-disp);
  font-weight: 500;
  font-size: 22px;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ts-ink);
  text-transform: none;
}

/* columna del eyebrow acotada a 140 y con gap corto: el titular arranca cerca,
   sin el río vacío de antes */
.ts-blog-index-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--ts-line);
}

.ts-blog-index-row-pilar,
.ts-blog-index-row-estado {
  font-family: var(--ts-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-mute);
  white-space: nowrap;
}

.ts-blog-index-row h3 {
  font-family: var(--ts-disp);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  text-transform: none;
}

.ts-blog-empty {
  max-width: 1120px;
  margin: var(--s5) auto;
  padding: 0 var(--s3);
  color: var(--ts-mute);
}

/* señal de "habrá más" — una sola línea en mono, nunca con aspecto de post */
.ts-blog-index-nota {
  max-width: 1120px;
  margin: var(--s4) auto var(--s6);
  padding: var(--s3) var(--s3) 0;
  border-top: 1px solid var(--ts-line);
  font-family: var(--ts-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ts-mute);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — 390px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .ts-blog-productos-grid { grid-template-columns: 1fr 1fr; }
  .ts-blog-producto-card:first-child { border-left: 0; }
  .ts-blog-producto-card:nth-child(odd) { border-left: 0; }
}

@media (max-width: 720px) {
  .ts-blog-hero { min-height: 480px; }
  .ts-blog-hero--arte { min-height: 0; }

  .ts-blog-hero-top,
  .ts-blog-hero-overlay {
    padding-left: var(--s3);
    padding-right: var(--s3);
  }
  .ts-blog-hero-overlay { padding-bottom: var(--s4); }

  .ts-blog-hero-h1 { font-size: 40px; max-width: none; }
  .ts-blog-hero-entradilla { font-size: 17px; }

  .ts-blog-datastrip-inner { padding: 0; }
  .ts-blog-dato {
    flex: 0 0 50%;
    min-width: 0;
    border-left: 1px solid var(--ts-line);
    border-top: 1px solid var(--ts-line);
    padding: var(--s2) var(--s3);
  }
  .ts-blog-dato:nth-child(odd) { border-left: 0; }
  .ts-blog-dato-valor { font-size: 22px; }

  .ts-blog-resumen { margin-top: var(--s4); }
  .ts-blog-resumen-box { padding: var(--s3); }
  .ts-blog-resumen p { font-size: 18px; }
  .ts-blog-resumen li { font-size: 17px; }

  .ts-blog-cuerpo { padding-top: var(--s4); }
  .ts-blog-cuerpo h2 { font-size: 26px; margin-top: var(--s4); }
  .ts-blog-cuerpo h3 { font-size: 19px; }
  .ts-blog-cuerpo p { font-size: 17px; }

  .ts-blog-productos,
  .ts-blog-faq,
  .ts-blog-relacionados,
  .ts-blog-index-lista { margin-top: var(--s5); }

  .ts-blog-productos-head { flex-direction: column; align-items: flex-start; gap: var(--s1); }
  .ts-blog-productos-subtitulo { text-align: left; }

  .ts-blog-productos-grid { grid-template-columns: 1fr; }
  .ts-blog-producto-card { border-left: 0; }
  .ts-blog-producto-img-wrap { height: 300px; }

  .ts-blog-faq-titulo { font-size: 26px; }
  .ts-blog-conclusion { padding: var(--s3) 0 0; margin-top: var(--s5); }

  /* filas -> apiladas */
  .ts-blog-relacionado-card,
  .ts-blog-index-row {
    grid-template-columns: 1fr;
    gap: var(--s1);
  }

  .ts-blog-index-masthead { padding: var(--s4) var(--s3) var(--s3); }
  .ts-blog-site-header-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .ts-blog-site-logo img {
    width: 56px;
    height: 56px;
    max-height: 56px;
  }
  .ts-blog-site-nav {
    justify-content: flex-start;
    gap: 14px;
  }
  .ts-blog-index-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--s1);
    -webkit-overflow-scrolling: touch;
  }
  .ts-blog-filter-btn {
    flex: 0 0 auto;
  }
  .ts-blog-index-titulo { font-size: 34px; max-width: none; }
  .ts-blog-index-subtitulo { font-size: 17px; }
  .ts-blog-index-card { min-height: 400px; }
  .ts-blog-index-card-body { padding: var(--s3); }
  .ts-blog-index-card-titulo { font-size: 28px; }
  .ts-blog-index-card-entradilla { font-size: 16px; }
}