/* ============================================================
   Tucdia — main.css
   Presupuesto: <= 60 KB. Mobile-first. Skills: diseño-sistema,
   responsive-touch, accesibilidad, performance.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --td-primary: #1B4B91;
  --td-primary-dark: #123566;
  --td-primary-soft: #E4EEFA;
  --td-primary-fg: #1B4B91;
  --td-accent: #D6402A;

  /* Paleta Complementaria Autorizada (Sobriedad Editorial - Eventos y Coberturas Especiales) */
  --td-color-indigo-velvet: #4e30a0;
  --td-color-inferno: #a30000;
  --td-color-harvest-orange: #ff7700;
  --td-color-soft-peach: #efd28d;
  --td-color-tropical-teal: #00afb5;

  /* Nuevos tokens híbridos v1 */
  --td-primary-bright: #2E7DD7;
  --td-violet:         #4E30A0;
  --td-violet-soft:    #efeaf9;
  --td-orange:         #E8622C;
  --td-gold:           #F0A83E;

  /* Estados funcionales */
  --td-live:           #4ade80;   /* verde "en vivo" / marcador de partido */
  --td-warn:           #fbbf24;   /* ámbar: avisos / penales */
  --td-danger:         #d0000a;   /* rojo fuerte: error / urgente */

  /* Colores por sección (para --td-sec de [data-cat-sec]) */
  --td-sec-politica:   #1B4B91;
  --td-sec-economia:   #1F8A5B;
  --td-sec-deportes:   #0F7B8A;
  --td-sec-arte:       #E8622C;
  --td-sec-ultima:     #D6402A;

  /* Gradiente amanecer */
  --td-sunrise: linear-gradient(90deg, #1B4B91 0%, #2E7DD7 34%, #E8622C 76%, #F0A83E 100%);
  --td-sunrise-height: 4px;

  /* Superficie de la página */
  --td-page: #F7F4EE;

  /* Neutros cálidos */
  --td-bg: #ffffff;
  --td-bg-alt: #FBF9F4;
  --td-text: #14181F;
  --td-text-soft: #565B66;
  --td-border: #E2DBCD;

  --td-font: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --td-font-display: 'Domine', Georgia, 'Times New Roman', serif;
  --td-fs-base: 1rem;
  --td-fs-note: 1.125rem;
  --td-lh-note: 1.7;

  --td-s1: .25rem;
  --td-s2: .5rem;
  --td-s3: .75rem;
  --td-s4: 1rem;
  --td-s6: 1.5rem;
  --td-s8: 2rem;
  --td-s12: 3rem;

  --td-radius: 0;
  --td-shadow: 0 2px 12px rgba(26, 26, 34, .08);
  --td-maxw-note: 720px;
  --td-maxw-site: 1280px;
  --td-touch: 44px;
  /* target táctil mínimo */
  --td-touch-lg: 48px;
}

[data-theme="dark"],
html[data-td-auto="dark"] body[data-theme="auto"] {
  --td-page: #12131A;
  --td-bg: #15151c;
  --td-bg-alt: #1e1e28;
  --td-text: #ececf2;
  --td-text-soft: #a3a3b5;
  --td-border: #2c2c3a;
  --td-primary-soft: #16233B;
  --td-primary-fg: #7FB0E8;
  --td-violet: #b6a3ec;
  --td-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}

/* ---------- Fuentes ---------- */

/* Open Sans variable — cuerpo, menús, metadatos (wdth 75-100, wght 300-800).
   Subset por unicode-range (Google Fonts) para minimizar payload: latin cubre
   el español completo (á é í ó ú ü ñ ∈ U+00xx); latin-ext carga on-demand. */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/OpenSans-Variable-latin-ext.woff2') format('woff2');
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/OpenSans-Variable-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Domine variable — titulares editoriales (wght 400-700) */
@font-face {
  font-family: 'Domine';
  src: url('../fonts/domine/Domine-VariableFont_wght-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Domine';
  src: url('../fonts/domine/Domine-VariableFont_wght.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------- Reset mínimo ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--td-font);
  font-size: var(--td-fs-base);
  line-height: 1.5;
  color: var(--td-text);
  background: var(--td-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-variation-settings: 'wdth' 85, 'wght' 700;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

a {
  color: var(--td-primary);
}

a,
button {
  touch-action: manipulation;
}

/* sin delay de 300ms */
button {
  font: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--td-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Utilidades ---------- */
.td-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.td-skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--td-primary);
  color: #fff;
  padding: var(--td-s3) var(--td-s4);
  border-radius: 0 0 var(--td-radius) 0;
}

.td-skip:focus {
  left: 0;
}

/* ---------- Header ---------- */
.td-header {
  position: sticky;
  top: 4px; /* Se pega debajo de la línea fija roja */
  z-index: 50;
  background: #1B4B91; /* Azul logo estático */
  border-bottom: 1px solid #123566; /* Azul oscuro estático */
  color: #ffffff;
}

/* Forzar logo claro sobre fondo azul oscuro en cualquier modo */
.td-header .td-logo-light {
  display: none !important;
}
.td-header .td-logo-dark {
  display: inline-block !important;
}

/* Botones e íconos del header siempre blancos */
.td-header .td-btn-icon {
  color: #ffffff;
}
.td-header .td-btn-icon:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Línea decorativa fija de color inferno al tope del viewport */
.td-header-border {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--td-sunrise);
  z-index: 100;
}

/* Soporte para la barra de administración de WordPress */
.admin-bar .td-header-border {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar .td-header-border {
    top: 46px;
  }
}

.admin-bar .td-header {
  top: 36px; /* 32px admin bar + 4px separation */
}
@media (max-width: 782px) {
  .admin-bar .td-header {
    top: 50px; /* 46px admin bar + 4px separation */
  }
}


/* ---------- Barra de Información (Fecha y Fallback) ---------- */
.td-barra-info.td-barra-superior {
  border-top: none;
  border-bottom: none;
  /* Al ras exacto bajo la línea fija del amanecer (4px): sin los 3px de
     "separación" que dejaban ver una banda del fondo papel (blanco) arriba. */
  margin-top: var(--td-sunrise-height);
}
.td-barra-info.td-barra-superior .td-barra-info__inner {
  height: 26px; /* Altura compacta al máximo para la barra superior */
}

.td-barra-info__fecha {
  font-weight: 600;
  color: var(--td-text-soft);
  white-space: nowrap;
}

.td-barra-info__sep-fecha {
  color: var(--td-border);
  opacity: 0.8;
  margin-inline: var(--td-s1);
  user-select: none;
}

.td-barra-info__fallback {
  opacity: 0.8;
  color: var(--td-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.td-header__inner {
  max-width: var(--td-maxw-site);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px var(--td-s4);
}

.td-header__izq {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  gap: var(--td-s2);
  min-width: 0;
}

.td-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--td-s2);
}

.td-logo img {
  max-height: 38px;
  width: auto;
  display: block;
}

.td-logo-dark {
  display: none !important;
}

.td-logo-light {
  display: inline-block !important;
}

[data-theme="dark"] .td-logo-light,
html[data-td-auto="dark"] body[data-theme="auto"] .td-logo-light {
  display: none !important;
}

[data-theme="dark"] .td-logo-dark,
html[data-td-auto="dark"] body[data-theme="auto"] .td-logo-dark {
  display: inline-block !important;
}

.td-logo__texto {
  font-weight: 700;
  font-size: 1.3rem;
  text-decoration: none;
  color: var(--td-text);
}

.td-header__der {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.td-header__acciones {
  display: flex;
  align-items: center;
  gap: var(--td-s1);
}

.td-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--td-touch-lg);
  height: var(--td-touch-lg);
  background: none;
  border: none;
  border-radius: var(--td-radius);
  color: var(--td-text);
  font-size: 1.3rem;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.td-btn-icon:hover {
  background: var(--td-bg-alt);
}

/* ---------- Search panel ---------- */
.td-search-panel {
  border-top: 1px solid var(--td-border);
  background: var(--td-bg);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}

.td-search-panel.abierto {
  opacity: 1;
  transform: translateY(0);
}

.td-search-panel__inner {
  max-width: var(--td-maxw-site);
  margin-inline: auto;
  padding: var(--td-s3) var(--td-s4);
  display: flex;
  align-items: center;
  gap: var(--td-s2);
}

.td-search-panel__form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--td-s2);
  background: var(--td-bg-alt);
  border: 2px solid transparent;
  border-radius: var(--td-radius);
  padding: var(--td-s2) var(--td-s3);
  transition: border-color .18s ease;
}

.td-search-panel__form:focus-within {
  border-color: var(--td-primary);
}

.td-search-panel__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.td-search-panel__lupa {
  color: var(--td-text-soft);
  flex-shrink: 0;
}

.td-search-panel__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  color: var(--td-text);
  outline: none;
  min-width: 0;
  font-family: inherit;
}

.td-search-panel__input::placeholder {
  color: var(--td-text-soft);
}

/* Chrome: elimina el botón nativo de borrado del campo search */
.td-search-panel__input::-webkit-search-cancel-button {
  display: none;
}

.td-search-panel__submit {
  background: none;
  border: none;
  color: var(--td-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  flex-shrink: 0;
  transition: color .18s ease;
}

.td-search-panel__submit:hover,
.td-search-panel__submit:focus-visible {
  color: var(--td-primary-dark);
}

.td-burger {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.td-burger::before,
.td-burger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
}

.td-burger::before {
  top: -6px;
}

.td-burger::after {
  top: 6px;
}

/* Chips de secciones (scroll horizontal táctil, scroll-snap nativo) */
.td-nav-chips {
  border-top: 1px solid var(--td-border);
  border-bottom: 1px solid var(--td-border); /* Delimitador inferior */
  background: var(--td-bg); /* Asegurar fondo sólido detrás de los enlaces */
}

.td-chips {
  display: flex;
  gap: 0; /* Quitar separación de botones */
  list-style: none;
  margin: 0;
  padding: 0 var(--td-s4); /* Quitar padding vertical para que los enlaces toquen el borde */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: var(--td-maxw-site);
  margin-inline: auto;
}

.td-chips::-webkit-scrollbar {
  display: none;
}

.td-chips li {
  scroll-snap-align: start;
  flex-shrink: 0;
}

.td-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 40px; /* Tamaño táctil */
  padding: 0 var(--td-s4);
  background: none !important; /* Quitar fondo de chip */
  border-radius: 0 !important; /* Quitar bordes redondeados */
  text-decoration: none;
  color: var(--td-text-soft);
  font-weight: 600;
  font-size: .875rem;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.td-chips a:hover,
.td-chips .current-menu-item a {
  color: var(--td-primary);
  border-bottom-color: var(--td-primary); /* Efecto Radio 21 */
}

/* ---------- Barra informativa header (VIVO · clima · trending) ---------- */
.td-barra-info {
  background: var(--td-page);
  color: #000; /* todo el texto de la barra en negro (light); dark mode lo revierte */
  border-top: 1px solid var(--td-border);
  border-bottom: 1px solid var(--td-border);
  font-size: .76rem;
  overflow: visible;
}

/* Barra informativa superior en azul ultra oscuro estático (invariante) */
.td-barra-superior {
  background: #0C2445 !important; /* Azul más oscuro que el logo */
  color: #ffffff !important;
  border-top: none !important;
  border-bottom: none !important; /* Quitar borde que pueda verse claro */
  margin-bottom: -1px !important; /* Solapar 1px para evitar filtrado de fondo claro del body */
}

.td-barra-superior .td-barra-info__fecha,
.td-barra-superior .td-barra-info__frase {
  color: #ffffff !important;
}

.td-barra-superior .td-barra-info__sep-fecha,
.td-barra-superior .td-barra-info__sep {
  color: rgba(255, 255, 255, 0.35) !important;
}

.td-barra-superior .td-barra-info__clima {
  color: #ffffff !important;
}

.td-barra-superior .td-clima__ciudad,
.td-barra-superior .td-clima__rango,
.td-barra-superior .td-clima__guion {
  color: rgba(255, 255, 255, 0.7) !important;
}

.td-barra-superior .td-clima__temp {
  color: #ffffff !important;
}

/* Barra inferior del header (VIVO/clima/trending): gradiente azul de marca,
   igual en light y dark (mismo criterio que el footer). Texto e íconos pasan
   a blanco/semitransparente para mantener contraste sobre el azul. */
.td-barra-header {
  background: linear-gradient(180deg, var(--td-primary), var(--td-primary-bright));
  color: #fff;
  border-top: 2px solid var(--td-orange); /* idéntica a la línea del footer */
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.td-barra-header .td-barra-info__frase,
.td-barra-header .td-clima__ciudad,
.td-barra-header .td-clima__rango,
.td-barra-header .td-clima__guion {
  color: rgba(255, 255, 255, .8);
}
.td-barra-header .td-barra-info__sep,
.td-barra-header .td-barra-info__sep--der,
.td-barra-header .td-barra-movil__list li + li::before,
.td-barra-header .td-barra-info__trending-list li + li::before {
  color: rgba(255, 255, 255, .35);
}
.td-barra-header .td-vivo {
  background: #fff;
  color: var(--td-primary);
}
.td-barra-header .td-barra-info__frase:hover,
.td-barra-header .td-barra-info__noticia:hover strong,
.td-barra-header .td-barra-info__tag:hover,
.td-barra-header a.td-barra-info__clima:hover {
  color: var(--td-gold);
}
/* Menús de la barra (barra-movil · trending): efecto Radio 21 — subrayado
   inferior en hover/activo, además del cambio de color, igual que el
   .r21-nav-chips de Radio 21 (mismos colores de acá, mismo efecto de allá). */
.td-barra-header .td-barra-info__trending-list a:hover,
.td-barra-header .td-barra-movil__list a:hover {
  color: var(--td-gold);
  border-bottom-color: var(--td-gold);
}
.td-barra-header .td-barra-movil__list .current-menu-item > a {
  color: var(--td-gold);
  border-bottom-color: var(--td-gold);
}

.td-barra-info__inner {
  max-width: var(--td-maxw-site);
  margin-inline: auto;
  padding: 0 var(--td-s4);
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--td-s4);
}

/* ---- Izquierda: VIVO + noticias ---- */
.td-barra-info__izq {
  display: flex;
  align-items: center;
  gap: var(--td-s3);
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

/* Badge DESTACAMOS */
.td-vivo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #D6402A; /* Rojo */
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 6px;
  border-radius: 2px; /* Esquinas casi rectangulares */
  flex-shrink: 0;
}

.td-vivo__dot {
  display: none !important; /* Ocultar círculo parpadeante */
}

@keyframes td-vivo-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.75); }
}

