.ZonasSection {
    display: grid;
    align-content: start;
    gap: 32px;

    padding-top: 96px;
    padding-bottom: 96px;
}

.ZonasHeader {
    max-width: 780px;

    display: grid;
    gap: 18px;
}

.ZonasHeader h2 {
    color: #f6c500;

    font-size: clamp(44px, 7vw, 88px);
    line-height: 0.95;

    margin: 0;
}

.ZonasHeader p {
    max-width: 680px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 18px;
    line-height: 1.6;

    margin: 0;
}

/* Once zonas en dos filas exactas.
   ---------------------------------
   Eibar ocupa una columna y las dos filas; las diez restantes son
   cuadrados que llenan cinco columnas por dos filas (5 × 2 = 10). El
   número de columnas no es arbitrario: sale de la cuenta. Si algún día
   se añade o se quita una zona hay que rehacerla, porque una fila a
   medias se nota mucho más que en una rejilla que fluye sola.

   Las cinco columnas de fichas llevan tamaño fijo en lugar de fracciones,
   y el sobrante entero se lo queda Eibar. Repartidas en `fr`, las fichas
   crecían con la pantalla: en un monitor de 1920 median 273px de lado
   para decir una sola palabra, todo hueco. Ahora se quedan en 150-200px
   pase lo que pase, y lo que crece es la zona principal, que es la que
   tiene algo que contar.

   El alto de fila es la clave del encaje: las fichas son barras bajas,
   no cuadrados, así que dos filas suman justo lo que mide el contenido
   de Eibar. Antes las fichas eran cuadradas y arrastraban a Eibar hasta
   los 280px de alto para un contenido de 190: los 90 restantes eran
   hueco puro. `minmax(72px, auto)` pone el suelo de la barra y deja que
   la fila crezca si Eibar necesita más. */
.ZonasGrid {
    width: 100%;

    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(5, clamp(150px, 11vw, 200px));
    grid-auto-rows: minmax(72px, auto);
    gap: 12px;
}

.ZonaItem {
    position: relative;
    overflow: hidden;

    display: grid;
    align-content: end;
    gap: 8px;

    padding: 22px;
}

/* Las zonas secundarias son cuadrados con la esquina cerrada.
   -----------------------------------------------------------
   El alto lo pone `aspect-ratio`, no una altura fija: así la ficha sigue
   siendo cuadrada en cualquier ancho de columna. El nombre se centra
   porque dentro de un cuadrado el `align-content: end` heredado lo
   dejaba descolgado abajo. Eibar es la excepción a propósito: conserva
   el radio grande y el texto apoyado abajo, y ese contraste es lo que la
   señala como zona principal. */
/* Barras alargadas: el alto lo pone la fila y el nombre va centrado en
   ella. Ya no hay `aspect-ratio` — era lo que las obligaba a ser tan
   altas como anchas y llenaba la ficha de aire alrededor de una sola
   palabra. */
.ZonaItem:not(.ZonaPrincipal) {
    /* Centrado en los dos ejes: `align-content` coloca el bloque en medio
       de la barra y `justify-items` lo centra a lo ancho. El `text-align`
       no sobra: hace falta para los nombres que ocupan dos líneas, donde
       centra la segunda respecto a la primera. */
    align-content: center;
    justify-items: center;
    text-align: center;

    padding: 12px 16px;
    border-radius: 12px;
}

.ZonaItem:not(.ZonaPrincipal) h3 {
    /* Ajustado al ancho de la barra, no al de la pantalla, para que
       "Donostia-San Sebastián" —el nombre más largo— quepa como mucho en
       dos líneas y sin partirse por la mitad de una palabra. */
    font-size: clamp(14px, 0.95vw, 16px);
    line-height: 1.2;
    overflow-wrap: break-word;
}

/* Aquí había un halo dorado en la esquina que simulaba una fuente de luz
   fuera de la tarjeta. La tarjeta es ahora un plano de color liso: el
   acento lo pone la etiqueta y el titular, no la iluminación. */

.ZonaItem span,
.ZonaItem h3,
.ZonaItem p {
    position: relative;
    z-index: 1;
}

.ZonaItem h3 {
    color: #f6c500;

    font-size: 22px;
    line-height: 1.15;

    margin: 0;
}

.ZonaItem p {
    color: rgba(255, 255, 255, 0.72);

    font-size: 14px;
    line-height: 1.5;

    margin: 0;
}

.ZonaPrincipal {
    grid-row: span 2;

    /* El alto de Eibar lo marcan las dos filas de fichas, así que siempre
       le sobra sitio. Con el `align-content: end` heredado ese sobrante se
       acumulaba entero encima del contenido y la tarjeta se leía como
       medio vacía; centrado, el aire se reparte y el bloque queda
       equilibrado. */
    align-content: center;
}

.ZonaPrincipal h3 {
    font-size: clamp(34px, 3.6vw, 54px);
}

/* Ahora que Eibar se queda con todo el ancho sobrante, su descripción
   llegaría a medir 900px de línea en un monitor grande. Se corta en la
   medida en la que el ojo sigue encontrando el renglón siguiente. */
.ZonaPrincipal p {
    max-width: 46ch;
}

.ZonasFooter {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
    gap: 24px;

    padding-top: 8px;
}

.ZonasFooter p {
    max-width: 620px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 16px;
    line-height: 1.5;

    margin: 0;
}

.ZonasLinkContacto {
    color: #f6c500;
    font-weight: 800;
    text-decoration: none;
}

.ZonasLinkContacto:hover {
    text-decoration: underline;
}

/* Por debajo de 1280px el ancho ya no da para dejar a Eibar una columna
   propia junto a las otras cinco. La rejilla pasa a columnas iguales del
   ancho de una barra, tantas como quepan, y Eibar ocupa un bloque de
   2 × 2 dentro de esa misma retícula. `auto-fill` evita ir adivinando el
   número de columnas en cada corte: las barras conservan su medida y sólo
   cambia cuántas caben. */
@media (max-width: 1280px) {
    .ZonasGrid {
        grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
        grid-auto-rows: minmax(70px, auto);
    }

    .ZonaPrincipal {
        grid-column: span 2;
        grid-row: span 2;
    }
}

@media (max-width: 768px) {
    .ZonasSection {
        gap: 38px;
        padding-block: 96px;
    }

    .ZonasHeader h2 {
        font-size: clamp(48px, 13vw, 64px);
    }

    .ZonasHeader p,
    .ZonasFooter p {
        font-size: 19px;
        line-height: 1.65;
    }

    /* En móvil caben una o dos barras por fila según el teléfono, con la
       misma regla de `auto-fill`. Eibar pasa a ocupar la fila entera. */
    .ZonasGrid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        grid-auto-rows: auto;
        gap: 10px;
    }

    .ZonaItem:not(.ZonaPrincipal) {
        min-height: 62px;
    }

    .ZonaPrincipal {
        grid-column: 1 / -1;
        grid-row: span 1;
    }

    .ZonaItem {
        padding: 28px;
    }

    .ZonaItem h3 {
        font-size: 29px;
    }

    .ZonaItem p {
        font-size: 18px;
        line-height: 1.6;
    }

    .ZonaPrincipal {
        min-height: 280px;
    }

    .ZonaPrincipal h3 {
        font-size: clamp(48px, 14vw, 64px);
    }

    .ZonasFooter {
        grid-auto-flow: row;
        justify-content: stretch;
        align-items: stretch;
    }
}