/* ==========================================================================
   SITE.CSS - EXCLUSIVO PARA EL SITIO WEB PRINCIPAL (INDEX, SEO, HOSTING)
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; width: 100%; }

:root {
    --color-fondo: #fafafa;
    --color-blanco: #ffffff;
    --color-texto: #111827;
    --color-acento-verde: #74B72F;
    --color-oscuro-cta: #0f172a;
    --fuente-principal: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* FUENTE INTER V20 LOCAL */
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/assets/fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/assets/fonts/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('/assets/fonts/inter-v20-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap;
    src: url('/assets/fonts/inter-v20-latin-800.woff2') format('woff2');
}

body { 
    background-color: var(--color-fondo); 
    color: var(--color-texto); 
    font-family: var(--fuente-principal); 
    line-height: 1.7; 
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; border-radius: 0.75rem; }

.container, .contenedor-hero, .contenedor-contacto, .contenedor-faq, .contenedor-tecnico {
    max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; width: 100%;
}

/* TIPOGRAFÍA */
h1, .titulo-principal { font-size: 2.5rem !important; line-height: 1.2 !important; font-weight: 800 !important; color: #0f172a !important; margin-bottom: 1.5rem !important; }
h2, .contenedor-faq h2 { font-size: 2rem !important; line-height: 1.3 !important; font-weight: 800 !important; color: #0f172a !important; margin-bottom: 1.5rem !important; }
p, .subtitulo-hero { color: #111827 !important; font-size: 1.18rem !important; line-height: 1.7 !important; font-weight: 450 !important; }
p strong { color: #000000 !important; font-weight: 700 !important; }

/* HEADER Y NAVEGACIÓN */
.site-header { padding: 1.2rem 2rem; background: var(--color-blanco); border-bottom: 1px solid #f1f5f9; width: 100%; }
.contenedor-header { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; }
.logo-link { display: inline-block; }
.logo { max-width: 4.5rem !important; height: auto !important; }
.nav-menu { display: flex; align-items: center; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { text-decoration: none; color: var(--color-texto); font-weight: 500; }
.menu-toggle, .menu-close { display: none; }

.btn-solicitar, .btn {
    background-color: #0f172a !important; color: #ffffff !important; padding: 0.75rem 1.75rem !important;
    border-radius: 9999px !important; text-decoration: none !important; display: inline-block !important; font-weight: 700 !important; margin-top: 1rem;
}

/* LISTAS DE PALOMITA Y DISCO */
.check-lista { list-style: none !important; display: inline-block !important; text-align: left !important; margin: 1.5rem 0 !important; }
.check-lista li { margin-bottom: 0.75rem !important; font-size: 1.18rem !important; color: #111827 !important; }
.check-lista li::before { content: "✓" !important; color: #74B72F !important; margin-right: 0.75rem !important; font-weight: bold !important; }

.columna-texto ul { list-style-type: disc !important; padding-left: 1.5rem !important; margin: 1rem 0 !important; }
.columna-texto li { margin-bottom: 0.5rem !important; font-size: 1.1rem !important; color: #111827 !important; }

/* SECCIONES Y ZIG-ZAG ESCRITORIO */
.hero, .seccion-tecnica, .seccion-seo, .seccion-contacto { padding: 5rem 1.5rem; width: 100%; }
.hero { text-align: center; }

.grid-dos-columnas { 
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4rem !important; 
    align-items: center !important; max-width: 1100px; margin: 0 auto;
}
.columna-texto { text-align: left; }
.columna-imagen img, .imagen-tecnica { width: 100%; height: auto; object-fit: cover; border-radius: 0.75rem; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.08); }
.seccion-contacto { text-align: center; background-color: #ffffff; }

footer, .site-footer { padding: 2.5rem 1.5rem !important; text-align: center !important; background-color: #111827 !important; color: #ffffff !important; }
footer p, .site-footer p { color: #ffffff !important; font-size: 0.95rem !important; }

/* MÓVIL Y MENÚ HAMBURGUESA */
@media (max-width: 768px) {
    .hero, .seccion-tecnica, .seccion-seo, .seccion-contacto { padding: 3rem 1.25rem !important; }
    h1, .titulo-principal { font-size: 1.8rem !important; }
    h2 { font-size: 1.5rem !important; }
    .grid-dos-columnas { grid-template-columns: 1fr !important; gap: 2.5rem !important; text-align: center; }
    .invertir-movil { display: flex !important; flex-direction: column-reverse !important; }
    .columna-texto { text-align: center; }
    
    .site-header { padding: 0.75rem 0.85rem !important; }
    .contenedor-header { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; }
    .logo img { max-width: 85px !important; }

    .menu-toggle { font-size: 1.6rem !important; background: none !important; border: none !important; cursor: pointer !important; display: block !important; color: #0f172a !important; }
    .nav-menu { display: none !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-color: #ffffff !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; z-index: 1000 !important; }
    .nav-menu.active { display: flex !important; }
    .nav-links { flex-direction: column !important; gap: 2rem !important; text-align: center !important; }
    .nav-links a { font-size: 1.4rem !important; font-weight: 700 !important; }
    .menu-close { position: absolute !important; top: 1.5rem !important; right: 1.5rem !important; font-size: 1.8rem !important; border: none !important; background: none !important; cursor: pointer !important; display: block !important; color: #0f172a !important; }
}

/* ==========================================================================
   ESPACIADO MINIMALISTA PARA SECCIÓN FAQ Y BOTONES DE CONTACTO
   ========================================================================== */
.seccion-faq {
    padding: 5rem 1.5rem 6rem 1.5rem !important; /* Espacio amplio antes del footer */
    background-color: #ffffff;
}

.contenedor-faq {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item, .contenedor-faq div {
    margin-bottom: 2.5rem !important; /* Separación limpia entre preguntas */
}

.seccion-contacto {
    padding: 5rem 1.5rem 6rem 1.5rem !important;
}

.seccion-contacto .btn-solicitar,
.seccion-contacto .btn {
    margin-top: 2rem !important;
    margin-bottom: 1.5rem !important;
}

@media (max-width: 768px) {
    .seccion-faq, .seccion-contacto {
        padding: 3.5rem 1.25rem 4.5rem 1.25rem !important;
    }
}

/* ==========================================================================
   BANNER DE COOKIES INFERIOR (ESTILO PLANTAS ELÉCTRICAS ROYVAN)
   ========================================================================== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #111827 !important;
    color: #ffffff !important;
    padding: 0.85rem 1.5rem;
    z-index: 9999;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.cookie-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.cookie-text {
    font-size: 0.9rem !important;
    color: #e2e8f0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.cookie-buttons {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 0.45rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Botón Aceptar */
.cookie-btn-accept {
    background-color: #374151;
    color: #ffffff;
    border: none;
}

.cookie-btn-accept:hover {
    background-color: #4b5563;
}

/* Botón Rechazar */
.cookie-btn-reject {
    background-color: #374151;
    color: #ffffff;
    border: none;
}

.cookie-btn-reject:hover {
    background-color: #4b5563;
}

/* Botón Ajustes */
.cookie-btn-settings {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #6b7280;
}

.cookie-btn-settings:hover {
    border-color: #ffffff;
}

/* Adaptación para Celulares */
@media (max-width: 768px) {
    .cookie-container {
        flex-direction: column;
        text-align: center;
        gap: 0.85rem;
    }

    .cookie-buttons {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .cookie-btn {
        padding: 0.4rem 0.9rem;
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   WIDGET FLOTANTE DE WHATSAPP CON MONIGOTE INTERACTIVO
   ========================================================================== */
.floating-whatsapp-widget {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none !important;
    transition: transform 0.3s ease;
}

.floating-whatsapp-widget:hover {
    transform: translateY(-5px) scale(1.03);
}

/* Botón Circular Verde */
.whatsapp-avatar-btn {
    width: 60px;
    height: 60px;
    background-color: #74B72F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(116, 183, 47, 0.45);
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.floating-whatsapp-widget:hover .whatsapp-avatar-btn {
    background-color: #639d28;
}

.svg-monigote {
    width: 36px;
    height: 36px;
}

/* Punto de estado en línea (Verde brillante pulsante) */
.online-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background-color: #22c55e;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

/* Globito de diálogo (Tooltip) */
.whatsapp-tooltip {
    background-color: #ffffff;
    color: #0f172a;
    padding: 0.6rem 1rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.12);
    border: 1px solid #e2e8f0;
    white-space: nowrap;
    position: relative;
    animation: pulse-bounce 2s infinite;
}

/* Flechita del globito */
.whatsapp-tooltip::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 7px solid #ffffff;
}

.whatsapp-tooltip strong {
    color: #74B72F;
}

/* Animación sutil para llamar la atención sin ser molesto */
@keyframes pulse-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Adaptación para pantallas móviles */
@media (max-width: 768px) {
    .floating-whatsapp-widget {
        bottom: 1.5rem;
        right: 1.25rem;
    }
    
    .whatsapp-avatar-btn {
        width: 54px;
        height: 54px;
    }
    
    .svg-monigote {
        width: 32px;
        height: 32px;
    }

    .whatsapp-tooltip {
        font-size: 0.82rem;
        padding: 0.5rem 0.85rem;
    }
}

/* ==========================================================================
   MUÑECO COLGADO DE UN HILO ELÁSTICO (WHATSAPP FLOTANTE)
   ========================================================================== */
.hilo-whatsapp-widget {
    position: fixed;
    right: 2.5rem;
    bottom: 30px; /* Controlado dinámicamente por JS al scrollear */
    z-index: 9990;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    transition: bottom 0.1s ease-out, transform 0.2s ease;
}

.hilo-whatsapp-widget:hover {
    transform: scale(1.05);
}

/* Hilo Verde SVG que viene desde la parte superior del viewport */
.hilo-svg {
    position: fixed;
    top: 0;
    right: calc(2.5rem + 27px); /* Alineado al centro del muñeco */
    width: 6px;
    height: 100vh; /* Ocupa el alto total de la pantalla */
    z-index: 9989;
    pointer-events: none; /* No interfiere con clics */
}

/* Globito de Diálogo */
.hilo-tooltip {
    background-color: #ffffff;
    color: #0f172a;
    padding: 0.5rem 0.85rem;
    border-radius: 0.85rem;
    font-size: 0.85rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border: 1px solid #e2e8f0;
    white-space: nowrap;
    margin-bottom: 0.5rem;
    animation: balanceo 2.5s infinite ease-in-out;
}

.hilo-tooltip strong { color: #74B72F; }

/* Botón Circular del Muñeco */
.hilo-avatar-btn {
    width: 60px;
    height: 60px;
    background-color: #74B72F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(116, 183, 47, 0.4);
    position: relative;
    animation: balanceo 2.5s infinite ease-in-out;
}

.svg-monigote {
    width: 38px;
    height: 38px;
}

.online-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 13px;
    height: 13px;
    background-color: #22c55e;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

/* Balanceo tipo columpio suave */
@keyframes balanceo {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-4deg); }
    75% { transform: rotate(4deg); }
}

/* Adaptación para pantallas celulares */
@media (max-width: 768px) {
    .hilo-whatsapp-widget { right: 1.25rem; }
    .hilo-svg { right: calc(1.25rem + 24px); }
    .hilo-avatar-btn { width: 52px; height: 52px; }
    .svg-monigote { width: 32px; height: 32px; }
}


/* ==========================================================================
   CABLE EN ESPIRAL VERDE + MUÑECO SUJETADO (ANIMACIÓN FLOTANTE)
   ========================================================================== */
.cable-whatsapp-container {
    position: fixed;
    top: 0;
    right: 3.2rem;
    height: 100vh;
    width: 90px;
    z-index: 9990;
    pointer-events: none; /* Permite hacer clic a través del contenedor */
}

/* Lienzo SVG donde se dibuja el resorte verde */
.svg-cable-resorte {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Botón flotante clicable con el muñeco */
.monigote-resorte-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    pointer-events: auto; /* Activa la interacción y clics */
    transition: transform 0.2s ease;
}

.monigote-resorte-btn:hover {
    transform: translateX(-50%) scale(1.06);
}

/* Globito de Diálogo */
.tooltip-cable {
    background-color: #ffffff;
    color: #0f172a;
    padding: 0.45rem 0.8rem;
    border-radius: 0.85rem;
    font-size: 0.82rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border: 1px solid #e2e8f0;
    white-space: nowrap;
    margin-bottom: 0.35rem;
    animation: mecedora 3s infinite ease-in-out;
}

.tooltip-cable strong {
    color: #74B72F;
}

/* Botón Circular del Muñeco */
.avatar-resorte {
    width: 58px;
    height: 58px;
    background-color: #74B72F;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(116, 183, 47, 0.45);
    position: relative;
    animation: mecedora 3s infinite ease-in-out;
}

.svg-monigote-sujetado {
    width: 38px;
    height: 38px;
}

.online-badge-resorte {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background-color: #22c55e;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

/* Balanceo tipo columpio suave */
@keyframes mecedora {
    0%, 100% { transform: rotate(0deg); }
    30% { transform: rotate(-5deg); }
    70% { transform: rotate(5deg); }
}

/* Adaptación para Pantallas Celulares */
@media (max-width: 768px) {
    .cable-whatsapp-container {
        right: 1.25rem;
        width: 75px;
    }

    .avatar-resorte {
        width: 50px;
        height: 50px;
    }

    .svg-monigote-sujetado {
        width: 32px;
        height: 32px;
    }

    .tooltip-cable {
        font-size: 0.78rem;
        padding: 0.35rem 0.65rem;
    }
}