/* =========================================
   1. VARIABLES Y CONFIGURACIÓN BASE
   ========================================= */
:root {
    --primary-red: #D32F2F;
    --primary-red-hover: #B71C1C;
    --primary-blue: #1F2A44;
    --secondary-blue: #2C3E50;
    --text-dark: #333333;
    --text-light: #666666;
    --white: #ffffff;
    --light-bg: #f8f9fa;
    --font-main: 'Archivo', sans-serif;
    --whatsapp-color: #25D366;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-main); color: var(--text-dark); overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* =========================================
   2. BOTÓN WHATSAPP FLOTANTE CON ANIMACIÓN
   ========================================= */

@keyframes shake-icon {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    50% { transform: rotate(15deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes pulse-green {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

#botonwat {
    position: fixed;
    /* Ubicación vertical */
    bottom: 95px; 
    /* ALINEACIÓN CLAVE: 20px a la derecha */
    right: 20px;
    z-index: 1999;
    
    /* Forzamos el tamaño del contenedor para igualar al del chat */
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#botonwat img {
    /* La imagen ocupa todo el contenedor */
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
    transition: transform 0.3s ease;
}

#botonwat:hover {
    animation: pulse-green 1.5s infinite;
}

#botonwat:hover img {
    animation: shake-icon 0.5s ease-in-out;
}

/* =========================================
   4. MEDIA QUERIES (MÓVIL / TABLET)
   ========================================= */

@media (max-width: 1100px) {
    a.btn-home {
        background: var(--primary-red);
        color: white !important;
        text-align: center;
        margin-bottom: 10px;
        border: none;
    }

    .dropdown { width: 100%; display: block; }
    
    .dropdown-content {
        position: static;
        transform: none;
        width: 100%;
        box-shadow: none;
        background-color: rgba(0,0,0,0.2);
        border-top: none;
        display: none;
        padding-left: 20px;
    }

    .dropdown:hover .dropdown-content { display: block; }

    .dropdown-content a {
        color: rgba(255,255,255,0.7);
        padding: 12px 20px;
        background: transparent;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .menu-overlay {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.7);
        z-index: 2040;
        display: none;
    }

    .menu-overlay.active { display: block; }
}