/*
Theme Name: Deporte Romano
Theme URI: https://deporteromano.es
Author: Deporte Romano
Description: Tema periodístico deportivo para Deporte Romano, plataforma de noticias de deporte de Mérida. Cabecera con cinta de titulares, portada con destacada + secciones por deporte, y bloque de "Lo más leído". Construido mobile-first.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: deporte-romano
*/

/* ==========================================================================
   0. CÓMO LEER ESTE ARCHIVO (mobile-first)
   ==========================================================================
   Los estilos "sueltos" (sin media query) son los de MÓVIL — el punto de
   partida. Cada @media (min-width: ...) AÑADE o SUSTITUYE reglas para
   pantallas más grandes, nunca al revés. Dos puntos de corte:
     --bp-sm: 640px  → tablet / móvil grande (menú horizontal, rejillas 2 cols)
     --bp-lg: 960px  → escritorio (rejillas 4 cols, hero a 2 columnas, footer a 3)
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES DE MARCA
   ========================================================================== */

:root {
    /* Paleta base — neutro frío moderno, con la herencia romana (azul +
       dorado) como acento, en vez de protagonista de todo el fondo */
    --dr-paper:        #F4F5F7;
    --dr-paper-alt:     #E9EBEF;
    --dr-cabecera:      #0F1B2E;
    --dr-ink:          #0F1B2E;
    --dr-ink-soft:      #3D4B63;
    --dr-blue:          #1B4F91;
    --dr-blue-light:     #4C86D6;
    --dr-muted:         #667085;
    --dr-line:          #E3E6EB;

    /* Acento romano — dorado, para detalles de identidad (cinta, CTA) */
    --dr-oro:           #D6A419;
    --dr-oro-dark:       #A87E10;

    /* Acento "última hora" — rojo vivo, como en los portales deportivos actuales */
    --dr-rojo:          #E31B23;
    --dr-rojo-dark:      #B3131A;

    /* Colores por deporte (etiquetas / franjas de color) — más vivos */
    --dr-futbol:        #16A34A;
    --dr-baloncesto:     #F97316;
    --dr-balonmano:      #DC2626;
    --dr-atletismo:      #0D9488;
    --dr-cantera:        #7C3AED;
    --dr-otros:          #A16207;

    /* Tipografía */
    --dr-font-display:   'Fraunces', Georgia, serif;
    --dr-font-body:      'Inter', -apple-system, sans-serif;
    --dr-font-tag:       'Barlow Condensed', 'Inter', sans-serif;

    --dr-radio:          14px;
    --dr-sombra:         0 8px 28px rgba(15, 27, 46, 0.10);
}

/* ==========================================================================
   2. RESET Y BASE (móvil)
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--dr-paper);
    color: var(--dr-ink);
    font-family: var(--dr-font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

.dr-contenedor {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.1rem;
}

@media (min-width: 640px) {
    .dr-contenedor { padding: 0 1.5rem; }
}

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--dr-oro);
    outline-offset: 2px;
}

/* Utilidades de etiqueta / eyebrow */
.dr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--dr-font-tag);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dr-blue);
}

.dr-tag {
    display: inline-block;
    font-family: var(--dr-font-tag);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background: var(--dr-ink);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

.dr-fecha {
    font-family: var(--dr-font-tag);
    font-size: 0.82rem;
    color: var(--dr-muted);
    letter-spacing: 0.02em;
}

/* ==========================================================================
   3. CABECERA (móvil primero: logo a tamaño normal + botón de menú)
   ========================================================================== */

.dr-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--dr-cabecera);
    border-bottom: 3px solid var(--dr-oro);
}

.dr-header__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 0.9rem 0;
}

