/* ==========================================================================
   OPTIMIZACIONES GLOBALES RESPONSIVE & MOBILE-FIRST
   ========================================================================== */

/* Prevenir desbordamiento horizontal accidental en todo el viewport */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Evitar auto-zoom de iOS Safari en campos de formulario */
input,
select,
textarea {
    font-size: 1rem !important; /* Requisito estricto del motor WebKit iOS */
}

/* Soporte para áreas seguras de pantallas modernas (Notch / Home bar) */
.footer {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   RESPONSIVE: HEADER Y MENÚ MÓVIL (< 768px)
   ========================================================================== */

/* El botón hamburguesa está oculto por defecto en Desktop */
.header__toggle {
    display: none;
}

.header__acciones-derecha {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 767px) {
    .header {
        padding: 0.75rem 1.25rem;
    }

    .header__contenedor {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Mostrar botón hamburguesa */
    .header__toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 40px;
        height: 40px;
        padding: 10px 8px;
        background-color: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        cursor: pointer;
    }

    .header__toggle-linea {
        width: 100%;
        height: 2px;
        background-color: #f8fafc;
        border-radius: 2px;
        transition: transform 200ms ease, opacity 200ms ease;
    }

    /* Ocultar menú de navegación fuera de pantalla en móvil */
    .header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        background-color: rgba(10, 15, 29, 0.96);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        transition: max-height 300ms cubic-bezier(0.16, 1, 0.3, 1), padding 300ms ease;
    }

    /* Clase que se activa al pulsar el botón hamburguesa */
    .header__nav.is-active {
        max-height: 280px;
        padding: 1.5rem;
    }

    .header__menu,
    .header nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        width: 100%;
    }

    .header__enlace {
        width: 100%;
        padding: 0.5rem 0;
        font-size: 1.05rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    /* Reducir ligeramente el botón de contacto en móvil para no saturar la barra */
    .btn-contacto {
        padding: 0.45rem 0.95rem;
        font-size: 0.825rem;
    }
}

/* ==========================================================================
   RESPONSIVE: SECCIÓN HERO (< 480px)
   ========================================================================== */

@media (max-width: 480px) {
    .hero {
        padding-top: 2.5rem;
        padding-bottom: 3.5rem;
    }

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

    .btn-primario,
    .btn-secundario {
        width: 100%; /* Botones de ancho completo para pulsación cómoda */
        text-align: center;
    }
}

/* ==========================================================================
   RESPONSIVE: FORMULARIO DE CONTACTO (< 640px)
   ========================================================================== */

@media (max-width: 639px) {
    .contacto__tarjeta {
        padding: 1.5rem 1.25rem;
        border-radius: 14px;
    }

    .btn-enviar {
        width: 100%;
    }
}

/* ==========================================================================
   RESPONSIVE: FOOTER (< 640px)
   ========================================================================== */

@media (max-width: 639px) {
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer__inferior {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        text-align: center;
    }
}