/* Reset básico */
/* Elimina márgenes y padding por defecto del navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    /* Hace que el padding y border no aumenten el tamaño total */
}

/* Estilos generales del body */
body {
    font-family: Arial, sans-serif; /* Tipo de letra */
    background: linear-gradient(105deg, #198f6a, #ffffff);
    /* Fondo degradado en diagonal */
    color: white; /* Color del texto */
    overflow-x: hidden;
}

/* ================= NAVBAR ================= */
.navbar {
    display: flex; 
    /* Activa flexbox */

    align-items: center; 
    /* Centra verticalmente */

    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;

    padding: 16px 25px; 
    /* Menos padding → navbar más compacta */

    background: white;

    border-radius: 50px;

    margin: 20px auto; 
    /* ❗ Centra horizontalmente */

    max-width: 1400px; 
    /* ❗ CLAVE: limita el ancho total */

}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;

    height: 50px; 
    /* ❗ controla el espacio del logo */
}

.logo img {
    height: 100%; 
    /* ❗ ocupa el alto del contenedor */

    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain; 
    /* evita deformación */
}
/* Links del menú */
.nav-links a {
    text-decoration: none; 
    /* Quita subrayado */

    color: #333; 
    /* Color del texto */

    font-weight: 500; 
    /* Grosor de letra */

    transition: 0.3s; 
    /* Animación suave */
}

/* Hover en links */
.nav-links a:hover {
    color: #1fa37a; 
    /* Cambia color al pasar el mouse */
}

/* Contenedor botones */
.nav-buttons {
    display: flex;
    gap: 10px; 
    /* Espacio entre botones */
}

/* Botones generales */
.btn {
    padding: 10px 20px; 
    /* Espaciado interno */

    border: none; 
    /* Quita borde */

    border-radius: 25px; 
    /* Bordes redondeados */

    cursor: pointer; 
    /* Cambia el cursor a mano */

    transition: 0.3s; 
    /* Animación suave */

    display: inline-block;
    text-decoration: none;
    text-align: center;
}

/* Botón login */
.login {
    background: transparent; 
    /* Fondo transparente */

    border: 1px solid #ccc; 
    /* Borde gris */
}

/* Botón principal */
.primary {
    background: #1fa37a; 
    /* Color verde */

    color: white; 
}

/* Hover botones */
.btn:hover {
    transform: scale(1.05); 
    /* Hace que el botón crezca un poco */

    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    /* Sombra al hacer hover */
}

/* ================= HERO ================= */
.hero {
    display: flex; 
    /* Activa flexbox: pone texto e imagen en fila */

    justify-content: center; 
    /* ❗ CLAVE: centra TODO el contenido horizontalmente 
       (ya no lo empuja a los extremos como space-between) */

    align-items: center; 
    /* Centra verticalmente */

    gap: 50px; 
    /* ❗ CLAVE: controla la distancia REAL entre texto e imagen */

    padding: 80px 40px; 
    /* Espaciado interno */

    min-height: 80vh; 
    /* Altura mínima del 80% de la pantalla */

    max-width: 1200px; 
    /* ❗ CLAVE PRO: limita el ancho total (evita que todo se estire demasiado) */

    margin: 0 auto; 
    /* ❗ CLAVE: centra el bloque completo en la pantalla */
}



.hero-text {
    flex: 1;
}

/* Texto lado izquierdo */
.hero-text {
    max-width: 600px; 
    /* Antes 480 → ahora más ancho porque el diseño creció */

    transform: translateY(-12px);
}

.hero-image {
    flex: 1.2; 
    /* Le damos más espacio al bloque visual para que el robot gane presencia */

    display: flex;
    justify-content: center;
}

/* Título */
.hero-text h1 {
    font-size: 52px;
    /* Antes: 48px → ahora más grande para competir con la imagen */

    line-height: 1.1; 
    /* Reduce espacio entre líneas → se ve más compacto y potente */

    font-weight: 700; 
    /* Hace el texto más grueso (más presencia visual) */

    margin-bottom: 20px; 
}

/* Descripción */
.hero-text p {
    font-size: 20px; 
    /* Antes: 18px → ahora más legible y proporcional */

    line-height: 1.5; 
    /* Mejora la lectura */

    margin-bottom: 30px;

    opacity: 0.9; 
    /* Ligero efecto visual más suave que el título */
}

/* Botón demo */
.demo {
    background: orange;
    color: white;

    font-size: 18px; 
    /* Hace el texto del botón más visible */

    padding: 14px 28px; 
    /* Más grande → más clickeable */
}

/* Imagen */
.hero-image img {
    width: 100%;
    height: auto;

    max-width: 820px; 
    /* Límite mayor para que el robot no se vea pequeño */

    display: block;
    animation: float 3s ease-in-out infinite;
}