.td-barra-info__noticias {
  display: flex;
  align-items: center;
  gap: var(--td-s2);
  overflow: hidden;
  white-space: nowrap;
}

/* Frases editoriales curadas — reemplaza el ticker automático */
.td-barra-info__frases {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  margin-left: var(--td-s4);
}

.td-barra-info__frases-scroll {
  display: flex;
  align-items: center;
  gap: var(--td-s2);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.td-barra-info__frases-scroll::-webkit-scrollbar { display: none; }

.td-barra-info__frase {
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  color: var(--td-text-soft);
  white-space: nowrap;
  transition: color .2s ease;
  flex-shrink: 0;
}
.td-barra-info__frase:hover { color: var(--td-primary); }

.td-barra-info__noticia {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.td-barra-info__noticia strong {
  font-weight: 600;
  color: inherit;
  transition: color .15s;
}
.td-barra-info__noticia:hover strong { color: var(--td-primary-fg); }

.td-barra-info__tiempo {
  color: inherit;
  font-size: .72rem;
  flex-shrink: 0;
}

.td-barra-info__sep {
  color: var(--td-border);
  flex-shrink: 0;
  font-size: .9em;
  user-select: none;
}

/* ---- Derecha: clima + trending ---- */
.td-barra-info__der {
  display: flex;
  align-items: center;
  gap: var(--td-s2);
  flex-shrink: 0;
  overflow: hidden;
}

.td-barra-info__clima {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  color: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
a.td-barra-info__clima {
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease;
}
a.td-barra-info__clima:hover {
  color: var(--td-primary-fg);
}

.td-barra-info__clima-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
}
.td-clima__ciudad { color: var(--td-text-soft); font-weight: 500; }
.td-clima__temp   { color: inherit; font-weight: 700; }
/* min/max en gris, un poco más de weight que el texto normal y separados de la actual */
.td-clima__rango  {
  color: var(--td-text-soft);
  font-weight: 600;
  font-size: .7rem;
  margin-left: .5em;
  display: inline-flex;
  align-items: center;
  gap: .15em;
}
/* flechas en teal de la paleta complementaria (#00afb5) */
.td-clima__flecha { color: var(--td-color-tropical-teal); font-size: .85em; line-height: 1; }
/* punto separador centrado a la altura de los números, mismo gris */
.td-clima__guion  {
  color: var(--td-text-soft);
  margin: 0 .35em;
  line-height: 1;
}

/* Container del clima para el tooltip */
.td-clima-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Tooltip de Pronóstico Extendido */
.td-clima-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--td-primary);
  color: #ffffff;
  padding: var(--td-s2) var(--td-s4);
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(78, 48, 160, 0.25);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--td-s2);
  pointer-events: auto;
}

/* Flechita apuntando hacia arriba (alineada bajo la temperatura/ciudad) */
.td-clima-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 24px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent var(--td-primary) transparent;
}

.td-clima-tooltip__text {
  color: #ffffff;
  text-decoration: none;
  transition: color .15s ease;
}

.td-clima-tooltip__text:hover {
  color: var(--td-color-soft-peach);
}

.td-clima-tooltip__close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: .75rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color .15s ease;
  display: flex;
  align-items: center;
}

.td-clima-tooltip__close:hover {
  color: #ffffff;
}

/* Ocultar tooltip en móviles por espacio */
@media (max-width: 599.98px) {
  .td-clima-tooltip {
    display: none !important;
  }
}

/* Transición suave de Alpine */
.td-transition-enter {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.td-transition-leave {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.td-barra-info__sep--der { color: var(--td-border); }

.td-barra-info__trending {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--td-s2);
  overflow: hidden;
}

.td-barra-info__tag {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.td-barra-info__tag:hover { color: var(--td-primary-fg); }

/* Menú WP en barra trending: lista inline con separadores CSS */
.td-barra-info__trending-list {
  display: flex;
  align-items: center;
  gap: var(--td-s2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.td-barra-info__trending-list li { display: flex; align-items: center; gap: var(--td-s2); }
.td-barra-info__trending-list li + li::before {
  content: '|';
  color: var(--td-text-soft);
  opacity: 0.7;
  pointer-events: none;
}
.td-barra-info__trending-list a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 700;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
.td-barra-info__trending-list a:hover { color: var(--td-primary-fg); border-bottom-color: var(--td-primary-fg); }

/* Menú barra móvil — solo visible en mobile, reemplaza el trending */
.td-barra-movil { display: none; }
.td-clima__ciudad--short { display: none; }

.td-barra-movil__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.td-barra-movil__list::-webkit-scrollbar { display: none; }
.td-barra-movil__list li { display: flex; align-items: center; }
.td-barra-movil__list li + li::before {
  content: '|';
  color: var(--td-text-soft);
  opacity: .5;
  padding: 0 .35em;
  pointer-events: none;
}
.td-barra-movil__list a {
  color: inherit;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
.td-barra-movil__list a:hover { color: var(--td-primary-fg); border-bottom-color: var(--td-primary-fg); }
.td-barra-movil__list .current-menu-item > a { color: var(--td-primary-fg); border-bottom-color: var(--td-primary-fg); }

/* Mobile: mostrar menú barra + clima simplificado, ocultar trending */
@media (max-width: 599.98px) {
  .td-barra-movil {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .td-barra-info__der { display: flex; }
  .td-barra-info__clima { margin-left: 0; }
  .td-clima__ciudad { display: none; }
  .td-clima__ciudad--short { display: inline; }
  .td-clima__rango { display: none; }
  .td-barra-info__fecha,
  .td-barra-info__sep-fecha { display: none; }
}

/* Tablet: ocultar trending */
@media (max-width: 899.98px) {
  .td-barra-info__trending { display: none; }
  .td-barra-info__sep--der { display: none; }
}

/* ---------- Drawer móvil ---------- */
.td-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, .5);
}

.td-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 95;
  width: min(82vw, 320px);
  background: var(--td-bg);
  transform: translateX(-100%);
  transition: transform .2s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--td-s8);
}

.td-drawer.abierto {
  transform: translateX(0);
}

.td-drawer__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--td-s2);
  padding: var(--td-s3) var(--td-s4);
  border-bottom: 1px solid var(--td-border);
}

/* Por defecto, ocultar el botón de modo oscuro del drawer (para desktop y tablet) */
.td-drawer__dark-toggle {
  display: none;
}

/* Responsividad para móviles */
@media (max-width: 599.98px) {
  /* Ocultar botón de la cabecera en móvil */
  .td-header__acciones .td-dark-toggle {
    display: none;
  }
  /* Mostrar botón en el drawer en móvil */
  .td-drawer__dark-toggle {
    display: inline-flex;
  }
}

.td-drawer__menu {
  list-style: none;
  margin: 0;
  padding: var(--td-s2) 0;
}

.td-drawer__menu a {
  display: flex;
  align-items: center;
  min-height: var(--td-touch-lg);
  padding: 0 var(--td-s4);
  text-decoration: none;
  color: var(--td-text);
  font-size: 1.05rem;
}

.td-drawer__menu a:hover {
  background: var(--td-bg-alt);
}

.td-drawer__menu .sub-menu {
  list-style: none;
  padding-left: var(--td-s6);
}

/* ---------- Layout principal ---------- */
.td-main {
  max-width: var(--td-maxw-site);
  margin-inline: auto;
  padding: var(--td-s4);
}

.td-seccion {
  margin-top: var(--td-s12);
}

.td-seccion__titulo {
  font-size: 1.3rem;
  font-weight: 700;
  border-left: 4px solid var(--td-primary);
  padding-left: var(--td-s3);
  margin: 0 0 var(--td-s4);
}

.td-seccion__titulo--gold {
  background: var(--td-color-soft-peach);
  border-left-color: #c9a84c;
  padding: var(--td-s2) var(--td-s3);
  border-radius: var(--td-radius);
  color: #4a3000;
}

/* Últimas noticias: sin categoría por nota (incluye las cargadas por "Ver más"). */
#home-ultimas .td-card__volanta {
  display: none;
}

/* ---------- Load more ---------- */
.td-load-mas-wrap {
  text-align: center;
  margin-top: var(--td-s6);
}

.td-load-mas {
  display: inline-flex;
  align-items: center;
  gap: var(--td-s2);
  padding: var(--td-s3) var(--td-s8);
  background: var(--td-primary);
  color: #fff;
  border: none;
  border-radius: var(--td-radius);
  font-family: var(--td-font);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}

.td-load-mas:hover {
  background: var(--td-primary-dark);
}

.td-load-mas:disabled {
  opacity: .6;
  cursor: wait;
}

/* Grillas (mobile-first: 1 columna) */
.td-grid {
  display: grid;
  gap: var(--td-s4);
  grid-template-columns: 1fr;
}

/* Hero Dividido: nota principal + grilla 2×2 de secundarias uniformes.
   Patrón editorial (estructura), tokens y tipografía propios del theme.
   Mobile: hero arriba + 2×2 debajo (sin wrapper, grid-template-areas). */
/* Misma técnica que el mosaico (filetes de 1px): el contenedor tiene fondo
   gris y gap:1px; cada card tapa su celda con fondo blanco, dejando ver el
   gris como línea entre notas en las dos direcciones — sin border-top/bottom
   condicional por posición. */
/* Sin fondo propio en el contenedor ni en las cards: el papel de la página
   se ve en todo el gap, con líneas grises finas (border, no relleno) entre
   notas — ni el bloque entero ni cada nota se convierten en una superficie
   blanca continua. */
.td-apertura {
  display: grid;
  gap: var(--td-s4);
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "hero hero"
    "s1   s2"
    "s3   s4";
}

.td-apertura > :nth-child(1) { grid-area: hero; }
.td-apertura > :nth-child(2) { grid-area: s1; }
.td-apertura > :nth-child(3) { grid-area: s2; }
.td-apertura > :nth-child(4) { grid-area: s3; }
.td-apertura > :nth-child(5) { grid-area: s4; }

