/*
Theme Name:   Diario Deportes
Theme URI:    https://diariodeportes.com.co
Description:  Tema hijo de Hello Elementor para Diario Deportes. El diseño vive en Elementor (variables, clases globales y plantillas); aquí solo lo que Elementor no expresa.
Author:       Out. Studio
Author URI:   https://out-studio.net
Template:     hello-elementor
Version:      1.0.0
Text Domain:  diario-deportes-hijo
*/

/* ==========================================================================
   Índice
   1. Valores compartidos       5. Menú clásico (escritorio y desplegado)
   2. Base                      6. Franja, lupa y buscador
   3. Foco y enlace de salto    7. Anunciantes y pie
   4. Piezas del sistema        8. Movimiento reducido
   Regla: todo selector que compite con un elemento atómico empieza por
   ".elementor " (las clases globales salen como ".elementor .clase").
   Los colores leen las variables de Elementor (--dd-*); el valor tras la
   coma es solo un respaldo.
   ========================================================================== */


/* 1. VALORES COMPARTIDOS ================================================== */
:root {
  --ddh-margen: 32px;
  --ddh-borde: max(var(--ddh-margen), calc((100vw - 1320px) / 2));
  --ddh-slant: 15deg;
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;   /* la usa la entrada del texto del carrusel (D-01) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ddh-foco: var(--dd-ink, #000C24);
}
@media (max-width: 1023px) { :root { --ddh-margen: 24px; } }
@media (max-width: 767px)  { :root { --ddh-margen: 16px; } }


/* 2. BASE ================================================================= */
body {
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* El reset de Hello está apagado (Ajustes de Hello › «Hello Style»): la base del sitio es la de la
   exploración (css/exploracion.css: a sin subrayado y con el color heredado, botones y tablas
   sin estilo de fábrica). Lo único que hace falta de Hello es ocultar los textos para lectores
   de pantalla. */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); word-wrap: normal !important;
}
time { font-variant-numeric: tabular-nums lining-nums; }

/* Archivo condensada: el eje de anchura no es una propiedad de Elementor. */
.elementor .dd-titulo-32,
.elementor .dd-titulo-junior,
.elementor .dd-titulo-32-36,
.elementor .dd-pestana { font-stretch: 82%; }
.elementor .dd-cifra { font-stretch: 75%; }


/* 3. FOCO Y ENLACE DE SALTO =============================================== */
/* Anillo de 3 px: tinta sobre claro y naranja en las zonas oscuras.
   (0,3,1): gana a las reglas de foco de Elementor y de los widgets. */