.dr-header__derecha {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.dr-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.dr-logo__lema {
    display: none;
}

.dr-logo img {
    height: var(--dr-logo-altura, 48px);
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

/* Nav: en móvil es un panel oculto que se despliega debajo de la cabecera */
.dr-nav {
    display: none;
}

.dr-nav.dr-nav--movil-abierto {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--dr-cabecera);
    border-bottom: 3px solid var(--dr-oro);
    padding: 1.1rem 1.2rem 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: var(--dr-sombra);
}

.dr-nav--movil-abierto ul {
    flex-direction: column;
    gap: 1.1rem;
    width: 100%;
}

.dr-nav ul {
    display: flex;
    gap: 1.6rem;
}

.dr-nav a {
    font-family: var(--dr-font-tag);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    padding: 0.4rem 0.15rem;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.dr-nav a:hover,
.dr-nav .current-menu-item > a {
    color: var(--dr-oro);
    border-bottom-color: var(--dr-oro);
}

.dr-header__acciones {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.dr-buscar-btn,
.dr-menu-toggle {
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.dr-buscar-btn:hover,
.dr-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--dr-oro);
}

/* Buscador desplegable */
.dr-buscar-panel {
    max-height: 0;
    overflow: hidden;
    background: var(--dr-cabecera);
    border-top: 1px solid transparent;
    transition: max-height 0.25s ease;
}

.dr-buscar-panel.abierto { max-height: 90px; border-top-color: rgba(255, 255, 255, 0.15); }

.dr-buscar-panel form {
    display: flex;
    gap: 0.6rem;
    padding: 1rem 0;
}

.dr-buscar-panel input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: var(--dr-font-body);
    font-size: 1rem;
    background: #fff;
}

.dr-buscar-panel button {
    background: var(--dr-oro);
    color: var(--dr-ink);
    border: none;
    border-radius: 6px;
    padding: 0 1rem;
    font-family: var(--dr-font-tag);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
}

/* --- Cabecera: a partir de tablet, el menú va inline y desaparece el botón --- */
@media (min-width: 860px) {
    .dr-header__fila { padding: 1.1rem 0; gap: 1.5rem; }

    .dr-header__derecha { gap: 2rem; }

    .dr-nav {
        display: flex;
        align-items: center;
        gap: 1.75rem;
        position: static;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        flex-direction: row;
    }

    .dr-nav ul { flex-direction: row; gap: 1.9rem; width: auto; }

    .dr-header__acciones {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        padding-left: 1.6rem;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
    }

    .dr-menu-toggle { display: none; }
}

@media (min-width: 1024px) {
    .dr-logo__lema {
        display: inline-block;
        margin-left: 1rem;
        padding-left: 1rem;
        border-left: 1px solid rgba(255, 255, 255, 0.22);
        font-family: var(--dr-font-display);
        font-style: italic;
        font-size: 0.92rem;
        color: rgba(255, 255, 255, 0.65);
        white-space: nowrap;
    }
}

/* ==========================================================================
   4. HERO / DESTACADA (móvil: todo apilado en 1 columna)
   ========================================================================== */

.dr-hero {
    padding: 1.8rem 0 0.5rem;
}

.dr-hero__titulo-seccion {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.1rem;
}

.dr-hero__titulo-seccion h2 {
    font-family: var(--dr-font-display);
    font-size: 1.28rem;
    font-weight: 600;
    margin: 0;
}

.dr-hero__titulo-seccion .dr-linea {
    flex: 1;
    height: 2px;
    background: var(--dr-line);
}

.dr-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
}

.dr-hero__principal {
    position: relative;
    border-radius: var(--dr-radio);
    overflow: hidden;
    background: var(--dr-paper-alt);
    box-shadow: var(--dr-sombra);
}

.dr-hero__principal .dr-hero__imagen {
    aspect-ratio: 16/10;
    object-fit: cover;
    width: 100%;
}

.dr-hero__principal .dr-hero__texto {
    padding: 1.1rem 1.2rem 1.4rem;
}

.dr-hero__principal h1,
.dr-hero__principal h3 {
    font-family: var(--dr-font-display);
    font-size: 1.5rem;
    line-height: 1.18;
    margin: 0.5rem 0 0.5rem;
}

.dr-hero__principal p.dr-resumen {
    color: var(--dr-ink-soft);
    font-size: 0.98rem;
    margin: 0 0 0.7rem;
}