/* Posicionamiento relativo para albergar las líneas absolutas */
.td-apertura > :nth-child(2),
.td-apertura > :nth-child(3),
.td-apertura > :nth-child(4),
.td-apertura > :nth-child(5) {
  position: relative;
}

/* Espaciados para evitar colisiones con las líneas divisores */
.td-apertura > :nth-child(2),
.td-apertura > :nth-child(4) {
  padding-right: var(--td-s4);
}
.td-apertura > :nth-child(4),
.td-apertura > :nth-child(5) {
  padding-top: var(--td-s4);
}

/* Línea vertical continua que separa las columnas de secundarias, cruzando el gap */
.td-apertura > :nth-child(2)::after,
.td-apertura > :nth-child(4)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: calc(-1 * var(--td-s4)); /* cruza el row-gap */
  right: calc(var(--td-s4) / -2);   /* centrado en el column-gap */
  width: 1px;
  background: var(--td-border);
  pointer-events: none;
}
/* La celda inferior no necesita continuar su línea vertical hacia abajo */
.td-apertura > :nth-child(4)::after {
  bottom: 0;
}

/* Línea horizontal continua que separa la fila 1 y 2 de secundarias, cruzando el gap vertical */
.td-apertura > :nth-child(4)::before {
  content: "";
  position: absolute;
  top: calc(var(--td-s4) / -2);     /* centrado en el row-gap */
  left: 0;
  width: calc(200% + var(--td-s4)); /* abarca s3, el column-gap y s4 */
  height: 1px;
  background: var(--td-border);
  pointer-events: none;
}

/* En mobile/tablet: separar el Hero (arriba) de las 4 secundarias (abajo) */
@media (max-width: 899.98px) {
  .td-apertura > :nth-child(2)::before {
    content: "";
    position: absolute;
    top: calc(var(--td-s4) / -2);
    left: 0;
    width: calc(200% + var(--td-s4));
    height: 1px;
    background: var(--td-border);
    pointer-events: none;
  }
}

/* Categoría dentro de la foto (no como texto aparte) en las 5 notas de la
   apertura; las 4 secundarias además van 16:9 para igualar la altura del hero. */
.td-apertura .td-card__cat-overlay {
  display: inline-block;
}
.td-apertura .td-card__volanta {
  display: none;
}
.td-apertura .td-card--standard .td-card__media {
  aspect-ratio: 16 / 9;
}

@media (min-width: 600px) {
  .td-grid--4,
  .td-grid--archivo {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .td-logo img {
    max-height: 70px;
  }

  .td-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .td-grid--archivo {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Desktop: Hero Dividido lado a lado — nota principal 50% + grilla 2×2 de
     secundarias (25% cada columna) a la derecha, hero ocupando las dos filas. */
  .td-apertura {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
      "hero s1 s2"
      "hero s3 s4";
    align-items: stretch;
  }

  /* Línea vertical hero|s1 (columna izquierda vs grilla derecha) */
  .td-apertura > :nth-child(1) {
    border-right: 1px solid var(--td-border);
    padding-right: var(--td-s6);
  }
  
  /* Mantener paddings correctos de la grilla 2x2 a la derecha sin bordes fisicos */
  .td-apertura > :nth-child(2),
  .td-apertura > :nth-child(4) {
    border-right: none;
    padding-right: var(--td-s4);
  }
  .td-apertura > :nth-child(4),
  .td-apertura > :nth-child(5) {
    border-top: none;
    padding-top: var(--td-s4);
  }
}

/* Apertura — ajuste tipográfico puntual.
   Hero: título -2pt (fondo = var(--td-primary), estándar del sitio).
   Las 4 secundarias son uniformes: mismo tamaño de título. */
.td-apertura .td-card__titulo--hero {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
}
.td-apertura > :nth-child(2) .td-card__titulo,
.td-apertura > :nth-child(3) .td-card__titulo,
.td-apertura > :nth-child(4) .td-card__titulo,
.td-apertura > :nth-child(5) .td-card__titulo {
  font-size: 1.05rem;
}

/* ---------- Barra de Tendencias (Home) ---------- */
.td-trending-bar {
  display: flex;
  align-items: center;
  gap: var(--td-s4);
  background: var(--td-bg-alt);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius);
  padding: var(--td-s2) var(--td-s4);
  margin-bottom: var(--td-s6);
}

.td-trending-bar__title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--td-primary-fg);
  letter-spacing: .06em;
  white-space: nowrap;
  flex-shrink: 0;
  border-right: 2px solid var(--td-border);
  padding-right: var(--td-s4);
}

.td-trending-bar__scroll {
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
}

.td-trending-bar__scroll::-webkit-scrollbar {
  display: none; /* Safari/Chrome */
}

.td-trending-bar__tags {
  display: flex;
  align-items: center;
  gap: var(--td-s3);
}

.td-trending-bar__tag {
  font-size: .85rem;
  font-weight: 600;
  color: var(--td-text-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}

.td-trending-bar__tag:hover {
  color: var(--td-primary);
}

/* Móvil: se elimina el padding lateral y bordes laterales para romper el layout */
@media (max-width: 599px) {
  .td-trending-bar {
    gap: var(--td-s2);
    padding: var(--td-s2) var(--td-s3);
    margin-inline: calc(-1 * var(--td-s4));
    border-radius: 0;
    border-inline: none;
  }
  .td-trending-bar__title {
    font-size: .65rem;
    padding-right: var(--td-s2);
  }
}

/* ---------- Bloque con publicidad lateral ----------
   6 notas (3 col × 2 filas) + slot de publicidad en la 4ª columna.
   El slot acompaña el scroll (sticky) hasta el final de la sección. */
.td-bloque-publi {
  display: grid;
  gap: var(--td-s4);
  grid-template-columns: 1fr;
  /* móvil: notas apiladas, publi al final */
  margin-top: var(--td-s8);
}

.td-bloque-publi .td-publi {
  order: 99;
}

/* móvil/tablet: la publi cierra el bloque */

@media (min-width: 600px) {
  .td-bloque-publi {
    grid-template-columns: repeat(2, 1fr);
  }

  .td-bloque-publi .td-publi {
    grid-column: 1 / -1;
  }

  /* banner full-width bajo las notas */
}

@media (min-width: 900px) {
  .td-bloque-publi {
    grid-template-columns: repeat(3, 1fr) var(--td-ancho-publi, 300px);
    grid-template-areas:
      "n1 n2 n3 ad"
      "n4 n5 n6 ad";
    align-items: stretch;
    /* alturas iguales por fila → las líneas calzan */
  }

  .td-bloque-publi> :nth-child(1) {
    grid-area: n1;
  }

  .td-bloque-publi> :nth-child(2) {
    grid-area: n2;
  }

  .td-bloque-publi> :nth-child(3) {
    grid-area: n3;
  }

  .td-bloque-publi> :nth-child(4) {
    grid-area: n4;
  }

  .td-bloque-publi> :nth-child(5) {
    grid-area: n5;
  }

  .td-bloque-publi> :nth-child(6) {
    grid-area: n6;
  }

  .td-bloque-publi .td-publi {
    grid-area: ad;
    align-self: stretch;
    /* ocupa las 2 filas: da recorrido al sticky */
    order: 0;
  }
}

.td-publi__sticky {
  position: sticky;
  /* queda por debajo del header sticky (~88px desktop) */
  top: calc(var(--td-header-h, 88px) + var(--td-s4));
}

.td-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--td-s2);
  background: var(--td-bg-alt);
  border: 1px dashed var(--td-border);
  border-radius: var(--td-radius);
  color: var(--td-text-soft);
  margin-block: 20px;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.td-ad img,
.td-ad iframe,
.td-ad ins {
  max-width: 100% !important;
  height: auto !important;
}

.td-ad__label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Tamaño reservado del creativo → CLS 0. Ajustar al formato real del anunciante. */
.td-ad--lateral {
  min-height: 250px;
}

/* medium rectangle 300×250 */
@media (min-width: 900px) {
  .td-ad--lateral {
    min-height: 600px;
  }

  /* half-page 300×600 en desktop */
}

/* Líneas grises ENTRE notas (nunca al principio ni al final). Mismo criterio que la Apertura. */
@media (min-width: 600px) and (max-width: 899.98px) {

  /* tablet: 2 columnas de notas (3 filas) */
  .td-bloque-publi>.td-card:nth-child(2n) {
    /* columna derecha */
    border-left: 1px solid var(--td-border);
    padding-left: var(--td-s4);
  }

  .td-bloque-publi>.td-card:nth-child(n+3) {
    /* filas 2 y 3 (no la 1ª) */
    border-top: 1px solid var(--td-border);
    padding-top: var(--td-s4);
  }
}

@media (min-width: 900px) {

  /* Desktop: 3 columnas de notas (n1 n2 n3 / n4 n5 n6) + publi.
     Líneas dibujadas con pseudo-elementos en el centro de cada gap:
     - horizontal CONTINUA entre fila 1 y fila 2 (las 3 columnas de notas);
     - verticales que CORTAN ~5px antes de tocar la horizontal;
     - la vertical col3↔publi es continua (no la cruza ninguna horizontal). */
  .td-bloque-publi>.td-card::before,
  .td-bloque-publi>.td-card::after {
    content: "";
    position: absolute;
    background: var(--td-border);
  }

  /* Verticales (1px) — izquierda de columnas 2 y 3 */
  .td-bloque-publi>.td-card:nth-child(2)::before,
  .td-bloque-publi>.td-card:nth-child(3)::before,
  .td-bloque-publi>.td-card:nth-child(5)::before,
  .td-bloque-publi>.td-card:nth-child(6)::before {
    width: 1px;
    left: calc(var(--td-s4) / -2);
  }

  /* Vertical (1px) — derecha de columna 3 (separa de la publi) */
  .td-bloque-publi>.td-card:nth-child(3)::after,
  .td-bloque-publi>.td-card:nth-child(6)::after {
    width: 1px;
    right: calc(var(--td-s4) / -2);
  }

  /* Fila 1: del tope hasta 5px antes de la horizontal */
  .td-bloque-publi>.td-card:nth-child(2)::before,
  .td-bloque-publi>.td-card:nth-child(3)::before {
    top: 0;
    bottom: calc(var(--td-s4) / -2 + 5px);
  }

  /* Fila 2: desde 5px después de la horizontal hasta el final */
  .td-bloque-publi>.td-card:nth-child(5)::before,
  .td-bloque-publi>.td-card:nth-child(6)::before {
    top: calc(var(--td-s4) / -2 + 5px);
    bottom: 0;
  }

  /* col3↔publi: continua (los dos tramos se juntan en el centro del row-gap) */
  .td-bloque-publi>.td-card:nth-child(3)::after {
    top: 0;
    bottom: calc(var(--td-s4) / -2);
  }

  .td-bloque-publi>.td-card:nth-child(6)::after {
    top: calc(var(--td-s4) / -2);
    bottom: 0;
  }

  /* Horizontal continua: un solo tramo desde n4 que cruza las 3 columnas de notas */
  .td-bloque-publi>.td-card:nth-child(4)::before {
    height: 1px;
    left: 0;
    top: calc(var(--td-s4) / -2);
    width: calc(300% + 2 * var(--td-s4));
  }
}

/* ---------- Colores por sección (data-cat-sec) ---------- */
/* Mapeo slug de categoría → token de marca --td-sec-*. Lo usan TODAS las cards
   (apertura, mosaico híbrido, estándar, compacta-reversa) vía
   var(--td-sec, var(--td-primary)) en badges y .td-card__cat-overlay.
   (Sin mapeo → fallback al azul de marca.) */
[data-cat-sec="tucuman"],
[data-cat-sec="locales"],
[data-cat-sec="politica"]     { --td-sec: var(--td-sec-politica); }
[data-cat-sec="economia"],
[data-cat-sec="negocios"]     { --td-sec: var(--td-sec-economia); }
[data-cat-sec="policiales"],
[data-cat-sec="seguridad"]    { --td-sec: var(--td-sec-ultima); }
[data-cat-sec="deportes"]     { --td-sec: var(--td-sec-deportes); }
[data-cat-sec="espectaculos"],
[data-cat-sec="cultura"],
[data-cat-sec="agenda"]       { --td-sec: var(--td-sec-arte); }

