/* ============================================================
   Responsive
   No es el desktop encogido: en móvil cambia la composición,
   el encuadre de las imágenes y la densidad tipográfica.
   ============================================================ */

/* --- Laptop ---------------------------------------------------- */
@media (max-width: 1180px) {
    .cabecera-seccion__titulo {
        grid-column: 1 / span 8;
    }

    .cabecera-seccion__entrada {
        grid-column: 1 / span 8;
        padding-bottom: 0;
    }

    .sector__cuerpo,
    .sector:nth-of-type(even) .sector__cuerpo {
        grid-column: span 6;
    }

    .barrera__arte {
        grid-column: 1 / span 12;
    }

    .barrera__cuerpo {
        grid-column: 1 / span 12;
        margin-top: 2.5rem;
    }

    .manifiesto__texto {
        grid-column: 2 / span 10;
    }
}

/* --- Tablet ---------------------------------------------------- */
@media (max-width: 960px) {
    :root {
        --nav-alto: 66px;
    }

    .nav__menu,
    .nav__cta {
        display: none;
    }

    .nav__hamburguesa {
        display: flex;
    }

    .procesos__lista {
        display: block;
    }

    .procesos__visor {
        display: none;
    }

    .proceso {
        display: grid;
        gap: 1.75rem;
    }

    .proceso[data-activo='false'] {
        opacity: 1;
    }

    .proceso__medio-movil {
        display: block;
        aspect-ratio: 3 / 2;
        overflow: hidden;
        background: var(--vacio-2);
    }

    .proceso__medio-movil img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sector {
        gap: 2rem;
    }

    .sector__medio,
    .sector:nth-of-type(even) .sector__medio {
        grid-column: 1 / -1;
        order: 1;
        aspect-ratio: 16 / 10;
    }

    .sector__cuerpo,
    .sector:nth-of-type(even) .sector__cuerpo {
        grid-column: 1 / -1;
        order: 2;
    }

    .contacto__datos,
    .contacto__formulario {
        grid-column: 1 / -1;
    }

    .modal__caja {
        grid-template-columns: 1fr;
        max-height: 90vh;
    }

    .modal__galeria {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .modal__galeria img {
        max-height: none;
    }

    .pie__marca {
        grid-column: 1 / -1;
        margin-bottom: 2rem;
    }

    .pie__columna,
    .pie__columna:nth-of-type(2) {
        grid-column: span 4;
    }

    .dos-columnas__izq,
    .dos-columnas__der {
        grid-column: 1 / -1;
    }

    .dos-columnas {
        gap: 2.5rem;
    }
}

/* --- Móvil ----------------------------------------------------- */
@media (max-width: 700px) {
    :root {
        --t-cuerpo-lg: 1.05rem;
    }

    .hero {
        align-items: flex-end;
        min-height: 100svh;
    }

    /* En móvil el arte se recompone: la imagen ocupa la mitad
       superior y el texto se apoya sobre el fondo sólido. */
    .hero__medio img {
        object-position: 62% 28%;
    }

    .hero__velo {
        background:
            linear-gradient(0deg, var(--vacio) 26%, color-mix(in srgb, var(--vacio) 82%, transparent) 48%, transparent 78%),
            linear-gradient(180deg, color-mix(in srgb, var(--vacio) 70%, transparent) 0%, transparent 30%);
    }

    .hero__titulo {
        max-width: none;
        margin-block: 1.25rem 1.5rem;
    }

    .hero__entrada {
        margin-bottom: 2rem;
    }

    .hero__acciones .boton {
        flex: 1 1 100%;
    }

    .hero__pie {
        margin-top: 2.5rem;
        gap: 1.25rem;
    }

    .hero__scroll {
        display: none;
    }

    .cifras__rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cifras__item {
        border-left: 0;
        border-top: var(--borde);
        padding-inline: 0;
    }

    .cifras__item:nth-child(2n) {
        padding-left: var(--gutter);
        border-left: var(--borde);
    }

    .cifras__item:first-child,
    .cifras__item:nth-child(2) {
        border-top: 0;
    }

    .manifiesto__texto {
        grid-column: 1 / -1;
        text-align: left;
    }

    .manifiesto__parrafos {
        margin-inline: 0;
    }

    .manifiesto__medio {
        aspect-ratio: 4 / 5;
    }

    .catalogo__rejilla {
        grid-template-columns: 1fr;
    }

    .catalogo__filtros {
        margin-inline: calc(var(--margen) * -1);
        padding-inline: var(--margen);
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .catalogo__filtros::-webkit-scrollbar {
        display: none;
    }

    .filtro {
        flex: none;
    }

    .formulario {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .formulario__envio .boton {
        width: 100%;
    }

    .pie__columna,
    .pie__columna:nth-of-type(2) {
        grid-column: span 6;
    }

    .pie__inferior {
        flex-direction: column;
        gap: 0.75rem;
    }

    .modal {
        padding: 0;
        align-items: end;
    }

    .modal__caja {
        max-height: 92vh;
        width: 100%;
        border-inline: 0;
        border-bottom: 0;
    }

    .nosotros__medio {
        aspect-ratio: 3 / 2;
    }

    .certificacion {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* --- Pantallas muy anchas -------------------------------------- */
@media (min-width: 1800px) {
    :root {
        --ancho-max: 1720px;
    }
}

/* --- Escritorio: oculta el medio duplicado de móvil ------------- */
@media (min-width: 961px) {
    .proceso__medio-movil {
        display: none;
    }
}

/* --- Impresión --------------------------------------------------- */
@media print {
    .nav,
    .menu-movil,
    .modal,
    .hero__scroll,
    .catalogo__filtros {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }
}