/* Animación flotante */
@keyframes float {
    0% {
        transform: translateY(0px); 
        /* Posición normal */
    }
    50% {
        transform: translateY(-20px); 
        /* Sube */
    }
    100% {
        transform: translateY(0px); 
        /* Vuelve */
    }
}

/* ================= TRUST SECTION ================= */
.trust {
    padding: 80px 20px; 
    /* Espacio arriba y abajo */

    text-align: center; 
    /* Centra el texto */

    background: #fff; 
    /* Fondo blanco (rompe el verde anterior) */

    color: #111; 
    /* Color texto oscuro */
}

/* Título */
.trust-title {
    font-size: 42px; 
    /* Tamaño del texto */

    max-width: 1000px; 
    /* Limita el ancho */

    margin: 0 auto 60px auto; 
    /* 
    auto = centra horizontalmente
    40px = espacio debajo
    */

    opacity: 0; 
    /* Empieza invisible */

    transform: translateY(40px); 
    /* Empieza un poco abajo */

    transition: all 0.8s ease; 
    /* Animación suave */
}

/* Parte resaltada */
.trust-title span {
    color: #1fa37a; 
    /* Verde destacado */
}

/* Cuando aparece */
.trust-title.show {
    opacity: 1; 
    /* Se vuelve visible */

    transform: translateY(0); 
    /* Sube a su posición */
}

/* ================= CARRUSEL ================= */

.logo-carousel {
    overflow: hidden; 
    /* Oculta lo que se sale */

    max-width: 850px; 
    /* ❗ CLAVE: limita el ancho del carrusel */

    margin: 0 auto; 
    /* ❗ centra el carrusel horizontalmente */

    position: relative; 
    /* Necesario para efectos futuros (blur, fades) */
}

/* Contenedor en movimiento */
.logo-track {
    display: flex; 
    /* Pone los logos en fila */

    gap: 50px; 
    /* Espacio entre logos */

    width: max-content; 
    /* Se adapta al contenido */

    animation: scroll 20s linear infinite; 
    /* 
    scroll = nombre animación
    20s = duración
    linear = velocidad constante
    infinite = nunca se detiene
    */
}

/* Logos */
.logo-track img {
    height: 30px; 
    /* Tamaño uniforme */

    width: auto;
    display: block;
    opacity: 0.7; 
    /* Más suave visualmente */

    transition: 0.3s; 
}

/* Hover logos */
.logo-track img:hover {
    opacity: 1; 
    /* Se ve más fuerte */

    transform: scale(1.1); 
    /* Crece */
}

/* Animación */
@keyframes scroll {
    0% {
        transform: translateX(0); 
        /* Inicio */
    }
    100% {
        transform: translateX(-50%); 
        /* Se mueve a la izquierda */
    }
}

/* ================= FEATURES SECTION ================= */

.features {
    background: #f5f7f6; 
    /* ❗ Fondo gris suave (rompe el verde anterior) */

    padding: 100px 20px; 
    /* Espacio arriba y abajo */

    color: #111; 
    /* Texto oscuro */
}

/* Contenedor interno */
.features-container {
    display: flex; 
    /* Pone texto e imagen en fila */

    align-items: center; 
    /* Centra verticalmente */

    justify-content: center; 
    /* Centra todo */

    gap: 80px; 
    /* Espacio entre texto e imagen */
    flex-wrap: wrap;

    max-width: 1100px; 
    /* ❗ Limita el ancho (clave para diseño pro) */

    margin: 0 auto; 
    /* Centra horizontalmente */
}

/* Texto */
.features-text {
    flex: 1; 
    /* Ocupa espacio proporcional */

    max-width: 550px; 
    /* Limita ancho para buena lectura */

    opacity: 0; 
    /* Empieza invisible */

    transform: translateX(-50px); 
    /* Empieza desplazado a la izquierda */

    transition: all 0.8s ease; 
    /* Animación suave */
}

/* Título */
.features-text h2 {
    font-size: 42px; 
    /* Tamaño grande */

    line-height: 1.2; 
    /* Espaciado entre líneas */

    margin-bottom: 20px; 
    /* Espacio debajo */
}

/* Parte destacada */
.features-text span {
    color: #1fa37a; 
}

/* Párrafos */
.features-text p {
    font-size: 18px;

    line-height: 1.6; 
    /* Mejora lectura */

    margin-bottom: 20px; 
    /* Espacio entre párrafos */

    color: #444; 
}

/* Imagen */
.features-image {
    flex: 1; 
}

.features-image img {
    width: 100%; 
    /* Ocupa todo el contenedor */
    height: auto;

    max-width: 600px; 
    /* Límite */

    display: block;

    opacity: 0; 
    /* Empieza invisible */

    transform: translateX(50px); 
    /* Empieza desplazada a la derecha */

    transition: all 0.8s ease;
}