/* ---------- Mosaico Híbrido (Destacados Bloque 2) ---------- */
.td-mosaico-hibrido {
  display: grid;
  gap: var(--td-s6);
  grid-template-columns: 1fr;
  border-top: 1px solid var(--td-border);
  border-bottom: 1px solid var(--td-border);
  padding-top: var(--td-s6);
  padding-bottom: var(--td-s6);
  margin-block: var(--td-s6);
}

.td-mosaico-hibrido__medio,
.td-mosaico-hibrido__derecha {
  display: flex;
  flex-direction: column;
  gap: var(--td-s6);
}

/* La nota principal usa card-hero: mostrar su categoría dentro de la foto,
   igual que en la apertura, para no quedar como la única card del bloque
   sin etiqueta de sección. */
.td-mosaico-hibrido .td-card__cat-overlay {
  display: inline-block;
}

@media (min-width: 600px) and (max-width: 899px) {
  .td-mosaico-hibrido {
    grid-template-columns: repeat(2, 1fr);
  }
  .td-mosaico-hibrido__principal {
    grid-column: span 2;
    border-bottom: 1px solid var(--td-border);
    padding-bottom: var(--td-s6);
  }
}

@media (min-width: 900px) {
  .td-mosaico-hibrido {
    grid-template-columns: 2fr 1fr 1fr;
    align-items: stretch; /* Estirar columnas para igualar altura */
    padding-top: 0;
    padding-bottom: 0;
  }

  .td-mosaico-hibrido__principal,
  .td-mosaico-hibrido__medio,
  .td-mosaico-hibrido__derecha {
    padding-top: var(--td-s6);
    padding-bottom: var(--td-s6);
  }

  .td-mosaico-hibrido__principal {
    border-right: 1px solid var(--td-border);
    padding-right: var(--td-s6);
  }

  .td-mosaico-hibrido__medio {
    border-right: 1px solid var(--td-border);
    padding-right: var(--td-s6);
  }
}

/* Card compacta reversa: foto a la derecha */
.td-card--compact-reverse {
  position: relative;
}

.td-card--compact-reverse .td-card__link {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: var(--td-s3);
  align-items: start;
  text-decoration: none;
  color: inherit;
}

.td-card--compact-reverse .td-card__media {
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  background: var(--td-bg-alt);
}

.td-card--compact-reverse .td-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.td-card--compact-reverse .td-card__link:hover .td-card__media img {
  transform: scale(1.04);
}

.td-card--compact-reverse .td-card__volanta {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  color: var(--td-sec, var(--td-primary));
  text-transform: uppercase;
  margin-bottom: 2px;
  letter-spacing: .02em;
}

.td-card--compact-reverse .td-card__titulo {
  font-size: .95rem;
  line-height: 1.35;
  font-weight: 700;
  margin: 0;
  font-family: var(--td-font-display);
}

.td-card--compact-reverse .td-card__link:hover .td-card__titulo {
  color: var(--td-primary);
}

/* ---------- Cards ---------- */
.td-card {
  position: relative;
}

.td-card__link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.td-card__media {
  margin: 0 0 var(--td-s2);
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--td-bg-alt);
  /* espacio reservado: CLS 0 */
}

.td-card--hero .td-card__media {
  aspect-ratio: 16 / 9;
}

.td-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.td-card__link:hover .td-card__media img,
.td-card:hover .td-card__media img {
  transform: scale(1.04);
}

/* Badge de formato (video / galería / audio) sobre la miniatura. */
.td-card__media {
  position: relative;
}
.td-format-badge {
  position: absolute;
  bottom: var(--td-s2);
  left: var(--td-s2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.td-format-badge--video {
  width: auto;
  height: auto;
  border-radius: 4px;
  padding: 4px 8px 4px 6px;
  background: var(--td-danger);
  gap: 5px;
  font-size: 0;
}
.td-format-badge--video .td-format-badge__text {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  font-family: var(--td-font-display);
}
.td-format-badge--gallery { background: rgba(0,  0,  0,  .62); }
.td-format-badge--audio   { background: rgba(0, 80, 60, .75); }

.td-card__titulo {
  font-family: var(--td-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.td-card__titulo--hero {
  font-size: clamp(1.3rem, 4vw, 1.7rem);
}

.td-card__volanta {
  display: block;
  font-family: var(--td-font);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1; /* kicker: la caja abraza el texto → el gap del flex manda */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--td-primary-fg);
  margin-bottom: var(--td-s1);
  transition: color .2s ease;
}

/* Etiqueta de categoría superpuesta a la foto: color dinámico por sección
   (--td-sec, seteado vía [data-cat-sec] más abajo) con fallback al azul de
   marca. Oculta por default; se activa solo dentro de .td-apertura. */
.td-card__cat-overlay {
  display: none;
  position: absolute;
  left: var(--td-s2);
  top: var(--td-s2);
  z-index: 2;
  background: var(--td-sec, var(--td-primary));
  color: #fff;
  font-family: var(--td-font);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: var(--td-s1) var(--td-s2);
  border-radius: 999px;
}

.td-card__bajada {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--td-text-soft);
  margin: var(--td-s2) 0 0;
}

.td-card__link:hover .td-card__titulo {
  color: var(--td-primary);
}

.td-card__link:hover .td-card__volanta {
  color: var(--td-primary-dark);
}

.td-card__meta {
  display: flex;
  align-items: center;
  gap: var(--td-s3);
  margin-top: var(--td-s2);
  font-size: .82rem;
  color: var(--td-text-soft);
}

.td-card__meta time {
  font-size: .75rem;
  opacity: 0.85;
}

/* En la home se ocultan fecha y sección de las cards (look más limpio). */
.home .td-card__meta {
  display: none;
}

.td-card--compact .td-card__link {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--td-s3);
  align-items: start;
}

.td-card--compact .td-card__media {
  aspect-ratio: 3 / 2;
  margin: 0;
}

.td-card--compact .td-card__titulo {
  font-size: .95rem;
}

/* Hero de apertura: bloque violeta que enmarca la foto, con título blanco debajo. */
/* Hero de apertura: sin panel de color propio — el contenido se estira
   para ocupar el espacio que antes ocupaba ese fondo. Texto en tokens
   estándar (no hace falta blanco: ya no hay superficie oscura debajo). */
.td-card--hero {
  color: var(--td-text);
}

/* El link es la cuadrícula vertical del hero: un único gap gobierna todo
   el espaciado interno (imagen → título → bajada). */
.td-card--hero .td-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--td-s2);
}

.td-card--hero .td-card__titulo--hero {
  margin: 0;
}

.td-card--hero .td-card__link:hover .td-card__titulo--hero {
  color: var(--td-primary);
}

/* ---------- Card destacada: imagen full + título superpuesto + degradé lila ---------- */
.td-card--featured {
  border-radius: var(--td-radius);
  overflow: hidden;
}

.td-card--featured .td-card__link {
  display: block;
}

.td-card--featured .td-card__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
}

.td-card--featured .td-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--td-radius);
  display: block;
  transition: transform .3s ease;
}

.td-card--featured:hover .td-card__media img {
  transform: scale(1.03);
}

/* Degradé azul logo igual al de .td-nota__destacada */
.td-card--featured .td-card__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(27,75,145,.85) 0%, rgba(12,36,69,.35) 60%, transparent 100%);
  border-radius: 0 0 var(--td-radius) var(--td-radius);
  pointer-events: none;
}

.td-card--featured .td-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: var(--td-s4);
  display: flex;
  flex-direction: column;
  gap: var(--td-s2);
}

.td-card__seccion-badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--td-color-soft-peach);
  color: #4a3000;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px var(--td-s3);
  border-radius: 3px;
}

.td-card--featured .td-card__titulo,
.td-card--featured .td-card__link:hover .td-card__titulo {
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0;
}

/* Wrapper del bloque 1+3 sin título de sección */
.td-bloque-1mas3-wrap {
  margin-top: var(--td-s12);
}

/* El ad lateral dentro del side no necesita margin-block: lo maneja el gap del flex.
   min-height: 0 anula el mínimo de .td-ad--lateral (250/600px) para que flex: 1
   ajuste el alto exacto al espacio que queda hasta la base de la foto. */
.td-bloque-1mas3__side .td-ad {
  margin-block: 0;
  margin-top: var(--td-s4);
  flex: 1;
  min-height: 0;
}

.td-badge {
  display: inline-block;
  background: var(--td-primary-soft);
  color: var(--td-primary-fg);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: var(--td-s1) var(--td-s2);
  border-radius: 999px;
  text-decoration: none;
}

/* ---------- Single (nota) ---------- */

/* Barra de progreso de lectura: gradient con la paleta de 5 colores de marca
   (Indigo Velvet → Inferno → Harvest Orange → Soft Peach → Tropical Teal),
   revelado progresivamente al hacer scroll sobre el artículo. JS en main.js.
   Z-101: sobre la línea inferno (z-100) que actúa de riel visual. */
.td-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0;
  background: linear-gradient(
    to right,
    var(--td-color-indigo-velvet),
    var(--td-color-inferno),
    var(--td-color-harvest-orange),
    var(--td-color-soft-peach),
    var(--td-color-tropical-teal)
  );
  background-size: 100vw 4px;
  z-index: 101;
  transition: width .1s linear;
  will-change: width;
}
.admin-bar .td-progress { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .td-progress { top: 46px; }
}

/* Breadcrumb Inicio › Categoría › Nota */
.td-breadcrumb {
  margin-bottom: var(--td-s3);
  font-size: .82rem;
}
.td-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--td-s2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.td-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--td-s2);
  color: var(--td-text-soft);
  min-width: 0;
}
.td-breadcrumb__item + .td-breadcrumb__item::before {
  content: '›';
  color: var(--td-color-soft-peach);
  flex-shrink: 0;
}
.td-breadcrumb__item a {
  color: var(--td-text-soft);
  text-decoration: none;
}
.td-breadcrumb__item a:hover {
  color: var(--td-primary-fg);
  text-decoration: underline;
}
.td-breadcrumb__item--current span {
  color: var(--td-text);
  font-weight: 600;
  /* el título puede ser largo: 1 línea con elipsis en pantallas chicas */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}

/* Layout 2 columnas: artículo + aside. Dentro de los 1280px del sitio.
   Columnas: 1fr (~924px) + 300px aside = 1248px usable (1280 - padding s4×2). */
.td-nota__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--td-s6);
  /* sin align-items:start — las celdas se estiran por defecto (necesario para sticky) */
}
@media (min-width: 900px) {
  .td-nota__layout { grid-template-columns: 1fr 300px; }

  /* Main se ajusta a su contenido; aside se estira al alto del artículo → sticky tiene recorrido */
  .td-nota__main { align-self: start; }

  /* Layout de Archivos (Categorías, Tags): 4 columnas iguales */
  .td-nota__layout--archivo {
    grid-template-columns: repeat(4, 1fr);
  }
  .td-nota__main--span2 {
    grid-column: span 2;
  }
}

.td-nota {
  min-width: 0; /* evita desborde en grid */
}

/* aside se estira al alto del artículo → el sticky tiene espacio para moverse */
/* margin-top compensa el margin: s4 0 de .td-nota__destacada, alineando el aside con la foto */
.td-nota__aside { min-width: 0; padding-top: var(--td-s4); }
.td-aside__sticky {
  position: sticky;
  top: calc(var(--td-header-h, 92px) + var(--td-s4));
  display: flex; flex-direction: column; gap: var(--td-s6);
}

.td-nota__full-header {
  margin-bottom: var(--td-s6);
}

.td-nota__header .td-badge {
  display: block;
  background: transparent;
  color: var(--td-text-soft);
  font-size: .8rem;
  letter-spacing: .06em;
  padding: 0;
  margin-bottom: var(--td-s1);
}

.td-nota__header .td-badge:hover {
  color: var(--td-primary);
  text-decoration: underline;
}

.td-nota__titulo {
  font-family: var(--td-font-display);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  margin: var(--td-s3) 0;
}

.td-nota__bajada {
  font-size: 1.15rem;
  color: var(--td-text-soft);
  line-height: 1.5;
  margin: 0 0 var(--td-s4);
}

