/* ==========================================================================
   Vectorial — Adaptaciones responsivas
   ========================================================================== */

@media (max-width: 1100px) {
    .pie__grid { grid-template-columns: 1fr 1fr; gap: var(--e-7) var(--e-6); }
    .pie__marca { grid-column: 1 / -1; }

    .paso { grid-template-columns: 90px 1fr; gap: var(--e-4) var(--e-5); }

    .paso__entregables {
        grid-column: 2;
        padding-top: var(--e-4);
        border-top: 1px dashed var(--borde);
    }
}

@media (max-width: 960px) {
    :root { --alto-cabecera: 64px; }

    .nav { display: none; }
    .boton-menu { display: flex; }
    .cabecera__acciones .boton--solido { display: none; }

    .faq,
    .contacto,
    .dos-columnas {
        grid-template-columns: 1fr;
        gap: var(--e-6);
    }

    .rasgos__grid { grid-template-columns: 1fr; gap: var(--e-4); }

    .panel-marca { max-width: 440px; margin-inline: auto; }
}

@media (max-width: 720px) {
    .contenedor { width: min(100% - 1.75rem, var(--ancho-max)); }

    .hero { padding-block: calc(var(--alto-cabecera) + 1.5rem) var(--e-6); }

    /* Se aprieta el escalonado para que el hero quepa mejor en pantalla. */
    .hero__stack { gap: var(--e-5); }
    .rasgos { margin-top: var(--e-2); padding: var(--e-5); }

    .hero__titulo { font-size: clamp(2.5rem, 12vw, 3.6rem); }

    .hero__acciones { width: 100%; flex-direction: column; }
    .hero__acciones .boton { width: 100%; }

    .hero__cue { display: none; }

    .servicios__grid,
    .proyectos,
    .testimonios,
    .stack,
    .valores { grid-template-columns: 1fr; }

    .paso { grid-template-columns: 1fr; gap: var(--e-3); }
    .paso__entregables { grid-column: 1; }

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

    .cifras { padding: var(--e-6) var(--e-4); }

    .proyecto__pie { flex-direction: column; align-items: flex-start; }
    .proyecto__stack { justify-content: flex-start; }

    .pie__grid { grid-template-columns: 1fr; }
    .pie__base { flex-direction: column; gap: 0.35rem; }

    .acordeon__panel p { padding-right: 1rem; }

    .volver-arriba { right: 1rem; bottom: 1rem; width: 42px; height: 42px; }
}

@media (max-width: 420px) {
    .marca__texto small { display: none; }
    .encabezado { margin-bottom: var(--e-6); }
    .tarjeta { padding: var(--e-5); }
    .rasgos { padding: var(--e-5); }
}

@media (min-width: 1600px) {
    :root { --ancho-max: 1300px; }
}

/* --- Impresión ----------------------------------------------------------- */

@media print {
    .cabecera,
    .menu-movil,
    .progreso-scroll,
    .volver-arriba,
    .fondo-metal,
    .hero__cue { display: none !important; }

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

    .hero { min-height: auto; padding-block: 1rem; }

    .hero__stack > *,
    .rasgos__item,
    [data-revelar] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .tarjeta,
    .lienzo,
    .pie {
        background: #fff !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }

    a { text-decoration: underline; }
}