.elementor-location-header,
.elementor .dd-pie-sitio,
.elementor .dd-banda-oscura,
.elementor .dd-banda-bar,
.elementor .dd-banda-ink-2,
.tira, .hero, .columna, .posiciones { --ddh-foco: var(--dd-accent, #FC9901); }
html :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--ddh-foco);
  outline-offset: 3px;
}
.skip-link.screen-reader-text:focus {
  position: fixed; top: 12px; left: 16px; z-index: 200;
  width: auto; height: auto; margin: 0; padding: 12px 16px;
  overflow: visible; clip: auto; clip-path: none;
  background: var(--dd-ink, #000C24); color: #FFFFFF;
  font: 600 16px/26px var(--dd-texto, "Inter"), system-ui, sans-serif;
  --ddh-foco: var(--dd-accent, #FC9901);
}


/* 4. PIEZAS DEL SISTEMA =================================================== */
/* Barrita de progreso de lectura: fija arriba, 3 px, naranja. Sin JS no se ve. */
.ddh-progreso {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 150; pointer-events: none;
}
.ddh-progreso__barra {
  display: block; height: 100%;
  background: var(--dd-accent, #FC9901);
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}
html:not(.dd-js) .ddh-progreso { display: none; }

/* Kicker: paralelogramo de 8 × 12 al ángulo de la casa, delante del texto. */
.elementor .dd-kicker::before {
  content: "";
  display: inline-block;
  width: 8px; height: 12px;
  margin-right: 10px;
  background: var(--dd-accent, #FC9901);
  transform: skewX(calc(var(--ddh-slant) * -1));
  vertical-align: -1px;
}
.elementor .dd-kicker--junior::before { background: var(--dd-junior, #C8102E); }

/* Enlace a sección: flecha que se mueve al pasar el ratón. */
.elementor .dd-enlace-seccion::after {
  content: "→" / "";
  transition: transform var(--dur-base) var(--ease-out);
}
.elementor .dd-enlace-seccion:hover::after { transform: translateX(4px); }
.elementor .dd-enlace-seccion:hover { text-decoration: underline; text-underline-offset: 4px; }

.elementor .dd-boton { transition: background-color var(--dur-fast) var(--ease-out); }

/* Texto que no se parte (cargos de la redacción, botones). */
.elementor .dd-persona,
.elementor .dd-boton { white-space: nowrap; }

/* Lectores de pantalla: oculto a la vista, nunca display:none. */
.elementor .dd-sr { clip: rect(0 0 0 0); white-space: nowrap; }


/* 5. MENÚ =================================================================
   El menú principal es el bloque dd-menu del plugin (mega menú en escritorio, acordeón en
   celular), con su propia hoja. Aquí no queda nada del menú clásico de Elementor.
   ========================================================================== */
/* El menú ocupa el alto de la barra, como en la comparación (la zona de paso hacia el panel no tiene huecos). */
.elementor-location-header .dd-menu-caja { align-items: stretch; }
/* Botón «Menú» centrado en la barra, como la lupa. */
.elementor-location-header .dd-barra__fila > .dd-caja-auto { justify-content: center; }
/* Los dos paneles (mega menú y acordeón) cuelgan de la barra fija: ver «Barra fija» abajo. */


/* Avatar de la firma (plugin ≥1.0.14, dd_core_avatar_redaccion_html): trae «padding:18%» en línea,
   y un padding en % se mide sobre el ANCHO DEL CONTENEDOR, no de la imagen (salía un círculo de
   155 px). Aquí, 48 px con 9 px de aire (el 18 % de 48). */
.firma .firma__avatar { width: 48px !important; height: 48px !important; padding: 9px !important; box-sizing: border-box !important; }

/* 5b. BARRA FIJA ==========================================================
   La barra (logo, menú, lupa) queda pegada arriba al bajar; la franja de la redacción y la
   tira se van con el scroll. Decisión de Oscar para la opción I (el prototipo no la fija).
   Cómo: un sticky solo se pega dentro de su padre, así que el <header> de Elementor y su
   contenedor .dd-cabecera no hacen caja en el sitio (display: contents) y la barra se pega
   contra la página entera. En el editor no se toca nada: las cajas siguen seleccionables.
   Sin saltos: sticky conserva su sitio en el flujo.
   --dd-tope: alto de la barra de administración de WordPress (32 / 46; por debajo de 601 px
   esa barra se va con el scroll y vale 0). --dd-barra-fin: borde inferior de la barra en
   pantalla, lo escribe js/cromo.js (sin JS, el alto de la barra). */
:root { --dd-tope: 0px; --dd-vivo: 0px; --dd-barra-alto: 72px; --dd-barra-fin: calc(var(--dd-tope) + var(--dd-vivo) + var(--dd-barra-alto)); }
:root:has(> body.admin-bar) { --dd-tope: 32px; }
@media (max-width: 782px) { :root:has(> body.admin-bar) { --dd-tope: 46px; } }
@media (max-width: 600px) { :root:has(> body.admin-bar) { --dd-tope: 0px; } }
@media (max-width: 767px) { :root { --dd-barra-alto: 56px; } }
/* Aviso «En vivo» del plugin (franja roja, sticky arriba, solo cuando hay transmisión; marca
   html.dd-con-franja-vivo): la barra se pega debajo de él, no detrás. Y él, debajo de la barra de
   administración. */
html.dd-con-franja-vivo:has(.dd-en-vivo-franja) { --dd-vivo: 44px; }
body:not(.elementor-editor-active) .dd-en-vivo-franja { top: var(--dd-tope); }

/* Las anclas y el enlace de salto no caen debajo de la barra. */
html { scroll-padding-top: calc(var(--dd-tope) + var(--dd-vivo) + var(--dd-barra-alto) + 8px); }

body:not(.elementor-editor-active) header.elementor-location-header,
body:not(.elementor-editor-active) header.elementor-location-header > .dd-cabecera { display: contents; }
body:not(.elementor-editor-active) .elementor-location-header .dd-barra-menu {
  position: sticky;
  top: calc(var(--dd-tope) + var(--dd-vivo));
  z-index: 100;            /* sobre la página; la barrita de progreso (150) va encima */
  overflow-anchor: none;   /* abrir un panel no es motivo para que el navegador mueva la página */
}
body:not(.elementor-editor-active) #buscador { overflow-anchor: none; }
/* Lo que va dentro de la barra fija (y sus paneles) ya está a la vista: sin esto, el
   scroll-padding de arriba hace que el navegador suba la página cada vez que un botón de la
   barra recibe el foco (Enter, Escape que devuelve el foco, Tab). */
body:not(.elementor-editor-active) .elementor-location-header .dd-barra-menu,
body:not(.elementor-editor-active) .elementor-location-header .dd-barra-menu *,
body:not(.elementor-editor-active) #buscador[data-dd-flota] * {
  scroll-margin-top: calc(-1 * (var(--dd-tope) + var(--dd-vivo) + var(--dd-barra-alto) + 8px));
}
/* La barrita de progreso, sobre el borde de arriba de la barra fija. */
.ddh-progreso { top: calc(var(--dd-tope) + var(--dd-vivo)); }

/* Mega menú (escritorio): si el panel no cabe en la pantalla, se desplaza solo él. */
@media (min-width: 1180px) {
  body:not(.elementor-editor-active) .mm .mm__item.abierto > .mega {
    max-height: calc(100vh - var(--dd-barra-fin));
    max-height: calc(100dvh - var(--dd-barra-fin));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
/* Acordeón (celular y tableta): ocupa la pantalla bajo la barra, con su propio scroll, y la
   página de fondo no se mueve mientras está abierto. */
@media (max-width: 1179px) {
  body:not(.elementor-editor-active) .mm.dd-mm-js.abierto {
    max-height: calc(100vh - var(--dd-barra-fin));
    max-height: calc(100dvh - var(--dd-barra-fin));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html:has(.mm.dd-mm-js.abierto) { overflow: hidden; scrollbar-gutter: stable; }
  /* Mientras dd-menu.js no ha corrido (va con defer: en una página lenta, segundos después del
     primer pintado), el plugin deja el menú abierto en el flujo, que es su respaldo sin JavaScript:
     la barra medía 2200 px y al ocultarse la página entera saltaba (CLS 0,94 a 1024 y 768). Con JS
     (html.dd-js se marca en el <head>, antes de pintar) nace cerrado; sin JS se sigue viendo. */
  html.dd-js .mm:not(.dd-mm-js) { display: none; }
}
/* Buscador abierto con la barra ya pegada: flota justo debajo de ella (js/cromo.js pone
   data-dd-flota al abrirlo). Con la barra en su sitio, se abre en el flujo, como en la exploración. */
body:not(.elementor-editor-active) #buscador[data-dd-flota] {
  position: fixed;
  top: var(--dd-barra-fin);
  left: 0; right: 0;
  z-index: 99;
  max-height: calc(100dvh - var(--dd-barra-fin));
  overflow-y: auto;
  box-shadow: 0 16px 32px rgb(0 12 36 / .32);
}


/* 5c. ENCABEZADO B «LOGO AL CENTRO» (opción B, Oscar 04-10) ================
   Plantilla «Encabezado · logo al centro» (wordpress/v4/dd-encabezado-b-build.php). Clases dd-cabb-*.
   Fila 1 (fecha · logo · Buscar) y franja de la redacción se van con el scroll; la barra del menú
   ([data-dd-fija], también .dd-barra-menu) queda fija con las reglas de «Barra fija» de arriba.
   Sin formas inclinadas: la sección activa es un bloque recto. */
/* La caja del widget dd-menu se funde (.dd-fundido) con la hoja dd-v4.css del plugin, que solo se carga
   donde hay otros bloques suyos: en las páginas sin ellos (las legales) la caja ocupaba una celda de
   la barra y la lupa bajaba a otra fila (barra de 88 px en celular). Se repite aquí para el encabezado. */
.elementor-location-header .dd-fundido { display: contents; }
:root:has(.dd-cabb-barra) { --dd-barra-alto: 50px; }
@media (max-width: 1179px) { :root:has(.dd-cabb-barra) { --dd-barra-alto: 56px; } }

/* Fecha de la fila 1: «Domingo» arriba (Inter 600 14 blanco), «4 de octubre de 2026» debajo (13, #B7BBC8). */
.ddh-fecha--dos-lineas .ddh-fecha__dia { display: block; font: 600 14px/20px var(--dd-texto, "Inter"), system-ui, sans-serif; color: #FFFFFF; }
.ddh-fecha--dos-lineas .ddh-fecha__fecha { display: block; font: 400 13px/16px var(--dd-texto, "Inter"), system-ui, sans-serif; color: #B7BBC8; }
.ddh-fecha--linea { color: #FFFFFF; font-weight: 500; white-space: nowrap; }

/* Píldora «Buscar» (fila 1): se despliega en su sitio hacia la izquierda en un campo de búsqueda
   ([ddh_buscar_pildora], js/cromo.js). Mismo alto (44) y radio; el ancho abierto lo fija el JS
   (hasta 320 px, sin llegar a 24 px del logo). Sin JavaScript se ve ya abierta y funciona. */
.ddh-pildora {
  display: flex; align-items: center; height: 44px; margin: 0; width: auto;
  border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18);
  color: #E7E9EE; overflow: hidden;
  transition: width 200ms var(--ease-out, ease-out), box-shadow 150ms ease-out;
}
.ddh-pildora button { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 44px; margin: 0; padding: 0; background: none; border: 0; border-radius: 999px; color: inherit; cursor: pointer; }
.ddh-pildora__abrir { gap: 10px; padding: 0 16px 0 14px !important; font: 400 13px/16px var(--dd-texto, "Inter"), system-ui, sans-serif; white-space: nowrap; }
.ddh-pildora__abrir svg { width: 14px; height: 14px; }
.ddh-pildora__abrir:hover { color: #FFFFFF; background: rgb(255 255 255 / .06); }
.ddh-pildora__campo {
  flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; padding: 0 4px 0 18px;
  font: 400 14px/20px var(--dd-texto, "Inter"), system-ui, sans-serif; color: #FFFFFF;
  background: transparent; border: 0; outline: 0; -webkit-appearance: none; appearance: none;
}
.ddh-pildora__campo::placeholder { color: #B7BBC8; opacity: 1; }
.ddh-pildora__campo::-webkit-search-cancel-button { display: none; }
.ddh-pildora__enviar, .ddh-pildora__cerrar { width: 44px; }
.ddh-pildora__enviar:hover, .ddh-pildora__cerrar:hover { background: rgb(255 255 255 / .08); color: #FFFFFF; }
/* Con JS: cerrada se ve solo el botón; abierta, el campo, enviar y cerrar. */
html.dd-js .ddh-pildora:not([data-abierta]) :is(.ddh-pildora__campo, .ddh-pildora__enviar, .ddh-pildora__cerrar) { display: none; }
html.dd-js .ddh-pildora[data-abierta] .ddh-pildora__abrir { display: none; }
.ddh-pildora[data-abierta], .ddh-pildora:focus-within { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }
/* Sin JS: el formulario abierto, de 240 px, sin el botón de abrir ni el de cerrar. */
html:not(.dd-js) .ddh-pildora { width: 240px; }
html:not(.dd-js) .ddh-pildora :is(.ddh-pildora__abrir, .ddh-pildora__cerrar) { display: none; }
/* El anillo de foco no se recorta con el overflow de la píldora: va por dentro. */
/* (0,3,3): gana a la regla general de foco (0,3,1), que pone el anillo por fuera y aquí se recortaría. */
html body .ddh-pildora.ddh-pildora :is(button, input):focus-visible { outline: 3px solid var(--dd-accent, #FC9901); outline-offset: -3px; }
/* En el campo, el indicador es el contorno de la píldora entera (redondo), no un rectángulo dentro. */
html body .ddh-pildora.ddh-pildora .ddh-pildora__campo:focus-visible { outline: 0; }
.ddh-pildora:has(.ddh-pildora__campo:focus-visible) { box-shadow: inset 0 0 0 2px var(--dd-accent, #FC9901); }

/* Menú: la activa (y el acordeón) en bloque recto, sin paralelogramo; velo blanco al 16 %. */
.dd-cabb-barra .mm .menu__enlace::before { transform: none; border-radius: 6px; }
.dd-cabb-barra .mm .menu__enlace.es-activa::before,
.dd-cabb-barra .mm .menu__enlace[aria-current]::before { background: rgb(255 255 255 / .16); }

/* ☰ solo con el icono (el texto «Menú» queda para lectores de pantalla: es su nombre). */
.dd-cabb-barra .menu-boton[data-dd-mm-boton] { min-width: 44px; min-height: 44px; margin: 0 0 0 -10px; padding: 0 10px; }
.dd-cabb-barra .menu-boton[data-dd-mm-boton] .menu-boton__texto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Computador: el logo chico y la lupa de la barra solo aparecen con la barra pegada (js/cromo.js
   pone data-dd-pegada). Quedan en su sitio, invisibles y fuera del Tab: el menú no se mueve. */
@media (min-width: 1180px) {
  .dd-cabb-barra :is(.dd-cabb-minilogo, .dd-cabb-lupa) { transition: opacity var(--dur-fast, 150ms) ease-out; }
  body:not(.elementor-editor-active) .dd-cabb-barra:not([data-dd-pegada]) :is(.dd-cabb-minilogo, .dd-cabb-lupa) { visibility: hidden; opacity: 0; }
}

/* Redacción: «Director: Hugo Illera · Editor general: …» con los cargos en #A6ADBD y los nombres en
   blanco 500 (clase dd-cabb-nombre). Puntos de separación legibles sobre #1A2540. */
.elementor .dd-cabb-red .dd-persona + .dd-persona > :first-child::before { color: var(--dd-on-dark-muted, #A6ADBD); margin: 0 12px; }
.dd-cabb-red .dd-persona > p { display: inline; }
.dd-cabb-red .dd-persona > p + p { margin-left: 4px; }
.dd-cabb-marq__mitad { display: contents; }
.dd-cabb-marq__mitad[aria-hidden] { display: none; }

/* Celular y tableta: la franja es una marquesina de derecha a izquierda (22 s, sin costura: la pista
   va duplicada por js/cromo.js). Se detiene al pasar el ratón, con el foco o al tocarla. Bordes
   desvanecidos. Movimiento reducido o sin JS: quieta y desplazable. */
@media (max-width: 1179px) {
  /* Bordes desvanecidos en el azul de la propia franja (no una máscara: con máscara asomaba el
     blanco de la página). Capa encima, sin recoger el puntero. */
  .elementor .dd-cabb-red.dd-cabb-red { position: relative; overflow-x: auto; scrollbar-width: none; }   /* (0,3,0): gana al overflow:hidden de la clase */
  .elementor .dd-cabb-red::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, #1A2540 0, rgb(26 37 64 / 0) 24px, rgb(26 37 64 / 0) calc(100% - 24px), #1A2540 100%);
  }
  .dd-cabb-red::-webkit-scrollbar { display: none; }
  .elementor .dd-cabb-red__pista { width: max-content; padding: 0 16px; }
  .elementor .dd-cabb-red__pista > *, .dd-cabb-marq__mitad > * { flex: none; }
  .elementor .dd-cabb-red .dd-persona > :first-child::before { content: "·" / ""; color: var(--dd-on-dark-muted, #A6ADBD); margin: 0 12px; }
  html.dd-js .dd-cabb-red__pista.dd-marq-lista { padding: 0; animation: dd-marquesina 22s linear infinite; }
  html.dd-js .dd-cabb-red:has(.dd-marq-lista) { overflow-x: hidden; }
  .dd-marq-lista .dd-cabb-marq__mitad { display: flex; align-items: center; flex: none; padding: 0 0 0 16px; }
  .dd-marq-lista .dd-cabb-marq__mitad[aria-hidden] { display: flex; }
  .dd-marq-lista .dd-cabb-marq__mitad::after { content: "·" / ""; margin: 0 12px; color: var(--dd-on-dark-muted, #A6ADBD); }
  .dd-marq-lista:hover, .dd-marq-lista:focus, .dd-marq-lista:focus-within, .dd-marq-lista[data-dd-pausa] { animation-play-state: paused; }
  .dd-marq-lista:focus-visible { outline: 3px solid var(--dd-accent, #FC9901); outline-offset: -3px; }
}
@keyframes dd-marquesina { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 1179px) and (prefers-reduced-motion: reduce) {
  html.dd-js .dd-cabb-red__pista.dd-marq-lista { animation: none; padding: 0 16px; }
  html.dd-js .dd-cabb-red:has(.dd-marq-lista) { overflow-x: auto; }
  .dd-marq-lista .dd-cabb-marq__mitad[aria-hidden] { display: none; }
  .dd-marq-lista .dd-cabb-marq__mitad { padding: 0; }
  .dd-marq-lista .dd-cabb-marq__mitad::after { content: none; }
}


/* 6. FRANJA, LUPA Y BUSCADOR ============================================== */
/* «·» entre cargos, con texto alternativo vacío: no se lee (D-20). */
/* (Va en el primer hijo: Elementor reserva el ::before de sus contenedores.) */
.elementor .dd-persona + .dd-persona > :first-child::before {
  content: "·" / "";
  margin: 0 10px;
  color: var(--dd-separador-dark, #3B4560);
}
.elementor .dd-lupa:hover { color: var(--dd-on-dark-muted, #A6ADBD); }

/* Buscador: oculto hasta que se abre (ancla #buscador sin JS, clase con JS).
   En el editor se ve siempre, para poder editarlo. */
.elementor #buscador:target,
.elementor #buscador.abierto,
.elementor-editor-active .elementor #buscador { display: block; }
.ddh-buscar__label {
  display: block; margin-bottom: 8px;
  font: 600 14px/20px var(--dd-texto, "Inter"), system-ui, sans-serif; color: #FFFFFF;
}
.ddh-buscar__fila { display: flex; gap: 8px; align-items: center; }
.ddh-buscar__fila input[type="search"] {
  flex: 1; min-width: 0; height: 48px;
  margin: 0; padding: 0 16px;
  border: 1px solid rgb(255 255 255 / .3); border-radius: 2px;
  background: var(--dd-ink, #000C24); color: #FFFFFF;
  font: 400 16px/24px var(--dd-texto, "Inter"), system-ui, sans-serif;
}
.ddh-buscar__fila input[type="search"]::placeholder { color: var(--dd-on-dark-muted, #A6ADBD); opacity: 1; }
.ddh-buscar__fila button.ddh-buscar__boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; margin: 0; padding: 0 24px;
  border: 0; border-radius: 2px;
  background: #FFFFFF; color: var(--dd-ink, #000C24);
  font: 600 15px/20px var(--dd-texto, "Inter"), system-ui, sans-serif;
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.ddh-buscar__fila button.ddh-buscar__boton:hover,
.ddh-buscar__fila button.ddh-buscar__boton:focus { background: var(--dd-line, #E7E8EC); color: var(--dd-ink, #000C24); }
.ddh-buscar__cerrar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none; color: #FFFFFF;
}
.ddh-buscar__cerrar svg { width: 24px; height: 24px; }


/* 7. ANUNCIANTES Y PIE ==================================================== */
/* Rejilla de logos: la pinta el widget dd-anunciantes del plugin (diseño
   «rejilla») con el marcado de la exploración; el aspecto vive aquí. Cada
   logo trae su alto (--alto) para que todos ocupen la misma superficie. */
.anunciantes__rotulo {
  margin: 0;
  font: 600 13px/16px var(--dd-texto, "Inter"), system-ui, sans-serif;
  letter-spacing: .01em;
  color: var(--dd-muted, #5A5E6B);
}
.anunciantes__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 16px 0 0; padding: 0; list-style: none;
  background: var(--dd-line, #E7E8EC);
  border: 1px solid var(--dd-line, #E7E8EC);
}
.anunciantes__logo {
  display: grid; place-items: center;
  height: 120px; margin: 0; padding: 16px;
  background: #FFFFFF;
}
.anunciantes__logo img { height: var(--alto); width: auto; max-width: 100%; object-fit: contain; }
.anunciantes__logo--vacio { position: relative; background: var(--dd-band, #F6F7F9); }
.anunciantes__logo--vacio a {
  font: 600 15px/20px var(--dd-texto, "Inter"), system-ui, sans-serif;
  color: var(--dd-ink, #000C24);
  text-decoration: underline;
  text-decoration-color: var(--dd-line, #E7E8EC);
  text-underline-offset: 4px;
}
.anunciantes__logo--vacio a::after { content: ""; position: absolute; inset: 0; }
.anunciantes__logo--vacio:hover { background: #FFFFFF; }
.anunciantes__logo--vacio:hover a { text-decoration-color: currentColor; }
@media (max-width: 767px) {
  .anunciantes__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anunciantes__logo { height: 96px; }
  .anunciantes__logo img { height: calc(var(--alto) * .8); }
}

.elementor .dd-pie__enlace:hover { text-decoration: underline; text-underline-offset: 4px; }
.elementor .dd-pie__base a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px;
}
.elementor .dd-pie__base p { display: flex; align-items: center; min-height: 44px; gap: 6px; margin: 0; }
.elementor .dd-pie__base .elementor-widget-container > p { margin: 0; }


/* 9. PORTADA ============================================================== */
/* Titulares reales con palabras pegadas («COMPLICANDO!PERDIO») no deben empujar la página de lado. */
:is(.tarjeta__titular, .nota-grande__titular, .lista-notas__titular, .lista-texto__titular, .texto-nota__titular,
  .video__titulo, .mas-leido__titular, .lo-ultimo__titular, .hero__titular, .columna__titular, .al-dia__titular) { overflow-wrap: break-word; }
/* El enlace de la cabeza sube 4 px para alinear la pestaña con el rótulo del lateral. */
.elementor .dd-seccion-cabeza .dd-enlace-seccion { margin-top: -4px; }
/* «Todo Junior» empuja a la derecha, como en la cabeza de la exploración. */
.elementor .dd-junior__cabeza .dd-enlace-seccion { margin-left: auto; }
@media (max-width: 767px) { .elementor .dd-junior__cabeza .dd-enlace-seccion { display: none; } }
/* En celular los enlaces «Todo …» de las cabeceras de sección siguen a la vista
   (decisión de Oscar, 04-10: la exploración los escondía). */
@media (max-width: 767px) { .seccion__cabeza .enlace-seccion, .elementor .dd-seccion-cabeza .dd-enlace-seccion { display: inline-flex; } }
/* «En vivo»: el punto rojo de la ficha, también en la tira (decisión de Oscar, 04-10). */
.partido__vivo::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--dd-junior, #C8102E);
  vertical-align: 1px;
}
/* Los datos de Junior salen a sangre en celular (márgenes negativos): sin el ancho fijo del contenedor. */
.elementor .dd-junior__datos { width: auto; }
/* Escudo dentro del medallón de la cabeza de Junior. */
.elementor .dd-medallon-junior img { height: auto; }

/* Políticas en la base del pie: el menú «dd-pie» entero, pero solo se ven los ítems con la
   clase dd-legal (Apariencia › Menús › Clases CSS). Los agrupadores se aplanan. */
.dd-legal-nav .elementor-nav-menu--main > .elementor-nav-menu { display: flex; flex-wrap: wrap; gap: 0 24px; }
.dd-legal-nav li { display: none !important; }
.dd-legal-nav li.menu-item-has-children { display: contents !important; }
.dd-legal-nav li.menu-item-has-children > a { display: none !important; }
.dd-legal-nav .sub-menu { display: contents !important; position: static !important; }
.dd-legal-nav li.dd-legal { display: flex !important; }
.dd-legal-nav li.dd-legal > a {
  display: inline-flex !important; align-items: center; min-height: 44px;
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
  font: 400 14px/20px var(--dd-texto, "Inter"), system-ui, sans-serif !important;
  color: #FFFFFF !important;
  text-decoration: underline; text-underline-offset: 4px;
}
.dd-legal-nav li.dd-legal > a:hover { text-decoration-thickness: 2px; }
.dd-legal-nav .sub-arrow, .dd-legal-nav .elementor-nav-menu::after { display: none !important; }

/* Datos de Junior: en el sitio, «Cómo viene» y «En la tabla» no son hijos directos de la banda
   (la caja del widget se funde), así que la regla de la exploración se aplica a las piezas. */
.elementor .dd-junior__datos .forma,
.elementor .dd-junior__datos .contexto { padding: 0 32px; }
.elementor .dd-junior__datos .contexto { border-left: 1px solid var(--dd-line, #E7E8EC); }
@media (max-width: 1023px) {
  .elementor .dd-junior__datos .forma,
  .elementor .dd-junior__datos .contexto { padding: 24px 0; }
  .elementor .dd-junior__datos .contexto { border-left: 0; border-top: 1px solid var(--dd-line, #E7E8EC); }
}
/* Retrato del columnista: Elementor pone «height: auto» a toda imagen con más peso que la clase. */
.elementor .columna img.columna__foto { width: 120px; height: 150px; }
@media (max-width: 1023px) { .elementor .columna img.columna__foto { width: 88px; height: 110px; } }
/* «Columnas anteriores»: área táctil de 44 px. */
.columna__anteriores-titulo a { display: inline-flex; align-items: center; min-height: 44px; }

/* Aviso de la tira cuando no se pudo cambiar el calendario (plugin 1.0.3): seis segundos,
   texto blanco sobre tinta, sin tapar los partidos. No está en la exploración: decisión de construcción. */
.tira__aviso {
  margin: 0; padding: 8px 16px;
  font: 600 13px/16px var(--dd-texto, "Inter"), system-ui, sans-serif;
  color: #FFFFFF; background: var(--dd-ink, #000C24);
}
.tira__aviso[hidden] { display: none; }

/* 10. CATEGORÍA Y ARTÍCULO ================================================ */
/* Un shortcode «fundido» (clase dd-fundir en Avanzado): su caja no cuenta para la
   retícula, así sus piezas quedan como hijas directas del contenedor. */
.elementor .elementor-widget.dd-fundir,
.elementor .elementor-widget.dd-fundir > .elementor-widget-container,
.elementor .elementor-widget.dd-fundir .elementor-shortcode { display: contents; }

/* Cabecera de las secciones que no son Junior: el bloque que sangra al borde va en
   tinta, con la misma diagonal y sin escudo (lo describe la exploración; no lo dibuja).
   Decisión de construcción: 48 px de bloque a la vista. */
.cat-cabeza--seccion .cat-cabeza__franja {
  width: calc(var(--borde) + 48px);
  padding-right: 0;
  background: var(--ink);
}

/* El filete vertical del lateral del artículo usa el ::before de la retícula, que
   Elementor reserva para el fondo de sus contenedores: se devuelve a la retícula. */
.elementor .dd-nota-reticula::before {
  position: static; inset: auto; width: auto; height: auto;
  mix-blend-mode: normal; opacity: 1; border-radius: 0;
}

/* Convenio al pie de la nota: el bloque del plugin es «ancho»; aquí va a la medida de
   columna (728 × 90; 320 × 100 en celular), como en la exploración. */
.elementor .dd-nota__convenio .pauta { max-width: none; margin-left: 0; }
.elementor .dd-nota__convenio .pauta__etiqueta,
.elementor .dd-nota__convenio .pauta__caja { max-width: 728px; }
.elementor .dd-nota__convenio .pauta--ancha .pauta__caja { aspect-ratio: 728 / 90; }
@media (max-width: 767px) { .elementor .dd-nota__convenio .pauta--ancha .pauta__caja { aspect-ratio: 320 / 100; } }

/* Pauta propia centrada en escritorio (≥1024, pedido de Oscar 14-oct). El marco (rótulo «Publicidad» + caja de la
   pieza) se centra en el ancho de su columna; el rótulo queda en el borde izquierdo de la pieza porque el marco
   mide lo mismo que ella. Piezas de 728 px (columna): el marco de la clase dd-pauta-marco--columna (max-width 728,
   pegado a la izquierda) pasa a margin-inline: auto. Piezas de 730 px en un marco ancho (1000): el marco se
   encoge a 732 px (730 + borde) y se centra. Las piezas que llenan el marco (Alcaldía 1920, Gases 2560) no cambian
   de tamaño; los laterales de 350x500 no entran aquí. En celular no cambia nada. */
@media (min-width: 1024px) {
  .elementor .dd-pauta-marco.dd-pauta-marco--columna { margin-inline: auto; }
  .elementor .dd-pauta-marco.dd-pauta-marco--ancha:has(img[width="730"]) { max-width: 732px; margin-inline: auto; }
  /* los mismos marcos cuando los pinta el plugin (pauta por sección, convenio de la nota, columna de la categoría) */
  .elementor .pauta.pauta--columna { margin-inline: auto; }
  .elementor .dd-nota__convenio .pauta { max-width: 728px; margin-inline: auto; }
}

/* 11. QA DE CATEGORÍA Y ARTÍCULO =========================================== */
/* Cabecera de sección: el bloque rojiblanco (o de tinta) va de borde a borde aunque la sección
   no tenga descripción. Filas elásticas arriba y abajo; con descripción no cambia nada. */
@media (min-width: 768px) {
  .elementor .cat-cabeza__fila { grid-template-rows: 1fr auto auto auto 1fr; align-content: stretch; }
  .elementor .cat-cabeza .ruta { grid-row: 2; }
  .elementor .cat-cabeza__titulo { grid-row: 3; }
  .elementor .cat-cabeza__bajada { grid-row: 4; }
}
/* Cabecera de categoría: las rayas (franja) sobresalían 2 px por debajo de la fila (margin-bottom: -2px de categoria.css) y cada
   una dibuja su propio filete negro, así que el filete bajo las rayas quedaba 2 px más abajo que el filete bajo el título y la línea
   se veía partida. Con la franja del mismo alto que la fila, los dos filetes caen en el mismo borde y forman una sola línea. */
@media (min-width: 768px) {
  .elementor .cat-cabeza__franja { margin-bottom: 0; }
}
/* Menú principal: el ítem activo (la sección en la que estás) refuerza el velo blanco con el texto en el naranja del diario. */
.mm .menu__enlace.es-activa,
.mm .menu__enlace[aria-current],
.mm .mega__lista a[aria-current] { color: var(--accent, #FC9901); }
.mm .menu__item--grupo:has(.menu__enlace.es-activa) > .menu__abrir,
.mm .menu__item--grupo:has(.menu__enlace[aria-current]) > .menu__abrir { color: var(--accent, #FC9901); }

/* Plantilla de video: el botón «Ver todos los videos» es un botón de Elementor con colores fijos y sin estado de hover.
   Al pasar el mouse o enfocarlo se llena de tinta con letra blanca (como .boton--tinta del diseño). */
.elementor .elementor-element.dd-vsingle-todos .elementor-button { transition: background-color var(--dur-fast, 150ms) var(--ease-out, ease-out), color var(--dur-fast, 150ms) var(--ease-out, ease-out), border-color var(--dur-fast, 150ms) var(--ease-out, ease-out); }
.elementor .elementor-element.dd-vsingle-todos .elementor-button:hover,
.elementor .elementor-element.dd-vsingle-todos .elementor-button:focus-visible { background-color: var(--ink, #000C24); color: #FFFFFF; border-color: var(--ink, #000C24); }

/* Barra del menú pegada al bajar: logo un poco más grande (26 → 34 px en computador; 32 → 38 px en tableta y celular). */
@media (min-width: 1180px) { .elementor .dd-cabb-barra .dd-cabb-logo-chico { height: 34px; } }
@media (max-width: 1179px) { .elementor .dd-cabb-barra .dd-cabb-logo-chico { height: 38px; } }

/* Menú principal: el ítem activo queda solo con la letra naranja y en negrita, sin el paralelogramo de fondo.
   (Si el desplegable está abierto, conserva el velo suave de «abierto», que no es el de «activo».) */
.elementor .mm .menu__enlace.es-activa::before,
.elementor .mm .menu__enlace[aria-current]::before { background: transparent; }
.elementor .mm .mm__item.abierto > .menu__enlace.es-activa::before,
.elementor .mm .mm__item.abierto > .menu__enlace[aria-current]::before { background: rgb(255 255 255 / .06); }

/* Portada · «Más Deportes» (clase dd-masdep en el widget): la lista de la derecha lleva 7 notas junto a la grande; con foto de 120 px y titulares de
   18 px se partían en 3 y 4 líneas y la lista quedaba 300 px más alta que la nota grande. Ítems más compactos para que las dos columnas se igualen. */
.elementor .dd-masdep .lista-notas__item { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
.elementor .dd-masdep .lista-notas__item:first-child { padding-top: 0; }
.elementor .dd-masdep .lista-notas__titular { margin-bottom: 4px; font-size: 16px; line-height: 22px; }

/* Crédito de los datos: «Datos: Datafactory · [isotipo] WPlay» (convenio de Datafactory con WPlay). El isotipo va a la altura del texto. */
.credito-wplay { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.elementor .credito-wplay .credito-wplay__logo, .credito-wplay .credito-wplay__logo { display: block; flex: none; width: auto !important; max-width: none !important; height: 15px !important; }

/* Búsqueda sin resultados: sin la rejilla vacía (el aviso va en la cabecera). */
body.search-no-results .dd-cat-mas { display: none; }

/* Pauta de Ad Inserter dentro del texto de la nota: etiqueta «Publicidad» por fuera, como el
   resto de la pauta; 40 px de aire (Ad Inserter escribe su margen en línea: hace falta
   !important); y si el bloque llega vacío, no ocupa sitio. */
.elementor .dd-nota-texto .code-block { margin-block: 40px !important; }
.elementor .dd-nota-texto .elementor-widget-container > .code-block:last-child { margin-bottom: 0 !important; }
.elementor .dd-nota-texto .code-block::before {
  content: "Publicidad";
  display: block;
  margin: 0 0 8px;
  font: 400 13px/16px var(--dd-texto, "Inter"), system-ui, sans-serif;
  color: var(--dd-muted, #5A5E6B);
  text-align: left;
}
.elementor .dd-nota-texto .code-block:empty,
.elementor .dd-nota-texto .code-block:not(:has(*)),
.elementor .dd-nota-texto .code-block:has(ins[data-ad-status="unfilled"]) { display: none !important; }

/* Pauta sin pieza: no se muestra (nota, categoría, búsqueda, portada). Solo presentación; si llega una
   pieza el hueco reaparece solo.
   - Marco propio (.dd-pauta-marco o aside.pauta) sin imagen, iframe, ins, picture ni video: se oculta entero,
     etiqueta «Publicidad» incluida. Al salir del flujo no deja hueco.
   En el editor de Elementor no se oculta nada: todo espacio se ve y se puede seleccionar.
   - Bloques de Ad Inserter (AdSense, MGID): los oculta js/cromo.js (clase dd-sin-pieza) cuando la tag no
     trae pieza; con alto 0 y no con display:none, para que la tag aún pueda pintar el hueco. */
body:not(.elementor-editor-active) .dd-pauta-marco:not(:has(img, iframe, ins, picture, video)),
body:not(.elementor-editor-active) aside.pauta:not(:has(img, iframe, ins, picture, video)) { display: none !important; }
.elementor .dd-nota-texto .code-block.dd-sin-pieza {
  height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  overflow: hidden !important; border: 0 !important;
}
.elementor .dd-nota-texto .code-block.dd-sin-pieza::before { display: none !important; }

/* En la nota de Junior, los kickers grises de «Lo más leído» van con el paralelogramo naranja,
   como en la exploración (el rojo es para las piezas de la nota). */
body.dd-pagina-junior.single-post .mas-leido .kicker--gris::before { background: var(--dd-accent, #FC9901); }

/* Nunca dos pautas a la vista en las secciones generales y en la búsqueda (a dos columnas).
   Sin la banda de Junior, la ancha de la sección, la lateral y la de la rejilla caen en ~1450 px:
   no hay sitio para la lateral lejos de las otras dos. La ancha repite la pieza del mismo
   patrocinador que la de la rejilla, así que en escritorio se queda una sola (la de la rejilla).
   En una columna (≤1023) no se cruzan y la ancha sigue. Junior no cambia. */
@media (min-width: 1024px) {
  body.archive:not(.dd-pagina-junior) .dd-cat-convenio,
  body.search .dd-cat-convenio { display: none; }
}

/* La flecha «→» no está en los subconjuntos de Inter servidos: fuente del sistema, como en la exploración. */
.elementor .dd-enlace-seccion::after,
.enlace-seccion::after,
.enlace-dato::after { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* 12. PÁGINAS LEGALES ([ddh_legal], plantillas «Legal · archivo» y «Legal · nota») ==========
   Tipografía del cuerpo de la nota (css/articulo.css: Inter 19/32 tinta, H2 Archivo 600 28/34 al 90 %;
   18/30 y 23/28 en celular). Columna de texto de 680 px como máximo, índice fijo a la izquierda
   en computador y arriba en celular. */
.ddh-legal { padding: 32px 0 96px; color: var(--dd-ink, #000C24); }
.ddh-legal__ruta ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none;
  font: 400 14px/20px var(--dd-texto, "Inter"), system-ui, sans-serif; color: var(--dd-muted, #5A5E6B); }
.ddh-legal__ruta li + li::before { content: "›" / ""; margin-right: 8px; }
.ddh-legal__ruta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ddh-legal__ruta [aria-current] { color: var(--dd-ink, #000C24); }
.ddh-legal__reticula { display: grid; grid-template-columns: 240px minmax(0, 680px); column-gap: 64px; justify-content: center; align-items: start; }
.ddh-legal__indice { position: sticky; top: calc(var(--dd-barra-fin, 72px) + 24px); padding-top: 12px; border-top: 2px solid var(--dd-ink, #000C24); }
.ddh-legal__indice-titulo { margin: 0 0 12px; font: 600 14px/16px var(--dd-texto, "Inter"), system-ui, sans-serif; letter-spacing: .02em; }
.ddh-legal__indice ol { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ddh-legal__indice a { display: flex; align-items: center; min-height: 44px; padding: 0; font: 400 15px/20px var(--dd-texto, "Inter"), system-ui, sans-serif; color: var(--dd-texto-2, #3D4250); border-bottom: 1px solid var(--dd-line, #E7E8EC); }
.ddh-legal__indice a:hover { color: var(--dd-ink, #000C24); text-decoration: underline; text-underline-offset: 3px; }
.ddh-legal__titulo { margin: 0; font: 700 40px/48px var(--dd-display, "Archivo"), system-ui, sans-serif; font-stretch: 82%; letter-spacing: -.01em; text-wrap: balance; }
.ddh-legal__fecha { margin: 12px 0 0; font: 400 14px/20px var(--dd-texto, "Inter"), system-ui, sans-serif; color: var(--dd-muted, #5A5E6B); }
.ddh-legal__cuerpo { margin-top: 32px; font: 400 19px/32px var(--dd-texto, "Inter"), system-ui, sans-serif; overflow-wrap: break-word; }
.ddh-legal__cuerpo > * { margin: 0; }
.ddh-legal__cuerpo > * + * { margin-top: 24px; }
.ddh-legal__cuerpo h2 { margin-top: 48px; font: 600 28px/34px var(--dd-display, "Archivo"), system-ui, sans-serif; font-stretch: 90%; letter-spacing: -.01em; text-wrap: balance; }
.ddh-legal__cuerpo h2 + * { margin-top: 12px; }
.ddh-legal__cuerpo ul { padding-left: 24px; }
.ddh-legal__cuerpo li + li { margin-top: 8px; }
.ddh-legal__cuerpo a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ddh-legal__cuerpo a:hover { text-decoration-thickness: 2px; }
/* Recuadro del borrador (es un texto para revisión del abogado) y los [huecos] por completar. */
.ddh-legal__cuerpo .ddh-aviso-borrador { padding: 16px 20px; background: #FFF6E5; border-left: 4px solid var(--dd-accent, #FC9901); font-size: 16px; line-height: 26px; }
.ddh-legal__cuerpo .ddh-aviso-borrador > * { margin: 0; }
.ddh-legal__cuerpo mark.ddh-pendiente { padding: 0 2px; background: #FFE3A8; color: var(--dd-ink, #000C24); border-radius: 2px; }
/* La tabla de cookies, de verdad y desplazable en celular. */
.ddh-legal__cuerpo .wp-block-table { overflow-x: auto; }
.ddh-legal__cuerpo table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.ddh-legal__cuerpo th, .ddh-legal__cuerpo td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--dd-line, #E7E8EC); }
.ddh-legal__cuerpo thead th { font-weight: 600; background: var(--dd-band, #F6F7F9); border-bottom: 2px solid var(--dd-ink, #000C24); }
@media (max-width: 1023px) {
  .ddh-legal__reticula { grid-template-columns: minmax(0, 1fr); row-gap: 32px; max-width: 680px; margin: 0 auto; }
  .ddh-legal__indice { position: static; order: -1; }
}
@media (max-width: 767px) {
  .ddh-legal { padding: 24px 0 64px; }
  .ddh-legal__titulo { font-size: 32px; line-height: 40px; }
  .ddh-legal__cuerpo { font-size: 18px; line-height: 30px; }
  .ddh-legal__cuerpo h2 { margin-top: 40px; font-size: 23px; line-height: 28px; }
  .ddh-legal__cuerpo table { min-width: 560px; }
}

/* 13. BLOQUE «EN TU WHATSAPP» (clases dd-wa-*, wordpress/v4/wa-classes.php) ===============
   La tarjeta, el título, el texto y el botón son elementos V4 con clases globales (se editan en Elementor).
   Aquí solo lo que una clase no expresa: el adorno de anillos concéntricos (pseudo-elemento ::after; el
   ::before de los contenedores V4 es de Elementor) y el foco naranja sobre la tinta. El bloque ya no lleva la clase
   antigua «dd-whatsapp» (su regla de css/exploracion.css ponía una raya y 16 px de relleno que pisaban a la clase). */
.elementor .dd-wa { --ddh-foco: var(--dd-accent, #FC9901); }
.elementor .dd-wa > * { position: relative; z-index: 1; }
.elementor .dd-wa::after {
  content: ""; position: absolute; z-index: 0; right: -84px; top: -84px; width: 240px; height: 240px; border-radius: 50%;
  background: repeating-radial-gradient(circle at center, transparent 0 21px, rgb(255 255 255 / .07) 21px 22px);
  pointer-events: none;
}
.elementor .dd-wa__boton { text-decoration: none; transition: background-color var(--dur-fast, 150ms) var(--ease-out, ease-out); }
.elementor .dd-wa__boton:hover { text-decoration: none; }

/* 8. MOVIMIENTO REDUCIDO ================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Pauta: piezas ===========================================================
   Portada: la pieza del convenio (pauta 1, Gases del Caribe) la pinta el widget
   dd-convenio del plugin, sin clase ni medidas en la imagen: aquí se ajusta a su
   caja sin deformarse. Con pieza, la caja toma el alto de la imagen (su
   proporción real; 1000 × 100 mientras carga), en escritorio y en celular: el
   widget no tiene pieza de celular y la caja de 320 × 100 dejaba 74 px vacíos.
   Las pautas 2–9 son elementos V4 (clases dd-pieza* y el alto de cada caja en
   su estilo local): no dependen de este bloque. */
body.home .elementor .pauta[data-dd-pauta="1"] .pauta__caja:has(img) { aspect-ratio: auto; height: auto; }
/* Pauta 2 (Gecelca) de la portada: el mismo aire debajo que encima (64 px, el padding-top que le da
   css/exploracion.css), en el bloque de la pauta y no en lo que venga después: así se sostiene si
   cambia el orden (hoy le sigue la banda de YouTube, que la dejaba pegada). */
.elementor .dd-bloque-pauta { padding-bottom: 64px; }

/* Qué pieza se ve en cada ancho lo decide el plugin (≥1.0.9: .pauta__pieza--escritorio / --movil,
   con su display): aquí no se toca display, solo el tamaño de la pieza de escritorio. */
body.home .elementor .pauta[data-dd-pauta="1"] .pauta__caja img:is(.pauta__pieza--escritorio, :not([class*="pauta__pieza"])) { width: 100%; height: auto; aspect-ratio: auto 1000 / 100; object-fit: contain; }

/* Logo de WPlay en la tira de partidos (convenio de Datafactory): versión completa para fondo oscuro, a la derecha del rótulo, sin interceptar el clic del selector. */
.tira__convenio { display: flex; align-items: center; margin-left: 14px; pointer-events: none; }
.elementor .tira__convenio img { display: block; width: auto !important; max-width: none !important; height: 24px !important; }
@media (max-width: 767px) { .tira__convenio { margin-left: 10px; } .elementor .tira__convenio img { width: 20px !important; height: 24px !important; object-fit: cover; object-position: left center; } }

/* Crédito sobre fondo oscuro con el logo completo de WPlay. */
.elementor .credito-wplay .credito-wplay__logo--completo { height: 22px !important; width: auto !important; }

/* Crédito de Datafactory fijo en la tira, a la izquierda de las flechas (solo donde hay flechas). */
.tira__datos { display: none; }
@media (min-width: 768px) {
	/* Espacio propio a la derecha de la lista (crédito + flechas): ningún partido pasa por debajo del crédito. */
	.tira__lista { margin-right: calc(var(--borde) + 190px); }
	html.dd-js .tira__marco::after { display: none; }
}
@media (min-width: 768px) { .tira__datos { display: block; position: absolute; top: 50%; right: calc(var(--borde) + 112px); z-index: 3; transform: translateY(-50%); font: 400 13px/16px var(--texto); color: var(--on-dark-muted); text-align: right; white-space: nowrap; pointer-events: none; } }

/* Crédito de Datafactory y WPlay arriba del bloque de Posiciones y TV, a la derecha del título. */
.posiciones__credito { margin: 0 0 6px; font: 400 15px/20px var(--texto); color: var(--on-dark-muted); white-space: nowrap; }
.posiciones__credito .credito-wplay { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.elementor .posiciones__credito .credito-wplay__logo--completo { height: 30px !important; width: auto !important; }
.posiciones__credito .credito-wplay { gap: 8px; }

/* Tira de partidos: [lista] [‹] [›] [Datos: Datafactory]. El crédito queda al borde derecho y las flechas se corren a su izquierda. */
@media (min-width: 768px) {
	.tira__datos { right: var(--borde); text-align: left; }
	.tira__flecha--der { right: calc(var(--borde) + 80px); }
	.tira__flecha--izq { right: calc(var(--borde) + 132px); }
	.tira__lista { margin-right: calc(var(--borde) + 190px); }
}

/* Sin la línea blanca bajo el título de Posiciones y TV. */
.posiciones .seccion__cabeza--oscura { border-bottom: 0; }

/* Crédito de Datafactory bajo la tira de partidos en celular. */
.tira__datos-movil { display: none; }
@media (max-width: 767px) { .tira__datos-movil { display: block; margin: 0; padding: 4px 16px 6px; background: var(--ink-2); text-align: left; font: 400 13px/16px var(--texto); color: var(--on-dark-muted); } }

/* «Columnistas» en la portada: miniatura a la izquierda de cada columna (144×108, 96×72 en móvil). */
.ddh-columnistas .lista-texto__item--foto { display: grid; grid-template-columns: 144px minmax(0, 1fr); column-gap: 20px; align-items: center; }
.ddh-columnistas .lista-texto__foto { display: block; width: 144px; height: 108px; overflow: hidden; background: var(--band, #F6F7F9); }
.elementor .ddh-columnistas .lista-texto__foto img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; }
@media (max-width: 767px) {
	.ddh-columnistas .lista-texto__item--foto { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; }
	.ddh-columnistas .lista-texto__foto { width: 96px; height: 72px; }
}

/* Programación de TV de futbolenlatv con el diseño del diario (tema oscuro de la banda). */
.tv--ftv .tv-ftv__panel { max-height: 560px; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .35) transparent; }
.tv--ftv .tv-ftv__panel[aria-busy="true"] { opacity: .5; }
.tv--ftv .ftv__dia { margin: 0 0 8px; }
.tv--ftv .ftv__dia-titulo { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 0; background: var(--bar, #05122E); border-bottom: 1px solid rgb(255 255 255 / .35); font: 700 13px/16px var(--texto); letter-spacing: .06em; text-transform: uppercase; color: #FFFFFF; }
.tv--ftv .ftv__lista { margin: 0; padding: 0; list-style: none; }
.tv--ftv .ftv__fila { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / .14); }
.tv--ftv .ftv__hora { font: 700 18px/22px var(--titulo, var(--texto)); color: #FFFFFF; white-space: nowrap; }
.tv--ftv .ftv__m { font: 400 12px/16px var(--texto); color: var(--on-dark-muted); }
.tv--ftv .ftv__comp { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 12px/16px var(--texto); letter-spacing: .04em; text-transform: uppercase; color: var(--on-dark-muted); }
.elementor .tv--ftv .ftv__liga { flex: none; display: block; width: 20px !important; height: 20px !important; max-width: none !important; object-fit: contain; border-radius: 2px; }
.tv--ftv .ftv__partido { margin: 0; font: 600 15px/22px var(--texto); color: #FFFFFF; }
.tv--ftv .ftv__vs { font-weight: 400; color: var(--on-dark-muted); }
.tv--ftv .ftv__canal { margin: 4px 0 0; font: 400 14px/20px var(--texto); color: var(--on-dark-muted); }
.tv--ftv .ftv__aviso { margin: 8px 0; font: 400 15px/22px var(--texto); color: var(--on-dark-muted); }
.tv--ftv .tv__nota { margin: 12px 0 0; }
.tv--ftv .tv-ftv__elegir { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.tv--ftv .tv-ftv__elegir[hidden] { display: none; }
.tv--ftv .tv-ftv__etiqueta { flex: none; font: 600 14px/20px var(--texto); color: var(--on-dark-muted); }
.tv--ftv .tv-ftv__select { flex: 1 1 auto; min-width: 0; min-height: 44px; margin: 0; padding: 0 40px 0 14px; border: 1px solid rgb(255 255 255 / .3); border-radius: 2px; color-scheme: dark; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; color: #FFFFFF; font: 600 15px/20px var(--texto); appearance: none; -webkit-appearance: none; cursor: pointer; }
.tv--ftv .tv-ftv__select:hover { border-color: #FFFFFF; }
/* Foco: borde blanco más marcado en vez del contorno naranja (Chrome lo pinta también al abrirlo con el ratón). */
.tv--ftv .tv-ftv__select:focus, .tv--ftv .tv-ftv__select:focus-visible { outline: none; border-color: #FFFFFF; box-shadow: 0 0 0 1px #FFFFFF; }

/* Crédito Datafactory · WPlay en la fila de pestañas de Posiciones (a la derecha); en celular, encima de las pestañas. */
.posiciones__datos { position: relative; }
.posiciones__credito--fila { position: absolute; top: 0; right: 0; z-index: 1; display: flex; align-items: center; height: 44px; margin: 0; }
@media (max-width: 767px) {
	.posiciones__credito--fila { position: static; height: auto; margin: 0 0 12px; }
}

/* Escudos de Datafactory para los clubes colombianos en la programación de TV. */
.tv--ftv .ftv__equipo--escudo { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.elementor .tv--ftv .ftv__escudo { flex: none; display: block; width: 20px !important; height: 20px !important; max-width: none !important; object-fit: contain; }
.tv--ftv .ftv__inicial { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgb(255 255 255 / .15); font: 700 11px/1 var(--texto); color: #FFFFFF; }

/* Escritorio: el panel de programación ocupa todo el alto de la columna, igual que la tabla de Datafactory al lado.
   height: 0 + min-height: 100% hace que el panel no estire la fila de la retícula (la manda la tabla) y llene su alto. */
@media (min-width: 1024px) {
	.posiciones__reticula > .tv--ftv { display: flex; flex-direction: column; height: 0; min-height: 100%; }
	.tv--ftv .tv-ftv__panel { flex: 1 1 auto; min-height: 0; max-height: none; }
}