.dr-hero__secundarias {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dr-hero__secundaria {
    display: flex;
    gap: 0.8rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--dr-line);
}

.dr-hero__secundaria:last-child { border-bottom: none; }

.dr-hero__secundaria img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.dr-hero__secundaria h4 {
    font-family: var(--dr-font-display);
    font-size: 0.98rem;
    line-height: 1.25;
    margin: 0.3rem 0 0.3rem;
}

/* --- Hero: a partir de escritorio, destacada + secundarias en 2 columnas --- */
@media (min-width: 860px) {
    .dr-hero { padding: 2.5rem 0 1rem; }

    .dr-hero__titulo-seccion { margin-bottom: 1.4rem; }
    .dr-hero__titulo-seccion h2 { font-size: 1.5rem; }

    .dr-hero__grid {
        grid-template-columns: 1.4fr 1fr;
        gap: 2rem;
    }

    .dr-hero__principal .dr-hero__texto { padding: 1.4rem 1.6rem 1.7rem; }
    .dr-hero__principal h1,
    .dr-hero__principal h3 { font-size: 1.9rem; }
    .dr-hero__principal p.dr-resumen { font-size: 1.02rem; }

    .dr-hero__secundarias { gap: 1.1rem; }
    .dr-hero__secundaria { gap: 0.9rem; padding-bottom: 1.1rem; }
    .dr-hero__secundaria img { width: 92px; height: 92px; }
    .dr-hero__secundaria h4 { font-size: 1.02rem; }
}

/* ==========================================================================
   5. SECCIONES POR DEPORTE (móvil: rejilla a 1 columna)
   ========================================================================== */

.dr-grupo-secciones__titulo {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0 0.4rem;
}

.dr-grupo-secciones__titulo h2 {
    font-family: var(--dr-font-tag);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dr-blue);
    white-space: nowrap;
    margin: 0;
}

.dr-grupo-secciones__linea {
    flex: 1;
    height: 1px;
    background: var(--dr-line);
}

.dr-seccion-deporte {
    padding: 1.8rem 0;
    border-top: 1px solid var(--dr-line);
}

.dr-seccion-deporte__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
}

.dr-seccion-deporte__titulo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.dr-seccion-deporte__punto {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.dr-seccion-deporte__titulo h3 {
    font-family: var(--dr-font-display);
    font-size: 1.28rem;
    font-weight: 600;
    margin: 0;
}

.dr-ver-mas {
    font-family: var(--dr-font-tag);
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--dr-blue);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.dr-ver-mas:hover { color: var(--dr-oro-dark); }

.dr-rejilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.3rem;
}

.dr-tarjeta {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--dr-radio);
    overflow: hidden;
    box-shadow: var(--dr-sombra);
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dr-tarjeta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--dr-acento, transparent);
    z-index: 2;
}

.dr-tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(15, 27, 46, 0.16);
}

.dr-tarjeta__rango {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    min-width: 28px;
    height: 28px;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--dr-ink);
    color: #fff;
    font-family: var(--dr-font-display);
    font-weight: 600;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dr-tarjeta__imagen-wrap {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--dr-paper-alt);
}

.dr-tarjeta__imagen-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dr-tarjeta__tag {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
}

