/* VARIABLES */
:root {
    --bg: #ffffff;
    --text: #111;
    --card: #ffffff;
    --primary: #B20738; /* CAMBIADO A ROJO OSCURO */
    --footer-bg: #f3f3f3;
}

.dark-mode {
    --bg: #0d1117;
    --text: #e6edf3;
    --card: #161b22;
    --footer-bg: #0d1117;
    --primary: #B20738; /* CAMBIADO A ROJO OSCURO EN dark-mode */
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    /* Aumento del 30% en el tamaño de fuente base */
    font-size: 1.3rem; 
    
    /* ELIMINADO: La compensación de padding-top se mueve a @media (min-width: 769px) */
}

/* NAVBAR */
.navbar {
    display: flex;
    /* CAMBIO CLAVE PARA WEB: space-between para distribuir los 3 bloques */
    justify-content: space-between; 
    align-items: center;
    padding: 18px 40px;
    background: var(--card);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    
    /* PROPIEDADES PARA HACER EL HEADER FIJO */
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 1000; 
    
    /* NUEVO: Aseguramos que el navbar no exceda el ancho de la ventana */
    box-sizing: border-box; 
    overflow: hidden; 
}

.logo {
    font-size: 1.5rem; 
    font-weight: 700;
    /* ELIMINADO: margin-right: 40px; */
}

/* CONTENEDOR NAV: Centraremos este bloque en el espacio restante */
nav {
    display: flex;
    align-items: center;
    /* CAMBIO CLAVE PARA WEB: Limitamos el ancho y centramos los enlaces internamente */
    max-width: 600px; 
    width: 100%;
    justify-content: center;
}

nav a {
    margin-right: 25px;
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    /* Usa el tamaño del body (1.3rem) */
    font-size: unset; 
}

/* Contenedor de botones de idioma */
.actions {
    display: flex;
    /* Reducimos el espacio entre los botones */
    gap: 2px; 
    margin-left: 20px; 
    align-items: center; 
}

/* BUTTONS */
.btn-primary {
    /* Ajuste de padding/tamaño para compensar la fuente más grande */
    padding: 13px 25px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease;
    font-size: unset;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(178, 7, 56, 0.4); 
}

.btn-outline {
    /* Ajuste de padding/tamaño para compensar la fuente más grande */
    padding: 13px 25px;
    border: 2px solid var(--primary);
    color: var(--primary);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: .2s ease;
    font-size: unset;
}

.btn-outline:hover {
    background: var(--primary);
    color: #fff;
}

.theme-toggle {
    padding: 8px 12px;
    background: transparent;
    border: 2px solid var(--primary);
    border-radius: 6px;
    cursor: pointer;
    color: var(--primary);
    font-size: 1rem;
}

/* HERO */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    background: var(--bg);
    position: relative; 
    overflow: hidden; 
    min-height: 500px; 
}

/* Contenedor del brillo animado */
.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(178, 7, 56, 0.1) 0%, transparent 60%); 
    z-index: 0; 
    /* Mantenemos esta animación para el efecto de fondo "glow" */
    animation: hero-bg-glow 15s infinite ease-in-out; 
}

@keyframes hero-bg-glow {
    0% { transform: scale(1.0) translate(0%, 0%); opacity: 0.8; }
    25% { transform: scale(1.1) translate(10%, 10%); opacity: 0.9; }
    50% { transform: scale(1.0) translate(0%, 0%); opacity: 0.8; }
    75% { transform: scale(0.9) translate(-10%, -10%); opacity: 0.7; }
    100% { transform: scale(1.0) translate(0%, 0%); opacity: 0.8; }
}

/* Nuevos estilos para los elementos de la animación de fondo */
.hero-visuals {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0; /* Asegura que estos elementos estén detrás del contenido principal */
    pointer-events: none; 
}

.hero-visuals .element {
    position: relative; 
    top: auto; 
    left: auto;
    bottom: auto;
    right: auto;
    animation: none; /* Deshabilitamos la animación del hijo */
    opacity: 0.2; /* Opacidad original de los elementos hexa/cloud/device */
    background-repeat: no-repeat;
    background-size: contain;
}

