/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
    --header-height: 3rem;
    /*========== Colors ==========*/
    --hue: 210; /* Nuevo tono de azul para un look más fresco y moderno */
    --sat: 80%; /* Saturación ajustada */
    --first-color: hsl(var(--hue), var(--sat), 45%); /* Azul primario */
    --first-color-light: hsl(var(--hue), var(--sat), 95%); /* Azul muy claro, casi blanco */
    --first-color-lighten: hsl(var(--hue), var(--sat), 85%); /* Azul claro */
    --first-color-alt: hsl(var(--hue), var(--sat), 35%); /* Azul oscuro para hover */
    --second-color: hsl(40, 80%, 60%); /* Color de acento (naranja/amarillo) para "destaca" */
    --title-color: hsl(var(--hue), 10%, 15%); /* Gris oscuro para títulos */
    --text-color: hsl(var(--hue), 5%, 35%); /* Gris medio para texto */
    --text-color-light: hsl(var(--hue), 5%, 65%); /* Gris claro para texto secundario */
    --body-color: hsl(var(--hue), 0%, 98%); /* Blanco casi puro para el fondo principal */
    --container-color: #FFF; /* Blanco puro para contenedores */
    --scroll-bar-color: hsl(var(--hue), 4%, 85%);
    --scroll-thumb-color: hsl(var(--hue), 4%, 75%);
    /*========== Font and typography ==========*/
    --body-font: 'Poppins', sans-serif;
    --biggest-font-size: 3.5rem; /* Ajustado para un hero más impactante */
    --h1-font-size: 2.5rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.25rem;
    --p-font-size: 1rem; /* Texto de párrafo más estándar */

    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;
    /*========== Font weight ==========*/
    --font-regular: 400;
    --font-semi-bold: 600;
    --font-bold: 700;
    /*========== Margenes ==========*/
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem;
    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;

    --section-spacing: 6rem; /* Nueva variable para controlar el espaciado vertical de las secciones */
}

@media screen and (min-width: 968px) {
    :root {
        --biggest-font-size: 4.5rem; /* Aún más grande en desktop */
        --h1-font-size: 3rem;
        --h2-font-size: 2.5rem;
        --h3-font-size: 1.5rem;
        --p-font-size: 1.1rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
        --section-spacing: 8rem; /* Mayor espacio en desktop */
    }
}

/*=============== BASE ===============*/
*, ::before, ::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: var(--header-height) 0 0 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
    transition: background-color .5s ease;
    line-height: 1.6; /* Mayor legibilidad en párrafos */
}