.dr-tarjeta__cuerpo {
    padding: 0.9rem 1rem 1.1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dr-tarjeta__cuerpo h3 {
    font-family: var(--dr-font-display);
    font-size: 1.05rem;
    line-height: 1.28;
    margin: 0 0 0.5rem;
}

.dr-tarjeta__cuerpo .dr-fecha { margin-top: auto; padding-top: 0.6rem; }

/* --- Secciones por deporte: tablet = 2 columnas, escritorio = 4 --- */
@media (min-width: 640px) {
    .dr-rejilla { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px) {
    .dr-seccion-deporte { padding: 2.4rem 0; }
    .dr-seccion-deporte__cabecera { margin-bottom: 1.4rem; }
    .dr-seccion-deporte__titulo h3 { font-size: 1.5rem; }
}

@media (min-width: 960px) {
    .dr-rejilla { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
    .dr-tarjeta__imagen-wrap { aspect-ratio: 4/3; }
}

/* Variante a 3 columnas (p.ej. Balonmano: 1 noticia por columna) */
@media (min-width: 640px) {
    .dr-rejilla--3col { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
    .dr-rejilla--3col { grid-template-columns: repeat(3, 1fr); }
}

/* --- Formato B: lista destacada a 2 columnas (tarjetas horizontales) --- */
.dr-rejilla-horizontal {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}

.dr-tarjeta-horizontal {
    display: flex;
    gap: 1rem;
    background: #fff;
    border-radius: var(--dr-radio);
    box-shadow: var(--dr-sombra);
    overflow: hidden;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dr-tarjeta-horizontal::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--dr-acento, transparent);
    z-index: 2;
}

.dr-tarjeta-horizontal:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(15, 27, 46, 0.16);
}

.dr-tarjeta-horizontal__imagen-wrap {
    flex: 0 0 42%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--dr-paper-alt);
}

.dr-tarjeta-horizontal__imagen-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dr-tarjeta-horizontal__cuerpo {
    flex: 1;
    min-width: 0;
    padding: 0.9rem 1rem 0.9rem 0.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dr-tarjeta-horizontal__cuerpo h3 {
    font-family: var(--dr-font-display);
    font-size: 1.05rem;
    line-height: 1.28;
    margin: 0 0 0.4rem;
}

.dr-tarjeta-horizontal__resumen {
    font-size: 0.88rem;
    color: var(--dr-ink-soft);
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 640px) {
    .dr-rejilla-horizontal { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
}

/* --- Formato C: lista compacta a 1 columna (filas con miniatura pequeña) --- */
.dr-lista-compacta {
    display: flex;
    flex-direction: column;
}

.dr-tarjeta-compacta {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--dr-line);
}

.dr-lista-compacta .dr-tarjeta-compacta:last-child { border-bottom: none; }

.dr-tarjeta-compacta__rango {
    flex: 0 0 auto;
    width: 2rem;
    font-family: var(--dr-font-display);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--dr-acento, var(--dr-oro));
    text-align: center;
}

.dr-tarjeta-compacta__imagen-wrap {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--dr-paper-alt);
    position: relative;
}

.dr-tarjeta-compacta__imagen-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    bottom: 0;
    background: var(--dr-acento, transparent);
    z-index: 2;
}

.dr-tarjeta-compacta__imagen-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dr-tarjeta-compacta__cuerpo {
    flex: 1;
    min-width: 0;
}

.dr-tarjeta-compacta__cuerpo h4,
.dr-tarjeta-compacta__cuerpo h3 {
    font-family: var(--dr-font-display);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.28;
    margin: 0 0 0.25rem;
}

.dr-tarjeta-compacta:hover .dr-tarjeta-compacta__cuerpo h4,
.dr-tarjeta-compacta:hover .dr-tarjeta-compacta__cuerpo h3 { color: var(--dr-blue); }

.dr-tarjeta-compacta__tag {
    display: block;
    font-family: var(--dr-font-tag);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dr-acento, var(--dr-blue));
    margin-bottom: 0.2rem;
}

/* --- Bloques de equipo (2 columnas, cada una con su cabecera de club/liga) --- */
.dr-columnas-equipos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
}

.dr-columna-equipo {
    position: relative;
    background: #fff;
    border-radius: var(--dr-radio);
    box-shadow: var(--dr-sombra);
    padding: 1.3rem 1.3rem 0.4rem;
    overflow: hidden;
}

.dr-columna-equipo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--dr-acento, transparent);
}

.dr-columna-equipo__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--dr-line);
}

.dr-columna-equipo__cabecera h3 {
    font-family: var(--dr-font-display);
    font-size: 1.15rem;
    margin: 0;
}

.dr-columna-equipo__liga {
    font-family: var(--dr-font-tag);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dr-acento, var(--dr-muted));
    white-space: nowrap;
}

.dr-equipo-noticia-unica {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.2rem;
}

