/* Responsive exclusivo del index. No altera la versión de escritorio. */
@media (max-width: 1000px) {
    html,
    body.pagina-index-moderna {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .pagina-index-moderna .banner,
    .pagina-index-moderna .banner img {
        width: 100%;
        height: clamp(150px, 45vw, 280px);
    }

    .pagina-index-moderna .banner img {
        object-fit: cover;
    }

    .pagina-index-moderna .menu-superior {
        box-sizing: border-box;
        width: 100%;
        flex-direction: column;
        gap: 10px;
        padding: 11px 16px 13px;
    }

    .pagina-index-moderna .links-menu {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: clamp(14px, 5vw, 30px);
    }

    .pagina-index-moderna .links-menu a {
        margin: 0;
        font-size: 13px;
        white-space: nowrap;
    }

    .pagina-index-moderna .buscador {
        width: min(100%, 560px);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px;
    }

    .pagina-index-moderna .buscador input {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
    }

    .pagina-index-moderna .buscador button {
        padding: 0 15px;
    }

    .pagina-index-moderna main {
        width: 100%;
        overflow: hidden;
    }

    .pagina-index-moderna .portada-nueve {
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .pagina-index-moderna .portada-nueve-texto {
        padding: 0;
    }

    .pagina-index-moderna .portada-nueve-texto > .portada-nueve-bloque {
        min-height: 0;
        padding: 25px clamp(18px, 5vw, 36px);
    }

    .pagina-index-moderna .portada-nueve-bloque img {
        width: 118px;
        height: auto;
        max-height: 42px;
    }

    .pagina-index-moderna .portada-nueve h1 {
        max-width: 680px;
        margin: 12px 0 10px;
        font-size: clamp(28px, 6.4vw, 39px);
        line-height: 1.08;
    }

    .pagina-index-moderna .portada-nueve-bloque p {
        font-size: clamp(15px, 2.5vw, 17px);
        line-height: 1.48;
    }

    .pagina-index-moderna .portada-nueve-visual {
        min-height: 150px;
        padding: 25px clamp(18px, 6vw, 44px);
    }

    .pagina-index-moderna .portada-nueve-visual strong {
        max-width: 520px;
        font-size: clamp(25px, 5vw, 34px);
    }

    .pagina-index-moderna .seccion-principal-index {
        box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 38px;
        margin: 38px auto 46px;
        padding: 0 clamp(16px, 4vw, 30px);
    }

    .pagina-index-moderna .destacados {
        order: 1;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
    }

    .pagina-index-moderna .menu-lateral {
        order: 2;
        width: 100%;
        box-sizing: border-box;
    }

    .pagina-index-moderna .encabezado-destacados {
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .pagina-index-moderna .encabezado-destacados h2 {
        font-size: clamp(30px, 5.5vw, 38px);
    }

    .pagina-index-moderna .encabezado-destacados p {
        max-width: 330px;
    }

    .pagina-index-moderna .grilla-avisos {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .pagina-index-moderna .grilla-avisos .aviso,
    .pagina-index-moderna .grilla-avisos .aviso-doble,
    .pagina-index-moderna .grilla-avisos .aviso-ancho {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 9px;
    }

    .pagina-index-moderna .grilla-avisos .aviso-doble,
    .pagina-index-moderna .grilla-avisos .aviso-ancho {
        grid-column: 1 / -1;
    }

    .pagina-index-moderna .grilla-avisos .aviso img {
        width: 100%;
        height: auto;
    }

    .pagina-index-moderna .grilla-avisos .aviso picture {
        display: block;
        width: 100%;
    }

    .pagina-index-moderna .promos-portada {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .pagina-index-moderna .promos-portada a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 92px;
        box-sizing: border-box;
        padding: 18px;
        border-radius: 14px;
        color: #fff;
        text-decoration: none;
        background: linear-gradient(145deg, #061f3b, #075d9e);
        box-shadow: 0 10px 24px rgba(17, 53, 87, .16);
    }

    .pagina-index-moderna .promos-portada a:last-child {
        background: linear-gradient(145deg, #ff7b1b, #d95d05);
    }

    .pagina-index-moderna .promos-portada span {
        margin-bottom: 5px;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        opacity: .82;
    }

    .pagina-index-moderna .promos-portada strong {
        font-size: clamp(19px, 3.5vw, 23px);
        line-height: 1.08;
    }

    .pagina-index-moderna .lista-categorias {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 16px;
    }

    .pagina-index-moderna .franja-comercios {
        box-sizing: border-box;
        width: calc(100% - clamp(32px, 8vw, 60px));
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin: 0 auto 46px;
        padding: 26px clamp(20px, 5vw, 34px);
    }

    .pagina-index-moderna .franja-comercios h2 {
        font-size: clamp(24px, 4.3vw, 28px);
    }

    .pagina-index-moderna .contacto-index-moderno {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .pagina-index-moderna .contacto-index-moderno .contacto-info,
    .pagina-index-moderna .contacto-index-moderno .contacto-formulario {
        box-sizing: border-box;
        width: 100%;
        padding: 26px clamp(20px, 5vw, 36px);
    }

    .pagina-index-moderna .contacto-index-moderno .contacto-formulario form {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .pagina-index-moderna .menu-superior {
        padding-right: 12px;
        padding-left: 12px;
    }

    .pagina-index-moderna .links-menu {
        gap: 12px;
    }

    .pagina-index-moderna .links-menu a {
        font-size: 11px;
    }

    .pagina-index-moderna .buscador button {
        padding: 0 12px;
        font-size: 13px;
    }

    .pagina-index-moderna .portada-nueve-texto > .portada-nueve-bloque {
        padding-top: 23px;
        padding-bottom: 23px;
    }

    .pagina-index-moderna .portada-nueve-visual {
        min-height: 128px;
    }

    .pagina-index-moderna .portada-nueve-visual strong {
        font-size: 25px;
    }

    .pagina-index-moderna .portada-nueve-visual p {
        font-size: 14px;
    }

    .pagina-index-moderna .encabezado-destacados {
        display: block;
    }

    .pagina-index-moderna .encabezado-destacados p {
        margin-top: 10px;
    }

    .pagina-index-moderna .grilla-avisos {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .pagina-index-moderna .grilla-avisos .aviso,
    .pagina-index-moderna .grilla-avisos .aviso-doble,
    .pagina-index-moderna .grilla-avisos .aviso-ancho,
    .pagina-index-moderna .promos-portada {
        grid-column: 1;
    }

    .pagina-index-moderna .promos-portada {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pagina-index-moderna .promos-portada a {
        min-height: 86px;
    }

    .pagina-index-moderna .titulo-categorias {
        padding: 21px 18px 17px;
    }

    .pagina-index-moderna .lista-categorias {
        grid-template-columns: 1fr;
        padding: 10px 13px 14px;
    }

    .pagina-index-moderna .menu-lateral a {
        padding-top: 9px;
        padding-bottom: 9px;
        font-size: 15px;
    }

    .pagina-index-moderna .franja-comercios > a {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .pagina-index-moderna .contacto-index-moderno .contacto-formulario form {
        grid-template-columns: 1fr;
    }

    .pagina-index-moderna .contacto-index-moderno .contacto-formulario input,
    .pagina-index-moderna .contacto-index-moderno .contacto-formulario textarea,
    .pagina-index-moderna .contacto-index-moderno .contacto-formulario button {
        grid-column: 1;
        width: 100%;
        box-sizing: border-box;
    }

    .pagina-index-moderna .contacto-index-moderno .contacto-formulario button {
        justify-self: stretch;
    }

    .pagina-index-moderna .copyright {
        box-sizing: border-box;
        padding: 13px 16px;
        font-size: 12px;
        line-height: 1.4;
    }
}