/*
 Theme Name:   Todo Sobre Tenis Child
 Theme URI:    https://todosobretenis.com
 Description:  Child theme para Todo Sobre Tenis — portal de noticias ATP/WTA.
               Construido sobre Hello Elementor para máxima performance.
 Author:       Todo Sobre Tenis
 Template:     hello-elementor
 Version:      2.0.0
 Text Domain:  tst-child
*/

/* ============================================================
   1. DESIGN TOKENS — Custom Properties
   ============================================================

   Sistema de tres capas:
   - Fondos limpios para largo tiempo de lectura (newsprint digital)
   - Cromas oscuros estructurales para jerarquía clara
   - Acentos vibrantes para live-scoring y breaking news
   ============================================================ */

:root {

  /* --- Paleta Base --- */
  --tst-white:        #FFFFFF;
  --tst-off-white:    #F7F6F2;   /* fondo principal — no quema los ojos */
  --tst-paper:        #EFEFEA;   /* fondo secundario, separadores de sección */
  --tst-ink-100:      #1A1A1A;   /* titulares, texto principal */
  --tst-ink-60:       #5C5C5C;   /* metadatos, bylines, fechas */
  --tst-ink-30:       #A8A8A8;   /* separadores suaves, placeholders */
  --tst-ink-10:       #E4E3DC;   /* bordes de cards, divisores */

  /* --- Identidad de Marca TST --- */
  /*
   * Colores extraídos del logo oficial y templates de Canva:
   *   #305180 — Azul corporativo (wordmark "TODO / TENIS" + isologo)
   *   #E1FA59 — Verde lima (wordmark "SOBRE" + pelota de tenis)
   *   #F5B021 — Amarillo/dorado (acento RRSS, CTAs principales)
   *
   * El fondo de arcilla (#C1440E aprox.) es el backdrop del logo
   * pero NO se usa en la web — se reserva para thumbnails y RRSS.
   */
  --tst-brand:        #305180;   /* azul corporativo — header, nav, badges ATP */
  --tst-brand-dark:   #1E3A5F;   /* hover/active del azul, fondos oscuros */
  --tst-brand-light:  #D6E3F0;   /* tint del azul — fondos suaves, hover de cards */
  --tst-brand-mid:    #254368;   /* versión media — módulos oscuros intermedios */

  --tst-lime:         #E1FA59;   /* verde lima — "SOBRE", pelota, acentos vivos */
  --tst-lime-dark:    #B8CC30;   /* hover del lima — sobre fondos claros */
  --tst-lime-bg:      #F5FDD0;   /* tint muy suave — fondo de badges/alertas lima */

  --tst-gold:         #F5B021;   /* amarillo dorado — CTAs primarios, destacados */
  --tst-gold-dark:    #C8890F;   /* hover del dorado */
  --tst-gold-bg:      #FEF3D7;   /* tint dorado — fondos de alertas/banners */

  /* --- Acentos Funcionales (independientes de la marca) --- */
  --tst-live:         #E63946;   /* rojo — badge LIVE, breaking news */
  --tst-live-bg:      #FDECEA;   /* fondo de alertas live */
  --tst-wta:          #6A4C93;   /* violeta WTA — diferenciador circuito femenino */
  --tst-win:          #2A9D8F;   /* verde teal — victorias, resultados positivos */
  --tst-score-bg:     #1E3A5F;   /* fondo de scorecards = brand-dark */
  --tst-score-text:   #E9F1F7;   /* texto sobre fondo de marcador */

  /* --- Acento principal (alias para no romper referencias anteriores) --- */
  --tst-accent:       #F5B021;   /* = gold — CTAs, links activos */
  --tst-accent-dark:  #C8890F;   /* = gold-dark — hover */

  /* --- Tipografías --- */
  /*
    Titulares: DM Sans — geométrica, con fuerza y modernidad.
    Cuerpo:    Lora — serifa contemporánea, alta legibilidad en pantalla.
    Mono:      DM Mono — para stats, sets, rankings.

    Estas fuentes se cargan vía functions.php (Google Fonts).
    Fallbacks definidos aquí por si el CDN falla.
  */
  --tst-font-headline: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --tst-font-body:     "Lora", Georgia, "Times New Roman", serif;
  --tst-font-mono:     "DM Mono", "Courier New", monospace;

  /* --- Escala Tipográfica (clamp = fluid type entre 375px y 1280px) --- */
  --tst-fs-xs:    clamp(0.70rem, 0.65rem + 0.2vw,  0.75rem);  /* 11–12px */
  --tst-fs-sm:    clamp(0.80rem, 0.75rem + 0.25vw, 0.875rem); /* 13–14px */
  --tst-fs-base:  clamp(1.00rem, 0.95rem + 0.25vw, 1.0625rem);/* 16–17px */
  --tst-fs-md:    clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);  /* 18–20px */
  --tst-fs-lg:    clamp(1.375rem, 1.2rem + 0.9vw,  1.75rem);  /* 22–28px */
  --tst-fs-xl:    clamp(1.75rem,  1.5rem + 1.3vw,  2.25rem);  /* 28–36px */
  --tst-fs-2xl:   clamp(2.25rem,  1.9rem + 1.8vw,  3.00rem);  /* 36–48px */

  /* --- Espaciado --- */
  --tst-gap-xs:   4px;
  --tst-gap-sm:   8px;
  --tst-gap-md:   16px;
  --tst-gap-lg:   24px;
  --tst-gap-xl:   40px;
  --tst-gap-2xl:  64px;

  /* --- Geometría --- */
  --tst-radius-sm: 4px;
  --tst-radius-md: 8px;
  --tst-radius-lg: 12px;
  --tst-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 12px rgba(0, 0, 0, 0.06);
  --tst-card-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.09), 0 12px 28px rgba(0, 0, 0, 0.10);

  /* --- Transitions --- */
  --tst-transition: 200ms ease;
  --tst-transition-slow: 350ms ease;

  /* --- Layout --- */
  --tst-max-width: 1280px;
  --tst-content-width: 780px;  /* ancho máximo para artículos */
  --tst-sidebar-width: 320px;
  --tst-ad-leaderboard-h: 90px;
  --tst-ad-rectangle-h: 250px;
}

/* Dark mode desactivado — el sitio siempre se muestra en modo claro */



/* ============================================================
   2. RESET Y BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--tst-off-white);
  color: var(--tst-ink-100);
  font-family: var(--tst-font-body);
  font-size: var(--tst-fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--tst-gold);
  outline-offset: 3px;
  border-radius: var(--tst-radius-sm);
}


/* ============================================================
   3. TIPOGRAFÍA GLOBAL
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.tst-headline {
  font-family: var(--tst-font-headline);
  font-weight: 700;
  line-height: 1.2;
  color: var(--tst-ink-100);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--tst-fs-2xl); }
h2 { font-size: var(--tst-fs-xl); }
h3 { font-size: var(--tst-fs-lg); }
h4 { font-size: var(--tst-fs-md); }
h5 { font-size: var(--tst-fs-base); }
h6 { font-size: var(--tst-fs-sm); }

/* Titulares de artículo — usa serifa para elegancia editorial */
.entry-title,
.tst-article-title {
  font-family: var(--tst-font-body);
  font-weight: 700;
  font-size: var(--tst-fs-xl);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* Cuerpo de artículo */
.entry-content,
.tst-article-body {
  font-family: var(--tst-font-body);
  font-size: var(--tst-fs-base);
  line-height: 1.8;
  color: var(--tst-ink-100);
}

.entry-content p,
.tst-article-body p {
  margin-bottom: var(--tst-gap-md);
}

/* Datos, stats y scores */
.tst-stat,
.tst-score,
.tst-ranking-number {
  font-family: var(--tst-font-mono);
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   4. LAYOUT PRINCIPAL
   ============================================================ */

.tst-container {
  width: 100%;
  max-width: var(--tst-max-width);
  margin-inline: auto;
  padding-inline: var(--tst-gap-lg);
}

/* Grid principal: contenido + sidebar */
.tst-layout {
  display: grid;
  grid-template-columns: 1fr var(--tst-sidebar-width);
  grid-template-areas: "main sidebar";
  gap: var(--tst-gap-xl);
  align-items: start;
}

@media (max-width: 1024px) {
  .tst-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "sidebar";
  }
}

.tst-main  { grid-area: main; }
.tst-sidebar { grid-area: sidebar; }


/* ============================================================
   5. NEWS CARDS — Sistema de Tarjetas
   ============================================================ */

/* Grid del feed */
.tst-feed {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tst-gap-lg);
}

@media (min-width: 640px) {
  .tst-feed {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .tst-feed {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Hero ocupa las 3 columnas */
  .tst-feed .tst-card--hero {
    grid-column: 1 / -1;
  }
}

/* ─── Card base ─── */
.tst-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF !important;  /* forzar blanco — anula cualquier herencia */
  border-radius: var(--tst-radius-lg);
  box-shadow: var(--tst-card-shadow);
  overflow: hidden;          /* CLAVE: imagen y body forman una sola pieza */
  transition: box-shadow var(--tst-transition), transform var(--tst-transition);
  position: relative;
}

.tst-card:hover {
  box-shadow: var(--tst-card-shadow-hover);
  transform: translateY(-2px);
}

/* ─── Imagen de la card: siempre cubre, nunca deja huecos ─── */
.tst-card__media {
  /* Wrapper con altura fija — funciona con cualquier proporción de imagen */
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--tst-paper);
  flex-shrink: 0;
  position: relative;
  display: block;
}

/* Anular width/height que WordPress inyecta en el <img> */
.tst-card__media img,
.tst-card__media > img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  transition: transform var(--tst-transition-slow);
}

.tst-card:hover .tst-card__media img {
  transform: scale(1.04);
}

/* Badge sobre imagen */
.tst-card__media .tst-badge {
  position: absolute;
  top: var(--tst-gap-sm);
  left: var(--tst-gap-sm);
  z-index: 2;
}

/* ─── Cuerpo de la card ─── */
.tst-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--tst-gap-md);
  gap: var(--tst-gap-sm);
  background: #FFFFFF !important;  /* forzar blanco — anula dark mode del tema */
  color: var(--tst-ink-100) !important;
}

/* Categoría */
.tst-card__category {
  display: inline-flex;
  align-items: center;
  gap: var(--tst-gap-xs);
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tst-brand);
}

.tst-card__category--wta { color: var(--tst-wta); }

/* Título */
.tst-card__title {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-md);
  font-weight: 700;
  line-height: 1.3;
  color: #1A1A1A !important;  /* negro fijo — nunca hereda color oscuro invertido */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--tst-transition);
}

.tst-card:hover .tst-card__title { color: var(--tst-brand); }

/* Link invisible que cubre toda la card */
.tst-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Excerpt */
.tst-card__excerpt {
  font-size: var(--tst-fs-sm);
  color: #5C5C5C !important;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta */
.tst-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tst-gap-xs) var(--tst-gap-sm);
  margin-top: auto;
  padding-top: var(--tst-gap-sm);
  border-top: 1px solid var(--tst-ink-10);
  font-size: var(--tst-fs-xs);
  color: var(--tst-ink-60);
  font-family: var(--tst-font-headline);
}