.dr-equipo-noticia-unica__imagen-wrap {
    flex: 0 0 110px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--dr-paper-alt);
}

.dr-equipo-noticia-unica__imagen-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dr-equipo-noticia-unica__cuerpo h4 {
    font-family: var(--dr-font-display);
    font-size: 1.02rem;
    line-height: 1.28;
    margin: 0 0 0.35rem;
}

.dr-equipo-noticia-unica__extracto {
    font-size: 0.88rem;
    color: var(--dr-ink-soft);
    margin: 0 0 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dr-columna-equipo .dr-lista-compacta .dr-tarjeta-compacta { padding: 0.7rem 0; }

@media (min-width: 768px) {
    .dr-columnas-equipos { grid-template-columns: repeat(2, 1fr); }
}

/* --- Deporte Base: todas las noticias, en columnas divididas tipo periódico --- */
.dr-columnas-divididas {
    column-count: 1;
    column-gap: 2rem;
}

.dr-columnas-divididas .dr-tarjeta-compacta {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

@media (min-width: 640px) {
    .dr-columnas-divididas { column-count: 2; }
}

@media (min-width: 960px) {
    .dr-columnas-divididas { column-count: 3; }
}

/* ==========================================================================
   6. LO MÁS LEÍDO (móvil: lista a 1 columna)
   ========================================================================== */

.dr-mas-leido {
    background: var(--dr-ink);
    color: var(--dr-paper);
    padding: 1.8rem 0 2rem;
}

.dr-mas-leido .dr-hero__titulo-seccion h2 { color: #fff; }
.dr-mas-leido .dr-linea { background: rgba(255,255,255,0.18); }

.dr-mas-leido__lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
}

.dr-mas-leido__item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.14);
}

.dr-mas-leido__numero {
    font-family: var(--dr-font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--dr-oro);
    width: 2rem;
    flex-shrink: 0;
}

.dr-mas-leido__item img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.dr-mas-leido__item h4 {
    font-family: var(--dr-font-display);
    font-size: 0.96rem;
    line-height: 1.25;
    margin: 0;
    color: #fff;
}

@media (min-width: 640px) {
    .dr-mas-leido__lista { grid-template-columns: repeat(2, 1fr); gap: 1rem 2.4rem; }
    .dr-mas-leido__numero { font-size: 1.8rem; width: 2.2rem; }
    .dr-mas-leido__item img { width: 64px; height: 64px; }
    .dr-mas-leido__item h4 { font-size: 1rem; }
}

@media (min-width: 860px) {
    .dr-mas-leido { padding: 2.6rem 0; }
}

/* ==========================================================================
   7. FRANJA CTA (redes / boletín)
   ========================================================================== */

.dr-cta {
    background: var(--dr-paper-alt);
    padding: 2rem 0;
    text-align: center;
    border-top: 1px solid var(--dr-line);
    border-bottom: 1px solid var(--dr-line);
}

.dr-cta__corona {
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    opacity: 0.85;
}

.dr-cta h2 {
    font-family: var(--dr-font-display);
    font-size: 1.4rem;
    line-height: 1.25;
    max-width: 26ch;
    margin: 0 auto 0.5rem;
}

.dr-cta p {
    color: var(--dr-ink-soft);
    max-width: 40ch;
    margin: 0 auto 1.3rem;
}

.dr-cta__redes {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
}

.dr-cta__redes a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dr-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.dr-cta__redes a:hover { background: var(--dr-oro-dark); }

@media (min-width: 640px) {
    .dr-cta { padding: 2.6rem 0; }
    .dr-cta__corona { width: 46px; height: 46px; }
    .dr-cta h2 { font-size: 1.7rem; max-width: 30ch; }
    .dr-cta p { max-width: 46ch; }
    .dr-cta__redes a { width: 44px; height: 44px; }
}

/* ==========================================================================
   8. FOOTER (móvil: columnas apiladas)
   ========================================================================== */

.dr-footer {
    background: var(--dr-ink);
    color: #D9D2C2;
    padding: 2.4rem 0 1.4rem;
}

.dr-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.8rem;
    padding-bottom: 1.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.14);
}