.td-nota__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--td-s3);
  font-size: .9rem;
  font-weight: 500;
  color: var(--td-text-soft);
  padding-bottom: var(--td-s4);
  border-bottom: 1px solid var(--td-border);
}

.td-autor {
  display: inline-flex;
  align-items: center;
  gap: var(--td-s2);
  font-weight: 600;
  color: var(--td-text);
}
.td-autor__avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.td-lectura {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  color: var(--td-text-soft);
}

.td-nota__tags-container {
  margin: var(--td-s6) 0;
}
.td-nota__tags-label {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--td-text);
  margin: 0 0 var(--td-s2) 0;
  display: flex;
  align-items: center;
  gap: var(--td-s1);
}
.td-nota__tags-plus {
  font-weight: 300;
  color: var(--td-text-soft);
}
.td-nota__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--td-s2);
}
.td-nota__tags a {
  display: inline-flex;
  align-items: center;
  background-color: var(--td-bg-alt);
  color: var(--td-text-soft);
  font-size: 0.9rem;
  padding: var(--td-s1) var(--td-s3);
  border-radius: 20px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.td-nota__tags a:hover {
  background-color: var(--td-border);
  color: var(--td-primary);
}

.td-lectura::before {
  content: '·';
  color: var(--td-border);
}

.td-nota__destacada {
  margin: var(--td-s4) 0;
  position: relative;
}
/* Degradé azul logo siempre presente: garantiza legibilidad del caption sobre fotos claras */
.td-nota__destacada::after {
  content: '';
  position: absolute; inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(27,75,145,.82) 0%, rgba(12,36,69,.3) 55%, transparent 100%);
  border-radius: 0;
  pointer-events: none;
}

.td-nota__destacada img {
  border-radius: 0;
  width: 100%; height: auto; display: block;
}

.td-nota__destacada figcaption {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 1; /* sobre el ::after */
  padding: var(--td-s8) var(--td-s4) var(--td-s3);
  color: #fff;
  font-size: .82rem; line-height: 1.4;
}

.td-nota__ad-foto { margin: var(--td-s4) 0 var(--td-s6); }


.td-nota__contenido {
  font-size: var(--td-fs-note);
  line-height: var(--td-lh-note);
}

/* Párrafos */
.td-nota__contenido p { margin-bottom: var(--td-s4); }
.td-nota__contenido p:last-child { margin-bottom: 0; }

.td-nota__contenido a { text-decoration: underline; }

/* Headings dentro del cuerpo — serif editorial, color no es el único indicador */
.td-nota__contenido h2,
.td-nota__contenido h3 {
  font-family: var(--td-font-display);
}
.td-nota__contenido h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: var(--td-s8);
  margin-bottom: var(--td-s3);
}
.td-nota__contenido h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: var(--td-s6);
  margin-bottom: var(--td-s2);
}

/* Imágenes */
.td-nota__contenido img {
  border-radius: var(--td-radius);
  max-width: 100% !important;
  height: auto !important;
}

/* Figuras internas */
.td-nota__contenido figure {
  margin: var(--td-s6) 0;
  max-width: 100% !important;
}
.td-nota__contenido figcaption {
  font-size: .875rem;
  color: var(--td-text-soft);
  margin-top: var(--td-s2);
  font-style: italic;
}

/* Listas */
.td-nota__contenido ul,
.td-nota__contenido ol {
  padding-left: var(--td-s6);
  margin-bottom: var(--td-s4);
}
.td-nota__contenido ul { list-style: disc; }
.td-nota__contenido ol { list-style: decimal; }
.td-nota__contenido li { margin-bottom: var(--td-s2); }
.td-nota__contenido li:last-child { margin-bottom: 0; }

/* Blockquote */
.td-nota__contenido blockquote {
  border-left: 4px solid var(--td-primary);
  margin: var(--td-s6) 0;
  padding: var(--td-s4) var(--td-s6);
  background: var(--td-bg-alt);
  border-radius: 0 var(--td-radius) var(--td-radius) 0;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--td-text-soft);
}
.td-nota__contenido blockquote p { margin-bottom: 0; }
.td-nota__contenido blockquote cite {
  display: block;
  margin-top: var(--td-s2);
  font-size: .875rem;
  font-style: normal;
  color: var(--td-text-soft);
}

/* Embeds responsivos (YouTube, iframes) */
.td-nota__contenido iframe { max-width: 100% !important; }
.td-nota__contenido .td-embed,
.td-nota__contenido .wp-has-aspect-ratio .wp-block-embed__wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: var(--td-s6) 0;
}
.td-nota__contenido .td-embed iframe,
.td-nota__contenido .wp-has-aspect-ratio .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Tablas — el PHP filter envuelve en .td-tabla-wrap */
.td-tabla-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--td-s6) 0;
  border-radius: var(--td-radius);
}
.td-nota__contenido table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.td-nota__contenido th,
.td-nota__contenido td {
  padding: var(--td-s2) var(--td-s4);
  border: 1px solid var(--td-border);
  text-align: left;
  white-space: nowrap;
}
.td-nota__contenido th {
  background: var(--td-bg-alt);
  font-weight: 700;
}
.td-nota__contenido tr:nth-child(even) td { background: var(--td-bg-alt); }

/* Código */
.td-nota__contenido code {
  font-family: 'Courier New', Courier, monospace;
  font-size: .88em;
  background: var(--td-bg-alt);
  padding: .1em .35em;
  border-radius: 3px;
  border: 1px solid var(--td-border);
}
.td-nota__contenido pre {
  background: var(--td-bg-alt);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius);
  padding: var(--td-s4) var(--td-s6);
  overflow-x: auto;
  font-size: .88rem;
  line-height: 1.5;
  margin: var(--td-s6) 0;
}
.td-nota__contenido pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* ---------- Compartir ---------- */
.td-compartir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--td-s2);
  margin: var(--td-s4) 0 var(--td-s6);
}

/* Botón base: círculo 36px con ícono centrado, sin texto */
.td-compartir__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--td-border);
  background-color: var(--td-bg-alt);
  color: var(--td-primary);
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
  flex-shrink: 0;
}
.td-compartir__btn:hover  { transform: scale(1.08); background-color: var(--td-primary); color: #fff; border-color: var(--td-primary); }
.td-compartir__btn:focus-visible { outline: 2px solid var(--td-primary); outline-offset: 3px; }

[data-theme="dark"] .td-barra-info:not(.td-barra-header) { background: var(--td-page); color: var(--td-text); }
[data-theme="dark"] .td-compartir__btn { background-color: var(--td-bg-alt); border-color: var(--td-border); color: var(--td-text); }
[data-theme="dark"] .td-compartir__btn:hover { background-color: var(--td-primary); color: #fff; }

.td-compartir__copiado-msg {
  font-size: .85rem;
  font-weight: 600;
  color: var(--td-text-soft);
  margin-left: var(--td-s1);
  animation: td-fade-in .2s ease forwards;
}

@keyframes td-fade-in {
  from { opacity: 0; transform: translateX(-5px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Google: pill con texto, empujado a la derecha en desktop */
.td-compartir__btn--google {
  width: auto; height: auto;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--td-border);
  background: var(--td-bg);
  color: var(--td-text);
  padding: 0 var(--td-s4);
  gap: .35em;
  font-size: .85rem; font-weight: 500;
  margin-top: var(--td-s2);
}
@media (min-width: 768px) {
  .td-compartir__btn--google {
    margin-left: auto;
    margin-top: 0;
  }
}
.td-compartir__btn--google:hover { border-color: #4285F4; opacity: 1; transform: none; }
[data-theme="dark"] .td-compartir__btn--google { background: var(--td-bg-alt); }

/* Label "Compartir" */
.td-compartir__label {
  font-size: .85rem; font-weight: 600;
  color: var(--td-text-soft);
  margin-right: var(--td-s2);
  white-space: nowrap;
}

/* Tags de la nota — flujo inline: label + links + comas en la misma línea sin desalineación */
.td-nota__tags {
  margin-top: var(--td-s6);
  font-size: .85rem; color: var(--td-text-soft);
  line-height: 1.8;
}
.td-nota__tags-label {
  display: inline-flex; align-items: center; gap: .3em;
  vertical-align: middle;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: var(--td-text-soft); text-transform: uppercase;
  white-space: nowrap; margin-right: .25em;
}
.td-nota__tags a {
  color: var(--td-text-soft); text-decoration: none;
}
.td-nota__tags a:hover { color: var(--td-primary); text-decoration: underline; }

/* Prev/next dentro de la misma categoría */
.td-prevnext {
  display: flex;
  justify-content: space-between;
  margin-top: var(--td-s6);
  padding-top: var(--td-s4);
  border-top: 1px solid var(--td-border);
}
.td-prevnext__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--td-touch-lg);
  height: var(--td-touch-lg);
  border-radius: var(--td-radius);
  border: 1px solid var(--td-border);
  background: var(--td-bg-alt);
  color: var(--td-primary-fg);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.td-prevnext__item:hover { background: var(--td-primary-soft); border-color: transparent; }
.td-prevnext__item--next { margin-left: auto; }

/* Ad inline: leaderboard horizontal — tamaño reservado CLS 0 */
.td-ad--inline {
  min-height: 50px;  /* 320×50 móvil */
  width: 100%;
}
@media (min-width: 728px) {
  .td-ad--inline { min-height: 90px; } /* 728×90 desktop */
}

/* "Lee también" en el aside */
.td-lee-tambien { margin-top: var(--td-s6); }
.td-lee-tambien .td-seccion__titulo { font-size: 1rem; margin-bottom: var(--td-s4); }

.td-lee-tambien__lista {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
}

.td-card-aside + .td-card-aside {
  border-top: 1px solid var(--td-border);
  padding-top: var(--td-s4);
  margin-top: var(--td-s4);
}

.td-card-aside__link {
  display: flex;
  gap: var(--td-s3);
  text-decoration: none;
  color: var(--td-text);
  align-items: flex-start;
}
.td-card-aside__link:hover .td-card-aside__titulo { color: var(--td-primary); }

.td-card-aside__thumb {
  flex-shrink: 0;
  width: 80px; height: 60px;
  overflow: hidden;
  border-radius: var(--td-radius-sm, 4px);
}
.td-card-aside__thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.td-card-aside__titulo {
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Las más leídas de la semana" en el aside (reemplaza a Lee también en single) */
.td-mas-leidas-semana {
  margin-top: var(--td-s6);
}
.td-mas-leidas-semana .td-seccion__titulo {
  font-size: 1rem;
  margin-bottom: var(--td-s4);
}
.td-mas-leidas__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  counter-reset: mas-leidas;
}
.td-mas-leidas__lista .td-card-aside {
  position: relative;
  counter-increment: mas-leidas;
}
.td-mas-leidas__lista .td-card-aside + .td-card-aside {
  border-top: 1px solid var(--td-border);
  padding-top: var(--td-s4);
  margin-top: var(--td-s4);
}
.td-mas-leidas__lista .td-card-aside__thumb {
  display: none; /* Las más leídas de la semana no llevan miniatura */
}
.td-mas-leidas__lista .td-card-aside__link {
  display: flex;
  align-items: center;
  gap: var(--td-s3);
  padding-left: 42px; /* Dejar espacio para el círculo numerado */
  position: relative;
}
.td-mas-leidas__lista .td-card-aside__link::before {
  content: counter(mas-leidas);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--td-color-soft-peach); /* fondo efd28d */
  color: #1a1a22; /* color oscuro para legibilidad (contraste AA) */
  font-family: var(--td-font);
  font-weight: 700;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Asegurar color de número legible en dark mode (el fondo efd28d es claro) */
[data-theme="dark"] .td-mas-leidas__lista .td-card-aside__link::before,
html[data-td-auto="dark"] body[data-theme="auto"] .td-mas-leidas__lista .td-card-aside__link::before {
  color: #15151c;
}

/* ---------- Archivos / paginación / footer ---------- */
.td-archivo__header {
  padding: var(--td-s6) 0 var(--td-s4);
  margin-bottom: var(--td-s6);
  border-bottom: 2px solid var(--td-border);
}

.td-archivo__titulo {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
}

.td-archivo__titulo span {
  color: var(--td-primary);
}

.td-archivo__desc {
  color: var(--td-text-soft);
  font-size: 0.95rem;
  margin-top: var(--td-s3);
  max-width: 60ch;
}

.td-vacio {
  text-align: center;
  color: var(--td-text-soft);
  padding: var(--td-s12) var(--td-s4);
  font-size: 1.05rem;
}

/* Página 404 */
.td-404 {
  text-align: center;
  padding: var(--td-s12) var(--td-s4) var(--td-s8);
  max-width: 560px;
  margin-inline: auto;
}

.td-404__ilustracion {
  display: block;
  width: clamp(180px, 45vw, 260px);
  height: auto;
  margin: 0 auto var(--td-s6);
}

.td-404__titulo {
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  font-weight: 800;
  margin: 0 0 var(--td-s3);
}

.td-404__desc {
  color: var(--td-text-soft);
  margin: 0 0 var(--td-s6);
}

.td-404 .td-buscar {
  max-width: 400px;
  margin-inline: auto;
}

/* Sugerencias desde el enlace roto: lista de cards compactas */
.td-404__sugerencias-lista {
  display: grid;
  gap: var(--td-s3);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .td-404__sugerencias-lista {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Nube de temas del momento: píldoras con tamaño variable por peso */
.td-temas-nube {
  display: flex;
  flex-wrap: wrap;
  gap: var(--td-s2) var(--td-s3);
  align-items: baseline;
}

.td-temas-nube__tag {
  display: inline-flex;
  align-items: center;
  background-color: var(--td-bg-alt);
  color: var(--td-text-soft);
  padding: var(--td-s1) var(--td-s3);
  border-radius: 999px;
  text-decoration: none;
  line-height: 1.3;
  transition: background-color .2s ease, color .2s ease;
}

.td-temas-nube__tag:hover,
.td-temas-nube__tag:focus-visible {
  background-color: var(--td-primary-soft);
  color: var(--td-primary-fg);
}

.td-nota__actualizada {
  color: var(--td-text-soft);
  display: inline-flex;
  align-items: center;
  gap: .25em;
}

.td-nota__actualizada::before {
  content: '·';
  color: var(--td-border);
  margin-right: .1em;
}

.td-paginacion a:hover {
  background: var(--td-primary-soft);
  border-color: var(--td-primary-fg);
  color: var(--td-primary);
}

.td-paginacion {
  margin: var(--td-s8) 0;
}

.td-paginacion .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--td-s2);
}

.td-paginacion a,
.td-paginacion .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--td-touch);
  min-height: var(--td-touch);
  padding: 0 var(--td-s3);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius);
  text-decoration: none;
  color: var(--td-text);
}

.td-paginacion .current {
  background: var(--td-primary);
  color: #fff;
  border-color: var(--td-primary);
}

.td-buscar {
  display: flex;
  gap: var(--td-s2);
  max-width: 480px;
}

.td-buscar__input {
  flex: 1;
  min-height: var(--td-touch-lg);
  padding: 0 var(--td-s4);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius);
  background: var(--td-bg);
  color: var(--td-text);
  font: inherit;
  font-size: 16px;
  /* evita zoom iOS */
}