.tst-card__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--tst-ink-30);
  flex-shrink: 0;
}

/* ─── Card HERO ─── */
/* Mobile: imagen arriba, texto abajo */
.tst-card--hero .tst-card__media {
  height: 280px;
}

/* Desktop: imagen izquierda, texto derecha */
@media (min-width: 900px) {
  .tst-card--hero {
    flex-direction: row;
    min-height: 360px;
  }

  .tst-card--hero .tst-card__media {
    /* En flex-row: resetear altura fija, usar stretch */
    width: 52%;
    height: 100%;        /* hereda la altura del flex container */
    min-height: 360px;   /* fallback por si el texto es muy corto */
    flex-shrink: 0;
    align-self: stretch;
  }

  /* Con align-self:stretch el contenedor tiene altura real —
     el img absolute lo cubre perfectamente */
  .tst-card--hero .tst-card__media img,
  .tst-card--hero .tst-card__media > img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-position: center center !important;
  }

  .tst-card--hero .tst-card__body {
    padding: var(--tst-gap-xl);
    justify-content: center;
  }

  .tst-card--hero .tst-card__title {
    font-size: var(--tst-fs-xl);
    -webkit-line-clamp: 4;
  }

  .tst-card--hero .tst-card__excerpt {
    -webkit-line-clamp: 3;
  }
}

/* ─── Card COMPACTA ─── */
.tst-card--compact {
  flex-direction: row;
  align-items: center;
  border-radius: var(--tst-radius-md);
  padding: var(--tst-gap-sm) var(--tst-gap-md);
  gap: var(--tst-gap-md);
}

.tst-card--compact .tst-card__body {
  padding: 0;
  gap: var(--tst-gap-xs);
}

.tst-card--compact .tst-card__title {
  font-size: var(--tst-fs-sm);
  -webkit-line-clamp: 2;
}

.tst-card--compact .tst-card__number {
  font-family: var(--tst-font-mono);
  font-size: var(--tst-fs-xl);
  font-weight: 700;
  color: var(--tst-ink-10);
  flex-shrink: 0;
  width: 2ch;
  text-align: right;
  line-height: 1;
}

/* ─── Card SCORE ─── */
.tst-card--score {
  background: var(--tst-score-bg);
  color: var(--tst-score-text);
  border-radius: var(--tst-radius-lg);
  overflow: hidden;
}

.tst-card--score .tst-card__body { padding: var(--tst-gap-md); gap: var(--tst-gap-md); }

.tst-score-row { display: flex; align-items: center; justify-content: space-between; gap: var(--tst-gap-md); }
.tst-score-player { display: flex; align-items: center; gap: var(--tst-gap-sm); flex: 1; min-width: 0; }
.tst-score-player__name { font-family: var(--tst-font-headline); font-weight: 600; font-size: var(--tst-fs-sm); color: var(--tst-score-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tst-score-player__seed { font-family: var(--tst-font-mono); font-size: var(--tst-fs-xs); color: var(--tst-ink-30); flex-shrink: 0; }
.tst-score-sets { display: flex; gap: var(--tst-gap-xs); flex-shrink: 0; }
.tst-score-set { font-family: var(--tst-font-mono); font-size: var(--tst-fs-sm); font-weight: 700; color: var(--tst-score-text); min-width: 1.8ch; text-align: center; }
.tst-score-set--current { color: var(--tst-live); }
.tst-score-set--winner  { color: var(--tst-win); }
.tst-score-divider { height: 1px; background: rgba(255,255,255,.08); margin-block: var(--tst-gap-xs); }

/* ─── Ad slots ─── */
.tst-ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--tst-paper);
  border: 1px dashed var(--tst-ink-10);
  border-radius: var(--tst-radius-md);
  padding: var(--tst-gap-sm);
  position: relative;
  overflow: hidden;
  contain: layout style;
}

.tst-ad-slot::before {
  content: "Publicidad";
  display: block;
  font-family: var(--tst-font-headline);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tst-ink-30);
  margin-bottom: var(--tst-gap-xs);
  align-self: flex-start;
}

.tst-ad-slot--banner  { width: 100%; min-height: calc(90px + 20px); }
.tst-ad-slot--rect    { width: 100%; max-width: 320px; min-height: calc(250px + 20px); }
.tst-ad-slot--inline  { width: 100%; min-height: 280px; border-radius: var(--tst-radius-lg); border-style: solid; border-color: var(--tst-ink-10); }

.tst-feed--with-ads > .tst-card:nth-child(6n+7),
.tst-feed--with-ads > .tst-ad-slot:nth-child(6n+1) { }

@media (max-width: 767px) {
  .tst-ad-slot--banner { min-height: calc(60px + 20px); }
}

.tst-sidebar .tst-ad-slot {
  position: sticky;
  top: var(--tst-gap-lg);
  margin-bottom: var(--tst-gap-lg);
}

/* ============================================================
   6. BADGES Y ETIQUETAS
   ============================================================ */

.tst-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tst-gap-xs);
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--tst-radius-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* LIVE badge — pulsa para llamar la atención */
.tst-badge--live {
  background: var(--tst-live);
  color: var(--tst-white);
}

.tst-badge--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: tst-pulse 1.4s ease-in-out infinite;
}

@keyframes tst-pulse {
  0%, 100% { opacity: 1; transform: scale(1);   }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

.tst-badge--breaking {
  background: var(--tst-live);
  color: var(--tst-white);
}

/* ATP — usa el azul corporativo de la marca */
.tst-badge--atp {
  background: var(--tst-brand);
  color: #FFFFFF;
}

/* WTA — violeta diferenciador */
.tst-badge--wta {
  background: var(--tst-wta);
  color: #E8D9F9;
}

/* Destacado — usa el dorado de la marca */
.tst-badge--featured {
  background: var(--tst-gold);
  color: var(--tst-brand-dark);
}

/* Lima — para contenido especial / exclusivo */
.tst-badge--exclusive {
  background: var(--tst-lime);
  color: var(--tst-brand-dark);
}

.tst-badge--video {
  background: rgba(0, 0, 0, 0.65);
  color: var(--tst-white);
  position: absolute;
  bottom: var(--tst-gap-sm);
  left: var(--tst-gap-sm);
  z-index: 2;
  backdrop-filter: blur(4px);
}

/* Badges sobre imagen */
.tst-card__media .tst-badge {
  position: absolute;
  top: var(--tst-gap-sm);
  left: var(--tst-gap-sm);
  z-index: 2;
}


/* ============================================================
   7. SLOTS PUBLICITARIOS
   ============================================================

   Los ads se integran en el flujo natural del grid.
   No usan posicionamiento fijo ni interrumpen el scroll.
   La separación visual (background + label) los identifica
   claramente sin romper la lectura.
   ============================================================ */

.tst-ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--tst-paper);
  border: 1px dashed var(--tst-ink-10);
  border-radius: var(--tst-radius-md);
  padding: var(--tst-gap-sm);
  position: relative;
  overflow: hidden;
  /* Aisla el ad del flujo de scroll — mejora Core Web Vitals (CLS) */
  contain: layout style;
}

/* Label "Publicidad" — requerido por políticas de Google Ads y Meta */
.tst-ad-slot::before {
  content: "Publicidad";
  display: block;
  font-family: var(--tst-font-headline);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tst-ink-30);
  margin-bottom: var(--tst-gap-xs);
  align-self: flex-start;
}

/* Leaderboard 728×90 — entre secciones */
.tst-ad-slot--banner {
  width: 100%;
  min-height: calc(var(--tst-ad-leaderboard-h) + 20px); /* +20 = label + padding */
}

/* Medium Rectangle 300×250 — dentro del sidebar o del feed */
.tst-ad-slot--rect {
  width: 100%;
  max-width: 320px;
  min-height: calc(var(--tst-ad-rectangle-h) + 20px);
}

/* Inline ad — dentro del feed, ocupa 1 slot del grid */
.tst-ad-slot--inline {
  width: 100%;
  min-height: 280px;
  border-radius: var(--tst-radius-lg);
  border-style: solid;
  border-color: var(--tst-ink-10);
}

/* Patrón de inserción: cada 6 cards, 1 ad inline.
   Se controla desde PHP/Elementor.
   Esta clase es para el wrapper del bloque que alterna cards/ads. */
.tst-feed--with-ads > .tst-card:nth-child(6n+7),
.tst-feed--with-ads > .tst-ad-slot:nth-child(6n+1) {
  /* Nada que hacer — el DOM ya los intercala.
     CSS solo garantiza que ambos tienen el mismo comportamiento de grid. */
}

/* En mobile, los leaderboards se contraen a móvil-friendly */
@media (max-width: 767px) {
  .tst-ad-slot--banner {
    min-height: calc(60px + 20px); /* Mobile banner 320×50 */
  }
}

/* Cuando hay un ad en el sidebar sticky */
.tst-sidebar .tst-ad-slot {
  position: sticky;
  top: var(--tst-gap-lg);
  margin-bottom: var(--tst-gap-lg);
}


/* ============================================================
   8. SECCIONES ESPECIALES
   ============================================================ */

/* --- Ticker / Barra de última hora --- */
.tst-ticker {
  display: flex;
  align-items: center;
  gap: var(--tst-gap-md);
  background: var(--tst-brand);
  color: var(--tst-score-text);
  padding: var(--tst-gap-xs) var(--tst-gap-lg);
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-sm);
  overflow: hidden;
}

.tst-ticker__label {
  flex-shrink: 0;
}

.tst-ticker__track {
  display: flex;
  gap: var(--tst-gap-xl);
  animation: tst-ticker 30s linear infinite;
  white-space: nowrap;
}

@keyframes tst-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Separador de sección --- */
.tst-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tst-gap-md);
  margin-bottom: var(--tst-gap-lg);
  padding-bottom: var(--tst-gap-sm);
  border-bottom: 2px solid var(--tst-lime-dark);  /* línea verde lima */
}

.tst-section-header__title {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-md);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #B8CC30 !important;  /* verde lima oscuro TST */
}

.tst-section-header__link {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 600;
  color: var(--tst-gold);        /* dorado TST */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--tst-transition);
}

.tst-section-header__link:hover {
  color: var(--tst-gold-dark);
}


/* ============================================================
   9. UTILIDADES
   ============================================================ */

/* Accesibilidad: skip-to-content */
.tst-skip-link {
  position: absolute;
  top: -100%;
  left: var(--tst-gap-md);
  z-index: 1000;
  background: var(--tst-gold);
  color: var(--tst-brand-dark);
  padding: var(--tst-gap-sm) var(--tst-gap-md);
  border-radius: var(--tst-radius-md);
  font-family: var(--tst-font-headline);
  font-weight: 700;
  transition: top var(--tst-transition);
}

.tst-skip-link:focus {
  top: var(--tst-gap-md);
}

/* Visually hidden (para screen readers) */
.tst-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   10. SECCIÓN "ENTENDIENDO EL JUEGO" — Home
   ============================================================

   Mood: premium educativo.
   Fondo: --tst-brand-dark (azul profundo).
   Cards semi-transparentes sobre el fondo oscuro.
   Acento de sección: --tst-lime.
   ============================================================ */

