/*
 * cobertura.css — Decibelio
 * Tema hijo: blocksy-child
 * Depende de: variables.css (db-variables)
 * Carga: is_front_page() + página de Contacto — condicional en functions.php
 *
 * El HTML lo inyecta db_cobertura_render() (fuente única) vía hook
 * blocksy:content:top: Home (priority 30) y Contacto (priority 20).
 * Este CSS estiliza ese HTML. Fondo blanco en ambas páginas.
 *
 * DISEÑO:
 * - Fondo blanco — contraste tras la sección oscura de ICT2
 * - 4 tarjetas: zona (H3) + línea verde + listado de municipios
 * - Grid: 4 col desktop · 2 col tablet · 1 col móvil
 *
 * REGLAS:
 * - Sin !important nunca
 * - Sin hardcode de colores — solo var(--color-*)
 * - Sin hardcode de fuentes — solo var(--font-*)
 * - Especificidad por selectores encadenados desde .db-cobertura
 */

/* ============================================================
   SECCIÓN — WRAPPER PRINCIPAL
   ============================================================ */
.db-cobertura {
    padding: var(--espaciado-seccion) var(--padding-contenedor);
    background-color: var(--color-blanco);
}

/* ============================================================
   CONTENEDOR INTERNO
   ============================================================ */
.db-cobertura .db-cobertura__inner {
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
}

/* ============================================================
   CABECERA DE SECCIÓN — badge + H2
   ============================================================ */
.db-cobertura .db-cobertura__cabecera {
    text-align: center;
    margin-bottom: 3rem;
}

/* Badge — estilo común en main.css (.db-badge--solido); aquí solo lo contextual */
.db-cobertura .db-cobertura__badge {
    margin-bottom: 1.25rem;
}

.db-cobertura .db-cobertura__titulo {
    font-family: var(--font-titulos);
    font-size: var(--texto-h2);
    font-weight: var(--peso-extrabold);
    color: var(--color-gris-texto);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
}

/* ============================================================
   GRID DE TARJETAS — 4 zonas
   ============================================================ */
.db-cobertura .db-cobertura__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   TARJETA — zona geográfica
   Solo informativa, sin enlace
   ============================================================ */
.db-cobertura .db-cobertura__tarjeta {
    background-color: var(--color-blanco);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta);
    padding: 1.5rem 1.25rem 1.75rem;
    text-align: center;
}

/* ============================================================
   TÍTULO DE ZONA — H3
   ============================================================ */
.db-cobertura .db-cobertura__zona {
    font-family: var(--font-titulos);
    font-size: 1.05rem;
    font-weight: var(--peso-bold);
    color: var(--color-verde-oscuro);
    line-height: 1.2;
    margin: 0 0 0.6rem;
}

/* Espaciado de líneas decorativas en el contexto de cobertura */
.db-cobertura .db-cobertura__cabecera .db-linea--h2 {
    margin-top: 1.25rem;
}

.db-cobertura .db-cobertura__tarjeta .db-linea--h3 {
    margin-bottom: 1.1rem;
}

/* ============================================================
   LISTADO DE MUNICIPIOS
   ============================================================ */
.db-cobertura .db-cobertura__municipios {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem 0.2rem;
}

.db-cobertura .db-cobertura__municipio {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-muy-pequeño);
    font-weight: var(--peso-normal);
    color: var(--color-gris-texto);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

/* Bullet verde pequeño antes de cada municipio */
.db-cobertura .db-cobertura__municipio::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-verde);
}

/* ============================================================
   RESPONSIVE — TABLET
   2 columnas
   ============================================================ */
@media (max-width: 1024px) {
    .db-cobertura .db-cobertura__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   RESPONSIVE — MÓVIL
   1 columna
   ============================================================ */
@media (max-width: 600px) {
    .db-cobertura .db-cobertura__grid {
        grid-template-columns: 1fr;
        max-width: var(--ancho-tarjeta-movil);
        margin-inline: auto;
        gap: 1rem;
    }

    .db-cobertura .db-cobertura__tarjeta {
        padding: 1.1rem 1.25rem 1.25rem;
    }

    .db-cobertura .db-cobertura__cabecera {
        margin-bottom: 2rem;
    }
}