.td-buscar__btn {
  min-height: var(--td-touch-lg);
  padding: 0 var(--td-s4);
  background: var(--td-primary);
  color: #fff;
  border: none;
  border-radius: var(--td-radius);
  font-weight: 600;
}

.td-buscar__btn:hover {
  background: var(--td-primary-dark);
}

/* ==========================================================================
   Páginas estáticas (base) + formularios de contacto / pauta
   ========================================================================== */
.td-pagina { padding-block: var(--td-s8); }
.td-contenedor {
  max-width: var(--td-maxw-site);
  margin-inline: auto;
  padding-inline: var(--td-s4);
}
.td-pagina__header { margin-bottom: var(--td-s8); }
.td-pagina__titulo {
  font-family: var(--td-font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}
.td-pagina__bajada {
  margin: var(--td-s3) 0 0;
  color: var(--td-text-soft);
  font-size: 1.05rem;
  max-width: 60ch;
}

/* Layout 2 columnas: info + formulario */
.td-contacto-layout {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .td-contacto-layout { grid-template-columns: 320px 1fr; align-items: start; }
}

.td-contacto-info {
  background: var(--td-bg-alt);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius);
  padding: var(--td-s6);
}
.td-contacto-info__titulo {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 var(--td-s4);
}
.td-contacto-info__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--td-s4); }
.td-contacto-info__lista li { display: grid; gap: 2px; font-size: .92rem; }
.td-contacto-info__label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--td-primary-fg);
}

/* Formulario */
.td-form { display: grid; gap: var(--td-s4); }
.td-form__row { display: grid; gap: var(--td-s4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .td-form__row { grid-template-columns: 1fr 1fr; } }
.td-form__campo { display: grid; gap: var(--td-s1); }
.td-form__campo label {
  font-size: .85rem;
  font-weight: 600;
}
.td-form__req { color: var(--td-color-inferno); }
.td-form input,
.td-form select,
.td-form textarea {
  width: 100%;
  padding: .65rem .8rem;
  font: inherit;
  color: var(--td-text);
  background: var(--td-bg);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius);
  transition: border-color .15s, box-shadow .15s;
}
.td-form input:focus-visible,
.td-form select:focus-visible,
.td-form textarea:focus-visible {
  outline: none;
  border-color: var(--td-primary);
  box-shadow: 0 0 0 3px var(--td-primary-soft);
}
.td-form textarea { resize: vertical; min-height: 120px; }

.td-form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--td-s2);
  font-size: .85rem;
  color: var(--td-text-soft);
  line-height: 1.5;
}
.td-form__check input { width: auto; margin-top: .2rem; flex: none; }
.td-form__check a { color: var(--td-primary); }

.td-form__submit {
  justify-self: start;
  padding: var(--td-s3) var(--td-s8);
  background: var(--td-primary);
  color: #fff;
  border: none;
  border-radius: var(--td-radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.td-form__submit:hover { background: var(--td-primary-dark); }

/* Estado de error por campo (validación Alpine) */
.td-form__campo--error input,
.td-form__campo--error select,
.td-form__campo--error textarea,
.td-form [aria-invalid="true"] {
  border-color: var(--td-color-inferno);
}
.td-form__campo--error input:focus-visible,
.td-form__campo--error select:focus-visible,
.td-form__campo--error textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(163, 0, 0, .15);
}
.td-form__error {
  display: block;
  margin-top: 2px;
  font-size: .8rem;
  color: var(--td-color-inferno);
}

/* Honeypot: fuera de pantalla, accesible para no romper lectores */
.td-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Mensajes flash */
.td-form__flash {
  margin-bottom: var(--td-s4);
  padding: var(--td-s3) var(--td-s4);
  border-radius: var(--td-radius);
  font-size: .92rem;
  border: 1px solid transparent;
}
.td-form__flash--exito {
  background: rgba(0, 175, 181, .12);
  border-color: var(--td-color-tropical-teal);
  color: var(--td-text);
}
.td-form__flash--error {
  background: rgba(163, 0, 0, .1);
  border-color: var(--td-color-inferno);
  color: var(--td-text);
}

/* Texto solo para lectores de pantalla (clase estándar WP) */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Footer editorial Tucdia — folio + grid + barra legal.
   Fondo azul de marca (independiente de light/dark) + línea superior naranja.
   ========================================================================== */
.td-ftr {
  --ftr-ink:       var(--td-primary);        /* fondo: azul de marca */
  --ftr-ink-2:     var(--td-primary-bright); /* superficie elevada */
  --ftr-fg:        #f4f2fa;            /* texto fuerte */
  --ftr-fg-muted:  #a99fc4;            /* texto secundario */
  --ftr-line:      rgba(255,255,255,.10);
  --ftr-line-soft: rgba(255,255,255,.06);

  margin-top: var(--td-s12);
  background: var(--ftr-ink);
  color: var(--ftr-fg-muted);
  font-family: var(--td-font);
  font-size: .925rem;
  line-height: 1.6;
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
  border-top: 3px solid var(--td-orange);
}
.td-ftr a { color: inherit; text-decoration: none; transition: color .15s; }
.td-ftr a:hover { color: var(--td-color-harvest-orange); }
.td-ftr a:focus-visible {
  outline: 2px solid var(--td-color-soft-peach);
  outline-offset: 3px;
  border-radius: 2px;
}
.td-ftr__wrap {
  max-width: var(--td-maxw-site);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

/* ── Folio / cabecera de diario ── */
.td-ftr__folio {
  border-bottom: 1px solid var(--ftr-line);
  background: linear-gradient(180deg, var(--ftr-ink-2), var(--ftr-ink));
}
.td-ftr__folio-inner {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .4rem 1.1rem;
  padding-block: .85rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ftr-fg-muted);
}
.td-ftr__date { color: var(--td-color-soft-peach); font-weight: 600; }
.td-ftr__sep { opacity: .35; }
.td-ftr__place { margin-left: auto; }

/* ── Cuerpo ── */
.td-ftr__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  padding-block: clamp(2.5rem, 6vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .td-ftr__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) {
  .td-ftr__grid { grid-template-columns: 1.5fr 1fr 1fr; align-items: start; }
}

/* Marca */
.td-ftr__brand-name {
  font-family: var(--td-font-display);
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ftr-fg);
  letter-spacing: -.01em;
}
.td-ftr__tagline { margin: .9rem 0 1.25rem; max-width: 34ch; }
.td-ftr__social { display: flex; gap: .55rem; }
.td-ftr__social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--ftr-line);
  border-radius: 999px;
  color: var(--ftr-fg);
  transition: transform .15s, border-color .15s, color .15s;
}
.td-ftr__social a:hover {
  color: var(--td-color-tropical-teal);
  border-color: var(--td-color-tropical-teal);
  transform: translateY(-2px);
}
.td-ftr__social svg { width: 19px; height: 19px; fill: currentColor; }

/* Columnas de enlaces */
.td-ftr__col-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ftr-fg);
  margin: 0 0 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--ftr-line-soft);
}
.td-ftr__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.td-ftr__col li a { display: inline-flex; align-items: center; gap: .45rem; }
.td-ftr__col li a::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ftr-line); flex: none; transition: background .15s;
}
.td-ftr__col li a:hover::before { background: var(--td-color-harvest-orange); }

/* Newsletter + contacto */
.td-ftr__news p { margin: 0 0 .9rem; }
.td-ftr__news form { display: flex; flex-wrap: wrap; gap: .5rem; }
.td-ftr__news input {
  flex: 1 1 170px; min-width: 0;
  padding: .65rem .85rem;
  border: 1px solid var(--ftr-line);
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  color: var(--ftr-fg);
  font: inherit;
}
.td-ftr__news input::placeholder { color: var(--ftr-fg-muted); }
.td-ftr__news input:focus-visible { outline: 2px solid var(--td-color-soft-peach); outline-offset: 1px; }
.td-ftr__news button {
  padding: .65rem 1.15rem;
  border: 0; border-radius: 7px;
  background: var(--td-color-harvest-orange); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer;
  transition: filter .15s;
}
.td-ftr__news button:hover { filter: brightness(1.1); }
.td-ftr__nl-msg { font-size: .88rem; margin: .6rem 0 0; }
.td-ftr__nl-msg--ok    { color: #7effa0; }
.td-ftr__nl-msg--error { color: #ffb3b3; }
.td-ftr__contact {
  margin-top: 1.4rem;
  font-size: .85rem;
  font-style: normal;
  display: grid; gap: .35rem;
}
.td-ftr__contact a { color: var(--td-color-soft-peach); }

/* ── Barra legal ── */
.td-ftr__legal {
  border-top: 1px solid var(--ftr-line);
  font-size: .8rem;
}
.td-ftr__legal-inner {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: .6rem 1.5rem;
  padding-block: 1.15rem;
}
.td-ftr__legal p { margin: 0; }
.td-ftr__legal strong { color: var(--ftr-fg); }
.td-ftr__legal-links { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.td-ftr__legal-links span { opacity: .3; }
.td-ftr__made { color: var(--ftr-fg); }

@media (prefers-reduced-motion: reduce) {
  .td-ftr *, .td-ftr *::before { transition: none !important; }
}

/* ---------- Botón "ir arriba" ---------- */
.td-gotop {
  position: fixed;
  right: var(--td-s4);
  bottom: var(--td-s4);
  width: var(--td-touch);
  height: var(--td-touch);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 26, 34, .72);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--td-radius);
  box-shadow: var(--td-shadow);
  cursor: pointer;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}

.td-gotop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.td-gotop:hover {
  background: rgba(26, 26, 34, .92);
}

@media (prefers-reduced-motion: reduce) {
  .td-gotop {
    transition: opacity .2s;
    transform: none;
  }
}

/* ============================================================
   Post Formats (Video, Audio, Galería)
   ============================================================ */
.td-player {
  margin-bottom: var(--td-s6);
  border-radius: var(--td-radius);
  overflow: hidden;
  box-shadow: var(--td-shadow);
  background: var(--td-bg-alt);
}

.td-player--video {
  background: #000;
}

.td-player--audio {
  padding: var(--td-s4);
  border: 1px solid var(--td-border);
}

.td-iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.td-iframe-wrap iframe,
.td-iframe-wrap video,
.td-iframe-wrap object,
.td-iframe-wrap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.td-iframe-wrap--audio {
  aspect-ratio: auto;
  min-height: 160px;
}

.td-player__fallback-link {
  display: inline-flex;
  align-items: center;
  gap: var(--td-s2);
  padding: var(--td-s3) var(--td-s4);
  background: var(--td-primary);
  color: #fff;
  border-radius: var(--td-radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.2s ease;
}

.td-player__fallback-link:hover {
  background: var(--td-primary-dark);
  color: #fff;
}

/* Slider de Galería Premium con Alpine.js */
.td-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--td-radius);
  overflow: hidden;
  margin-bottom: var(--td-s6);
  box-shadow: var(--td-shadow);
}