.tst-sec-juego {
  background: var(--tst-brand-dark);
  border-radius: var(--tst-radius-lg);
  padding: var(--tst-gap-xl);
  margin-bottom: var(--tst-gap-xl);
}

/* Header interno de la sección */
.tst-sec-juego .tst-sec-header {
  display: flex;
  align-items: stretch;
  gap: var(--tst-gap-md);
  margin-bottom: var(--tst-gap-lg);
}

.tst-sec-juego .tst-sec-header__accent {
  width: 4px;
  background: var(--tst-lime);
  border-radius: 2px;
  flex-shrink: 0;
}

.tst-sec-juego .tst-sec-header__eyebrow {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(225, 250, 89, 0.65);  /* lima al 65% */
  margin-bottom: 4px;
}

.tst-sec-juego .tst-sec-header__title {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-lg);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  line-height: 1;
}

.tst-sec-juego .tst-sec-header__more {
  margin-left: auto;
  align-self: center;
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tst-lime);
  background: rgba(225, 250, 89, 0.12);
  border: 1px solid rgba(225, 250, 89, 0.25);
  padding: 7px 16px;
  border-radius: 20px;
  text-decoration: none;
  transition: background var(--tst-transition), border-color var(--tst-transition);
  white-space: nowrap;
}

.tst-sec-juego .tst-sec-header__more:hover {
  background: rgba(225, 250, 89, 0.22);
  border-color: rgba(225, 250, 89, 0.5);
}

/* Grid de cards */
.tst-juego-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tst-gap-md);
}

@media (max-width: 900px) {
  .tst-juego-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
  .tst-juego-grid { grid-template-columns: 1fr; }
  .tst-sec-juego { padding: var(--tst-gap-lg); }
}

/* Card individual dentro de la sección azul */
.tst-j-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--tst-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--tst-transition),
              background var(--tst-transition),
              border-color var(--tst-transition);
  position: relative;
}

.tst-j-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(225, 250, 89, 0.2);
}

.tst-j-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.tst-j-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tst-transition-slow);
  filter: brightness(0.9);
}

.tst-j-card:hover .tst-j-card__media img {
  transform: scale(1.05);
  filter: brightness(1);
}

/* Overlay sutil en la imagen para darle profundidad */
.tst-j-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(13, 27, 42, 0.5) 100%);
  pointer-events: none;
}

.tst-j-card__body {
  padding: var(--tst-gap-md);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--tst-gap-xs);
}

.tst-j-card__tag {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tst-lime);
}

.tst-j-card__title {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-sm);
  font-weight: 800;
  line-height: 1.35;
  color: #FFFFFF;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--tst-transition);
}

.tst-j-card:hover .tst-j-card__title {
  color: var(--tst-lime);
}

.tst-j-card__meta {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  color: rgba(233, 241, 247, 0.4);
  margin-top: auto;
  padding-top: var(--tst-gap-xs);
}


/* ============================================================
   11. SECCIÓN "CURIOSIDADES" — Home
   ============================================================

   Mood: energético y cálido.
   Fondo: --tst-gold (amarillo dorado de marca).
   Cards en blanco translúcido.
   Acento de sección: --tst-brand-dark (azul).
   ============================================================ */

.tst-sec-curio {
  background: var(--tst-gold);
  border-radius: var(--tst-radius-lg);
  padding: var(--tst-gap-xl);
  margin-bottom: var(--tst-gap-xl);
}

.tst-sec-curio .tst-sec-header {
  display: flex;
  align-items: stretch;
  gap: var(--tst-gap-md);
  margin-bottom: var(--tst-gap-lg);
}

.tst-sec-curio .tst-sec-header__accent {
  width: 4px;
  background: var(--tst-brand-dark);
  border-radius: 2px;
  flex-shrink: 0;
}

.tst-sec-curio .tst-sec-header__eyebrow {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(30, 58, 95, 0.65);
  margin-bottom: 4px;
}

.tst-sec-curio .tst-sec-header__title {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-lg);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--tst-brand-dark);
  line-height: 1;
}

.tst-sec-curio .tst-sec-header__more {
  margin-left: auto;
  align-self: center;
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tst-brand-dark);
  background: rgba(30, 58, 95, 0.1);
  border: 1px solid rgba(30, 58, 95, 0.2);
  padding: 7px 16px;
  border-radius: 20px;
  text-decoration: none;
  transition: background var(--tst-transition), border-color var(--tst-transition);
  white-space: nowrap;
}

.tst-sec-curio .tst-sec-header__more:hover {
  background: rgba(30, 58, 95, 0.18);
  border-color: rgba(30, 58, 95, 0.35);
}

/* Grid de cards */
.tst-curio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tst-gap-md);
}

@media (max-width: 900px) {
  .tst-curio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
  .tst-curio-grid { grid-template-columns: 1fr; }
  .tst-sec-curio { padding: var(--tst-gap-lg); }
}

/* Card de curiosidades */
.tst-c-card {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--tst-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--tst-transition),
              background var(--tst-transition),
              border-color var(--tst-transition);
  position: relative;
}

.tst-c-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(30, 58, 95, 0.2);
}

.tst-c-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.tst-c-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tst-transition-slow);
}

.tst-c-card:hover .tst-c-card__media img {
  transform: scale(1.05);
}

.tst-c-card__body {
  padding: var(--tst-gap-md);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--tst-gap-xs);
}

.tst-c-card__tag {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tst-brand-dark);
}

.tst-c-card__title {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-sm);
  font-weight: 800;
  line-height: 1.35;
  color: var(--tst-brand-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--tst-transition);
}

.tst-c-card:hover .tst-c-card__title {
  color: var(--tst-brand);
}

.tst-c-card__meta {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  color: rgba(30, 58, 95, 0.5);
  margin-top: auto;
  padding-top: var(--tst-gap-xs);
}


/* ============================================================
   12. NOTA INDIVIDUAL — single.php
   ============================================================

   Estructura:
   ┌─────────────────────────────────────────┐
   │  Topbar (breadcrumb + sección)          │
   ├─────────────────────────────────────────┤
   │  Hero image full-bleed + overlay        │
   │  Título + autor + fecha superpuestos    │
   ├─────────────────────────────────────────┤
   │  Share bar                              │
   ├──────────────────────────┬──────────────┤
   │  Contenido del artículo  │  Sidebar     │
   │  - Lead italic           │  - TOC       │
   │  - Body (Lora)           │  - Ad 300×250│
   │  - Pull quotes           │  - Related   │
   │  - Ad inline             │              │
   │  - Tags                  │              │
   ├──────────────────────────┴──────────────┤
   │  Notas relacionadas (grid 3 cols)       │
   └─────────────────────────────────────────┘
   ============================================================ */

/* --- Topbar de sección --- */
.tst-art-topbar {
  background: var(--tst-brand-dark);
  padding: 10px var(--tst-gap-lg);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tst-art-topbar__section {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tst-lime);
  text-decoration: none;
  transition: color var(--tst-transition);
}

.tst-art-topbar__section:hover {
  color: #fff;
}

.tst-art-topbar__sep {
  color: rgba(255, 255, 255, 0.25);
  font-size: 14px;
  line-height: 1;
}

.tst-art-topbar__crumb {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Hero del artículo --- */
.tst-art-hero {
  position: relative;
  height: clamp(280px, 45vw, 520px);
  overflow: hidden;
  background: var(--tst-brand-dark);
}

.tst-art-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Overlay degradado: transparente arriba, oscuro abajo */
.tst-art-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13, 27, 42, 0.1) 0%,
    rgba(13, 27, 42, 0.2) 35%,
    rgba(13, 27, 42, 0.82) 75%,
    rgba(13, 27, 42, 0.96) 100%
  );
}

.tst-art-hero__badge {
  position: absolute;
  top: var(--tst-gap-lg);
  left: var(--tst-gap-lg);
  display: inline-flex;
  align-items: center;
  gap: var(--tst-gap-xs);
  background: var(--tst-lime);
  color: var(--tst-brand-dark);
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: var(--tst-radius-sm);
  z-index: 2;
  text-decoration: none;
}

.tst-art-hero__content {
  position: absolute;
  bottom: var(--tst-gap-xl);
  left: var(--tst-gap-lg);
  right: var(--tst-gap-lg);
  z-index: 2;
  max-width: 760px;
}

.tst-art-hero__title {
  font-family: var(--tst-font-headline);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin-bottom: var(--tst-gap-sm);
}

.tst-art-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tst-gap-xs) var(--tst-gap-sm);
}

.tst-art-hero__author {
  display: flex;
  align-items: center;
  gap: var(--tst-gap-sm);
}

.tst-art-hero__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tst-brand);
  border: 2px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
  flex-shrink: 0;
}

.tst-art-hero__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 700;
  color: #fff;
}

.tst-art-hero__author-name {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.tst-art-hero__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.tst-art-hero__date,
.tst-art-hero__read {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  color: rgba(255, 255, 255, 0.55);
}

/* --- Share bar --- */
.tst-art-sharebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tst-gap-sm) var(--tst-gap-lg);
  border-top: 1px solid var(--tst-ink-10);
  border-bottom: 1px solid var(--tst-ink-10);
  background: var(--tst-white);
  position: static;  /* no sticky — evita que tape el título */
  top: auto;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}

.tst-art-share {
  display: flex;
  align-items: center;
  gap: var(--tst-gap-sm);
}

.tst-art-share__label {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tst-ink-30);
}

.tst-share-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--tst-ink-10);
  color: var(--tst-ink-60);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-sm);
  font-weight: 600;
  transition: background var(--tst-transition), border-color var(--tst-transition), color var(--tst-transition);
}

.tst-share-btn:hover {
  background: var(--tst-brand-light);
  border-color: var(--tst-brand-light);
  color: var(--tst-brand);
}

.tst-art-sharebar__views {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  color: var(--tst-ink-30);
}

/* --- Layout principal del artículo --- */
.tst-art-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--tst-gap-xl);
  max-width: var(--tst-max-width);
  margin: 0 auto;
  padding: 0 var(--tst-gap-lg);
  align-items: start;
}

@media (max-width: 900px) {
  .tst-art-layout {
    grid-template-columns: 1fr;
  }
  .tst-art-sidebar {
    order: -1;  /* sidebar sube al tope en mobile */
  }
}

/* --- Contenido del artículo --- */
.tst-art-content {
  padding: var(--tst-gap-xl) 0 var(--tst-gap-2xl);
  max-width: var(--tst-content-width);
}

/* Lead / bajada — primer párrafo destacado */
.tst-art-lead {
  font-family: var(--tst-font-body);
  font-size: var(--tst-fs-md);
  font-weight: 700;
  font-style: italic;
  line-height: 1.65;
  color: var(--tst-ink-100);
  border-left: 3px solid var(--tst-lime-dark);
  padding-left: var(--tst-gap-md);
  margin-bottom: var(--tst-gap-xl);
}