.dr-footer__logo img {
    height: 40px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    margin-bottom: 0.9rem;
}

.dr-footer__grid p { color: #B7AF9C; font-size: 0.95rem; max-width: 34ch; }

.dr-footer__grid h5 {
    font-family: var(--dr-font-tag);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dr-oro);
    margin: 0 0 0.9rem;
}

.dr-footer__grid ul li { margin-bottom: 0.55rem; }
.dr-footer__grid ul a { color: #D9D2C2; }
.dr-footer__grid ul a:hover { color: var(--dr-oro); }

.dr-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-top: 1.3rem;
    font-family: var(--dr-font-tag);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: #8F8975;
}

.dr-footer__bottom a { color: #B7AF9C; }
.dr-footer__bottom a:hover { color: var(--dr-oro); }

@media (min-width: 640px) {
    .dr-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.8rem;
    }
}

@media (min-width: 960px) {
    .dr-footer { padding: 3rem 0 1.4rem; }
    .dr-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 2.4rem; padding-bottom: 2.2rem; }
}

/* ==========================================================================
   9. ARCHIVO / CATEGORÍA / SINGLE / PÁGINAS / 404 / BÚSQUEDA
   ========================================================================== */

.dr-archivo-cabecera {
    padding: 1.8rem 0 1.3rem;
    border-bottom: 3px solid var(--dr-ink);
    margin-bottom: 0;
}

.dr-archivo-cabecera h1 {
    font-family: var(--dr-font-display);
    font-size: 1.6rem;
    margin: 0.4rem 0 0;
}

/* Más vistas dentro de una categoría */
.dr-mas-vistas-cat {
    padding: 1.6rem 0 1.8rem;
    background: var(--dr-paper-alt);
    border-bottom: 1px solid var(--dr-line);
    margin-bottom: 1.8rem;
}

.dr-mas-vistas-cat .dr-seccion-deporte__cabecera { margin-bottom: 1.1rem; }
.dr-mas-vistas-cat .dr-seccion-deporte__titulo h2 {
    font-family: var(--dr-font-display);
    font-size: 1.2rem;
    margin: 0;
}

/* Bloque de contraparte (Deporte Base ↔ Equipos Sénior de la misma categoría) */
.dr-seccion-deporte--contraparte {
    background: var(--dr-paper-alt);
}

.dr-seccion-deporte__subtitulo {
    display: inline-block;
    margin-left: 0.6rem;
    font-family: var(--dr-font-tag);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dr-muted);
    vertical-align: middle;
}

.dr-rejilla--archivo {
    padding-bottom: 2.2rem;
}

.dr-paginacion {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 0 2.6rem;
    font-family: var(--dr-font-tag);
    font-weight: 600;
}

.dr-paginacion a,
.dr-paginacion span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--dr-line);
}

.dr-paginacion .current { background: var(--dr-ink); color: #fff; border-color: var(--dr-ink); }
.dr-paginacion a:hover { border-color: var(--dr-blue); color: var(--dr-blue); }

.dr-single {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.8rem 1.1rem 3rem;
}

.dr-single__volver {
    font-family: var(--dr-font-tag);
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--dr-muted);
    margin-bottom: 1.1rem;
    display: inline-block;
}

.dr-single h1 {
    font-family: var(--dr-font-display);
    font-size: 1.7rem;
    line-height: 1.18;
    margin: 0.6rem 0 0.7rem;
}

.dr-single__meta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.3rem;
}

.dr-single__imagen {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--dr-radio);
    margin-bottom: 1.5rem;
}

.dr-single__contenido {
    font-size: 1.04rem;
    line-height: 1.72;
    color: var(--dr-ink);
}

.dr-single__contenido p { margin: 0 0 1.2rem; }
.dr-single__contenido h2,
.dr-single__contenido h3 { font-family: var(--dr-font-display); margin: 1.6rem 0 0.8rem; }
.dr-single__contenido img { border-radius: 8px; margin: 1.1rem 0; }
.dr-single__contenido blockquote {
    border-left: 3px solid var(--dr-oro);
    margin: 1.4rem 0;
    padding: 0.2rem 0 0.2rem 1.1rem;
    font-family: var(--dr-font-display);
    font-style: italic;
    color: var(--dr-ink-soft);
}