.td-gallery__slides {
  width: 100%;
  height: 100%;
  position: relative;
}

.td-gallery__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.td-gallery__img-container {
  width: 100%;
  height: 100%;
}

.td-gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.td-gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  color: #fff;
  padding: var(--td-s6) var(--td-s6) var(--td-s8);
  font-size: 0.88rem;
  font-weight: 500;
  text-align: center;
  z-index: 5;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.td-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--td-touch-lg);
  height: var(--td-touch-lg);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 0;
}

.td-gallery__nav:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.05);
}

.td-gallery__nav--prev {
  left: var(--td-s4);
}

.td-gallery__nav--next {
  right: var(--td-s4);
}

.td-gallery__dots {
  position: absolute;
  bottom: var(--td-s4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--td-s2);
  z-index: 10;
}

.td-gallery__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  padding: 0;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.td-gallery__dot.active {
  background: #fff;
  width: 20px;
  border-radius: 4px;
}

/* Ocultar elementos x-cloak antes de cargar Alpine.js */
[x-cloak] {
  display: none !important;
}

@media (max-width: 599.98px) {
  .td-gallery {
    aspect-ratio: 4 / 3; /* Aspect ratio más cuadrado para pantallas pequeñas */
  }
  .td-gallery__nav {
    width: var(--td-touch);
    height: var(--td-touch);
  }
}

/* ==========================================================================
   Live Blogging (Actualizaciones en vivo)
   ========================================================================== */
.td-live-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--td-bg-alt);
  border: 1px solid var(--td-border);
  border-radius: 8px;
  padding: var(--td-s3) var(--td-s4);
  margin-bottom: var(--td-s4);
  gap: var(--td-s3);
}

.td-live-bar__status {
  display: flex;
  align-items: center;
  gap: var(--td-s3);
}

.td-live-indicator {
  display: inline-flex;
  align-items: center;
  background-color: var(--td-border);
  color: var(--td-text-soft);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  gap: 6px;
}

.td-live-indicator.is-active,
[data-theme="dark"] .td-live-indicator.is-active {
  background-color: var(--td-color-inferno, #a30000);
  color: #ffffff;
}

.td-live-indicator__dot {
  width: 8px;
  height: 8px;
  background-color: var(--td-text-soft);
  border-radius: 50%;
  display: inline-block;
}

.td-live-indicator.is-active .td-live-indicator__dot,
[data-theme="dark"] .td-live-indicator.is-active .td-live-indicator__dot {
  background-color: #ffffff;
  animation: td-pulse-live 1.5s infinite;
}

@keyframes td-pulse-live {
  0% {
    transform: scale(0.9);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.5;
  }
}

.td-live-bar__msg {
  font-size: 0.82rem;
  color: var(--td-text-soft);
  font-weight: 500;
}

.td-live-bar__controls {
  display: flex;
  align-items: center;
}

/* Toggle Switch */
.td-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;
  user-select: none;
}

.td-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.td-switch__slider {
  position: relative;
  width: 36px;
  height: 20px;
  background-color: #ccc;
  transition: .3s;
  border-radius: 20px;
}

.td-switch__slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

.td-switch input:checked + .td-switch__slider {
  background-color: var(--td-primary);
}

.td-switch input:checked + .td-switch__slider:before {
  transform: translateX(16px);
}

.td-switch__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--td-text-soft);
}

/* Efecto Flash al actualizar */
.td-live-updated-flash {
  animation: td-flash-highlight 2.5s ease-out;
}

@keyframes td-flash-highlight {
  0% {
    background-color: rgba(78, 48, 160, 0.15);
  }
  100% {
    background-color: transparent;
  }
}

/* Ajustes Responsivos */
@media (max-width: 600px) {
  .td-live-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .td-live-bar__controls {
    width: 100%;
    border-top: 1px solid var(--td-border);
    padding-top: var(--td-s2);
    margin-top: var(--td-s1);
  }
}

/* ==========================================================================
   Estilos para el Bloque Live Blog (Foxiz/Ruby Live Blocks)
   ========================================================================== */
.rb-live-entry {
  position: relative;
  padding-left: 24px;
}

.rb-live-entry::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 6px;
  width: 2px;
  background-color: var(--td-border);
  pointer-events: none;
}

.live-card-outer {
  position: relative;
  margin-bottom: var(--td-s8);
}

.live-datetime {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--td-s2);
  margin-bottom: var(--td-s2);
  font-size: 0.82rem;
  color: var(--td-text-soft);
}

.live-datetime-dot {
  position: absolute;
  left: -24px;
  margin-left: 2px;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: var(--td-primary-soft);
  border: 2px solid var(--td-primary);
  border-radius: 50%;
  box-shadow: none;
  z-index: 2;
  pointer-events: none;
}

.live-card-outer:first-child .live-datetime-dot {
  width: 14px;
  height: 14px;
  background-color: var(--td-accent);
  border-color: var(--td-bg);
  box-shadow: 0 0 0 4px rgba(232, 68, 58, 0.25);
  animation: td-pulse-live 1.5s infinite;
}

.live-hdate {
  font-weight: 700;
  color: var(--td-primary-fg);
}

.live-fdate {
  font-size: 0.76rem;
  color: var(--td-text-soft);
  opacity: 0.8;
}

.live-card {
  background-color: var(--td-bg-alt);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius);
  padding: var(--desktop-padding, var(--td-s4) var(--td-s6));
  font-size: var(--td-fs-base);
  line-height: var(--td-lh-note);
  color: var(--td-text);
  box-shadow: var(--td-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  
  border-style: var(--border-style, solid);
  border-radius: var(--border-radius, var(--td-radius));
  border-width: var(--border-width, 1px);
  border-color: var(--border-color, var(--td-border));
  background-color: var(--bg, var(--td-bg-alt));
}

.live-card:hover {
  border-color: var(--td-primary-fg);
  box-shadow: 0 4px 18px rgba(78, 48, 160, 0.05);
}

[data-theme="dark"] .live-card {
  border-color: var(--dark-border-color, var(--td-border));
  background-color: var(--dark-bg, var(--td-bg-alt));
}

@media (max-width: 768px) {
  .live-card {
    padding: var(--tablet-padding, var(--td-s3) var(--td-s4));
  }
}

@media (max-width: 600px) {
  .rb-live-entry {
    padding-left: 18px;
  }
  .rb-live-entry::before {
    left: 4px;
  }
  .td-live-update {
    padding-left: 16px;
  }
  .td-live-update::before {
    left: -4px;
  }
  .live-datetime-dot {
    left: -18px;
    margin-left: 1.5px;
  }
  .live-card {
    padding: var(--mobile-padding, var(--td-s3) var(--td-s4));
  }
}

/* ==========================================================================
   Live Blogging (Refactor Lineal tipo La Nación)
   ========================================================================== */

/* Cada sección de actualización */
.td-live-update {
  position: relative;
  padding-left: 20px;
  padding-bottom: 32px;
  border-left: 2px solid var(--td-color-inferno);   /* línea vertical roja */
}

/* La última actualización no arrastra la línea hasta el pie */
.td-live-update:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

/* Punto del timeline (por defecto, notas pasadas usando paleta) */
.td-live-update::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--td-primary);
}

/* El PRIMER punto de actualización (la más reciente) resaltada */
.td-live-update:first-child::before {
  left: -6px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--td-accent);
  box-shadow: 0 0 0 4px rgba(232, 68, 58, 0.2);
  animation: td-pulse-live 1.5s infinite;
}


/* Separador visual entre actualizaciones (reemplaza al separator de WP) */
.td-live-update + .td-live-update {
  border-top: 1px solid var(--td-border, #e5e5e5);
  padding-top: 24px;
}

/* La primera línea de cada sección se asume marca de tiempo (convención editorial) */
.td-live-update > p:first-child {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--td-color-inferno);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

/* ==========================================================================
   Caja autor / fuente
   ========================================================================== */
.td-autor-fuente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--td-s4);
  margin-top: var(--td-s8);
  padding: var(--td-s4) var(--td-s6);
  background: var(--td-bg-alt);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius);
  font-size: 0.875rem;
}

.td-autor-fuente__byline {
  display: flex;
  align-items: center;
  gap: var(--td-s3);
}

.td-autor-fuente__avatar {
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.td-autor-fuente__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.td-autor-fuente__nombre {
  font-weight: 700;
  color: var(--td-text);
}

.td-autor-fuente__rol {
  font-size: 0.75rem;
  color: var(--td-text-soft);
}

.td-autor-fuente__fuente {
  margin: 0;
  font-size: 0.8rem;
  color: var(--td-text-soft);
}

.td-autor-fuente__fuente-label {
  font-weight: 600;
  margin-right: 4px;
}

.td-autor-fuente__fuente a {
  color: var(--td-primary-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 600px) {
  .td-autor-fuente {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--td-s4);
  }
}

/* ==========================================================================
   Cierre de nota — compartir al pie + "Te puede interesar"
   ========================================================================== */
.td-nota__cierre {
  margin-top: var(--td-s10);
}

.td-cierre__compartir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--td-s4);
  padding: var(--td-s4) 0;
  border-top: 1px solid var(--td-border);
  border-bottom: 1px solid var(--td-border);
  margin-bottom: var(--td-s8);
}

.td-cierre__compartir-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--td-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.td-cierre__compartir .td-compartir {
  border: none;
  padding: 0;
  margin: 0;
}

.td-cierre__compartir .td-compartir__label {
  display: none;
}

.td-te-puede-interesar .td-seccion__titulo {
  margin-bottom: var(--td-s4);
}

.td-tpi__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--td-s4);
}

.td-tpi__lista .td-card-aside + .td-card-aside {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

@media (max-width: 600px) {
  .td-tpi__lista {
    grid-template-columns: 1fr;
  }
  .td-tpi__lista .td-card-aside + .td-card-aside {
    border-top: 1px solid var(--td-border);
    padding-top: var(--td-s4);
  }
}

/* ==========================================================================
   Ad mid-content — placeholder CLS 0 (contenido lo inyecta Ad Inserter)
   ========================================================================== */
.td-ad-mid-content {
  min-height: 90px;  /* estándar leaderboard móvil */
  margin: var(--td-s8) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Archivos (Categorías, Tags) ---------- */
.td-archivo__header {
  margin-bottom: var(--td-s6);
}

.td-archivo__label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--td-text-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--td-s1);
}

.td-archivo__titulo {
  font-family: var(--td-font);
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 900;
  margin: 0;
  line-height: 1.1;
}