/* Cuerpo del artículo */
.tst-art-content .tst-art-body p {
  font-family: var(--tst-font-body);
  font-size: var(--tst-fs-base);
  line-height: 1.85;
  color: var(--tst-ink-100);
  margin-bottom: var(--tst-gap-md);
}

.tst-art-content .tst-art-body h2 {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-lg);
  font-weight: 800;
  color: var(--tst-ink-100);
  letter-spacing: -0.015em;
  margin: var(--tst-gap-xl) 0 var(--tst-gap-sm);
}

.tst-art-content .tst-art-body h3 {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-md);
  font-weight: 700;
  color: var(--tst-ink-100);
  margin: var(--tst-gap-lg) 0 var(--tst-gap-xs);
}

/* Pull quote */
.tst-art-pullquote {
  background: var(--tst-brand-dark);
  border-radius: var(--tst-radius-lg);
  padding: var(--tst-gap-lg) var(--tst-gap-xl);
  margin: var(--tst-gap-xl) 0;
  position: relative;
  overflow: hidden;
}

.tst-art-pullquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--tst-lime);
}

.tst-art-pullquote__text {
  font-family: var(--tst-font-body);
  font-size: var(--tst-fs-md);
  font-style: italic;
  line-height: 1.6;
  color: #FFFFFF;
  margin-bottom: var(--tst-gap-sm);
}

.tst-art-pullquote__source {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tst-lime);
}

/* Imagen dentro del artículo */
.tst-art-figure {
  margin: var(--tst-gap-xl) 0;
}

.tst-art-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--tst-radius-md);
  display: block;
}

.tst-art-figure figcaption {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  color: var(--tst-ink-30);
  margin-top: var(--tst-gap-sm);
  padding-left: var(--tst-gap-xs);
  border-left: 2px solid var(--tst-ink-10);
}

/* Ad inline dentro del artículo */
.tst-art-ad {
  background: var(--tst-paper);
  border: 1px dashed var(--tst-ink-30);
  border-radius: var(--tst-radius-md);
  padding: var(--tst-gap-sm) var(--tst-gap-md);
  margin: var(--tst-gap-xl) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tst-gap-xs);
  contain: layout style;
  min-height: calc(250px + 24px);
}

.tst-art-ad::before {
  content: "Publicidad";
  font-family: var(--tst-font-headline);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tst-ink-30);
  align-self: flex-start;
}

/* Tags al pie del artículo */
.tst-art-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tst-gap-sm);
  padding: var(--tst-gap-lg) 0;
  border-top: 1px solid var(--tst-ink-10);
  border-bottom: 1px solid var(--tst-ink-10);
  margin: var(--tst-gap-xl) 0;
}

.tst-art-tag {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--tst-brand-light);
  color: var(--tst-brand);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: background var(--tst-transition), color var(--tst-transition);
}

.tst-art-tag:hover {
  background: var(--tst-brand);
  color: #FFFFFF;
}

.tst-art-tag--primary {
  background: var(--tst-brand);
  color: #FFFFFF;
}

.tst-art-tag--primary:hover {
  background: var(--tst-brand-dark);
}

/* --- Sidebar del artículo --- */
.tst-art-sidebar {
  padding: var(--tst-gap-xl) 0 var(--tst-gap-2xl);
  position: sticky;
  top: calc(50px + var(--tst-gap-lg));  /* sticky debajo del sharebar */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--tst-gap-lg);
}

.tst-art-sidebar::-webkit-scrollbar {
  display: none;
}

/* Tabla de contenidos */
.tst-toc {
  background: var(--tst-paper);
  border: 1px solid var(--tst-ink-10);
  border-radius: var(--tst-radius-lg);
  padding: var(--tst-gap-md);
  overflow: hidden;
}

.tst-toc__title {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tst-ink-30);
  margin-bottom: var(--tst-gap-md);
  padding-bottom: var(--tst-gap-sm);
  border-bottom: 1px solid var(--tst-ink-10);
}

.tst-toc__item {
  display: flex;
  align-items: flex-start;
  gap: var(--tst-gap-sm);
  padding: var(--tst-gap-sm) 0;
  border-bottom: 1px solid var(--tst-ink-10);
  text-decoration: none;
  transition: background var(--tst-transition);
  border-radius: var(--tst-radius-sm);
}

.tst-toc__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.tst-toc__num {
  font-family: var(--tst-font-mono);
  font-size: var(--tst-fs-xs);
  font-weight: 700;
  color: var(--tst-brand);
  flex-shrink: 0;
  min-width: 18px;
  line-height: 1.4;
}

.tst-toc__text {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-sm);
  color: var(--tst-ink-100);
  line-height: 1.35;
  transition: color var(--tst-transition);
}

.tst-toc__item:hover .tst-toc__text {
  color: var(--tst-brand);
}

.tst-toc__item--active .tst-toc__num {
  color: var(--tst-lime-dark);
}

.tst-toc__item--active .tst-toc__text {
  color: var(--tst-brand);
  font-weight: 700;
}

/* Ad en sidebar */
.tst-art-sidebar .tst-ad-slot--rect {
  max-width: 100%;
}

/* Widget de notas relacionadas en sidebar */
.tst-sidebar-related {}

.tst-sidebar-related__title {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tst-ink-30);
  margin-bottom: var(--tst-gap-md);
  padding-bottom: var(--tst-gap-sm);
  border-bottom: 1px solid var(--tst-ink-10);
}

.tst-sidebar-rel-item {
  display: flex;
  gap: var(--tst-gap-sm);
  padding: var(--tst-gap-sm) 0;
  border-bottom: 1px solid var(--tst-ink-10);
  text-decoration: none;
  cursor: pointer;
}

.tst-sidebar-rel-item:last-child {
  border-bottom: none;
}

.tst-sidebar-rel-item__img {
  width: 64px;
  height: 48px;
  border-radius: var(--tst-radius-sm);
  flex-shrink: 0;
  overflow: hidden;
  background: var(--tst-paper);
}

.tst-sidebar-rel-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tst-transition-slow);
}

.tst-sidebar-rel-item:hover .tst-sidebar-rel-item__img img {
  transform: scale(1.06);
}

.tst-sidebar-rel-item__tag {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tst-brand);
  margin-bottom: 2px;
}

.tst-sidebar-rel-item__title {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 700;
  color: var(--tst-ink-100);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--tst-transition);
}

.tst-sidebar-rel-item:hover .tst-sidebar-rel-item__title {
  color: var(--tst-brand);
}

/* --- Notas relacionadas — bloque inferior full-width --- */
.tst-art-related {
  background: var(--tst-paper);
  border-top: 3px solid var(--tst-brand);
  padding: var(--tst-gap-xl) var(--tst-gap-lg);
}

.tst-art-related__header {
  display: flex;
  align-items: center;
  gap: var(--tst-gap-sm);
  margin-bottom: var(--tst-gap-lg);
  max-width: var(--tst-max-width);
  margin-inline: auto;
  margin-bottom: var(--tst-gap-lg);
}

.tst-art-related__accent {
  width: 4px;
  height: 22px;
  background: var(--tst-lime-dark);
  border-radius: 2px;
  flex-shrink: 0;
}

.tst-art-related__title {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-md);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tst-ink-100);
}

.tst-art-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tst-gap-md);
  max-width: var(--tst-max-width);
  margin: 0 auto;
}

@media (max-width: 720px) {
  .tst-art-related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .tst-art-related__grid { grid-template-columns: 1fr; }
}

.tst-rel-card {
  background: var(--tst-white);
  border-radius: var(--tst-radius-lg);
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--tst-transition), box-shadow var(--tst-transition);
  box-shadow: var(--tst-card-shadow);
}

.tst-rel-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--tst-card-shadow-hover);
}

.tst-rel-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.tst-rel-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tst-transition-slow);
}

.tst-rel-card:hover .tst-rel-card__media img {
  transform: scale(1.04);
}

.tst-rel-card__body {
  padding: var(--tst-gap-md);
}

.tst-rel-card__tag {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tst-brand);
  margin-bottom: var(--tst-gap-xs);
}

.tst-rel-card__title {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-sm);
  font-weight: 700;
  color: var(--tst-ink-100);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--tst-transition);
}

.tst-rel-card:hover .tst-rel-card__title {
  color: var(--tst-brand);
}

.tst-rel-card__meta {
  font-family: var(--tst-font-headline);
  font-size: var(--tst-fs-xs);
  color: var(--tst-ink-30);
  margin-top: var(--tst-gap-xs);
}


/* ============================================================
   HEADER LOGO — tamaño y visibilidad correctos
   ============================================================ */
.tst-logo-img {
  height: 54px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Elementor site-logo widget override */
.elementor-widget-site-logo img,
.elementor-widget-site-logo .elementor-image-box-img img {
  height: 54px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
}


/* ============================================================
   14. NUEVO FEED EDITORIAL — Layout tipo La Nación
   ============================================================
   Desktop: hero izquierda (55%) + columna secundaria derecha
             + fila inferior de 3 notas
   Mobile:  grilla de 2 columnas compacta
   ============================================================ */

/* ── Contenedor principal del feed ── */
.tst-feed-editorial {
  background: #FFFFFF;
  border: 1px solid var(--tst-ink-10);
  border-radius: var(--tst-radius-lg);
  overflow: hidden;
}

/* ── Bloque superior: hero + secundarias ── */
.tst-feed-top {
  display: grid;
  grid-template-columns: 55% 1fr;
  min-height: 420px;
}

/* ── HERO ── */
.tst-feed-hero {
  position: relative;
  border-right: 1px solid var(--tst-ink-10);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tst-transition);
}

.tst-feed-hero:hover { background: var(--tst-off-white); }

.tst-feed-hero__media {
  position: relative;
  height: 260px;
  overflow: hidden;
  background: var(--tst-brand-dark);
  flex-shrink: 0;
}

.tst-feed-hero__media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  transition: transform var(--tst-transition-slow);
}

.tst-feed-hero:hover .tst-feed-hero__media img { transform: scale(1.03); }

.tst-feed-hero__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--tst-live);
  color: #fff;
  font-family: var(--tst-font-headline);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 4px;
}

.tst-feed-hero__badge--atp {
  background: var(--tst-brand);
  color: #fff;
}

.tst-feed-hero__badge--wta {
  background: var(--tst-wta);
  color: #fff;
}

.tst-feed-hero__body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tst-feed-hero__sup {
  font-family: var(--tst-font-headline);
  font-size: 11px;
  font-weight: 700;
  color: var(--tst-brand);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 7px;
}

.tst-feed-hero__title {
  font-family: var(--tst-font-headline);
  font-size: 22px;
  font-weight: 900;
  color: #1A1A1A !important;
  line-height: 1.2;
  letter-spacing: -.025em;
  margin-bottom: 10px;
  transition: color var(--tst-transition);
}

.tst-feed-hero:hover .tst-feed-hero__title { color: var(--tst-brand) !important; }

.tst-feed-hero__excerpt {
  font-family: var(--tst-font-body);
  font-size: 14px;
  color: #5C5C5C !important;
  line-height: 1.65;
  flex: 1;
  margin-bottom: 12px;
}