.dr-relacionadas {
    margin-top: 2.4rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--dr-line);
}

.dr-relacionadas h3 {
    font-family: var(--dr-font-display);
    font-size: 1.2rem;
    margin: 0 0 1.1rem;
}

.dr-404 {
    text-align: center;
    padding: 3.2rem 0;
}

.dr-404 h1 {
    font-family: var(--dr-font-display);
    font-size: 3.2rem;
    color: var(--dr-blue);
    margin: 0;
}

.dr-vacio {
    padding: 2.4rem 0;
    text-align: center;
    color: var(--dr-muted);
}

@media (min-width: 640px) {
    .dr-archivo-cabecera h1 { font-size: 1.9rem; }
    .dr-single { padding-left: 1.5rem; padding-right: 1.5rem; }
    .dr-single h1 { font-size: 2rem; }
    .dr-404 h1 { font-size: 4rem; }
}

@media (min-width: 860px) {
    .dr-archivo-cabecera { padding: 2.4rem 0 1.6rem; margin-bottom: 2.4rem; }
    .dr-archivo-cabecera h1 { font-size: 2.1rem; }

    .dr-single { padding: 2.6rem 1.5rem 4rem; }
    .dr-single h1 { font-size: 2.3rem; }
    .dr-single__meta { margin-bottom: 1.6rem; }
    .dr-single__imagen { margin-bottom: 1.8rem; }
    .dr-single__contenido { font-size: 1.12rem; line-height: 1.75; }
    .dr-relacionadas { margin-top: 3rem; padding-top: 2rem; }
    .dr-relacionadas h3 { font-size: 1.3rem; }

    .dr-404 { padding: 5rem 0; }
    .dr-404 h1 { font-size: 5rem; }
}

/* ==========================================================================
   10. CARRUSEL DE CLUBES (portada)
   ========================================================================== */

.dr-seccion-clubes { padding-bottom: 2.2rem; }

.dr-carrusel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dr-carrusel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 0.3rem;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dr-carrusel::-webkit-scrollbar { display: none; }

.dr-carrusel__tarjeta {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 46%;
    background: #fff;
    border-radius: var(--dr-radio);
    box-shadow: var(--dr-sombra);
    overflow: hidden;
    text-align: center;
}

.dr-carrusel__escudo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem 0 0.4rem;
}

.dr-carrusel__escudo {
    height: 56px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

.dr-carrusel__inicial {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dr-font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
}

.dr-carrusel__cuerpo { padding: 0.5rem 0.9rem 1.1rem; }

.dr-carrusel__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
}

.dr-carrusel__cuerpo h3 {
    font-family: var(--dr-font-display);
    font-size: 0.98rem;
    margin: 0.4rem 0 0.25rem;
    line-height: 1.25;
}

.dr-carrusel__cuerpo h3 a:hover { color: var(--dr-blue); }

.dr-carrusel__flecha {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--dr-line);
    background: #fff;
    color: var(--dr-ink);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.dr-carrusel__flecha:hover { background: var(--dr-ink); color: #fff; }

@media (min-width: 560px) {
    .dr-carrusel__tarjeta { width: 31%; }
}

@media (min-width: 860px) {
    .dr-carrusel__tarjeta { width: 19%; }
    .dr-carrusel__flecha { display: flex; }
}

/* ==========================================================================
   11. DIRECTORIO DE CLUBES: filtro + tarjetas
   ========================================================================== */

.dr-filtro-deportes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.6rem;
}

.dr-filtro-deportes__btn {
    font-family: var(--dr-font-tag);
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--dr-ink);
    background: #fff;
    border: 1px solid var(--dr-line);
    border-radius: 999px;
    padding: 0.6rem 1.1rem;
    min-height: 44px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dr-filtro-deportes__btn:hover { border-color: var(--dr-blue); color: var(--dr-blue); }

