/* --- Variables de color --- */
:root {
    --primary: #00D4FF;
    --secondary: #00d1b2;
    --dark: #333;
    --light: #f4f4f4;
    --white: #ffffff;

}


/* Color para navegadores modernos */
::selection {
    background-color: var(--primary); /* El verde de tu degradado */
    color: #ffffff;            /* Color del texto al marcarse */
}

/* Soporte para Firefox */
::-moz-selection {
    background-color: var(--primary);
    color: #ffffff;
}




/* --- Reset General --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    line-height: 1.6;
    color: var(--dark);
    overflow-x: hidden;
}

/* --- ESTILOS BASE (Desktop) --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 45px 10%;
    
    /* CAMBIO CLAVE: ya no nos sigue al scrollear */
    position: absolute; 
    
    width: 100%;
    top: 0;
    left: 0;
    z-index: 2000;
    background-color: transparent;
}

/* --- Estilos para el Logo (Imagen) --- */
.logo {
    display: flex;
    align-items: center; /* Alineación vertical central */
    z-index: 2100; /* Aseguramos que esté arriba del menú en móvil */
}

.logo img {
    /* Ajustá este valor (ej. entre 40px y 60px) según el diseño de tu logo PNG */
    height: 55px; 
    width: auto; /* Mantiene la proporción */
    display: block; /* Evita espacios extra debajo */
}

.logo img:hover {
    transform: scale(1.03); /* Un toque sutil de interacción */
}

/* --- Ajustes Responsive (Móvil) --- */
@media (max-width: 768px) {
    .navbar {
        /* Mantenemos tu configuración actual de grid/flex */
    }

    .logo {
        /* Centrado absoluto si es lo que tenías antes */
        position: absolute;
      
    }

    .logo img {
        height: 43px; /* Un poco más chico en celulares para ganar espacio visual */
    }
    .nav-links a:hover {
    color: #00D4FF;
}

}

@media (min-width: 768px) {
.nav-links a:hover {
 color: #020024;
}
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
    padding-top:5px;
}

.nav-links a {
    text-decoration: none;
    color: var(--white);
    font-weight: 500;
}


.burger {
    display: none; /* Oculto en PC */
    cursor: pointer;
    z-index: 2100;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: var(--white);
    margin: 5px;
    transition: all 0.3s ease;
}



.nav-links {
    display: flex;
    align-items: center; /* Alineación vertical central para todos los LI */
    list-style: none;
    gap: 20px;
}

.nav-apps {
    display: flex;
    align-items: center; /* Alineación vertical central para las imágenes dentro del LI */
    gap: 10px;
    margin-left: 10px; /* Separación opcional del último texto */
}

.nav-app-badge {
    display: block; /* Evita espacios extra debajo de las imágenes */
    height: 35px;   /* Ajustá el tamaño a tu gusto */
    width: auto;
}

/* --- Estilos para los iconos en el menú --- */
.nav-apps {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: 15px; /* Separación del botón Banca Empresa en PC */
}

.nav-app-badge {
    height: 32px; /* Más sutiles para el menú */
    width: auto;
    transition: transform 0.3s ease;
}

.nav-app-badge:hover {
    transform: translateY(-2px);
}

/* --- MODO RESPONSIVE (Ajustes para el menú Hamburguesa) --- */
@media (max-width: 768px) {
    .nav-links {
        /* Tu configuración actual de position: fixed, flex-direction: column, etc. */
    }

    .nav-apps {
        margin-left: 0; /* Reset del margen de desktop */
        margin-top: 20px; /* Separación extra debajo de los links */
        gap: 15px;
        flex-direction: row; /* Los mantenemos uno al lado del otro en el panel móvil */
    }

    .nav-app-badge {
        height: 40px; /* Un poco más grandes en móvil para que sean fáciles de tocar */
    }


}