.hero-visuals .element.hexa-lg {
    width: 150px;
    height: 150px;
    background: rgba(178, 7, 56, 0.1);
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hero-visuals .element.hexa-sm {
    width: 80px;
    height: 80px;
    background: rgba(178, 7, 56, 0.08);
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hero-visuals .element.device {
    width: 100px; 
    height: auto;
    background-image: url('https://via.placeholder.com/100'); 
}
.hero-visuals .element.cloud {
    width: 120px; 
    height: auto;
    background-image: url('https://via.placeholder.com/120x60'); 
}

/* ESTILO DE LA PLUMA ANIMADA */
.hero-visuals .element.pen-animated {
    /* Aumentado 3 veces */
    width: 450px; 
    height: 450px;
    /* Mantenemos el color original */
    opacity: 1; 
    filter: none; 
    /* Mantenemos la velocidad de animación más lenta */
    animation-duration: 25s; 
    animation-timing-function: linear; 
}


/* --- NUEVOS ESTILOS PARA INTERACCIÓN DEL HERO --- */

/* Contenedor del elemento visual: lo hacemos clicable y le damos posición absoluta */
.hero-visuals .visual-wrapper {
    /* Necesario para hacer clic y controlar el pop-up */
    position: absolute; 
    z-index: 5; 
    cursor: pointer;
    /* ELIMINAMOS la animación floatAndFade */
    animation: none; 
}

/* Reaplicamos las posiciones y retrasos al WRAPPER (el elemento clicable) */
.hero-visuals .visual-wrapper:nth-of-type(1) { top: 10%; left: 5%; animation-delay: 0s; transform: scale(0.8); } 
.hero-visuals .visual-wrapper:nth-of-type(2) { top: 60%; left: 20%; animation-delay: 5s; transform: scale(0.7); } 
.hero-visuals .visual-wrapper:nth-of-type(3) { top: 30%; right: 15%; animation-delay: 10s; transform: scale(0.9); } 
.hero-visuals .visual-wrapper:nth-of-type(4) { bottom: 5%; right: 5%; animation-delay: 15s; transform: scale(0.6); } 
.hero-visuals .visual-wrapper:nth-of-type(5) { top: 80%; left: 10%; animation-delay: 20s; transform: scale(0.8); } 
.hero-visuals .visual-wrapper:nth-of-type(6) { top: 20%; left: 40%; animation-delay: 25s; transform: scale(1.0); } 
.hero-visuals .visual-wrapper:nth-of-type(7) { top: 5%; left: 30%; animation-delay: 2s; transform: scale(0.5) rotate(15deg); } 
.hero-visuals .visual-wrapper:nth-of-type(8) { top: 70%; left: 45%; animation-delay: 8s; transform: scale(0.6) rotate(-20deg); } 
.hero-visuals .visual-wrapper:nth-of-type(9) { top: 40%; right: 5%; animation-delay: 13s; transform: scale(0.4) rotate(30deg); } 
.hero-visuals .visual-wrapper:nth-of-type(10) { top: 80%; right: 25%; animation-delay: 18s; transform: scale(0.7) rotate(5deg); } 
.hero-visuals .visual-wrapper:nth-of-type(11) { top: 25%; left: 7%; animation-delay: 23s; transform: scale(0.6) rotate(-10deg); } 


/* Estilo para el Pop-up que se moverá a la posición del clic */
.info-popup {
    position: absolute;
    top: 50%; /* Posición inicial */
    left: 50%; /* Posición inicial */
    transform: translate(-50%, -50%);
    background: var(--primary);
    color: #fff;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 100; /* Asegura que esté por encima de todo */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    min-width: 250px;
    text-align: center;
    font-size: 1rem;
    pointer-events: none; /* Ignora clics para no bloquear otros elementos */
}

.info-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -120%); /* Ligeramente más arriba del punto de clic */
}


.hero-content {
    /* Eliminamos max-width: 50%; para que ocupe todo el espacio central */
    max-width: 800px;
    position: relative; 
    z-index: 1; /* Asegura que el contenido esté por encima de las animaciones de fondo */
    
    /* AJUSTE CLAVE: Centrar el texto */
    text-align: center;
}

.hero-title {
    font-size: 3rem;
    margin-bottom: 20px;
}

.hero-image {
    position: relative; 
    z-index: 1; /* Asegura que la imagen principal esté por encima */
}

.hero-image img {
    width: 500px;
    border-radius: 10px;
    /* Animación eliminada */
}