.dr-filtro-deportes__btn.is-activo {
    background: var(--dr-ink);
    border-color: var(--dr-ink);
    color: #fff;
}

.dr-rejilla-clubes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.3rem;
    padding-bottom: 1rem;
}

.dr-club-tarjeta {
    background: #fff;
    border-radius: var(--dr-radio);
    box-shadow: var(--dr-sombra);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dr-club-tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(15, 27, 46, 0.16);
}

.dr-club-tarjeta[hidden] { display: none; }

.dr-club-tarjeta__cabecera {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.6rem 0;
}

.dr-club-tarjeta__escudo-wrap { display: block; }

.dr-club-tarjeta__escudo {
    height: 72px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

.dr-club-tarjeta__inicial {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dr-font-display);
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 2px 10px rgba(15, 27, 46, 0.18);
}

.dr-club-tarjeta__cuerpo {
    padding: 0 1.1rem 1.2rem;
    text-align: center;
}

.dr-club-tarjeta__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
}

.dr-club-tarjeta__cuerpo h2 {
    font-family: var(--dr-font-display);
    font-size: 1.14rem;
    margin: 0.6rem 0 0.35rem;
}

.dr-club-tarjeta__cuerpo h2 a:hover { color: var(--dr-blue); }

.dr-club-tarjeta__cuerpo .dr-fecha { display: block; margin-bottom: 0.6rem; }

.dr-club-tarjeta .dr-ver-mas { justify-content: center; }

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

@media (min-width: 860px) {
    .dr-rejilla-clubes { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

/* ==========================================================================
   12. FICHA DE CLUB: banner + datos rápidos
   ========================================================================== */

.dr-club-banner {
    padding: 2.2rem 0 3.6rem;
    color: #fff;
}

.dr-club-banner__volver {
    color: rgba(255, 255, 255, 0.8) !important;
}

.dr-club-banner__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.dr-club-banner__tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(2px);
}

.dr-club-banner__nombre {
    font-family: var(--dr-font-display);
    font-size: 1.9rem;
    line-height: 1.15;
    margin: 0.6rem 0 0;
    color: #fff;
}

.dr-club-cabecera {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    margin-top: -2.4rem;
    margin-bottom: 1.6rem;
}

.dr-club-cabecera__escudo-wrap {
    background: #fff;
    border-radius: 16px;
    padding: 0.5rem;
    box-shadow: 0 8px 24px rgba(15, 27, 46, 0.22);
    flex-shrink: 0;
}

.dr-club-cabecera__escudo {
    height: 84px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    display: block;
}

.dr-club-cabecera__inicial {
    width: 84px;
    height: 84px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dr-font-display);
    font-size: 2.1rem;
    font-weight: 600;
    color: #fff;
}

.dr-club-cabecera__descripcion {
    color: var(--dr-ink-soft);
    max-width: 62ch;
    font-size: 1.02rem;
}

.dr-club-cabecera__descripcion p:last-child { margin-bottom: 0; }

.dr-club-datos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 1.2rem 0;
    border-top: 1px solid var(--dr-line);
    border-bottom: 1px solid var(--dr-line);
}

.dr-club-datos__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: var(--dr-paper-alt);
}

a.dr-club-datos__item--enlace:hover { background: var(--dr-line); }

.dr-club-datos__item svg { flex-shrink: 0; }

.dr-club-datos__etiqueta {
    display: block;
    font-family: var(--dr-font-tag);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dr-muted);
}

.dr-club-datos__valor {
    display: block;
    font-weight: 600;
    font-size: 0.94rem;
    color: var(--dr-ink);
}

@media (min-width: 640px) {
    .dr-club-cabecera { flex-direction: row; text-align: left; }
    .dr-club-datos { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 860px) {
    .dr-club-banner { padding: 2.8rem 0 4.4rem; }
    .dr-club-banner__nombre { font-size: 2.3rem; }
    .dr-club-cabecera__escudo { height: 100px; max-width: 200px; }
    .dr-club-cabecera__inicial { width: 100px; height: 100px; }
}