/* --- HERO SECTION --- */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5%;
    background: linear-gradient(90deg, #020024 0%, #00bda2 35%, #00d4ff 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}


.hero-content {
    z-index: 10;
    max-width: 700px;
    text-align: left;
    margin-top: 50px;
    
}

.hero h1 {
    font-size: 4rem;
    color: var(--white);
    line-height: 1.3;
     font-weight: 400;
}



/* --- MODO RESPONSIVE (Móvil) --- */
@media (max-width: 768px) {
    .navbar {
        display: flex;
        justify-content: center; /* Centra el contenido principal (el logo) */
        align-items: center;
        padding: 15px 5%;
        background-color: #020024;
        position: fixed;
        height: 70px; /* Forzamos una altura fija para que no salte de línea */
        font-size: 23px;
    }

    .logo {
        position: absolute; /* El truco mágico: lo sacamos del flujo */
        left: 50%;
        transform: translateX(-50%); /* Centrado absoluto real */
        margin: 0;
        z-index: 2100;
    }

    .burger {
        display: block;
        margin-left: auto; /* Empuja el burger todo a la derecha */
        z-index: 2100;
    }

    /* El resto del menú se mantiene igual */
    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 100%;
        background-color: #020024;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        transform: translateX(100%); 
        transition: transform 0.5s ease-in-out;
        z-index: 2050;
    }

    .nav-links.active {
        transform: translateX(0%);
    }



    /* --- CAMBIO DE ORDEN --- */
    .hero-image {
        order: 1; /* Este elemento aparece PRIMERO */
        margin-top: 0; /* Reset de márgenes anteriores si los hubiera */
    }

    .hero-content {
    order: 2;
    width: 100%;
    /* Agregamos espacio a los costados */
    padding: 0 5%; 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    }

    /* --- Ajustes visuales extra --- */
    .hero-image img {
        max-width: 70%; /* Un poco más chica para que no ocupe toda la pantalla */
        height: auto;
        padding-top: 33px;
    }

    .hero h1 {
        font-size: 1.5rem; /* Tipografía un toque más chica para que no ocupe tantas líneas */
        margin-bottom: 15px;
    }


  .hero {
        flex-direction: column;
        justify-content: center; /* Centra verticalmente si hay altura de sobra */
        align-items: center;     /* Centra horizontalmente los hijos (hero-content y hero-image) */
        text-align: center;      /* Centra el texto dentro de los elementos */
        height: auto;
        padding: 133px 5% 80px 5%; /* Ajustamos padding para que no quede pegado arriba */
    }

 


}



/* Animación de la X */
.toggle .line1 { transform: rotate(-50deg) translate(-5px, 6px); }
.toggle .line2 { opacity: 0; }
.toggle .line3 { transform: rotate(50deg) translate(-5px, -6px); }



/* --- EFECTO PARALLAX (Imágenes flotantes) --- */
.parallax-item {
    position: absolute;
    z-index: 1; /* Debajo del texto */
    opacity: 0.4;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none; /* No interfieren con clics */
}

.item-1 {
    width: 100px;
    height: 50px;
    top: -10%;
    left: 0%;
    bottom: 0%;
    background-image: url('tu-imagen-1.png');
    animation: flotar 20s ease-in-out infinite;
    
    /* Aplicando el desenfoque */
    filter: blur(50px); 
}

@keyframes flotar {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(0px) rotate(-8deg); }
    100% { transform: translateY(0px) rotate(-0); }

}




.hero h1 strong {
    font-weight: 700;
}

.hero-content p {
   color: white;
   font-size: 1.3rem;
}

.hero-btns {
    display: flex;
    justify-content: flex-start;
    padding: 0;
    margin-top: 2rem;
}

@media (max-width: 768px) {

.hero-btns{
  margin-top: 0.8rem;
}

}

/* Botón Phantom Píldora */
.btn-primary {
    background: transparent;
    border: 2px solid var(--primary);
    color: white;
    background:#333;
    border-radius: 50px; 
    padding: 12px 35px;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    transition: all 0.3s ease;
    margin: 10px 10px 10px 0; /* Asegura pegado a la izquierda */
}

.btn-primary:hover {
    color: white;
    transform: translateY(-2px);
    background: var(--primary);
}


/* --- BENEFICIOS ---  */

#beneficios {
    /* Ajustá este valor: si tu nav mide 80px y querés 20px de aire, usá 100px */
    scroll-margin-top: 100px; 
    
    /* El padding interno que pediste para el contenido */
    padding-top: 20px; 
}

/* Tip extra: para que el movimiento sea fluido y no un salto seco */
html {
    scroll-behavior: smooth;
}



/* --- Sección Beneficios --- */
.container {
    padding: 0px 10%;
    text-align: center;
    background: linear-gradient(90deg, #020024 0%, #00bda2 35%, #00d4ff 100%);
    padding-bottom: 150px;
}

.section-title {
    font-size: 2rem;
    margin-bottom: 80px;
    color: white;
    font-weight: 400;
}


.grid {
    display: grid;
    /* En Desktop: 4 columnas iguales */
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.card {
    min-height: 333px; /* Ajustá el número a tu gusto */
    padding: 30px 30px;
    border-radius: 21px; /* Bordes redondeados */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0px solid white; /* Un borde sutil para definir la forma */
    background-color: rgba(0, 0, 0, 0.3);
    
}

.card:hover {
    transform: translateY(-15px);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.3);
}

.card i {
    font-size: 2.5rem;
    color:#00D4FF;
    margin-bottom: 20px;
}

.card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #00D4FF;
}

