/* ==========================================================================
   Diario Deportes · bloques V4
   El aspecto de los bloques lo ponen los estilos globales del sitio (las
   clases de la exploración). Aquí solo va lo que es del plugin.
   ========================================================================== */

/* La caja de Elementor alrededor del bloque no ocupa lugar en la retícula:
   el marcado del bloque queda como hijo directo del contenedor. Solo en el
   sitio público (en el editor la clase no se pone). */
.dd-fundido { display: contents; }

/* Avisos que solo ve quien edita. */
.dd-panel-aviso {
  padding: 16px;
  border: 1px dashed #9C5F0A;
  background: #FFF8EE;
  color: #000C24;
  font: 400 14px/20px Inter, system-ui, sans-serif;
}

/* Pauta por sección: cada pieza en su ancho. La oculta no se descarga
   (loading="lazy"). */
.pauta__pieza { display: block; max-width: 100%; height: auto; margin: 0 auto; }
/* Interruptor, no estilo: va con !important porque las reglas del tema
   para el marco de pauta (p. ej. `.pauta__caja > a { display: block }`)
   pesan más que una clase y dejaban las dos piezas a la vista. */
@media (max-width: 767px) {
  .pauta .pauta__pieza--escritorio, .pauta .pauta__enlace--escritorio { display: none !important; }
}
@media (min-width: 768px) {
  .pauta .pauta__pieza--movil, .pauta .pauta__enlace--movil { display: none !important; }
}
/* La pieza de celular a su tamaño (300 px), centrada: nunca estirada. */
.pauta .pauta__pieza--movil { width: auto !important; max-width: min(300px, 100%) !important; height: auto !important; margin-inline: auto !important; }
.pauta .pauta__enlace--movil { display: block; width: min(300px, 100%); max-width: 100%; margin-inline: auto; }
.pauta .pauta__enlace--movil .pauta__pieza--movil { width: 100% !important; }
/* En celular, el marco toma el alto de la pieza (300×250), no la
   proporción del banner de escritorio. */
@media (max-width: 767px) {
  .pauta .pauta__caja:has(.pauta__pieza--movil) { aspect-ratio: auto !important; height: auto !important; }
}

/* «No se pudo actualizar» de la tira: discreto, junto al rótulo. El color y
   la letra los puede afinar el tema hijo. */
.tira__aviso { margin: 0 0 0 8px; font: italic 400 13px/16px Inter, system-ui, sans-serif; color: inherit; opacity: .85; }
.tira__aviso:empty { display: none; }

/* ==========================================================================
   Selector de calendario de la tira (1.0.9): desplegable propio, oscuro,
   al estilo del mega menú. Rótulos en Archivo; opciones en Inter 400; la
   elegida en 600 con una marca, no solo con color.
   ========================================================================== */