.tst-feed-hero__meta {
  font-family: var(--tst-font-headline);
  font-size: 11px;
  color: var(--tst-ink-30);
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--tst-ink-10);
}

/* ── COLUMNA SECUNDARIA ── */
.tst-feed-secondary {
  display: flex;
  flex-direction: column;
}

.tst-feed-secondary-item {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--tst-ink-10);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tst-transition);
  flex: 1;
}

.tst-feed-secondary-item:last-child { border-bottom: none; }
.tst-feed-secondary-item:hover { background: var(--tst-off-white); }

.tst-feed-sec-img {
  width: 96px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--tst-paper);
  align-self: stretch;
}

.tst-feed-sec-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.tst-feed-sec-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.tst-feed-sec-sup {
  font-family: var(--tst-font-headline);
  font-size: 10px;
  font-weight: 700;
  color: var(--tst-brand);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}

.tst-feed-sec-sup--wta { color: var(--tst-wta); }

.tst-feed-sec-title {
  font-family: var(--tst-font-headline);
  font-size: 13px;
  font-weight: 700;
  color: #1A1A1A !important;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--tst-transition);
}

.tst-feed-secondary-item:hover .tst-feed-sec-title { color: var(--tst-brand) !important; }

.tst-feed-sec-meta {
  font-family: var(--tst-font-headline);
  font-size: 10px;
  color: var(--tst-ink-30);
  margin-top: 5px;
}

/* ── DIVISOR "Más noticias" ── */
.tst-feed-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 32px;
  border-top: 1px solid var(--tst-ink-10);
  border-bottom: 1px solid var(--tst-ink-10);
  background: var(--tst-paper);
}

.tst-feed-divider__label {
  font-family: var(--tst-font-headline);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tst-ink-30);
  white-space: nowrap;
  flex-shrink: 0;
}

.tst-feed-divider__line {
  flex: 1;
  height: 0.5px;
  background: var(--tst-ink-10);
}

/* ── FILA INFERIOR de 3 notas ── */
.tst-feed-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.tst-feed-bottom-item {
  padding: 14px 16px;
  border-right: 1px solid var(--tst-ink-10);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tst-transition);
  display: flex;
  flex-direction: column;
}

.tst-feed-bottom-item:last-child { border-right: none; }
.tst-feed-bottom-item:hover { background: var(--tst-off-white); }

.tst-feed-bottom-img {
  height: 130px;
  border-radius: var(--tst-radius-md);
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--tst-paper);
  position: relative;
  flex-shrink: 0;
}

.tst-feed-bottom-img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  transition: transform var(--tst-transition-slow);
}

.tst-feed-bottom-item:hover .tst-feed-bottom-img img { transform: scale(1.04); }

.tst-feed-bottom-cat {
  font-family: var(--tst-font-headline);
  font-size: 9px;
  font-weight: 700;
  color: var(--tst-brand);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 5px;
}

.tst-feed-bottom-title {
  font-family: var(--tst-font-headline);
  font-size: 13px;
  font-weight: 700;
  color: #1A1A1A !important;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--tst-transition);
  flex: 1;
}

.tst-feed-bottom-item:hover .tst-feed-bottom-title { color: var(--tst-brand) !important; }

.tst-feed-bottom-meta {
  font-family: var(--tst-font-headline);
  font-size: 10px;
  color: var(--tst-ink-30);
  margin-top: 8px;
}

/* ── RESPONSIVE MOBILE: grilla 2 columnas ── */
@media (max-width: 767px) {
  .tst-feed-top {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .tst-feed-hero { border-right: none; border-bottom: 1px solid var(--tst-ink-10); }
  .tst-feed-hero__media { height: 200px; }
  .tst-feed-hero__title { font-size: 18px; }
  .tst-feed-hero__body { padding: 14px 14px 16px; }

  .tst-feed-secondary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .tst-feed-secondary-item {
    flex-direction: column;
    border-bottom: 1px solid var(--tst-ink-10);
    border-right: 1px solid var(--tst-ink-10);
    flex: none;
  }

  .tst-feed-secondary-item:nth-child(even) { border-right: none; }
  .tst-feed-secondary-item:nth-last-child(-n+2) { border-bottom: none; }

  .tst-feed-sec-img {
    width: 100%;
    height: 100px;
    align-self: auto;
  }

  .tst-feed-sec-body { padding: 10px; }
  .tst-feed-sec-title { font-size: 12px; }

  .tst-feed-bottom {
    grid-template-columns: repeat(2, 1fr);
  }

  .tst-feed-bottom-item:nth-child(3) {
    grid-column: 1 / -1;
    border-right: none;
    border-top: 1px solid var(--tst-ink-10);
  }

  .tst-feed-bottom-img { height: 110px; }
}


/* ============================================================
   15. IMAGEN PRINCIPAL EN NOTA INDIVIDUAL
   ============================================================
   Más angosta y centrada con márgenes laterales.
   Estilo NYT / The Athletic.
   ============================================================ */

.tst-art-hero {
  position: relative;
  /* Cambiamos de full-bleed a contenedor centrado */
  max-height: 520px;
  overflow: hidden;
  background: var(--tst-brand-dark);
}

/* Límite de ancho y centrado para la imagen */
.tst-art-hero__img-wrap {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  height: clamp(260px, 40vw, 480px);
  overflow: hidden;
}

.tst-art-hero__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* El overlay y el contenido van DEBAJO de la imagen, no superpuestos */
.tst-art-hero__content-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 24px 28px;
  background: var(--tst-white);
}

.tst-art-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--tst-brand);
  color: #fff;
  font-family: var(--tst-font-headline);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
  text-decoration: none;
}

.tst-art-hero__title {
  font-family: var(--tst-font-headline);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: #1A1A1A !important;
  margin-bottom: 12px;
}

.tst-art-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.tst-art-hero__author-name {
  font-family: var(--tst-font-headline);
  font-size: 13px;
  font-weight: 600;
  color: #1A1A1A !important;
}

.tst-art-hero__date,
.tst-art-hero__read {
  font-family: var(--tst-font-headline);
  font-size: 12px;
  color: var(--tst-ink-60) !important;
}

.tst-art-hero__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--tst-ink-30);
  flex-shrink: 0;
}

/* Override: el layout del artículo centrado también */
.tst-art-layout {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 767px) {
  .tst-art-hero__img-wrap { height: 220px; }
  .tst-art-hero__content-wrap { padding: 14px 16px 20px; }
  .tst-art-hero__title { font-size: 1.5rem; }
  .tst-art-layout { padding: 0 16px; }
}


/* ============================================================
   16. SECCIÓN DE AUTOR — /author/
   ============================================================ */

.tst-author-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

/* Header del autor */
.tst-author-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 36px 0 28px;
  border-bottom: 2px solid var(--tst-ink-10);
  margin-bottom: 32px;
}

.tst-author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--tst-brand);
  border: 3px solid var(--tst-brand-light);
}

.tst-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tst-author-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tst-font-headline);
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}

.tst-author-info {}

.tst-author-eyebrow {
  font-family: var(--tst-font-headline);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tst-brand);
  margin-bottom: 4px;
}

.tst-author-name {
  font-family: var(--tst-font-headline);
  font-size: 26px;
  font-weight: 900;
  color: #1A1A1A !important;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: 6px;
}

.tst-author-count {
  font-family: var(--tst-font-headline);
  font-size: 12px;
  color: var(--tst-ink-60) !important;
}

/* Grid de artículos del autor */
.tst-author-feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tst-gap-lg);
}

@media (max-width: 767px) {
  .tst-author-header { flex-direction: column; gap: 14px; padding: 24px 0 20px; }
  .tst-author-avatar { width: 64px; height: 64px; }
  .tst-author-name { font-size: 22px; }
  .tst-author-feed { grid-template-columns: repeat(2, 1fr); gap: var(--tst-gap-md); }
  .tst-author-page { padding: 0 16px 32px; }
}

@media (max-width: 480px) {
  .tst-author-feed { grid-template-columns: 1fr; }
}


/* ============================================================
   17. SECCIÓN DE TAGS — /tag/
   ============================================================ */

.tst-tag-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

/* Header del tag */
.tst-tag-header {
  padding: 32px 0 24px;
  border-bottom: 2px solid var(--tst-brand);
  margin-bottom: 32px;
}

.tst-tag-eyebrow {
  font-family: var(--tst-font-headline);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tst-ink-30);
  margin-bottom: 6px;
}

.tst-tag-name {
  font-family: var(--tst-font-headline);
  font-size: 28px;
  font-weight: 900;
  color: #1A1A1A !important;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin-bottom: 8px;
}

.tst-tag-name::before {
  content: '#';
  color: var(--tst-brand);
}

.tst-tag-meta {
  font-family: var(--tst-font-headline);
  font-size: 12px;
  color: var(--tst-ink-60) !important;
}

/* Nube de tags relacionados */
.tst-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.tst-tag-cloud__item {
  font-family: var(--tst-font-headline);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--tst-brand-light);
  color: var(--tst-brand);
  text-decoration: none;
  letter-spacing: .02em;
  transition: background var(--tst-transition), color var(--tst-transition);
}

.tst-tag-cloud__item:hover {
  background: var(--tst-brand);
  color: #fff;
}

.tst-tag-cloud__item--active {
  background: var(--tst-brand);
  color: #fff;
}

/* Grid de artículos del tag */
.tst-tag-feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tst-gap-lg);
}

@media (max-width: 767px) {
  .tst-tag-page { padding: 0 16px 32px; }
  .tst-tag-name { font-size: 22px; }
  .tst-tag-feed { grid-template-columns: repeat(2, 1fr); gap: var(--tst-gap-md); }
  .tst-tag-header { padding: 20px 0 18px; margin-bottom: 20px; }
}

@media (max-width: 480px) {
  .tst-tag-feed { grid-template-columns: 1fr; }
}


/* ============================================================
   18. FIXES RESPONSIVE GLOBALES
   ============================================================ */

/* Header mobile */
@media (max-width: 768px) {
  .elementor-widget-navigation-menu .elementor-nav-menu { display: none !important; }

  /* Ticker */
  .tst-ticker { padding: 6px 14px; }

  /* Secciones del home */
  .tst-sec-juego,
  .tst-sec-curio {
    border-radius: var(--tst-radius-md);
    padding: var(--tst-gap-md);
  }

  .tst-juego-grid,
  .tst-curio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--tst-gap-sm);
  }

  /* Single article */
  .tst-art-sharebar {
    flex-wrap: wrap;
    padding: 8px 14px;
    gap: 8px;
  }

  .tst-art-content { padding: var(--tst-gap-lg) 0 var(--tst-gap-xl); }

  .tst-art-sidebar {
    position: static;
    max-height: none;
    order: -1;
    padding: var(--tst-gap-md) 0 0;
  }

  .tst-toc { display: none; }

  .tst-art-related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .tst-juego-grid,
  .tst-curio-grid { grid-template-columns: 1fr !important; }

  .tst-art-related__grid { grid-template-columns: 1fr; }

  .tst-art-hero__content-wrap { padding: 12px 14px 16px; }
}