.card p {
    font-size: 1rem;
    color: white;
    line-height: 1.5;
}

/* --- Responsive Beneficios --- */
@media (max-width: 1024px) {
    .grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 en tablets */
    }
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr; /* 1 sola columna en móviles */
        padding: 0 5%;
    }
    
    .section-title {
        font-size: 1.5rem;
        padding-top: 33px;
        margin-bottom: 33px;
    }
}




/* --- FIJA --- */
#fixed-bg {
    /* 1. La imagen: reemplazá por tu ruta */
    background-image: url('hombre-usando-aplicacion.jpeg');

    /* 2. El efecto fijo */
    background-attachment: fixed;

    /* 3. Centrado y cobertura total */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    /* 4. Altura mínima para que se vea (ajustala a tu gusto) */
    min-height: 80vh; 
    
    /* Para centrar el contenido de las tarjetas que pongas dentro */
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    #fixed-bg {
        /* 1. Desactivamos el efecto fijo en mobile para evitar errores de scroll */
        background-attachment: scroll; 

        /* 2. Ajustamos la altura para que no sea tan gigante en el celu */
        min-height: 80vh; 

        /* 3. IMPORTANTE: Cambiamos el encuadre para que se vea el sujeto */
        background-position: center center; 
        
        /* 4. Agregamos un poco más de padding para que las cards no toquen los bordes */
        padding: 40px 20px;
        
        /* 5. Si las cards se enciman, nos aseguramos que se apilen */
        flex-direction: column;
    }
}




/* --- CINTA MOVIMIENTO --- */
.marquee-section {
    width: 100%;
    overflow: hidden; /* Esconde lo que sobra */
    background: #020024; /* O tu degradado */
    padding: 20px 0;
    white-space: nowrap;
    display: flex;
}

.marquee-content {
    display: flex;
    /* 30s para una velocidad elegante, ajustalo si querés más rápido */
    animation: marquee-scroll 30s linear infinite;
}

.marquee-item {
    display: flex;
    flex-shrink: 0; /* Evita que el texto se achique */
}

.marquee-item span {
    font-size: 1.7rem;
    color: white;
    padding-right: 50px; /* El "espacio" entre frases, ajustalo a tu gusto */
    text-transform: uppercase;
}

.marquee-item strong {
    color: #00d4ff; /* El celeste de tu marca */
}

/* Responsive */
@media (max-width: 768px) {
.marquee-item span {
    font-size: 1.2rem;
   
}

}

/* --- LA MAGIA DEL LOOP --- */
@keyframes marquee-scroll {
    0% {
        transform: translateX(-50%); /* Empieza "corrido" a la izquierda */
    }
    100% {
        transform: translateX(0); /* Termina en su posición natural */
    }
}



/* --- Cómo empezar? --- */

.section-title-2 {
    font-size: 3rem;
    padding-top: 50px;
    margin-bottom: 100px;
    color: white;
    font-weight: 400;
}



#experience-section {
    /* El degradado que elegiste */
    background: linear-gradient(90deg, #00bda2 35%, #00d4ff 100%);
    
    /* Evita que el degradado empiece de nuevo si el contenido supera el alto de pantalla */
    background-attachment: fixed; 
    
    /* Centrado total */
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Espaciado y comportamiento */
    padding: 100px 20px;
    text-align: center;
    overflow: hidden;
}

.experience-block {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 50px; /* Mucho espacio para que luzca el fondo */
    z-index: 2;
}




/* El número gigante con transparencia */
.number {
    font-size: 12rem;
    font-weight: 900;
    line-height: 1.5;
    color: transparent;
    -webkit-text-stroke: 3px rgba(255, 255, 255, 0.2); /* Solo el contorno */
    margin-right: -40px; /* Se solapa un poco con el texto */
    user-select: none;
}

.text-box {
    padding-top: 40px;
    max-width: 450px;
}

.text-box h3 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 15px;
    letter-spacing: 2px;
    font-weight: 400;
}

.text-box p {
    font-size: 1.2rem;
    color: white;
    line-height: 1.8;
}

/* El ícono de Font Awesome como un detalle sutil */
.icon-subtle {
    font-size: 2rem;
    color: white;
    margin-top: 20px;
    display: block;
}