.tira__form[hidden] { display: none; }
.tira__ir {
  position: relative; z-index: 3; margin-left: 8px; min-height: 44px; padding: 0 12px;
  background: var(--accent, #FC9901); color: var(--ink, #000C24); border: 0;
  font: 600 13px/16px var(--texto, Inter, system-ui, sans-serif);
}
.tira__disparador {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.tira__disparador:focus { outline: none; }
.tira__rotulo:has(.tira__disparador:focus-visible) .tira__titulo {
  outline: 3px solid var(--accent, #FC9901);
  outline-offset: 4px;
}
.con-selector:has(.tira__disparador[aria-expanded="true"]) .tira__comp::after { transform: rotate(225deg); margin-bottom: -1px; }

.tira__panel {
  position: absolute;
  z-index: 90;
  width: 288px;
  max-width: calc(100vw - 32px);
  max-height: min(70vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0;
  background: var(--ink, #000C24);
  color: #FFFFFF;
  border-top: 2px solid var(--accent, #FC9901);
  box-shadow: 0 24px 48px rgb(0 12 36 / .32);
  animation: dd-cal-entra var(--dur-fast, 150ms) var(--ease-out, ease-out);
}
.tira__panel[hidden] { display: none; }
@keyframes dd-cal-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tira__opciones:focus { outline: none; }
.tira__opciones:focus-visible { box-shadow: inset 0 0 0 2px rgb(255 255 255 / .16); }
.tira__grupo + .tira__grupo { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgb(255 255 255 / .1); }
.tira__grupo-rotulo {
  padding: 8px 16px 4px;
  font: 600 12px/16px var(--display, Archivo, system-ui, sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-dark-muted, #A6ADBD);
}
.tira__opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  font: 400 15px/20px var(--texto, Inter, system-ui, sans-serif);
  color: #FFFFFF;
  cursor: pointer;
}
.tira__opcion-marca { width: 16px; height: 16px; flex: none; visibility: hidden; color: var(--accent, #FC9901); }
.tira__opcion[aria-selected="true"] { font-weight: 600; }
.tira__opcion[aria-selected="true"] .tira__opcion-marca { visibility: visible; }
.tira__opcion.es-activa { background: var(--ink-2, #1A2540); box-shadow: inset 3px 0 0 var(--accent, #FC9901); }
@media (prefers-reduced-motion: reduce) {
  .tira__panel { animation: none; }
}

/* ==========================================================================
   Diario Deportes en YouTube (dd-youtube, 1.0.10)
   Banda tinta, como la de Pelotas y Letras. Títulos en Archivo; pesos de la
   escala (titular grande 600, tarjetas 500, nada en 800). Todo el texto
   sobre tinta pasa 4,5:1 (blanco 19:1; gris #A6ADBD 8,3:1).
   ========================================================================== */
.dd-yt {
  --yt-ink: var(--ink, #000C24);
  --yt-ink-2: var(--ink-2, #1A2540);
  --yt-gris: var(--on-dark-muted, #A6ADBD);
  --yt-acento: var(--accent, #FC9901);
  --foco: var(--yt-acento);
  padding: 56px 0 64px;
  background: var(--yt-ink);
  color: #FFFFFF;
}
.dd-yt :focus-visible { outline: 3px solid var(--yt-acento); outline-offset: 3px; }
.dd-yt a:not(.boton) { color: inherit; text-decoration: none; }
.dd-yt .boton--claro { background: #FFFFFF; color: var(--yt-ink); }
.dd-yt p, .dd-yt h2, .dd-yt h3 { margin: 0; }
.dd-yt .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dd-yt__reticula {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "cabeza cabeza" "destacado lista";
  gap: 32px var(--gap, 24px);
}
.dd-yt__cabeza {
  grid-area: cabeza;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #FFFFFF;
}
.dd-yt .dd-yt__kicker { flex-basis: 100%; color: #FFFFFF; }
.dd-yt .dd-yt__titulo {
  margin-right: auto;
  font: 700 40px/44px var(--display, Archivo, system-ui, sans-serif);
  font-stretch: 82%;
  letter-spacing: -.01em;
  color: #FFFFFF;
}
.dd-yt__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.dd-yt__canal {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 600 15px/20px var(--texto, Inter, system-ui, sans-serif);
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px;
}
.dd-yt__canal:hover { text-decoration-thickness: 2px !important; }

/* El video grande: fachada 16:9, el reproductor llega al pulsar. */
.dd-yt__destacado { grid-area: destacado; min-width: 0; }
.dd-yt__reproductor {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000000;
}
.dd-yt__reproductor img,
.dd-yt__reproductor iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.dd-yt__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgb(0 12 36 / 0) 50%, rgb(0 12 36 / .45));
}
.dd-yt__play svg {
  width: 72px;
  height: 72px;
  padding: 18px 16px 18px 20px;
  background: var(--yt-acento);
  color: var(--yt-ink);
  border-radius: 50%;
  transition: transform var(--dur-fast, 150ms) var(--ease-out, ease-out);
}
.dd-yt__play:hover svg { transform: scale(1.06); }
.dd-yt__play:focus-visible { outline-offset: -6px; }
.dd-yt__texto { padding-top: 16px; }
.dd-yt .dd-yt__titular { font: 600 26px/32px var(--display, Archivo, system-ui, sans-serif); color: #FFFFFF; }
.dd-yt .dd-yt__titular--chico {
  font: 500 16px/21px var(--display, Archivo, system-ui, sans-serif);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 63px; /* 3 líneas: corta aunque line-clamp no se aplique */
}
.dd-yt__titular a:hover { text-decoration: underline; text-underline-offset: 4px; }
.dd-yt__meta { margin-top: 8px; font: 400 14px/20px var(--texto, Inter, system-ui, sans-serif); color: var(--yt-gris); }

/* Insignias: «En vivo» en naranja con punto; «Transmisión» con filete. */
.dd-yt__insignia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px !important;
  padding: 2px 8px;
  border: 1px solid rgb(255 255 255 / .4);
  font: 600 12px/16px var(--texto, Inter, system-ui, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.dd-yt__insignia--vivo { background: var(--yt-acento); border-color: var(--yt-acento); color: var(--yt-ink); }
.dd-yt__insignia--vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yt-ink); }

/* Los siguientes: lista con miniatura a la izquierda. */
.dd-yt__lista { grid-area: lista; margin: 0; padding: 0; list-style: none; min-width: 0; }
.dd-yt__lista > li + li { border-top: 1px solid rgb(255 255 255 / .12); }
.dd-yt__tarjeta {
  position: relative;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 12px 0; /* 24 px entre una tarjeta y la otra, con el filete al medio */
}
.dd-yt__lista > li:first-child .dd-yt__tarjeta { padding-top: 0; }
.dd-yt__imagen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--yt-ink-2); }
.dd-yt__imagen img { width: 100%; height: 100%; object-fit: cover; }
.dd-yt__icono {
  position: absolute; left: 8px; bottom: 8px;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  background: rgb(0 12 36 / .8); color: #FFFFFF; border-radius: 50%;
}
.dd-yt__icono svg { width: 14px; height: 14px; }
/* Toda la tarjeta lleva al video (enlace estirado). */
.dd-yt__tarjeta .dd-yt__titular a::after { content: ""; position: absolute; inset: 0; }
.dd-yt__tarjeta .dd-yt__insignia { margin-bottom: 6px !important; }
.dd-yt__tarjeta:hover .dd-yt__titular a { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1023px) {
  .dd-yt__reticula { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cabeza" "destacado" "lista"; }
}
/* Celular: los siguientes en un carril que se desliza con el dedo. */
@media (max-width: 767px) {
  .dd-yt { padding: 40px 0 48px; }
  .dd-yt .dd-yt__titulo { font-size: 30px; line-height: 34px; }
  .dd-yt .dd-yt__titular { font-size: 22px; line-height: 28px; }
  .dd-yt .dd-yt__titular--chico { font-size: 15px; line-height: 20px; max-height: 60px; }
  .dd-yt__lista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 72%);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0 16px;
    overscroll-behavior-x: contain;
    padding-bottom: 8px;
  }
  .dd-yt__lista > li { scroll-snap-align: start; }
  .dd-yt__lista > li + li { border-top: 0; }
  .dd-yt__tarjeta, .dd-yt__lista > li:first-child .dd-yt__tarjeta { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dd-yt__play svg { transition: none; }
}

/* ==========================================================================
   Tira de partidos (1.0.12): más aire y la franja del Junior a la derecha.
   Va sobre el CSS del tema (exploracion.css) con un selector más específico.
   Los colores no cambian.
   ========================================================================== */
/* +8 px arriba y abajo: 64 → 80 en escritorio, 56 → 72 en celular. La
   diagonal del rótulo sale de la misma altura, así que cubre la tira entera.
   Es CSS: la altura está desde el primer pintado, sin saltos. */
section.tira[data-dd-tira] { --tira-alto: 80px; --tira-corte: calc(var(--tira-alto) * var(--slant-k, .2679)); }
@media (max-width: 767px) {
  section.tira[data-dd-tira] { --tira-alto: 72px; }
}
/* Las flechas, centradas en la nueva altura. */
section.tira[data-dd-tira] .tira__flecha { top: calc((var(--tira-alto) - 44px) / 2); }

/* La franja rojiblanca del Junior, del borde izquierdo (pegada a la
   diagonal del rótulo) al derecho de su celda. Reemplaza al filete
   separador de esa celda, así no quedan dos rayas juntas; y el contenido
   se corre lo que mide la franja para no quedar debajo. */
section.tira[data-dd-tira] .partido--junior { border-right-color: transparent; }
section.tira[data-dd-tira] .partido--junior::before { inset: 0 0 0 auto; }
section.tira[data-dd-tira] .partido--junior .partido__enlace { padding-right: calc(16px + var(--franja-ancho, 6px)); }
@media (max-width: 767px) {
  section.tira[data-dd-tira] .partido--junior .partido__enlace { padding-right: calc(12px + var(--franja-ancho, 6px)); }
}

/* Tira (1.0.13): un solo tono. Antes el fondo era #1A2540 y la celda del
   Junior le sumaba un velo blanco del 4 %; en la diagonal del rótulo se veía
   un triángulo de otro azul. Ahora el velo va en toda la tira (#232E48 =
   #1A2540 + 4 % de blanco) y las celdas son transparentes. El degradado de
   la derecha y las flechas usan el mismo tono: sin costuras. */
section.tira[data-dd-tira] { --tira-fondo: #232E48; background: var(--tira-fondo); }
section.tira[data-dd-tira] .partido,
section.tira[data-dd-tira] .partido--junior { background: transparent; }
section.tira[data-dd-tira] .tira__flecha { background: var(--tira-fondo); }
section.tira[data-dd-tira] .tira__flecha:hover:not([aria-disabled="true"]) { background: var(--ink, #000C24); }
html.dd-js section.tira[data-dd-tira] .tira__marco::after { background: linear-gradient(90deg, rgb(35 46 72 / 0), var(--tira-fondo) 55%); }

/* ==========================================================================
   Pizarra deportiva (dd-pizarra, 1.0.14). Lateral claro: kicker con la
   barra naranja, título en Archivo, la imagen al ancho del lateral.
   ========================================================================== */
.pizarra .pizarra__titulo { margin: 0 0 4px; }
.pizarra .pizarra__fecha { margin: 0 0 12px; }
.pizarra__abrir { position: relative; display: block; line-height: 0; }
.pizarra__abrir:focus-visible { outline: 3px solid var(--ink, #000C24); outline-offset: 3px; }
.pizarra__imagen { display: block; width: 100%; height: auto; border: 1px solid var(--line, #E7E8EC); }
.pizarra__lupa {
  position: absolute; right: 8px; bottom: 8px;
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  background: rgb(0 12 36 / .85); color: #FFFFFF;
  font: 600 13px/16px var(--texto, Inter, system-ui, sans-serif);
}
.pizarra__abrir:hover .pizarra__lupa { background: var(--ink, #000C24); }
.pizarra .pizarra__mas { margin-top: 8px; }
.pizarra__dialogo {
  width: auto; max-width: min(100vw - 32px, 960px); max-height: calc(100vh - 32px);
  padding: 48px 0 0; border: 0; background: transparent; overflow: auto;
}
.pizarra__dialogo::backdrop { background: rgb(0 12 36 / .88); }
.pizarra__dialogo img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.pizarra__cerrar {
  position: absolute; top: 0; right: 0;
  min-width: 44px; min-height: 44px; padding: 0 16px;
  background: #FFFFFF; color: var(--ink, #000C24); border: 0;
  font: 600 15px/20px var(--texto, Inter, system-ui, sans-serif); cursor: pointer;
}
.pizarra__cerrar:focus-visible { outline: 3px solid var(--accent, #FC9901); outline-offset: 3px; }

/* ==========================================================================
   «Un día como hoy» (dd-un-dia-como-hoy, 1.0.17): tarjeta clara con el año
   grande y una línea de tiempo. Pesos de la escala; textos ink sobre blanco
   (≥ 16:1), grises #4A4F5E sobre blanco (8,2:1).
   ========================================================================== */
.dd-ef {
  position: relative;
  overflow: hidden;
  padding: 24px;
  background: #FFFFFF;
  background-image: repeating-linear-gradient(0deg, rgb(0 12 36 / .035) 0 1px, transparent 1px 12px);
  border: 1px solid var(--line, #E7E8EC);
  border-top: 3px solid var(--ink, #000C24);
  color: var(--ink, #000C24);
}
.dd-ef :focus-visible { outline: 3px solid var(--ink, #000C24); outline-offset: 3px; }
.dd-ef p, .dd-ef h2, .dd-ef ol { margin: 0; }
.dd-ef a { color: inherit; text-decoration: none; }
.dd-ef .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dd-ef .dd-ef__kicker { color: var(--ink, #000C24); }
.dd-ef__fecha { margin-left: 8px; font-weight: 400; letter-spacing: .04em; text-transform: none; color: #4A4F5E; }
.dd-ef__hero {
  margin: 8px 0 12px -4px;
  font: 700 112px/1 var(--display, Archivo, system-ui, sans-serif);
  font-stretch: 78%;
  letter-spacing: -.02em;
  color: var(--ink, #000C24);
}
.dd-ef__hero i { font-style: normal; color: var(--accent, #FC9901); }

.dd-ef__linea { position: relative; list-style: none; padding: 0; }
.dd-ef__punto { position: relative; padding: 0 0 20px 32px; }
.dd-ef__punto:last-child { padding-bottom: 4px; }
.dd-ef__punto::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 12px; height: 12px; box-sizing: border-box;
  border-radius: 50%; background: #FFFFFF; border: 2px solid var(--accent, #FC9901); z-index: 1;
}
/* La línea naranja va de un punto al siguiente y termina en el último. */
.dd-ef__punto:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 9px; bottom: -9px; width: 2px; background: var(--accent, #FC9901); }
.dd-ef__punto:first-child::before { background: var(--accent, #FC9901); }
.dd-ef__rotulo {
  display: block; margin-bottom: 4px;
  font: 600 13px/16px var(--texto, Inter, system-ui, sans-serif);
  letter-spacing: .08em; text-transform: uppercase; color: #4A4F5E;
}
.dd-ef__texto { font: 500 18px/24px var(--display, Archivo, system-ui, sans-serif); color: var(--ink, #000C24); overflow-wrap: anywhere; }
.dd-ef__texto + .dd-ef__texto { margin-top: 4px; }

.dd-ef__pie { display: flex; flex-direction: column; align-items: flex-start; margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--line, #E7E8EC); }
.dd-ef__nota, .dd-ef__mas {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 600 15px/20px var(--texto, Inter, system-ui, sans-serif);
  text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px;
}
.dd-ef__nota:hover, .dd-ef__mas:hover { text-decoration-thickness: 2px !important; }
.dd-ef__flecha { width: 16px; height: 16px; transition: transform var(--dur-fast, 150ms) var(--ease-out, ease-out); }
.dd-ef__mas:hover .dd-ef__flecha { transform: translateX(3px); }
.dd-ef__marca { position: absolute; right: -24px; bottom: -28px; width: 140px; height: 140px; border-radius: 50%; background: var(--ink, #000C24); opacity: .06; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .dd-ef__flecha { transition: none; } }

/* Pizarra (1.0.18): en tableta la columna es ancha y la imagen vertical se
   estiraba (1539 px de alto a 1023). Se limita y se centra; en celular ocupa
   la columna. La imagen grande del <dialog> no se toca. */
@media (min-width: 481px) and (max-width: 1023px) {
  .pizarra__abrir { max-width: 420px; margin-inline: auto; }
}
.pizarra .pizarra__imagen { height: auto; }