/* ============================================================
   contacto-mobile.css
   Fix navbar + hero mejorado + responsive completo
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   HERO — mejora visual (todos los tamaños)
   ══════════════════════════════════════════════════════════ */

.contact-page {
    padding-top: 0 !important;
}

/* Compensar navbar + full bleed */
.contact-hero {
    padding-top: calc(65px + 2.5rem) !important;
    border-radius: 0 !important;
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;

    background-image:
        linear-gradient(155deg,
            rgba(34, 29, 16, .55) 0%,
            rgba(10, 8, 0, .75) 55%,
            rgba(0, 0, 0, .97) 100%),
        linear-gradient(to top,
            rgba(0, 0, 0, .98) 0%,
            transparent 50%),
        url('/images/entrada.png');

    background-size: cover;
    background-position: center;

    position: relative;
    overflow: hidden;
}

/* Línea dorada horizontal en el borde inferior */
.contact-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(to right,
            transparent,
            rgba(212, 175, 55, .6) 30%,
            rgba(212, 175, 55, .9) 50%,
            rgba(212, 175, 55, .6) 70%,
            transparent);
}

/* Animación de entrada */
.contact-hero h1 {
    animation: chIn .9s cubic-bezier(.22, 1, .36, 1) both;
}

.contact-hero p {
    animation: chIn .9s cubic-bezier(.22, 1, .36, 1) .12s both;
}

.contact-hero .btn-primary {
    animation: chIn .9s cubic-bezier(.22, 1, .36, 1) .22s both;
}

@keyframes chIn {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ══════════════════════════════════════════════════════════
   MOBILE — max 767px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .contact-page {
        padding: 0 .875rem 3rem !important;
    }

    /* ── Hero ─────────────────────────────────────────── */
    .contact-hero {
        min-height: 300px !important;
        padding: calc(65px + 1rem) 1.25rem 2.5rem !important;
        margin-left: -.875rem !important;
        margin-right: -.875rem !important;
        margin-bottom: 1.75rem !important;
        gap: .75rem !important;
    }

    .contact-hero h1 {
        font-size: 1.7rem !important;
        letter-spacing: -.02em !important;
        line-height: 1.1 !important;
    }

    .contact-hero p {
        font-size: .82rem !important;
        line-height: 1.6 !important;
    }

    .contact-hero .btn-primary {
        font-size: .78rem !important;
        padding: .6rem 1.15rem !important;
        gap: .35rem !important;
    }

    /* ── Grid ─────────────────────────────────────────── */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .contact-left,
    .contact-right {
        gap: 1.1rem !important;
    }

    /* ── Formulario reserva ───────────────────────────── */
    .contact-section {
        padding: 1.1rem !important;
    }

    .contact-section h2,
    .contact-message h2 {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
        gap: .4rem !important;
    }

    .contact-section h2 .material-symbols-outlined,
    .contact-message h2 .material-symbols-outlined {
        font-size: 1.1rem !important;
    }

    .contact-form {
        gap: .9rem !important;
    }

    /* form-row → 1 col en mobile pequeño */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: .9rem !important;
    }

    /* Botón WhatsApp: letra más pequeña para que entre */
    .contact-submit-btn {
        font-size: .7rem !important;
        letter-spacing: .07em !important;
        padding: .85rem .75rem !important;
        gap: .5rem !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    /* ── Info cards ───────────────────────────────────── */
    .contact-info-grid {
        grid-template-columns: 1fr !important;
        gap: .75rem !important;
    }

    .contact-info-card {
        padding: .85rem 1rem !important;
        gap: .75rem !important;
        border-radius: .6rem !important;
    }

    .contact-info-card .material-symbols-outlined {
        font-size: 1.2rem !important;
        flex-shrink: 0;
        margin-top: .1rem;
    }

    .contact-info-label {
        font-size: .78rem !important;
    }

    .contact-info-value {
        font-size: .78rem !important;
        line-height: 1.45 !important;
    }

    /* ── Mapa ─────────────────────────────────────────── */
    .contact-map {
        height: 210px !important;
        border-radius: .6rem !important;
        /* En mobile touch no hay hover, mostrar color directamente */
        filter: grayscale(20%) contrast(1.1) brightness(0.85) !important;
    }

    .contact-map iframe {
        height: 210px !important;
        border-radius: .6rem !important;
    }

    /* ── Formulario mensaje ───────────────────────────── */
    .contact-message {
        padding: 1.1rem !important;
    }

    .contact-message-btn {
        font-size: .8rem !important;
        padding: .75rem !important;
    }

    /* ── Redes sociales ───────────────────────────────── */
    .contact-social {
        gap: 1rem !important;
        padding: .6rem !important;
        flex-wrap: wrap;
    }

    .contact-social-link {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    .contact-social-link .material-symbols-outlined {
        font-size: 1.1rem !important;
    }
}

/* ── 480–767px: form-row 2 cols, info-grid 2 cols ────────── */
@media (min-width: 480px) and (max-width: 767px) {

    .form-row {
        grid-template-columns: 1fr 1fr !important;
    }

    .contact-info-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .contact-hero h1 {
        font-size: 2rem !important;
    }

    .contact-submit-btn {
        font-size: .75rem !important;
        white-space: nowrap !important;
    }
}

/* ── Tablet ───────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

    .contact-page {
        padding: 0 1.5rem 3rem !important;
    }

    .contact-hero {
        border-radius: .75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 2.5rem !important;
        min-height: 360px !important;
        padding-top: calc(65px + 2rem) !important;
    }

    .contact-hero h1 {
        font-size: 2.8rem !important;
    }

    .contact-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
    }
}