/* Estado visible */
.features-text.show {
    opacity: 1;
    transform: translateX(0);
}

.features-image img.show {
    opacity: 1;
    transform: translateX(0);
}

.secondary {
    background: transparent; 
    /* Sin fondo */

    border: 1px solid #1fa37a; 
    /* Borde verde */

    color: #1fa37a; 
    /* Texto verde */

    font-size: 16px;

    padding: 12px 24px;
}

/* Hover */
.secondary:hover {
    background: #1fa37a; 
    color: white; 
}

/* ================= HOW IT WORKS ================= */

.how {
    background: white; 
    /* Fondo blanco (contraste con sección anterior) */

    padding: 100px 20px;

    text-align: center; 
    /* Todo centrado */
}

.how-container {
    max-width: 1000px; 
    /* Limita ancho */

    margin: 0 auto; 
    /* Centra */
}

/* Título */
.how-title {
    font-size: 40px;
    color: #111;
    margin-bottom: 20px;

    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

.how-title span {
    color: #1fa37a; 
    /* Solo cambia color */

    font-weight: 700; 
    /* Opcional: lo hace más fuerte */
}



/* Subtítulo */
.how-subtitle {
    font-size: 18px;

    color: #555;

    margin-bottom: 60px;
}

/* Contenedor de pasos */
.steps {
    display: flex; 
    /* Los pone en fila */

    justify-content: center;

    gap: 40px;

    flex-wrap: wrap; 
    /* Permite bajar en pantallas pequeñas */
}

/* Cada paso */
.step {
    max-width: 250px;

    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

/* Imagen */
.step img {
    width: 100%; 
    height: 200px; 
    /* ❗ fuerza misma altura para todas */

    object-fit: contain; 
    /* ❗ ajusta la imagen sin deformarla */

    margin-bottom: 20px;
}

/* Título paso */
.step h3 {
    font-size: 18px;

    margin-bottom: 10px;
}

/* Texto paso */
.step p {
    font-size: 14px;

    color: #666;

    line-height: 1.5;
}

/* Estado visible */
.show {
    opacity: 1;
    transform: translateY(0);
}

/* ================= SOLUCIONES ================= */

.solutions {
    background: #f5f7f6; 
    /* Fondo gris suave */

    padding: 100px 20px;
}

.solutions-container {
    display: flex; 
    /* Pone texto e imagen en fila */

    align-items: center; 
    /* Centra verticalmente */

    justify-content: center; 

    gap: 80px; 
    /* Espacio entre texto e imagen */
    flex-wrap: wrap;

    max-width: 1100px; 
    /* Limita ancho */

    margin: 0 auto; 
    /* Centra */
}

/* Texto */
.solutions-text {
    flex: 1;

    max-width: 500px;

    opacity: 0; 
    /* Empieza invisible */

    transform: translateX(-50px); 
    /* Entra desde la izquierda */

    transition: all 0.8s ease;
}

/* Título */
.solutions-text h2 {
    font-size: 42px;
    color: #111;
    margin-bottom: 20px;
}

/* Parte verde */
.solutions-text span {
    color: #1fa37a;
}

/* Texto */
.solutions-text p {
    font-size: 18px;

    color: #444;

    margin-bottom: 20px;

    line-height: 1.6;
}

/* Imagen */
.solutions-image {
    flex: 1;
}

.solutions-image img {
    width: 100%;
    height: auto;

    max-width: 600px;
    display: block;

    opacity: 0;

    transform: translateX(50px); 
    /* Entra desde la derecha */

    transition: all 0.8s ease;
}

/* Estado visible */
.solutions-text.show {
    opacity: 1;
    transform: translateX(0);
}

.solutions-image img.show {
    opacity: 1;
    transform: translateX(0);
}

/* ================= CONTACTO (PROCESO) ================= */

.contact {
    background: #ffffff; 
    /* blanco para mantener patrón */

    padding: 100px 20px;
}

.contact-container {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 80px;
    flex-wrap: wrap;

    max-width: 1100px;

    margin: 0 auto;
}

/* Imagen */
.contact-image {
    flex: 1;
}

.contact-image img {
    width: 100%;
    height: auto;
    max-width: 500px;
    display: block;
}

/* Texto */
.contact-text-box {
    flex: 1;

    max-width: 500px;
}

.contact-text-box h2 {
    font-size: 42px;
    color: #111;
    margin-bottom: 20px;
}

.contact-text-box span {
    color: #1fa37a;
}

.contact-text-box p {
    font-size: 18px;

    color: #444;

    margin-bottom: 20px;

    line-height: 1.6;
}

/* ================= CTA FINAL ================= */

.cta {
    background: linear-gradient(135deg, #1fa37a, #4fd1b5); 
    /* Fondo verde degradado (más vivo que el inicio) */

    padding: 100px 20px;

    text-align: center;

    color: white;
}

/* Contenedor */
.cta-container {
    max-width: 700px;
    margin: 0 auto;
}

/* Título */
.cta-title {
    font-size: 42px;

    margin-bottom: 20px;
}

/* Texto */
.cta-text {
    font-size: 18px;

    margin-bottom: 30px;

    line-height: 1.6;
}

/* Botón */
.cta-button {
    background: white;

    color: #1fa37a;

    font-size: 18px;

    padding: 14px 30px;

    border-radius: 30px;

    transition: 0.3s;
}

/* Hover */
.cta-button:hover {
    transform: scale(1.05);
}

/* Nota */
.cta-note {
    margin-top: 20px;

    font-size: 14px;

    opacity: 0.9;
}

/* ================= FOOTER ================= */

.site-footer {
    background: #0f1720;
    color: #d7e2de;
    padding: 32px 20px 96px;
}

.site-footer__content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 16px 32px;
    flex-wrap: wrap;
}

.site-footer__copyright,
.site-footer__legal {
    font-size: 14px;
    line-height: 1.6;
}

/* ================= BOTÓN FLOTANTE DE WHATSAPP ================= */
.whatsapp-float {
    position: fixed; 
    /* Fijo en la pantalla, no se mueve con el scroll */

    right: 24px; 
    /* Separación de 24px desde el borde derecho */

    bottom: 24px; 
    /* Separación de 24px desde el borde inferior */

    width: 72px; 
    /* Ancho del botón */

    height: 72px; 
    /* Alto del botón */

    min-width: 72px;
    min-height: 72px;

    border-radius: 50%; 
    /* Borde totalmente redondo */

    background: transparent; 
    /* Sin fondo, la imagen es el botón */

    overflow: hidden;
    line-height: 0;
    flex-shrink: 0;
    text-decoration: none;

    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.18),
                0 8px 18px rgba(0, 0, 0, 0.12);
    /* Sombra suave para que flote visualmente sobre la página */

    display: flex; 
    /* Usamos flex para centrar el contenido dentro */

    align-items: center;
    justify-content: center;

    z-index: 9999; 
    /* Se asegura que el botón quede siempre encima de otros elementos */

    transition: transform 0.25s ease, box-shadow 0.25s ease;
    /* Transición suave al hacer hover */
}

@supports (right: env(safe-area-inset-right)) {
    .whatsapp-float {
        right: max(24px, env(safe-area-inset-right));
        bottom: max(24px, env(safe-area-inset-bottom));
    }
}

.whatsapp-float:hover {
    transform: translateY(-4px) scale(1.02); 
    /* Eleva ligeramente el botón al pasar el mouse */

    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.25),
                0 12px 22px rgba(0, 0, 0, 0.16);
    /* Sombra más fuerte en hover para mayor contraste */
}