/* Feed sections mobile */
@media (max-width: 580px) {
  .tst-sec-juego,
  .tst-sec-curio { padding: var(--tst-gap-md) var(--tst-gap-sm); }
}


/* ============================================================
   OVERRIDES — Alta especificidad para vencer a Hello Elementor
   Estos van al final del CSS para garantizar que se aplican.
   ============================================================ */

/* Feed editorial — grid layout */
body .tst-feed-editorial {
  background: #FFFFFF !important;
  border: 1px solid #E4E3DC !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body .tst-feed-top {
  display: grid !important;
  grid-template-columns: 55% 1fr !important;
  min-height: 400px !important;
  width: 100% !important;
}

body .tst-feed-hero {
  display: flex !important;
  flex-direction: column !important;
  border-right: 1px solid #E4E3DC !important;
  text-decoration: none !important;
  color: inherit !important;
  min-width: 0 !important;
}

body .tst-feed-hero__media {
  position: relative !important;
  height: 260px !important;
  overflow: hidden !important;
  background: #1E3A5F !important;
  flex-shrink: 0 !important;
  width: 100% !important;
}

body .tst-feed-hero__media img {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

body .tst-feed-hero__body {
  padding: 18px 20px 20px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

body .tst-feed-hero__title {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #1A1A1A !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
  margin-bottom: 10px !important;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
}

body .tst-feed-secondary {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

body .tst-feed-secondary-item {
  display: flex !important;
  border-bottom: 1px solid #E4E3DC !important;
  text-decoration: none !important;
  color: inherit !important;
  flex: 1 !important;
  min-height: 80px !important;
}

body .tst-feed-sec-img {
  width: 96px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  background: #EFEFEA !important;
  align-self: stretch !important;
}

body .tst-feed-sec-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

body .tst-feed-sec-body {
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex: 1 !important;
  min-width: 0 !important;
}

body .tst-feed-sec-title {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body .tst-feed-bottom {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

body .tst-feed-bottom-item {
  padding: 14px 16px !important;
  border-right: 1px solid #E4E3DC !important;
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: column !important;
}

body .tst-feed-bottom-item:last-child { border-right: none !important; }

body .tst-feed-bottom-img {
  height: 130px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
  background: #EFEFEA !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

body .tst-feed-bottom-img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

body .tst-feed-bottom-title {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Tag page */
body .tst-tag-page,
body .tst-author-page {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 24px 48px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body .tst-tag-header {
  padding: 32px 0 24px !important;
  border-bottom: 2px solid #305180 !important;
  margin-bottom: 28px !important;
}

body .tst-tag-eyebrow {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: #A8A8A8 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

body .tst-tag-name {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #1A1A1A !important;
  letter-spacing: -.025em !important;
  line-height: 1.1 !important;
  margin-bottom: 8px !important;
}

body .tst-tag-name::before {
  content: '#' !important;
  color: #305180 !important;
}

body .tst-tag-meta {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 12px !important;
  color: #5C5C5C !important;
  margin: 0 !important;
}

body .tst-tag-cloud {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 28px !important;
}

body .tst-tag-cloud__item {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  background: #D6E3F0 !important;
  color: #305180 !important;
  text-decoration: none !important;
}

body .tst-tag-cloud__item--active,
body .tst-tag-cloud__item:hover {
  background: #305180 !important;
  color: #fff !important;
}

body .tst-tag-feed,
body .tst-author-feed {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

/* Author page */
body .tst-author-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 24px !important;
  padding: 36px 0 28px !important;
  border-bottom: 2px solid #E4E3DC !important;
  margin-bottom: 32px !important;
}

body .tst-author-avatar {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  background: #305180 !important;
  border: 3px solid #D6E3F0 !important;
}

body .tst-author-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body .tst-author-name {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #1A1A1A !important;
  letter-spacing: -.02em !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
}

/* Single article hero — centered with margins */
body .tst-art-hero {
  position: relative !important;
  overflow: hidden !important;
  background: #1E3A5F !important;
  max-height: none !important;
}

body .tst-art-hero__img-wrap {
  max-width: 860px !important;
  margin: 0 auto !important;
  position: relative !important;
  height: clamp(260px, 40vw, 480px) !important;
  overflow: hidden !important;
  display: block !important;
}

body .tst-art-hero__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

body .tst-art-hero__content-wrap {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 20px 24px 28px !important;
  background: #FFFFFF !important;
}

body .tst-art-hero__title {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
  color: #1A1A1A !important;
  margin-bottom: 12px !important;
}

/* Mobile responsive overrides */
@media (max-width: 767px) {
  body .tst-feed-top {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  body .tst-feed-hero {
    border-right: none !important;
    border-bottom: 1px solid #E4E3DC !important;
  }
  body .tst-feed-hero__media { height: 200px !important; }
  body .tst-feed-secondary {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body .tst-feed-secondary-item {
    flex-direction: column !important;
    flex: none !important;
    border-right: 1px solid #E4E3DC !important;
  }
  body .tst-feed-secondary-item:nth-child(even) { border-right: none !important; }
  body .tst-feed-sec-img {
    width: 100% !important;
    height: 90px !important;
    align-self: auto !important;
  }
  body .tst-feed-bottom {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body .tst-feed-bottom-item:nth-child(3) {
    grid-column: 1 / -1 !important;
    border-right: none !important;
    border-top: 1px solid #E4E3DC !important;
  }
  body .tst-tag-feed,
  body .tst-author-feed {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  body .tst-tag-page,
  body .tst-author-page { padding: 0 16px 32px !important; }
  body .tst-art-hero__img-wrap { height: 220px !important; }
  body .tst-art-hero__content-wrap { padding: 14px 16px 20px !important; }
}

@media (max-width: 480px) {
  body .tst-tag-feed,
  body .tst-author-feed { grid-template-columns: 1fr !important; }
}


/* ============================================================
   ELEMENTOR COMPATIBILITY FIXES
   ============================================================
   Elementor's frontend.css applies:
     .elementor img { height: auto; max-width: 100%; }
   This cancels our object-fit cover layout.
   We beat it with higher specificity selectors.
   ============================================================ */

/* Feed editorial images */
.elementor .tst-feed-hero__media img,
.elementor .tst-feed-hero__media > img,
body .tst-feed-hero__media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

.elementor .tst-feed-hero__media,
body .tst-feed-hero__media {
  position: relative !important;
  height: 260px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.elementor .tst-feed-sec-img img,
body .tst-feed-sec-img img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

.elementor .tst-feed-sec-img,
body .tst-feed-sec-img {
  width: 96px !important;
  min-width: 96px !important;
  overflow: hidden !important;
  align-self: stretch !important;
  flex-shrink: 0 !important;
}

.elementor .tst-feed-bottom-img img,
body .tst-feed-bottom-img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

.elementor .tst-feed-bottom-img,
body .tst-feed-bottom-img {
  position: relative !important;
  height: 130px !important;
  overflow: hidden !important;
}

/* Standard card images — beat Elementor */
.elementor .tst-card__media img,
body .tst-card__media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

.elementor .tst-card__media,
body .tst-card__media {
  position: relative !important;
  height: 220px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

/* Hero card */
.elementor .tst-card--hero .tst-card__media,
body .tst-card--hero .tst-card__media {
  height: 280px !important;
}

@media (min-width: 900px) {
  .elementor .tst-card--hero,
  body .tst-card--hero {
    flex-direction: row !important;
    min-height: 360px !important;
  }
  .elementor .tst-card--hero .tst-card__media,
  body .tst-card--hero .tst-card__media {
    width: 52% !important;
    height: 100% !important;
    min-height: 360px !important;
    flex-shrink: 0 !important;
    align-self: stretch !important;
  }
  .elementor .tst-card--hero .tst-card__media img,
  body .tst-card--hero .tst-card__media img {
    object-position: center center !important;
  }
}

/* Feed grid layout — beat Elementor section overrides */
.elementor .tst-feed-top,
body .tst-feed-top {
  display: grid !important;
  grid-template-columns: 55% 1fr !important;
  min-height: 400px !important;
}

.elementor .tst-feed-secondary,
body .tst-feed-secondary {
  display: flex !important;
  flex-direction: column !important;
}

.elementor .tst-feed-secondary-item,
body .tst-feed-secondary-item {
  display: flex !important;
  flex: 1 !important;
}

.elementor .tst-feed-bottom,
body .tst-feed-bottom {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Article single hero image */
.elementor .tst-art-hero__img,
body .tst-art-hero__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

.elementor .tst-art-hero__img-wrap,
body .tst-art-hero__img-wrap {
  position: relative !important;
  height: clamp(260px, 40vw, 480px) !important;
  overflow: hidden !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}

/* Section images — Entendiendo el juego / Curiosidades */
.elementor .tst-j-card__media img,
body .tst-j-card__media img,
.elementor .tst-c-card__media img,
body .tst-c-card__media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

/* Related cards bottom */
.elementor .tst-rel-card__media img,
body .tst-rel-card__media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

/* Mobile responsive — beat Elementor */
@media (max-width: 767px) {
  .elementor .tst-feed-top,
  body .tst-feed-top {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .elementor .tst-feed-hero,
  body .tst-feed-hero {
    border-right: none !important;
    border-bottom: 1px solid #E4E3DC !important;
  }

  .elementor .tst-feed-hero__media,
  body .tst-feed-hero__media {
    height: 200px !important;
  }

  .elementor .tst-feed-secondary,
  body .tst-feed-secondary {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .elementor .tst-feed-secondary-item,
  body .tst-feed-secondary-item {
    flex-direction: column !important;
    flex: none !important;
  }

  .elementor .tst-feed-sec-img,
  body .tst-feed-sec-img {
    width: 100% !important;
    min-width: 0 !important;
    height: 100px !important;
  }

  .elementor .tst-feed-bottom,
  body .tst-feed-bottom {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ============================================================
   SINGLE ARTICLE HERO — DEFINITIVO
   Imagen centrada con márgenes, título y meta DEBAJO en blanco.
   Estos estilos sobreescriben cualquier regla anterior.
   ============================================================ */

.tst-art-hero,
body .tst-art-hero,
.elementor .tst-art-hero {
  position: relative !important;
  background: transparent !important;
  overflow: visible !important;
  max-height: none !important;
}

/* La imagen ya NO tiene opacity ni overlay — muestra full color */
.tst-art-hero__img-wrap,
body .tst-art-hero__img-wrap,
.elementor .tst-art-hero__img-wrap {
  position: relative !important;
  height: clamp(260px, 40vw, 480px) !important;
  overflow: hidden !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  background: var(--tst-brand-dark) !important;
}

.tst-art-hero__img,
body .tst-art-hero__img,
.elementor .tst-art-hero__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  opacity: 1 !important;          /* sin transparencia */
  display: block !important;
}

/* Overlay DESACTIVADO completamente */
.tst-art-hero__overlay {
  display: none !important;
}

/* El contenido (título, meta) va DEBAJO de la imagen en fondo blanco */
.tst-art-hero__content-wrap,
body .tst-art-hero__content-wrap,
.elementor .tst-art-hero__content-wrap {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 20px 24px 28px !important;
  background: #FFFFFF !important;
  position: static !important;
  color: #1A1A1A !important;
}

/* El contenedor antiguo (.tst-art-hero__content) que se superponía — ocultar */
.tst-art-hero__content {
  display: none !important;
}

.tst-art-hero__title,
body .tst-art-hero__title {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
  color: #1A1A1A !important;
  margin-bottom: 12px !important;
}

.tst-art-hero__badge,
body .tst-art-hero__badge {
  display: inline-flex !important;
  align-items: center !important;
  background: #305180 !important;
  color: #fff !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  margin-bottom: 12px !important;
  text-decoration: none !important;
  position: static !important;     /* ya NO absoluto */
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
}

.tst-art-hero__meta,
body .tst-art-hero__meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  color: #5C5C5C !important;
}

.tst-art-hero__author-name,
body .tst-art-hero__author-name {
  color: #1A1A1A !important;
  font-weight: 600 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

.tst-art-hero__date,
.tst-art-hero__read,
body .tst-art-hero__date,
body .tst-art-hero__read {
  color: #5C5C5C !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 12px !important;
}

.tst-art-hero__meta-dot {
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: #A8A8A8 !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

@media (max-width: 767px) {
  .tst-art-hero__img-wrap,
  body .tst-art-hero__img-wrap { height: 220px !important; }
  .tst-art-hero__content-wrap,
  body .tst-art-hero__content-wrap { padding: 14px 16px 20px !important; }
  .tst-art-hero__title,
  body .tst-art-hero__title { font-size: 1.4rem !important; }
}


/* ── Article layout fixes — definitivos ── */
.tst-art-layout {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* Main content column width */
.tst-art-content {
  max-width: 100% !important;
}

/* Body text readable width */
.tst-art-body {
  font-family: var(--tst-font-body) !important;
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  color: #1A1A1A !important;
}

/* Images inside article content — never wider than container */
.tst-art-body img,
.tst-art-content img:not(.tst-art-hero__img) {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  display: block !important;
  margin: 1.5rem auto !important;
}

@media (max-width: 767px) {
  .tst-art-layout { padding: 0 16px !important; }
  .tst-art-sharebar { padding: 8px 16px !important; }
}


/* ── Fondo blanco en páginas de artículo ── */
.single-post,
.single-post body,
.single-post .site-main,
.single-post .page-content,
.single-post #content,
.single-post .elementor-section-wrap,
.single-post .elementor-inner,
body.single-post {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* El sidebar TOC y relacionados mantienen su fondo propio */
.tst-art-sidebar,
.tst-art-related {
  background: transparent;
}


/* ============================================================
   19. SINGLE ARTICLE v2 — Rediseño completo
   ============================================================ */

/* Fondo blanco en artículos */
.single-post, .single-post body,
.single-post .site-main, .single-post #content,
.single-post .page-content { background: #FFFFFF !important; }

/* ── Breadcrumb ── */
.tst2-bc {
  background: #1E3A5F;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tst2-bc__link {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #B8CC30;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  transition: color .15s;
}
.tst2-bc__link:hover { color: #E1FA59; }
.tst2-bc__sep { font-size: 11px; color: rgba(225,250,89,.35); }
.tst2-bc__current {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

/* ── Hero image ── */
.tst2-hero-wrap {
  max-width: 860px !important;
  margin: 0 auto !important;
  height: clamp(260px, 42vw, 480px) !important;
  overflow: hidden !important;
  position: relative !important;
  background: #1E3A5F !important;
  display: block !important;
}
.tst2-hero-img,
.elementor .tst2-hero-img,
body .tst2-hero-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  opacity: 1 !important;
  display: block !important;
}

/* ── Article header ── */
.tst2-header {
  max-width: 720px;
  margin: 0 auto;
  padding: 22px 24px 0;
  background: #FFFFFF;
}
.tst2-badge {
  display: inline-flex;
  align-items: center;
  background: #305180;
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 14px;
  text-decoration: none;
  transition: background .15s;
}
.tst2-badge:hover { background: #1E3A5F; }

.tst2-title {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
  color: #1A1A1A !important;
  margin-bottom: 16px !important;
}

.tst2-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid #E8E7E0;
}
.tst2-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #D6E3F0 !important;
  flex-shrink: 0 !important;
  display: block !important;
  max-width: none !important;
}
.tst2-avatar--initials {
  background: #305180 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #E1FA59 !important;
}
.tst2-author {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1A1A1A;
  text-decoration: none;
}
.tst2-author:hover { color: #305180; }
.tst2-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #A8A8A8;
  flex-shrink: 0;
}
.tst2-date, .tst2-read {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  color: #5C5C5C;
}

/* ── Share bar — integrada, no sticky ── */
.tst2-share {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 0 14px;
}
.tst2-share__label {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #A8A8A8;
  margin-right: 4px;
}
.tst2-share__btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #E8E7E0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #5C5C5C;
  cursor: pointer;
  background: #fff;
  text-decoration: none;
  transition: all .15s;
  flex-shrink: 0;
}
.tst2-share__btn:hover {
  background: #305180;
  color: #fff;
  border-color: #305180;
}
.tst2-share__btn--wa { background: #25D366; color: #fff; border-color: #25D366; }
.tst2-share__btn--wa:hover { background: #1ea855; border-color: #1ea855; }

/* ── Layout 2 columnas ── */
.tst2-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 36px;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 48px;
  align-items: start;
  background: #FFFFFF;
}

/* ── Contenido principal ── */
.tst2-main { min-width: 0; }

.tst2-lead {
  font-family: "Lora", Georgia, serif;
  font-size: 1.1rem;
  color: #1A1A1A;
  line-height: 1.75;
  margin: 20px 0 20px;
  padding-left: 16px;
  border-left: 3px solid #B8CC30;
  border-radius: 0;
  /* nunca recortar el lead */
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  max-height: none !important;
}

.tst2-body {
  font-family: "Lora", Georgia, serif;
  font-size: 1rem;
  color: #2C2C2C;
  line-height: 1.9;
}
.tst2-body p { margin-bottom: 1.4em; color: #2C2C2C; }
.tst2-body h2 {
  font-family: "DM Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: #1A1A1A;
  margin: 2rem 0 .75rem;
  letter-spacing: -.018em;
  line-height: 1.25;
}
.tst2-body h3 {
  font-family: "DM Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1A1A1A;
  margin: 1.5rem 0 .5rem;
}
.tst2-body strong { color: #1A1A1A; font-weight: 700; }
.tst2-body a { color: #305180; text-decoration: underline; }
.tst2-body a:hover { color: #1E3A5F; }
.tst2-body blockquote {
  background: #1E3A5F;
  border-radius: 10px;
  padding: 18px 22px;
  margin: 1.8rem 0;
  position: relative;
}
.tst2-body blockquote::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #B8CC30;
  border-radius: 10px 0 0 10px;
}
.tst2-body blockquote p {
  font-family: "Lora", Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: #fff !important;
  line-height: 1.65;
  margin: 0 !important;
}
.tst2-body blockquote cite {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(225,250,89,.7);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tst2-body img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px;
  display: block;
  margin: 1.5rem auto;
}
.tst2-body .wp-caption,
.tst2-body figure { margin: 1.5rem 0; }
.tst2-body .wp-caption-text,
.tst2-body figcaption {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  color: #A8A8A8;
  font-style: italic;
  margin-top: 6px;
  text-align: center;
}
.tst2-body ul, .tst2-body ol {
  padding-left: 1.4em;
  margin-bottom: 1.4em;
}
.tst2-body li { margin-bottom: .4em; }

/* Tags */
.tst2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #E8E7E0;
}
.tst2-tag {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  background: #D6E3F0;
  color: #305180;
  text-decoration: none;
  letter-spacing: .02em;
  transition: all .15s;
}
.tst2-tag:hover { background: #305180; color: #fff; }

/* ── SIDEBAR ── */
.tst2-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 20px;
}

/* TOC */
.tst2-toc {
  background: #fff;
  border: 1px solid #E8E7E0;
  border-radius: 10px;
  overflow: hidden;
}
.tst2-toc__header {
  background: #305180;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
}
.tst2-toc__list { padding: 6px 0; }
.tst2-toc__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 14px;
  text-decoration: none;
  transition: background .15s;
}
.tst2-toc__item:hover { background: #F5F4EF; }
.tst2-toc__item--active { background: #EEF3F8; }
.tst2-toc__num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #305180;
  color: #fff;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.tst2-toc__item--active .tst2-toc__num {
  background: #B8CC30;
  color: #1E3A5F;
}
.tst2-toc__text {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.4;
}
.tst2-toc__item:hover .tst2-toc__text { color: #305180; }

/* Relacionados sidebar */
.tst2-sidebar-rel {
  background: #fff;
  border: 1px solid #E8E7E0;
  border-radius: 10px;
  overflow: hidden;
}
.tst2-sidebar-rel__header {
  padding: 10px 14px;
  border-bottom: 1px solid #E8E7E0;
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #305180;
}
.tst2-sidebar-rel__item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #E8E7E0;
  text-decoration: none;
  transition: background .15s;
}
.tst2-sidebar-rel__item:last-child { border-bottom: none; }
.tst2-sidebar-rel__item:hover { background: #F5F4EF; }
.tst2-sidebar-rel__img {
  width: 54px;
  height: 46px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  background: #E8E7E0;
  position: relative;
}
.tst2-sidebar-rel__img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
}
.tst2-sidebar-rel__cat {
  font-family: "DM Sans", sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: #305180;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}
.tst2-sidebar-rel__title {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Seguí leyendo ── */
.tst2-more {
  padding: 28px 24px 40px;
  border-top: 2px solid #B8CC30;
  background: #fff;
  max-width: 960px;
  margin: 0 auto;
}
.tst2-more__header { margin-bottom: 18px; }
.tst2-more__title {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #B8CC30;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tst2-more__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E8E7E0;
}
.tst2-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tst2-more__card {
  text-decoration: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.tst2-more__card:hover .tst2-more__card-title { color: #305180; }
.tst2-more__img {
  height: 130px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  background: #E8E7E0;
  position: relative;
  flex-shrink: 0;
}
.tst2-more__img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  transition: transform .35s;
}
.tst2-more__card:hover .tst2-more__img img { transform: scale(1.04); }
.tst2-more__cat {
  font-family: "DM Sans", sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: #305180;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 5px;
}
.tst2-more__card-title {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.35;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s;
}
.tst2-more__meta {
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  color: #A8A8A8;
  margin-top: 7px;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .tst2-layout { grid-template-columns: 1fr; padding: 0 16px 36px; }
  .tst2-sidebar { position: static; order: 2; }
  .tst2-toc { display: none; } /* TOC se oculta en mobile — demasiado espacio */
  .tst2-more { padding: 22px 16px 32px; }
  .tst2-more__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tst2-header { padding: 18px 16px 0; }
  .tst2-title { font-size: 1.5rem !important; }
}
@media (max-width: 480px) {
  .tst2-hero-wrap { height: 220px !important; }
  .tst2-more__grid { grid-template-columns: 1fr; }
  .tst2-bc { padding: 8px 16px; }
}


/* ── Forzar ancho completo en artículos ── */
.tst-single-fullwidth .site-main,
.tst-single-fullwidth .page-content,
.tst-single-fullwidth #content,
.tst-single-fullwidth article,
.tst-full-article,
body.single-post .site-main,
body.single-post #content,
body.single-post .page-content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.single-post .entry-content,
body.single-post .post-content {
  max-width: 100% !important;
  padding: 0 !important;
}

/* El contenedor de Hello Elementor no debe limitar el ancho en artículos */
body.single-post .content-area {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Nuestros elementos internos controlan su propio ancho */
.tst2-bc,
.tst2-hero-wrap,
.tst2-header,
.tst2-layout,
.tst2-more {
  width: 100% !important;
  box-sizing: border-box !important;
}


/* ============================================================
   ARTICLE HERO — FULL WIDTH BREAKOUT
   Rompe el contenedor de Elementor para ocupar todo el ancho
   ============================================================ */

/* El breadcrumb y la imagen hero deben salir del contenedor
   de Elementor que los encierra y ocupar 100% del viewport */

.tst2-bc,
.tst2-hero-wrap {
  /* Breakout technique: sale del contenedor padre sin importar su ancho */
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
}

/* La imagen dentro del hero ocupa todo el ancho del breakout */
.tst2-hero-wrap .tst2-hero-img {
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(280px, 45vw, 520px) !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  position: static !important;
}

/* El header y layout del artículo siguen centrados a 960px */
.tst2-header,
.tst2-layout,
.tst2-more {
  max-width: 960px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  .tst2-header,
  .tst2-layout,
  .tst2-more {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ============================================================
   ARTÍCULO MOBILE — sidebar siempre DESPUÉS del contenido
   ============================================================ */

@media (max-width: 860px) {
  .tst2-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  .tst2-main {
    order: 1 !important;
  }

  .tst2-sidebar {
    order: 2 !important;
    position: static !important;
  }
}


/* ── Imágenes dentro del cuerpo del artículo ── */
.tst2-body img,
.tst2-body figure img,
.tst2-body .wp-caption img,
.entry-content img,
.tst2-body .size-full,
.tst2-body .size-large {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 1.2rem auto !important;
  border-radius: 8px !important;
  object-fit: unset !important;
  position: static !important;
  inset: auto !important;
}

/* En mobile las imágenes nunca salen del contenedor */
@media (max-width: 767px) {
  .tst2-body img,
  .tst2-body figure img {
    width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
  }
}


/* ============================================================
   ARTICULO MOBILE — fix definitivo
   ============================================================ */

@media (max-width: 860px) {

  /* Layout: columna unica, main siempre primero */
  .tst2-layout {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 16px 32px !important;
    gap: 0 !important;
  }

  .tst2-main  { order: 1 !important; width: 100% !important; }
  .tst2-sidebar { order: 2 !important; position: static !important; width: 100% !important; margin-top: 24px !important; }

  /* Titulo del articulo */
  .tst2-title {
    font-size: 1.6rem !important;
    letter-spacing: -.02em !important;
  }

  /* Header */
  .tst2-header {
    padding: 16px 16px 0 !important;
  }

  /* Lead paragraph — sin overflow */
  .tst2-lead {
    font-size: 1rem !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    white-space: normal !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Body texto — sin overflow */
  .tst2-body {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  .tst2-body p,
  .tst2-body h2,
  .tst2-body h3,
  .tst2-body blockquote {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Imagenes dentro del body */
  .tst2-body img {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
  }

  /* Breadcrumb */
  .tst2-bc {
    padding: 8px 16px !important;
  }
  .tst2-bc__current {
    max-width: 200px !important;
  }

  /* Share bar */
  .tst2-share {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Meta row */
  .tst2-meta {
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
  }

  /* TOC oculto en mobile */
  .tst2-toc { display: none !important; }

  /* Sidebar relacionados */
  .tst2-sidebar-rel__item { padding: 10px 10px !important; }

  /* Seguí leyendo */
  .tst2-more {
    padding: 20px 16px 32px !important;
  }
  .tst2-more__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .tst2-more__img { height: 180px !important; }
}

@media (max-width: 480px) {
  .tst2-title { font-size: 1.4rem !important; }
  .tst2-more__grid { grid-template-columns: 1fr !important; }
}


/* ============================================================
   HOME MOBILE — Opcion C: Timeline con acento lateral
   Hero full width + lista con barra de color por circuito
   ============================================================ */

@media (max-width: 640px) {

  /* ── Contenedor general del feed ── */
  .tst-feed-editorial {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* ── HERO: full width, imagen completa ── */
  .tst-feed-top {
    display: block !important;
    grid-template-columns: none !important;
  }

  .tst-feed-hero {
    border-right: none !important;
    border-bottom: 1px solid #E4E3DC !important;
  }

  .tst-feed-hero__media {
    height: 220px !important;
    width: 100% !important;
  }

  .tst-feed-hero__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .tst-feed-hero__body {
    padding: 12px 14px 14px !important;
  }

  .tst-feed-hero__title {
    font-size: 1.2rem !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
  }

  .tst-feed-hero__excerpt {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-top: 5px !important;
  }

  /* ── SECUNDARIAS: lista timeline con acento ── */
  .tst-feed-secondary {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    background: #fff !important;
  }

  .tst-feed-secondary-item {
    display: flex !important;
    flex-direction: row !important;
    border-bottom: 0.5px solid #E4E3DC !important;
    border-right: none !important;
    position: relative !important;
    padding: 0 !important;
    text-decoration: none !important;
  }

  /* Barra de color izquierda segun categoria */
  .tst-feed-secondary-item::before {
    content: '' !important;
    display: block !important;
    width: 3px !important;
    flex-shrink: 0 !important;
    background: #305180 !important; /* ATP por defecto */
    align-self: stretch !important;
  }

  /* WTA — detectar por clase del badge dentro */
  .tst-feed-secondary-item:has(.tst-badge--wta)::before {
    background: #6A4C93 !important;
  }

  /* Challenger/otros — gris */
  .tst-feed-secondary-item:has([class*="challenger"])::before,
  .tst-feed-secondary-item:has([class*="rankings"])::before {
    background: #888780 !important;
  }

  .tst-feed-sec-body {
    flex: 1 !important;
    padding: 10px 10px 10px 10px !important;
    min-width: 0 !important;
  }

  .tst-feed-sec-title {
    font-family: "DM Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #1A1A1A !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .tst-feed-sec-img {
    width: 72px !important;
    min-width: 72px !important;
    height: 60px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    margin: 8px 10px 8px 0 !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    order: 2 !important; /* imagen a la derecha */
  }

  .tst-feed-sec-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .tst-feed-sec-cat {
    font-size: 9px !important;
    margin-bottom: 3px !important;
  }

  .tst-feed-bottom-meta,
  .tst-feed-sec-meta {
    font-size: 9px !important;
    margin-top: 4px !important;
    color: #A8A8A8 !important;
  }

  /* ── FILA INFERIOR: tambien timeline ── */
  .tst-feed-bottom {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    border-top: 2px solid #305180 !important;
  }

  .tst-feed-bottom-item {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    border-bottom: 0.5px solid #E4E3DC !important;
    border-right: none !important;
    position: relative !important;
    text-decoration: none !important;
  }

  .tst-feed-bottom-item::before {
    content: '' !important;
    display: block !important;
    width: 3px !important;
    flex-shrink: 0 !important;
    background: #305180 !important;
    align-self: stretch !important;
  }

  .tst-feed-bottom-item:has(.tst-badge--wta)::before {
    background: #6A4C93 !important;
  }

  .tst-feed-bottom-item:nth-child(3) {
    grid-column: auto !important;
    border-top: none !important;
  }

  .tst-feed-bottom-img {
    width: 72px !important;
    min-width: 72px !important;
    height: 60px !important;
    flex-shrink: 0 !important;
    border-radius: 5px !important;
    margin: 8px 10px 8px 0 !important;
    overflow: hidden !important;
    order: 2 !important;
  }

  .tst-feed-bottom-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .tst-feed-bottom-body {
    flex: 1 !important;
    padding: 10px 0 10px 10px !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .tst-feed-bottom-title {
    font-family: "DM Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #1A1A1A !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .tst-feed-bottom-cat {
    font-size: 9px !important;
    margin-bottom: 3px !important;
  }

  /* ── Separador MAS NOTICIAS ── */
  .tst-feed-bottom-header,
  .tst-feed-noticias-header {
    font-size: 10px !important;
    padding: 8px 14px !important;
    letter-spacing: .08em !important;
  }

  /* ── Feed de noticias secundario (mas noticias) ── */
  .tst-feed-noticias {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }

  .tst-card {
    display: flex !important;
    flex-direction: row !important;
    border-bottom: 0.5px solid #E4E3DC !important;
    position: relative !important;
  }

  .tst-card::before {
    content: '' !important;
    display: block !important;
    width: 3px !important;
    flex-shrink: 0 !important;
    background: #305180 !important;
    align-self: stretch !important;
  }

  .tst-card:has(.tst-badge--wta)::before { background: #6A4C93 !important; }

  .tst-card--hero {
    flex-direction: column !important;
  }
  .tst-card--hero::before { display: none !important; }

  .tst-card:not(.tst-card--hero) .tst-card__media {
    width: 80px !important;
    min-width: 80px !important;
    height: 68px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    margin: 8px 10px 8px 0 !important;
    border-radius: 5px !important;
    order: 2 !important;
  }

  .tst-card:not(.tst-card--hero) .tst-card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .tst-card:not(.tst-card--hero) .tst-card__body {
    flex: 1 !important;
    padding: 10px 0 10px 10px !important;
    min-width: 0 !important;
  }

  .tst-card:not(.tst-card--hero) .tst-card__title {
    font-size: 13px !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .tst-card:not(.tst-card--hero) .tst-card__excerpt {
    display: none !important;
  }

  /* Secciones Juego y Curiosidades — misma lista */
  .tst-juego-grid,
  .tst-curio-grid {
    grid-template-columns: 1fr !important;
  }

  .tst-j-card,
  .tst-c-card {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    border-bottom: 0.5px solid #E4E3DC !important;
    position: relative !important;
  }

  .tst-j-card::before,
  .tst-c-card::before {
    content: '' !important;
    display: block !important;
    width: 3px !important;
    flex-shrink: 0 !important;
    align-self: stretch !important;
  }

  .tst-j-card::before { background: #B8CC30 !important; }
  .tst-c-card::before { background: #F5B021 !important; }

  .tst-j-card__media,
  .tst-c-card__media {
    width: 80px !important;
    min-width: 80px !important;
    height: 68px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    margin: 8px 10px 8px 0 !important;
    border-radius: 5px !important;
    order: 2 !important;
  }

  .tst-j-card__body,
  .tst-c-card__body {
    flex: 1 !important;
    padding: 10px 0 10px 10px !important;
    min-width: 0 !important;
  }
}