/* --- CONFIGURACIÓN BASE --- */
html { 
    scroll-behavior: smooth; 
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #F9F7F3;
    color: #3D3935;
    overflow-x: hidden;
    line-height: 1.6;
}

:root {
    --primario-oscuro: #3D3935;   /* Café Mármol */
    --acentuado-bronce: #A67C52;  /* Bronce Logo */
    --terracotta-vibrante: #B85C4F;
    --fondo-crema: #F9F7F3;
    --natural-green: #70A288;
}

.text-bronce { color: #A67C52; }
.bg-fondo-crema { background-color: #F9F7F3; }
.border-bronce\/20 { border-color: rgba(166, 124, 82, 0.2); }

/* --- CLASES DE UTILIDAD --- */
.text-terracotta { color: var(--terracotta-vibrante); }
.bg-terracotta { background-color: var(--terracotta-vibrante); }
.border-terracotta { border-color: var(--terracotta-vibrante); }

/* --- BOTÓN WHATSAPP PREMIUM --- */
.btn-whatsapp {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: white !important;
    border: 2px solid var(--acentuado-bronce);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 100;
}

.btn-whatsapp i { color: #25D366; }

.btn-whatsapp:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 15px 30px rgba(166, 124, 82, 0.3);
}

/* Animación de Pulso */
.pulse-container::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--acentuado-bronce);
    opacity: 0.6;
    z-index: -1;
    animation: pulse-bronce 2s infinite;
}

@keyframes pulse-bronce {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* --- EFECTOS VISUALES --- */
.zoom-hover {
    overflow: hidden;
    border-radius: 1.5rem;
}

.zoom-hover img {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.zoom-hover:hover img {
    transform: scale(1.08);
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
    visibility: hidden;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--fondo-crema); }
::-webkit-scrollbar-thumb { background: var(--primario-oscuro); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--acentuado-bronce); }

/* ==========================================================================
    CORECCIONES PARA MÓVIL (iPhone 14 / Tablets) - COMPACTADO AL 100%
   ========================================================================== 
*/

@media (max-width: 768px) {
    /* 1. COMPACTAR ESPACIOS (Elimina los huecos blancos eternos) */
    section {
        padding-top: 2rem !important;    /* Reducido de 3rem a 2rem */
        padding-bottom: 2rem !important;
    }

    /* Forzar que el espaciado de Tailwind sea mucho menor en móvil */
    .py-24, .py-20, .py-16 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Quitar el espacio excesivo entre el título y el contenido */
    .mb-16, .mb-12, .mb-10 {
        margin-bottom: 1.25rem !important;
    }

    /* Reducir el espacio superior del primer contenido después del Hero */
    main section:first-of-type {
        padding-top: 1.5rem !important;
    }

    /* 2. HEADER Y HERO */
    h1 {
        font-size: 2rem !important; /* Un poco más pequeño para iPhone */
        line-height: 1.1 !important;
        letter-spacing: -0.02em;
    }

    /* 3. FOOTER (Ajuste de alineación y centrado) */
    footer {
        text-align: center !important;
        padding-top: 3rem !important;
    }

    footer .flex.items-center {
        justify-content: center !important;
    }

    footer h4 {
        border-left: none !important;
        border-bottom: 3px solid var(--terracotta-vibrante);
        padding-left: 0 !important;
        padding-bottom: 4px;
        display: inline-block !important;
        margin-bottom: 1.5rem !important;
    }

    footer .grid > div {
        margin-bottom: 2.5rem; 
    }

    footer ul.space-y-4, footer ul.space-y-3 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 4. WHATSAPP (Menos invasivo) */
    .mensaje-agente {
        display: none !important; 
    }

    .btn-whatsapp {
        width: 3.2rem !important;
        height: 3.2rem !important;
        bottom: 1.2rem !important;
        right: 1.2rem !important;
    }

    /* 5. SECCIÓN DE LÍNEAS (Las burbujas del index) */
    .grid-cols-5 {
        display: flex !important;
        overflow-x: auto !important; 
        gap: 1rem !important; /* Espacio más cerrado entre burbujas */
        padding-bottom: 1rem;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch; /* Desplazamiento suave en iOS */
    }

    .grid-cols-5::-webkit-scrollbar { display: none; }

    .grid-cols-5 > div {
        min-width: 90px; /* Un poco más compactas */
        flex-shrink: 0;
    }
}

/* Ajuste preventivo para PC: Evitar que las secciones se separen demasiado */
@media (min-width: 769px) {
    section + section {
        margin-top: -1.5rem; 
    }
}