/* FEATURES */
.features {
    padding: 80px 40px;
    text-align: center;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.feature-card {
    padding: 30px;
    background: var(--card);
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

/* NUEVA SECCIÓN: PLATFORM (Similar al diseño de New Relic) */
.platform {
    padding: 80px 40px;
    text-align: center;
    background: var(--footer-bg); 
}

.platform-grid {
    display: grid;
    /* CAMBIO CLAVE: CUATRO COLUMNAS PARA ADAPTAR EL NUEVO CUADRO */
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px;
    margin-top: 40px;
}

.platform-card {
    padding: 40px;
    background: var(--card);
    border-radius: 10px;
    text-align: left;
    transition: transform 0.3s ease;
    border: 1px solid rgba(178, 7, 56, 0.1); 
}

.platform-card:hover {
    box-shadow: 0 15px 30px rgba(178, 7, 56, 0.2); 
    transform: translateY(-5px);
}

.platform-card h3 {
    color: var(--primary);
    font-size: 1.5rem;
}

/* --- NUEVA SECCIÓN: CERTIFICACIONES --- */
.certifications {
    padding: 80px 40px;
    text-align: center;
    /* Usa el color de fondo opuesto al platform para contraste */
    background: var(--bg); 
}

.certs-grid {
    display: grid;
    /* AJUSTE CLAVE: 10 columnas en web para los 10 logos */
    grid-template-columns: repeat(10, 1fr); 
    /* AJUSTE CLAVE: Espacio reducido */
    gap: 10px;
    margin-top: 40px;
    align-items: center;
    justify-content: center;
    /* Ajustado para el nuevo número de logos */
    max-width: 1500px; 
    margin-left: auto;
    margin-right: auto;
}

.cert-item {
    padding: 15px; 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ESTILOS DE ESCRITORIO PARA CERTIFICACIONES (Aplicados antes del media query) */
.certifications .cert-stamp {
    /* Define el tamaño grande de escritorio, que será anulado por el media query en móvil */
    width: 120px; 
    height: 75px;
    object-fit: contain !important; /* Forzado con !important */
    opacity: 0.8 !important; 
    transition: opacity 0.3s ease;
}

.cert-stamp:hover {
    opacity: 1 !important; /* Brillo al pasar el ratón */
}

/* CTA */
.cta {
    padding: 100px 40px;
    text-align: center;
    background: var(--primary);
    color: #fff;
}

/* FOOTER */
.footer {
    background: var(--footer-bg);
    padding: 20px;
    text-align: center;
}

/* LOGO IMAGE DIMENSION */
.logo-img {
    height: 100px; 
    width: auto;
    vertical-align: middle;
}

/* --- ESTILOS DE ESCRITORIO (Aplica padding-top solo si el header es fijo) --- */
@media (min-width: 769px) {
    /* ELIMINAMOS padding-top del body */
    
    /* APLICAMOS LA COMPENSACIÓN DIRECTAMENTE A HERO */
    .hero {
        /* CAMBIO A 140PX: Reduce el espacio entre el header y el Hero, manteniendo la compensación. */
        padding-top: 140px; 
    }
}

/* --- RESPONSIVE STYLES (Móvil y Tabletas) --- */
@media (max-width: 768px) {
    
    /* Global */
    body {
        font-size: 14px;
    }
    .navbar, .hero, .features, .platform, .cta {
        padding: 20px 15px;
    }
    
    /* Navbar en móvil */
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        justify-content: space-between; 
    }

    /* Navbar */
    .navbar {
        flex-wrap: wrap; 
        padding-bottom: 10px;
        /* NUEVO: Sobrescribimos el overflow: hidden de arriba para que el NAV sí pueda hacer scroll */
        overflow: visible; 
    }
    
    /* Contenedor NAV en móvil: Centramos los enlaces debajo del logo/botones */
    nav {
        order: 3; 
        width: 100%;
        margin-top: 10px;
        margin: 10px 0 0 0; 
        text-align: center;
        display: flex;
        justify-content: space-around; 
        flex-wrap: nowrap; 
        overflow-x: auto; 
    }
    nav a {
        margin: 0 5px; 
        flex-grow: 1;
        padding: 5px 0;
        font-size: 14px; 
        white-space: nowrap; 
    }
    
    /* Contenedor de botones de idioma */
    .actions {
        order: 2; 
        margin-left: 0;
        display: flex;
        gap: 5px; 
        align-items: center; 
    }
    
    .actions .btn-primary {
        /* Oculta el botón 'EN' (o el segundo botón) para ahorrar espacio en móvil */
        display: none;
    }
    
    .actions .btn-outline {
        /* Asegura que el botón restante (ES) ocupe menos espacio */
        padding: 8px 10px; 
    }
    
    .btn-primary, .btn-outline {
        padding: 8px 15px; 
        font-size: 14px; 
    }

    /* Hero */
    .hero {
        /* AJUSTE CLAVE: Damos un padding-top para compensar la altura del header apilado */
        padding-top: 150px; 
        flex-direction: column; 
        text-align: center;
        min-height: auto;
    }
    .hero-content {
        max-width: 100%;
        margin-bottom: 40px; 
        order: 1;
    }
    .hero-title {
        font-size: 2rem;
    }
    .hero-image {
        order: 2;
    }
    .hero-image img {
        width: 100%; 
        max-width: 300px; 
        height: auto;
    }
    .hero-buttons {
        display: flex;
        justify-content: center;
        gap: 15px;
    }
    
    /* Grillas */
    .features-grid, .platform-grid {
        /* Aseguramos que en móvil sigan siendo 1 columna */
        grid-template-columns: 1fr; 
        gap: 20px;
    }
    
    /* Grilla de Certificaciones en Móvil */
    .certs-grid {
        /* Mantenemos 2 columnas en móvil. */
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px;
    }
    
    /* AJUSTE CLAVE MÓVIL: Reducimos el tamaño de la imagen de certificación para caber en 2 columnas */
    .certifications .cert-stamp {
        width: 90px;
        height: 55px;
        opacity: 0.8;
    }

    /* Logo */
    .logo-img {
        height: 60px; 
    }
}

/* --- NUEVOS ESTILOS: BOTÓN FLOTANTE DE WHATSAPP --- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25D366; /* Color oficial de WhatsApp */
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    z-index: 10000; /* Asegura que esté por encima de todo */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-icon {
    width: 30px; 
    height: 30px;
    /* CAMBIO CLAVE: Usa el filtro para forzar el SVG a blanco sobre el fondo verde */
    filter: brightness(0) invert(1); 
}

/* RESPONSIVE para el botón flotante */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
    .whatsapp-icon {
        width: 25px;
        height: 25px;
    }
}