/* =====================================================
   RESPONSIVE — puntos de ruptura
   ===================================================== */

/* ---------- Tabletas grandes (≤ 1024px) ---------- */
@media (max-width: 1024px) {
    .servicios-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

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

/* ---------- Tabletas y móviles (≤ 820px) ---------- */
@media (max-width: 820px) {
    .nav-toggle {
        display: flex;
    }

    .nav-principal {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--azul-oscuro);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    }

    .nav-principal.abierto {
        max-height: 420px;
    }

    .nav-principal ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 0 1rem;
    }

    .nav-principal li {
        text-align: center;
    }

    .nav-principal a {
        display: block;
        padding: 0.9rem 1rem;
        border-bottom: none;
    }

    .nav-cta {
        padding: 0.6rem 1.5rem;
    }

    .hero {
        padding: 5rem 0 5.5rem;
    }

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

    .contacto-formulario {
        padding: 1.4rem;
    }

    .seccion {
        padding: 3.5rem 0;
    }
}

/* ---------- Móviles (≤ 600px) ---------- */
@media (max-width: 600px) {
    .servicios-grid,
    .resenas-grid,
    .ventajas-grid {
        grid-template-columns: 1fr;
    }

    .campo-doble {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 2.5rem 0 1.5rem;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-legal-inner {
        flex-direction: column;
        text-align: center;
    }

    .footer-legal ul {
        justify-content: center;
    }

    .hero-botones .btn {
        width: 100%;
    }

    /* CTClick visible solo en móvil */
    .ctclick {
        display: flex;
    }

    /* Dejar hueco para los botones fijos */
    body {
        padding-bottom: 56px;
    }

    .cookies-banner {
        bottom: 64px;
    }

    .cookies-banner-botones .btn {
        flex: 1 1 100%;
    }
}