.td-archivo__desc {
  margin-top: var(--td-s2);
  color: var(--td-text-soft);
  font-size: 1.1rem;
}

/* ==========================================================================
   Componente Playlist de Video (Tucumán al Día TV)
   ========================================================================== */
.td-video-playlist {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--td-bg-alt);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius);
  overflow: hidden;
  box-shadow: var(--td-shadow);
  margin-bottom: var(--td-s6);
}

@media (min-width: 768px) {
  .td-video-playlist {
    grid-template-columns: 2fr 1fr;
  }
}

.td-video-playlist__player-container {
  display: flex;
  flex-direction: column;
  background: #000;
}

.td-video-playlist__player-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.td-video-playlist__player-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.td-video-playlist__current-info {
  background: rgba(20, 24, 31, 0.95);
  color: #fff;
  padding: var(--td-s3) var(--td-s4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.td-video-playlist__current-label {
  font-size: 0.75rem;
  color: var(--td-primary-fg);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.td-video-playlist__current-title {
  margin: 2px 0 0 0;
  font-family: var(--td-font);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.td-video-playlist__sidebar {
  display: flex;
  flex-direction: column;
  max-height: 450px;
  background: #141a24;
  color: #fff;
}

[data-theme="light"] .td-video-playlist__sidebar {
  background: #fff;
  color: var(--td-text);
  border-left: 1px solid var(--td-border);
}

.td-video-playlist__title {
  font-family: var(--td-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  padding: var(--td-s4);
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .td-video-playlist__title {
  border-bottom: 1px solid var(--td-border);
  background: var(--td-bg-alt);
}

.td-video-playlist__list {
  overflow-y: auto;
  flex: 1;
}

/* Scrollbar styling */
.td-video-playlist__list::-webkit-scrollbar {
  width: 6px;
}
.td-video-playlist__list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}
.td-video-playlist__list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
[data-theme="light"] .td-video-playlist__list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

.td-video-playlist__item {
  display: flex;
  align-items: center;
  gap: var(--td-s3);
  width: 100%;
  padding: var(--td-s3) var(--td-s4);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

[data-theme="light"] .td-video-playlist__item {
  border-bottom: 1px solid var(--td-border);
}

.td-video-playlist__item:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .td-video-playlist__item:hover {
  background: var(--td-bg-alt);
}

.td-video-playlist__item--active {
  background: rgba(214, 64, 42, 0.15) !important; /* Rojo acento de Tucdia */
  border-left: 3px solid var(--td-primary);
}

.td-video-playlist__item-thumb {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 45px;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}

.td-video-playlist__item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.td-video-playlist__item--active .td-video-playlist__item-thumb img {
  opacity: 1;
}

.td-video-playlist__item-number {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.65rem;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 0px 4px;
  border-radius: 2px;
  font-weight: 700;
}

.td-video-playlist__item-details {
  flex: 1;
}

.td-video-playlist__item-title {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.td-video-playlist__item--active .td-video-playlist__item-title {
  color: var(--td-primary-fg);
  font-weight: 700;
}

/* ============================================================
   Último Momento
   ============================================================ */
.td-pagina--ultimo-momento {
  padding: var(--td-s6) 0 var(--td-s12);
}

.td-ultimo-header {
  margin-bottom: var(--td-s6);
  border-bottom: 1px solid var(--td-border);
  padding-bottom: var(--td-s4);
}

.td-ultimo-titulo {
  font-family: var(--td-font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--td-text);
  margin: 0;
  line-height: 1.1;
}

.td-ultimo-lista {
  display: flex;
  flex-direction: column;
  gap: var(--td-s6);
}

.td-ultimo-dia-separador {
  width: 100%;
  margin-top: var(--td-s6);
  margin-bottom: var(--td-s2);
  border-bottom: 2px solid var(--td-primary);
  padding-bottom: var(--td-s2);
  display: flex;
  align-items: center;
}

.td-ultimo-dia-separador span {
  font-family: var(--td-font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--td-text);
}

.td-ultimo-lista > .td-ultimo-dia-separador:first-child {
  margin-top: 0;
}

.td-ultimo-item {
  display: flex;
  gap: var(--td-s4);
  padding-bottom: var(--td-s6);
  border-bottom: 1px solid var(--td-border);
}

.td-ultimo-item__hora-wrap {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: 2px;
  width: 55px;
}

.td-ultimo-item__hora {
  font-family: var(--td-font);
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
  background-color: #000000;
  padding: 3px 6px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  display: inline-block;
  line-height: 1;
}

[data-theme="dark"] .td-ultimo-item__hora {
  background-color: #ffffff;
  color: #000000;
}

.td-ultimo-item__contenido {
  display: flex;
  flex: 1;
  gap: var(--td-s6);
  justify-content: space-between;
}

@media (max-width: 576px) {
  .td-ultimo-item__contenido {
    flex-direction: column-reverse;
    gap: var(--td-s4);
  }
}

.td-ultimo-item__texto {
  flex: 1;
}

.td-ultimo-item__titulo-nota {
  font-family: var(--td-font-display);
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0 0 var(--td-s3) 0;
  font-weight: 700;
}

.td-ultimo-item__titulo-nota a {
  color: var(--td-text);
  text-decoration: none;
  transition: color 0.15s ease;
}

.td-ultimo-item__titulo-nota a:hover {
  color: var(--td-primary);
}

.td-ultimo-item__bajada {
  font-family: var(--td-font);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--td-text-soft);
  margin-bottom: var(--td-s3);
}

.td-ultimo-item__tags {
  font-family: var(--td-font);
  font-size: 0.75rem;
  color: var(--td-text-soft);
  text-transform: capitalize;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.td-ultimo-item__tag {
  color: var(--td-text-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

.td-ultimo-item__tag:hover {
  color: var(--td-primary-fg);
}

.td-ultimo-item__separador {
  color: var(--td-border);
  margin: 0 4px;
}

.td-ultimo-item__imagen {
  width: 160px;
  aspect-ratio: 16/9;
  flex-shrink: 0;
  border-radius: var(--td-radius);
  overflow: hidden;
  background-color: var(--td-bg-alt);
}

@media (max-width: 576px) {
  .td-ultimo-item__imagen {
    width: 100%;
    max-width: 320px;
  }
}

.td-ultimo-item__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Paginación */
.td-ultimo-paginacion {
  display: flex;
  justify-content: center;
  gap: var(--td-s2);
  margin-top: var(--td-s8);
  font-family: var(--td-font);
}

.td-ultimo-paginacion .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: var(--td-radius);
  border: 1px solid var(--td-border);
  text-decoration: none;
  color: var(--td-text);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.td-ultimo-paginacion .page-numbers:hover {
  background-color: var(--td-bg-alt);
  border-color: var(--td-primary);
}

.td-ultimo-paginacion .page-numbers.current {
  background-color: var(--td-primary);
  border-color: var(--td-primary);
  color: #fff;
  font-weight: 700;
}

.td-ultimo-paginacion .page-numbers.dots {
  border: none;
  background: transparent;
  color: var(--td-text-soft);
}



.td-ultimo-no-posts {
  font-family: var(--td-font);
  font-size: 1.125rem;
  color: var(--td-text-soft);
  text-align: center;
  padding: var(--td-s8) 0;
}

/* ---------- Cartel flotante PWA para móviles ---------- */
.td-pwa-toast {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  background: var(--td-primary);
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(78, 48, 160, 0.45);
  z-index: 1200; /* por encima del header sticky */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: auto;
}

/* Si está la barra de admin de WP (logueado), bajar el cartel para no taparla. */
.admin-bar .td-pwa-toast { top: 58px; }

/* Pulso suave de atención tras entrar (invita a instalar). Respeta reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .td-pwa-toast { animation: td-pwa-glow 1.5s ease-in-out 0.7s 2; }
}
@keyframes td-pwa-glow {
  0%, 100% { box-shadow: 0 6px 22px rgba(78, 48, 160, 0.45); }
  50%      { box-shadow: 0 6px 30px rgba(232, 196, 141, 0.75); } /* glow durazno */
}

/* Transición de entrada/salida deslizando desde arriba (Alpine x-transition). */
.td-pwa-trans {
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.td-pwa-hidden-top { opacity: 0; transform: translateY(-130%); }
.td-pwa-shown      { opacity: 1; transform: translateY(0); }

.td-pwa-toast__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.td-pwa-toast__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--td-color-soft-peach); /* Soft Peach complementario */
}

.td-pwa-toast__desc {
  font-size: 0.75rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
}

.td-pwa-ios-icon {
  display: inline-block;
  vertical-align: middle;
  background: #ffffff;
  padding: 2px;
  border-radius: 3px;
  color: #111111;
  width: 16px;
  height: 16px;
  margin: 0 2px;
}

.td-pwa-toast__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.td-pwa-btn {
  background: none;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.td-pwa-btn--primary {
  background: var(--td-color-soft-peach);
  color: #3b2282; /* Tono lila oscuro para contraste */
}

.td-pwa-btn--primary:hover {
  background: #e3c47f;
}

.td-pwa-btn--close {
  color: rgba(255, 255, 255, 0.7);
  padding: 6px;
  font-size: 0.85rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.td-pwa-btn--close:hover {
  color: #ffffff;
}

/* Ocultar en tablets y PC para cumplir con mobile-only */
@media (min-width: 600px) {
  .td-pwa-toast {
    display: none !important;
  }
}

/* ---------- Caja de Artículos Relacionados (Inline) ---------- */
.td-related-inline {
  display: block;
  margin: var(--td-s6) 0;
  padding: var(--td-s4) var(--td-s4) var(--td-s4) var(--td-s6);
  border-left: 4px solid var(--td-primary);
  background: var(--td-bg-alt);
  border-radius: 0 var(--td-radius) var(--td-radius) 0;
  font-family: var(--td-font);
  font-size: 1.05rem;
  line-height: 1.5;
}

.td-related-inline__tag {
  font-family: var(--td-font);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--td-primary-fg);
  display: block;
  margin-bottom: var(--td-s1);
}

.td-related-inline__link {
  font-family: var(--td-font-display);
  font-weight: 700;
  color: var(--td-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.td-related-inline__link:hover {
  color: var(--td-primary);
  text-decoration: underline;
}

/* Soporte para Dark Mode explícito */
[data-theme="dark"] .td-related-inline {
  border-left-color: var(--td-primary-fg);
  background: var(--td-bg-alt);
}

/* Clima en Fila Central del Header */
.td-clima-header {
  display: flex;
  align-items: center;
  margin-inline: auto;
}

@media (max-width: 767px) {
  .td-clima-header {
    display: none !important; /* Ocultar en móviles para evitar colapso de espacio */
  }
}

.td-header__clima {
  display: flex;
  align-items: center;
  gap: var(--td-s2);
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  padding: 4px var(--td-s3);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.2s ease;
}

.td-header__clima:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.td-header__clima-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.td-header__clima .td-clima__ciudad--short {
  display: inline !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.td-header__clima .td-clima__rango {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  font-size: 0.72rem;
  margin-left: var(--td-s1);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.td-header__clima .td-clima__flecha {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8em;
}

.td-header__clima .td-clima__guion {
  color: rgba(255, 255, 255, 0.3);
  margin-inline: 2px;
}

.td-clima__temp {
  font-weight: 700;
}

/* Dólar BNA en Fila Inferior del Header (a la derecha) */
.td-dolar-container {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  gap: var(--td-s2);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .td-dolar-container {
    display: none !important; /* Ocultar en móvil para dar espacio a chips de navegación */
  }
}

.td-barra-info__dolar {
  display: inline-flex;
  align-items: center;
  gap: var(--td-s2);
  color: inherit;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.td-barra-info__dolar:hover {
  color: var(--td-gold);
}

.td-dolar__nombre {
  text-transform: uppercase;
  font-weight: 700;
  color: var(--td-gold);
  letter-spacing: 0.05em;
}

.td-dolar__valores {
  display: inline-flex;
  align-items: center;
  gap: var(--td-s1);
  color: #fff;
}

.td-dolar__compra strong,
.td-dolar__venta strong {
  font-weight: 700;
  color: #fff;
}

.td-dolar__sep {
  opacity: 0.5;
  margin-inline: 2px;
}