.whatsapp-icon {
    width: 56px; 
    /* Ancho del icono dentro del botón */

    height: 56px; 
    /* Alto del icono */

    display: block;
    /* La imagen se muestra como bloque centrado */

    max-width: none;
    object-fit: contain;
    flex: 0 0 auto;
    pointer-events: none;
}

@media (max-width: 768px) {
    .navbar {
        margin: 16px;
        padding: 16px;
        border-radius: 28px;
    }

    .nav-links,
    .nav-buttons {
        width: 100%;
        justify-content: center;
    }

    .nav-links a:not(:last-child)::after {
        content: "|";
        margin-left: 12px;
        margin-right: 8px;
        color: #ccc;
        font-weight: 300;
        pointer-events: none;
    }

    .hero,
    .features-container,
    .solutions-container,
    .contact-container {
        flex-direction: column;
        text-align: center;
        gap: 32px;
    }

    .hero {
        padding: 48px 20px 64px;
        min-height: auto;
    }

    .hero-text h1,
    .trust-title,
    .features-text h2,
    .how-title,
    .solutions-text h2,
    .contact-text-box h2,
    .cta-title {
        font-size: 2rem;
    }

    .hero-text p,
    .features-text p,
    .solutions-text p,
    .contact-text-box p,
    .cta-text,
    .how-subtitle {
        font-size: 1rem;
    }

    .step {
        max-width: 320px;
    }

    .site-footer {
        padding-bottom: 120px;
    }

    .site-footer__content {
        flex-direction: column;
    }

    .whatsapp-float {
        right: 16px; 
        bottom: 16px; 
        width: 62px; 
        height: 62px; 
        min-width: 62px;
        min-height: 62px;
        /* Tamaño un poco más compacto en pantallas móviles */
    }

    .whatsapp-icon {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 480px) {
    .hero-text h1 {
        font-size: 1.8rem;
    }

    .btn,
    .nav-buttons .btn {
        width: 100%;
    }

    .nav-buttons {
        flex-direction: column;
    }

    .cta-note {
        line-height: 1.5;
    }
}