/* Responsive */
@media (max-width: 768px) {

    .section-title-2 {
        font-size: 2.3rem;
        padding-top: 50px;
        margin-bottom: 100px;
        color: white;
        font-weight: 400;
    }

    .experience-block {
            flex-direction: column;
            align-items: center;    /* ESTO centra los elementos hijos horizontalmente */
            text-align: center;      /* Centra el texto dentro de la text-box */
            margin-bottom: 80px;
    }

    .text-box h3 {
        font-size: 1.8rem;
        color: #fff;
        margin-bottom: 15px;
        letter-spacing: 2px;
        font-weight: 400;
    }

    .text-box p {
        font-size: 1.1rem;
        color: white;
        line-height: 1.8;
    }

    .number {
        font-size: 7rem;
        margin-bottom: 10px;    /* Cambiamos el negativo para que no pise el texto en mobile */
        margin-right: 0;        /* Eliminamos el margen negativo lateral que teníamos en desktop */
        line-height: 1;
        display: block;         /* Asegura que ocupe su propia línea para centrarse bien */
    }

    .text-box {
        padding-top: 0;         /* Quitamos el padding superior que era para alinear con el número gigante */
        max-width: 100%;        /* Que ocupe todo el ancho disponible en el celu */
    }
}




/* --- FOOTER --- */


/* --- CTA Section (La franja de colores) --- */
.cta-section {
    background: gray;
    padding: 40px 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.cta-content p { font-size: 1.1rem; margin-bottom: 5px; opacity: 0.9; }
.cta-content h2 { font-size: 1.4rem; font-weight: 700; max-width: 600px; }

.cta-apps { display: flex; gap: 15px; }
.app-badge { height: 45px; cursor: pointer; transition: transform 0.3s; }
.app-badge:hover { transform: scale(1.05); }

/* --- Footer Principal --- */
.main-footer {
    background-color: #0e0121; /* El morado/negro profundo de la imagen */
    color: #ffffff;
    padding: 60px 10% 40px 10%;
    text-align: center;
}

.footer-container { max-width: 1200px; margin: 0 auto; text-align: left;}

.footer-links { margin-bottom: 50px; }
.footer-links p { margin: 10px 0; font-size: 0.95rem; }
.footer-links a { color: #00d4ff; text-decoration: none; font-weight: 600; }

.footer-legal-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    text-align: left;
    align-items: center;
    padding-bottom: 40px;
}

.legal-text p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 15px;
}

.legal-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.legal-logos img { max-width: 120px; opacity: 0.8; filter: brightness(0) invert(1); }

.footer-socials {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    font-size: 1.5rem;
    padding-top: 30px;
}

.footer-socials a { color: #00d4ff; transition: 0.3s; }
.footer-socials a:hover { color: white; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .cta-section { flex-direction: column; text-align: center; gap: 30px; }
    .footer-legal-grid { grid-template-columns: 1fr; text-align: center; }
    .legal-logos { flex-direction: row; justify-content: center; }
    .footer-socials { justify-content: center; }
    .footer-bottom{ text-align: center; }
}




/* --- Resto de Secciones --- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 2rem;
}


.legal-text {
    font-size: 0.8rem;
    color: #666;
    text-align: justify;
    padding: 2rem 0;
    border-top: 1px solid #ddd;
}

.footer-bottom{
    margin-top: 15px;
}




/* SCROLL */

.scroll-indicator {
    position: absolute;
    bottom: 133px; /* Separación del borde inferior */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
}

@media (max-width: 768px) {
    /* ... tus otros estilos de móvil ... */

    .scroll-indicator {
        display: none; /* Desaparece por completo en celulares */
    }
}

/* El ratón */
.mouse {
    width: 26px;
    height: 42px;
    border: 2px solid var(--white);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
    opacity: 0.7;
}

/* La ruedita animada */
.wheel {
    width: 4px;
    height: 8px;
    background-color: var(--white);
    border-radius: 2px;
    animation: scroll-wheel 2s infinite;
}

/* Flechas inferiores */
.arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
}

.arrow span {
    display: block;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid var(--white);
    border-right: 2px solid var(--white);
    transform: rotate(45deg);
    margin: -4px;
    animation: scroll-arrow 2s infinite;
    opacity: 0.7;
}

/* Keyframes para la ruedita */
@keyframes scroll-wheel {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(15px); opacity: 0; }
}

/* Keyframes para las flechas */
@keyframes scroll-arrow {
    0% { opacity: 0; transform: rotate(45deg) translate(-5px, -5px); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: rotate(45deg) translate(5px, 5px); }
}

/* Ocultar en móviles muy pequeños si tapa el contenido */
@media (max-width: 480px) {
    .scroll-indicator {
        bottom: 15px;
        transform: translateX(-50%) scale(0.8);
    }
}