h1, h2, h3 {
    font-weight: var(--font-bold); /* Títulos más audaces */
    color: var(--title-color);
    line-height: 1.2;
    transition: color .3s ease; /* Para cambio de tema */
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

p {
    text-align: left;
    margin-bottom: var(--mb-1); /* Espacio consistente entre párrafos */
}

/*=============== THEME ===============*/
body.dark-theme {
    --first-color-light: hsl(var(--hue), var(--sat), 75%);
    --title-color: hsl(var(--hue), 10%, 95%);
    --text-color: hsl(var(--hue), 5%, 80%);
    --body-color: hsl(var(--hue), 8%, 13%);
    --container-color: hsl(var(--hue), 8%, 16%);
    --scroll-bar-color: hsl(var(--hue), 4%, 32%);
    --scroll-thumb-color: hsl(var(--hue), 4%, 24%);
}

.change-theme {
    position: absolute;
    right: 1.5rem;
    top: 2.2rem;
    color: var(--first-color);
    font-size: 1.8rem;
    cursor: pointer;
    transition: transform .3s ease, color .3s ease;
}
.change-theme:hover {
    transform: scale(1.1);
}

.dark-theme .footer {
    background-color: var(--container-color);
}

/*=============== REUSABLE CSS CLASSES ===============*/
.section {
    padding: var(--section-spacing) 0 2rem; /* Usa la variable de espaciado */
    padding-top: calc(var(--header-height) + 3rem); /* Espacio para header fijo */
}

.section__title, .section__title-center {
    font-size: var(--h2-font-size);
    color: var(--title-color);
    text-align: center;
    margin-bottom: var(--mb-2); /* Más espacio bajo el título */
    transition: color .3s ease;
}

.highlight { /* Para resaltar palabras clave como "Destaca" */
    color: var(--second-color);
    font-weight: var(--font-bold);
}

/* SVG logo color change (already adjusted for current theme) */
.nav__logo {
    fill: var(--title-color); /* Assumes SVG is designed to use currentColor or directly fillable */
    transition: fill .3s ease;
    width: 7.5rem;
    max-width: 10rem;
    transition: transform .3s ease;
}
.nav__logo:hover {
    transform: scale(1.05);
}

.svg__color {
    fill: var(--first-color);
}
.svg__img {
    width: 300px; /* Tamaño base */
    justify-self: center;
}

/*=============== LAYOUT ===============*/
.container {
    max-width: 1024px; /* Contenedor más ancho */
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.5rem; /* Padding lateral consistente */
}

.grid {
    display: grid;
    gap: 2.5rem; /* Espacio más grande entre elementos de grid */
}

/*=============== HEADER ===============*/
.header {
    width: 100%;
    background-color: var(--body-color);
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
    transition: background-color .5s ease, box-shadow .3s ease;
}

/*=============== NAV ===============*/
.nav {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .nav__menu {
        position: fixed;
        background-color: var(--container-color);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
        padding: 3rem 0; /* Más padding en menú móvil */
        width: 90%;
        top: -100%;
        left: 0;
        right: 0;
        margin: 0 auto;
        transition: .5s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bounce más suave */
        border-radius: 1.5rem; /* Bordes más suaves */
        z-index: var(--z-modal); /* Asegurar que esté por encima de todo */
        display: flex; /* Flex para centrar contenido */
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

.nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 2rem; /* Más espacio entre ítems de menú móvil */
}

.nav__link {
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
    transition: color .3s ease, transform .2s ease;
    font-size: var(--h3-font-size); /* Enlaces de menú móvil más grandes */
}
.nav__link:hover {
    color: var(--first-color);
    transform: translateX(5px); /* Pequeño desplazamiento en hover */
}

.nav__toggle {
    font-size: 1.6rem; /* Icono de toggle más grande */
    cursor: pointer;
    transition: transform .3s ease, color .3s ease;
}
.nav__toggle:hover {
    transform: scale(1.1);
}

/* Show menu */
.show-menu {
    top: calc(var(--header-height) + 1rem);
}

/* Active link */
.active-link {
    position: relative;
    color: var(--first-color); /* Color de enlace activo */
}
.active-link::before {
    content: '';
    position: absolute;
    bottom: -.5rem; /* Más cerca del texto */
    left: 50%; /* Centrado */
    transform: translateX(-50%);
    width: 8px; /* Indicador más grande */
    height: 8px;
    background-color: var(--first-color); /* Color del indicador */
    border-radius: 50%;
    transition: all .3s ease;
}

/* Change background header */
.scroll-header {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra más definida */
    background-color: var(--container-color); /* Fondo sólido al hacer scroll */
}

/*=============== HOME (Hero Section) ===============*/
.home__container {
    padding-top: 4rem; /* Ajuste para el hero */
    grid-template-columns: 1fr; /* Columna única en móvil */
    text-align: center;
    overflow: hidden; /* Para que las imágenes no sobresalgan durante animaciones */
}
.home__data {
    margin-bottom: var(--mb-2-5);
}
.home__title {
    font-size: var(--biggest-font-size);
    font-weight: var(--font-bold);
    margin-bottom: var(--mb-0-75);
    line-height: 1.1;
}
.home__description {
    font-size: var(--p-font-size);
    margin-bottom: var(--mb-2);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.home__buttons {
    display: flex;
    flex-wrap: wrap; /* Permite que los botones se envuelvan en pantallas pequeñas */
    justify-content: center;
    gap: 1rem;
    margin-top: var(--mb-1-5);
}
.home__image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home__main-img {
    width: 90%;
    max-width: 450px;
    height: auto;
}


/*=============== BUTTONS ===============*/
.button {
    display: inline-flex; /* Usar flex para centrar contenido interno */
    align-items: center;
    justify-content: center;
    column-gap: .5rem; /* Espacio entre texto e icono */
    padding: .85rem 2rem; /* Más padding para botones prominentes */
    border-radius: 3rem;
    font-weight: var(--font-semi-bold);
    transition: all .3s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Sombra más suave */
    border: none;
    cursor: pointer;
}

.button:hover {
    transform: translateY(-3px) scale(1.01); /* Efecto más sutil */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.button-primary {
    background-color: var(--first-color);
    color: #FFF;
}
.button-primary:hover {
    background-color: var(--first-color-alt);
}

.button-secondary {
    background-color: transparent;
    color: var(--first-color);
    border: 2px solid var(--first-color);
    box-shadow: none; /* Eliminar sombra predeterminada */
}
.button-secondary:hover {
    background-color: var(--first-color-lighten);
    color: var(--first-color-alt);
    border-color: var(--first-color-alt);
    transform: translateY(-3px) scale(1.01);
}

.button-link {
    background: none;
    padding: 0;
    color: var(--first-color); /* Color directo para enlaces */
    font-weight: var(--font-semi-bold);
    text-decoration: underline; /* Subrayado para claridad */
    text-underline-offset: 4px; /* Espacio entre texto y subrayado */
    box-shadow: none;
    transition: color .3s ease, transform .2s ease;
}

.button-link:hover {
    background-color: transparent;
    color: var(--first-color-alt);
    transform: translateX(5px); /* Deslizamiento sutil en hover */
}

.button__icon {
    font-size: 1.25rem;
}

/*=============== ABOUT & HOW-IT-WORKS Sections (Alternating Layout) ===============*/
/* En móvil, la imagen y el texto se apilan normalmente */
.about__container, .how-it-works__container {
    gap: 3rem; /* Espacio entre imagen y texto/contenido */
    align-items: center;
    grid-template-columns: 1fr; /* Una columna por defecto en móvil */
}
.about__data, .how-it-works__data {
    text-align: left; /* Alineación de texto por defecto */
}
.about__image, .how-it-works__image {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 250px; /* Asegurar altura mínima para DotLottie */
}
.about__features {
    list-style: none;
    padding-left: 0;
    margin-top: var(--mb-1-5);
    display: grid;
    gap: 0.75rem;
}
.about__features li {
    display: flex;
    align-items: center;
    font-size: var(--normal-font-size);
    color: var(--text-color);
}
.about__features li i {
    font-size: 1.2rem;
    color: var(--first-color);
    margin-right: 0.5rem;
}
.how-it-works__description {
    max-width: 500px; /* Limitar ancho para legibilidad */
}

/* Media query para desktop para alternar el orden */
@media screen and (min-width: 768px) { /* Este breakpoint ahora controla la alternancia */
    /* Layout para .about__container (imagen izquierda, texto derecha) */
    .about__container {
        grid-template-areas: "image text";
        grid-template-columns: 1fr 1fr;
    }
    .about__image {
        grid-area: image;
    }
    .about__data {
        grid-area: text;
    }

    /* Layout para .how-it-works__container (texto izquierda, imagen derecha) */
    .how-it-works__container {
        grid-template-areas: "text image"; /* Invertir el orden: texto primero, imagen después */
        grid-template-columns: 1fr 1fr;
    }
    .how-it-works__data {
        grid-area: text;
    }
    .how-it-works__image {
        grid-area: image;
    }
}


/*=============== SERVICES (Cards Section) ===============*/
.services__container {
    padding-top: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    gap: 2rem; /* Espacio entre tarjetas */
}

.services__card {
    display: flex; /* Usar flexbox para el contenido de la tarjeta */
    flex-direction: column;
    align-items: center;
    background-color: var(--container-color);
    box-shadow: 0px 5px 20px hsla(var(--hue), 100%, 15%, 0.08); /* Sombra más suave y extendida */
    padding: 2.5rem 1.5rem; /* Más padding */
    border-radius: 1.5rem; /* Bordes más redondeados */
    text-align: center;
    transition: all .3s ease; /* Transición general para la interactividad de las tarjetas */
    border: 1px solid transparent; /* Borde suave para el hover */
}

.services__card:hover {
    transform: translateY(-8px) scale(1.02); /* Efecto de levantamiento y escala sutil en hover */
    box-shadow: 0px 10px 30px hsla(var(--hue), 100%, 15%, 0.15); /* Sombra más intensa al pasar el mouse */
    border-color: var(--first-color-lighten); /* Borde sutil en hover */
}

.services__img {
    width: 150px; /* Imágenes de servicio más grandes */
    height: auto;
    justify-self: center;
    margin-bottom: var(--mb-1);
    transition: transform .3s ease;
}
.services__card:hover .services__img { /* Rotación sutil de la imagen al pasar el mouse sobre la tarjeta */
    transform: rotate(5deg) scale(1.05);
}

.services__subtitle {
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-0-75);
}
.services__description {
    font-size: var(--normal-font-size);
    margin-bottom: var(--mb-1-5);
    flex-grow: 1; /* Para que el texto ocupe el espacio disponible y los botones se alineen abajo */
}

/*=============== CTA Section (Call to Action) ===============*/
.cta {
    background-color: var(--first-color-lighten); /* Fondo destacado */
    text-align: center;
    padding: 5rem 0; /* Más padding para la sección */
}
.cta__description {
    max-width: 700px;
    margin: 0 auto var(--mb-2);
    font-size: var(--p-font-size);
    color: var(--text-color);
}
.cta__buttons {
    display: flex;
    justify-content: center;
    margin-top: var(--mb-2);
}

/*=============== FOOTER ===============*/
.footer {
    background-color: var(--container-color); /* Fondo del footer blanco/contenedor */
    padding-top: 4rem; /* Más padding superior */
    padding-bottom: 2rem;
    border-top: 1px solid var(--first-color-lighten); /* Separador sutil */
    transition: background-color .5s ease;
}

.footer__container {
    row-gap: 3rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Grid más flexible */
}

.footer__logo {
    font-size: var(--h2-font-size); /* Logo más grande en el footer */
    font-weight: var(--font-bold);
    color: var(--title-color);
    margin-bottom: var(--mb-0-75);
}
.footer__description {
    font-size: var(--small-font-size);
    max-width: 250px; /* Limitar ancho de descripción del footer */
    color: var(--text-color);
}
.footer__title {
    font-size: var(--h3-font-size);
    font-weight: var(--font-semi-bold);
    color: var(--title-color);
    margin-bottom: var(--mb-1);
}
.footer__links li {
    margin-bottom: 0.5rem;
}
.footer__link {
    font-size: var(--normal-font-size);
    color: var(--text-color);
    transition: color .3s ease;
}
.footer__link:hover {
    color: var(--first-color);
}
.footer__social {
    display: flex;
    column-gap: 1.5rem;
    margin-top: var(--mb-1);
}
.footer__social-link {
    font-size: 1.5rem; /* Iconos sociales más grandes */
    color: var(--text-color);
    transition: transform .3s ease, color .3s ease;
}
.footer__social-link:hover {
    transform: translateY(-3px) scale(1.1); /* Efecto de levantamiento y escala */
    color: var(--first-color);
}
.footer__copy {
    margin-top: 4rem; /* Más espacio sobre el copyright */
    text-align: center;
    font-size: var(--smaller-font-size);
    color: var(--text-color-light); /* Color más tenue para el copyright */
}
.footer__copy a {
    color: var(--text-color-light);
    text-decoration: underline;
    transition: color .3s ease;
}
.footer__copy a:hover {
    color: var(--first-color);
}


/*=============== FLOATING WHATSAPP BUTTON ===============*/
.floating {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px; /* Base bottom position */
    right: 30px; /* Default position */
    background-color: #25D366;
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    font-size: 35px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    z-index: var(--z-modal);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease-in-out;
}
.floating:hover {
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.fab-icon {
    margin-top: 0;
}

/*=============== SCROLL UP ===============*/
.scrollup {
    position: fixed;
    background: var(--first-color);
    width: 60px; /* Mismo tamaño que WhatsApp para homogeneidad */
    height: 60px;
    bottom: 30px; /* Mismo bottom que WhatsApp para control individual */
    right: 100px; /* Posicionado a la izquierda del botón de WhatsApp */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-radius: 50%;
    z-index: var(--z-tooltip);
    opacity: 0; /* Inicia oculto, se mostrará con JS */
    transition: all .4s ease-in-out;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.scrollup:hover {
    background-color: var(--first-color-alt);
    opacity: 1;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.scrollup__icon {
    font-size: 1.8rem;
    color: #FFF;
}

/* Show Scroll Up*/
.show-scroll {
    bottom: 30px; /* Ajuste para que solo cambie la opacidad */
    opacity: 0.9; /* Opacidad para mostrarlo */
}

/*=============== MEDIA QUERIES ===============*/
/* Estilos para móviles (columna única por defecto) */
@media screen and (max-width: 575px) {
    .section {
        padding: 4rem 0; /* Menos padding en móviles para evitar excesivo scroll */
    }
    .home__title {
        font-size: 3rem; /* Ajuste para móviles */
    }
    .home__buttons {
        flex-direction: column; /* Botones apilados en móvil */
        align-items: center;
    }
    .button {
        width: 80%; /* Ancho para botones en móvil */
        max-width: 300px;
    }
}


@media screen and (min-width: 576px) {
    .home__container {
        grid-template-columns: repeat(2, 1fr);
        text-align: left;
        align-items: center;
    }
    .home__data {
        margin-bottom: 0;
    }
    .home__buttons {
        justify-content: flex-start;
    }
    .home__main-img {
        width: 100%;
        max-width: unset;
    }

    .about__container, .how-it-works__container {
        grid-template-columns: repeat(2, 1fr);
    }
    .about__image {
        order: -1; /* Imagen a la izquierda */
    }
    .how-it-works__image {
        order: 1; /* Imagen a la derecha por defecto en tabletas */
    }
    .section__title-center {
        text-align: left;
    }
}

@media screen and (min-width: 768px) { /* Este breakpoint ahora controla la alternancia */
    /* Para alternar las secciones */
    .about__container {
        grid-template-areas: "image text";
        grid-template-columns: 1fr 1fr;
    }
    .about__image {
        grid-area: image;
        order: unset; /* Reinicia el order para que grid-area funcione */
    }
    .about__data {
        grid-area: text;
    }

    .how-it-works__container {
        grid-template-areas: "text image"; /* Invertir el orden: texto primero, imagen después */
        grid-template-columns: 1fr 1fr;
    }
    .how-it-works__data {
        grid-area: text;
    }
    .how-it-works__image {
        grid-area: image;
        order: unset; /* Reinicia el order */
    }

    /* Ajustes generales para tablets y desktops */
    .section {
        padding: var(--section-spacing) 0; /* Usa la variable de espaciado */
    }
}


@media screen and (min-width: 767px) { /* General desktop styles, can be adjusted */
    body {
        margin: 0;
    }
    .nav {
        height: calc(var(--header-height) + 1.5rem);
    }
    .nav__list {
        flex-direction: row;
        column-gap: 2.5rem;
    }
    .nav__toggle {
        display: none;
    }
    .change-theme {
        position: initial;
    }
    .home__container {
        padding: 6rem 0 2rem;
    }
}

@media screen and (min-width: 1024px) {
    .container {
        padding: 0; /* Quitar padding lateral si el contenedor ya tiene ancho fijo */
    }
    .home__image {
        transform: translateX(10%); /* Desplazar imagen del hero a la derecha */
    }
    .home__main-img {
        max-width: 550px;
    }
    .about__container, .how-it-works__container {
        column-gap: 6rem;
    }
    .services__container {
        grid-template-columns: repeat(4, 1fr); /* 4 columnas en desktop */
    }
    .footer__container {
        grid-template-columns: 1.5fr repeat(3, 1fr) 1.5fr; /* Diseño de footer más complejo */
    }
    .footer__social {
        justify-content: flex-end; /* Alinear social a la derecha */
    }
    .footer__copy {
        grid-column: 1 / -1; /* Ocupar todo el ancho */
        margin-top: 5rem;
    }

    /* Ajuste de posición de botones flotantes para pantallas grandes */
    .floating {
        right: 40px; /* Más separado del borde */
        bottom: 40px;
    }
    .scrollup {
        right: 120px; /* Mantiene la separación y mueve el scrollup más a la izquierda */
        bottom: 40px;
    }
}

/* Animaciones específicas para dialog (modales) */
dialog {
    padding: 2rem 4rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.4s ease-out forwards;

    &::backdrop {
        background: rgba(0, 0, 0, 0.5); /* Fondo más oscuro para el modal */
        backdrop-filter: blur(10px); /* Desenfoque más pronunciado */
        animation: fadeIn 0.3s ease-out forwards;
    }

    .x {
        font-size: 1.8rem;
        transition: transform 0.3s ease;
        &:hover {
            transform: scale(1.2) rotate(90deg); /* Animación de cierre más distintiva */
        }
    }
    h2 {
        font-size: 2.5rem;
    }
    p {
        font-size: 1.1rem;
        line-height: 1.6;
    }
}

button.primary {
    padding: 1rem 2.5rem;
    border-radius: 2rem;
    box-shadow: 0 8px 25px -8px rgb(var(--vs-primary) / 40%);
    &:hover {
        box-shadow: 0 12px 35px -12px rgb(var(--vs-primary) / 60%);
        transform: translateY(-3px) scale(1.02);
    }
}