/*cabecera y cuerpo completo*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Helvetica World", Helvetica, Arial,  sans-serif;
    background-color: #FFFFFF;
    color: #231F20;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Evita cualquier barra de desplazamiento horizontal no deseada */
}
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: linear-gradient(to right, #FFFFFF 0%, #F4F8E8 5%, #9FBD2B 100%);
    border-bottom: 1px solid #E0E0E0;
    position: sticky;
    top: 0;
    z-index: 1000;
}
header img{
    height: 40px;
    width: auto;
}
/* Estilos actualizados para los enlaces del Header */
header nav a {
    margin-left: 10px;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 8px 16px; /* Le damos espacio interno para que parezca un botoncito */
    border-radius: 4px; /* Bordes redondeados estilo pastilla */
    transition: all 0.3s ease; /* Transición suave para el color y el fondo */
}
/* Efecto al pasar el mouse (hover) y para el elemento seleccionado */
header nav a:hover,
header nav a.active {
    background: linear-gradient(135deg, #9FBD2B 0%, #8aa523); /* Un degradado sutil con tu Verde Natura */
    color: #FFFFFF; /* El texto pasa a blanco para contrastar perfectamente */
    box-shadow: 0 4px 10px rgba(159, 189, 43, 0.3); /* Una sombrita suave verduzca con relieve */
    font-weight: bold;
}

section {
    padding: 60px 20px;
}
/*sección hero*/
#inicio {
    width: 100%; /* Ocupa todo el ancho disponible sin errores de scrollbar */
    box-sizing: border-box;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: url('../img/banner_inicio.jpg');
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat;
    padding: 80px 60px 80px 100px;
    text-align: left;
    color: #FFFFFF;
}

/* Espaciado entre la línea de arriba y la caja verde cambiante */
#inicio h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #FFFFFF;
}

#inicio p {
    font-size: 2rem;
    font-weight: bold;
    color: #FFFFFF;
    max-width: 600px;
    margin: 0 0 30px 0;
}
/* Aseguramos que la caja verde cambiante actúe bien en su propia línea */
.frase-cambiante {
    display: inline-block;
    background-color: #9FBD2B; 
    color: #FFFFFF; 
    padding: 4px 14px;
    border-radius: 4px; 
    margin-top: 8px; /* Separa un poquito la caja verde del texto superior */
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 1;
    transform: translateY(0);
}
/* Clase auxiliar para la animación de salida */
.frase-cambiante.fade-out {
    opacity: 0;
    transform: translateY(-10px); /* Se desplaza un poquito hacia arriba al cambiar */
}
/*estilo para boton cta*/
.btn-cta {
    display: inline-block;
    background-color: #9fbd2b;
    color: #FFFFFF;
    padding: 12px 28px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.6rem;
    transition: background-color 0.3s ease;
}
.btn-cta:hover{
    background-color: #8aa523;
    color: #FFFFFF;
    cursor: pointer;
}
/* Estilos de la Sección Servicios */
#servicios {
    background-color: #FAFAFA; /* Un gris muy sutil de fondo para diferenciar la sección */
    max-width: 1000px;
    margin: 0 auto;
}
#servicios h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 40px;
}
/* Contenedor principal de la tarjeta en formato horizontal */
.servicio-card {
    display: flex;
    align-items: center; /* Alinea los elementos arriba */
    gap: 20px; /* Espacio entre el icono y el texto */
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    padding: 30px;
    border-radius: 6px;
    margin-bottom: 20px;
    transition: all 0.3s ease; /* Asegura que todos los cambios de color y posición fluyan suavemente */
}

#servicios a {
    text-decoration: none; /* Elimina el subrayado clásico de los enlaces */
    color: inherit;        /* Hace que herede el color del texto que lo rodea, evitando el color azul/violeta */
}

.servicio-card:hover {
    transform: translateY(-4px);
    background: linear-gradient(to left, 
        #FFFFFF 0%,   /* El blanco arranca exacto en el borde inferior */
        #FFFFFF 1%,   /* Se mantiene blanco solo en una franja súper finita (3%) */
        #9FBD2B 15%,   /* Transiciona inmediatamente a tu Verde Natura */
        #A8C63B 100%  /* Se extiende el verde hacia arriba del header */
    );
    border-color: #9FBD2B;
    box-shadow: 0 10px 20px rgba(159, 189, 43, 0.3);
    cursor: pointer;
}
/* Al hacer hover, cambiamos el color del icono a blanco */
.servicio-card:hover i {
    color: #FFFFFF;
}
/* Al hacer hover, cambiamos el título a blanco */
.servicio-card:hover h3 {
    color: #FFFFFF;
}
/* Al hacer hover, cambiamos el párrafo a blanco */
.servicio-card:hover p {
    color: #FFFFFF;
}
/* Estilo del icono a la izquierda */
.servicio-card i {
    font-size: 28px;
    color: #9FBD2B; /* Tu Verde Natura */
    flex-shrink: 0; /* Evita que el icono se deforme si el texto es largo */
}

/* Estilos de los textos dentro de la tarjeta */
.servicio-card h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: #231F20;
}

.servicio-card p {
    font-size: 15px;
    color: #555555;
    margin: 0;
}

/* Estilos de la Sección Contacto y Formulario */
#contacto {
    background-color: #FAFAFA;
    max-width: 1000px;
    margin: 0 auto;
}
#contacto h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 10px;
}
#contacto > p {
    text-align: center;
    font-size: 16px;
    color: #555555;
    margin-bottom: 40px;
}
#contacto form {
    max-width: 600px;
    margin: 0 auto;
    background-color: #FFFFFF;
    padding: 40px;
    border-radius: 6px;
    border: 1px solid #E0E0E0;
}
#contacto form div {
    margin-bottom: 20px;
}

#contacto label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #231F20;
}
#contacto input,
#contacto textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    color: #231F20;
    background-color: #FFFFFF;
}
#contacto input:focus,
#contacto textarea:focus {
    outline: none;
    border-color: #9FBD2B; /* Resalta con tu Verde Natura al hacer clic */
}
#contacto button[type="submit"] {
    width: 100%;
    cursor: pointer;
    border: none;
    font-size: 16px;
}
/* Botón flotante de WhatsApp personalizado */
.btn-whatsapp {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: transform 0.3s ease;
    text-decoration: none;
    overflow: hidden; /* Asegura que tu imagen respete los bordes redondeados */
    cursor: pointer;
}
/* Estilo para que tu imagen de logo ocupe bien el espacio */
.btn-whatsapp img {
    width: 100%; /* Ajusta este porcentaje si quieres que el icono se vea más grande o chico dentro del círculo */
    height: 100%;
    object-fit: contain;
    display: block;
}
.btn-whatsapp:hover {
    transform: scale(1.1); /* Efecto de zoom al pasar el mouse */
}

/* ECOMMERCE.HTML COMIENZA ACÁ */

#inicio_ecommerce {
    width: 100%; /* Ocupa todo el ancho disponible sin errores de scrollbar */
    box-sizing: border-box;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: url('../img/banner_ecommerce.jpg');
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat;
    padding: 80px 60px 80px 100px;
    text-align: left;
    color: #FFFFFF;
}
#inicio_ecommerce h1 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.3; /* Da un poco de aire vertical entre "Listo para" y la frase verde */
    margin-bottom: 20px;
    color: #FFFFFF;
}
#inicio_ecommerce p {
    font-size: 2rem;
    font-weight: bold;
    color: #FFFFFF;
    max-width: 600px;
    margin: 0 0 30px 0;
}
.frase-resaltada {
    display: inline-block;
    background-color: #9FBD2B; 
    color: #FFFFFF; 
    padding: 4px 14px;
    border-radius: 4px; 
    margin-top: 8px; /* Separa un poquito la caja verde del texto superior */
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 1;
    transform: translateY(0);
}

#body_ecommerce {
    background-color: #FAFAFA; /* Un gris muy sutil de fondo para diferenciar la sección */
    width: 100%; /* Ocupa todo el ancho disponible sin errores de scrollbar */
    box-sizing: border-box;
    min-height: 45vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 60px 80px;
    text-align: left;
    color: #231F20;
}
#body_ecommerce h2 {
    text-align: left;
    font-size: 28px;
    margin-bottom: 25px;
}
#body_ecommerce p {
    font-size: 1.2rem;
    font-weight: bold;
    color: #231F20;
    max-width: 600px;
    margin: 0 0 25px 0;
}
#body_ecommerce ul {
    padding: 0 0 25px 45px;
    font-size: 1.2rem;
}
.icono_pensamiento {
    max-width: 250px;             /* Un ancho fijo controlado para que no ocupe toda la pantalla */
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}
.contenido-texto {
    max-width: 60%;               /* Limita el ancho del texto para que no empuje demasiado a la imagen */
}
#servicios_ecommerce {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
}
#servicios_ecommerce > h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 40px;
}
/* Grillas de 2 columnas para las filas de tarjetas */
.grid-tiendas, 
.grid-marketplaces {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas iguales */
    gap: 30px; /* Espacio horizontal y vertical entre las tarjetas */
    margin-bottom: 40px; /* Separación antes del título del Marketplace */
}
/* El título del medio ocupa todo el ancho y se centra */
#servicios_ecommerce h2:nth-of-type(2) {
    text-align: center;
    margin: 50px 0 30px 0;
}
/* Estilos visuales base para las tarjetas individuales (blancas, con borde y sombra) */
.tiendanube_ecommerce,
.woocommerce_ecommerce,
.MELI_ecommerce,
.facebookmarketplace_ecommerce {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 0;
}
.tiendanube_ecommerce h3,
.woocommerce_ecommerce h3,
.MELI_ecommerce h3,
.facebookmarketplace_ecommerce h3 {
    font-size: 22px;
    color: #231F20;
    padding: 25px 25px 10px 25px;
}

.tiendanube_ecommerce p,
.woocommerce_ecommerce p,
.MELI_ecommerce p,
.facebookmarketplace_ecommerce p {
    font-size: 15px;
    color: #555555;
    padding: 0 25px 15px 25px;
}

/* Sangría más pronunciada para las listas de viñetas */
.tiendanube_ecommerce ul,
.woocommerce_ecommerce ul,
.MELI_ecommerce ul,
.facebookmarketplace_ecommerce ul {
    padding-left: 25px; /* Empuja las viñetas más hacia la derecha dentro de la tarjeta */
    margin-bottom: 25px;
    font-size: 14px;
    color: #444444;
    padding: 0 25px 20px 45px;
}
.tiendanube_ecommerce li,
.woocommerce_ecommerce li,
.MELI_ecommerce li,
.facebookmarketplace_ecommerce li {
    margin-bottom: 5px;
}
.banner-tarjeta {
    width: 100%;
    height: 185px;
    object-fit: cover;
    display: block;
    margin: 0;
}
.tiendanube_ecommerce .btn-cta,
.woocommerce_ecommerce .btn-cta,
.MELI_ecommerce .btn-cta,
.facebookmarketplace_ecommerce .btn-cta {
    margin: 0 25px 25px 25px;
    text-align: center;
}
/* ========================================= */
/* ESTILOS DE LA VENTANA MODAL (POP-UP)      */
/* ========================================= */

/* 1. El fondo oscuro semitransparente que cubre la pantalla */
.modal-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro suave */
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Asegura que esté por encima de todo */
}

/* Clase para activar la visualización del modal desde JavaScript */
.modal-overlay.activo {
    display: flex;
}

/* 2. La caja contenedora blanca del formulario */
.modal-content {
    position: relative !important; /* Vital para que la X se ubique respecto a esta caja */
    background-color: #FFFFFF;
    padding: 40px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%; /* Responsivo para celulares */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* 3. Títulos y textos dentro del modal */
.modal-content h3 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 8px;
    color: #231F20;
}

.modal-content p {
    text-align: center;
    font-size: 15px;
    color: #555555;
    margin-bottom: 25px;
}

/* 4. Estilo perfecto y anclado para el botón de cierre (la X) */
.modal-cerrar {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    background: transparent !important;
    border: none !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: #777777 !important;
    cursor: pointer !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: color 0.3s ease;
}

.modal-cerrar:hover {
    color: #9FBD2B !important; /* Se pinta de tu Verde Natura al pasar el mouse */
}

/* 5. Campos de formulario dentro del modal (Inputs, Select, Textarea) */
.modal-content form div {
    margin-bottom: 18px;
}

.modal-content label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #231F20;
}

.modal-content input,
.modal-content select,
.modal-content textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    color: #231F20;
    background-color: #FFFFFF;
}

.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
    outline: none;
    border-color: #9FBD2B;
}

/* 6. Botón de envío dentro del modal */
.modal-content button[type="submit"] {
    width: 100%;
    cursor: pointer;
    border: none;
    font-size: 16px;
    background-color: #9FBD2B;
    color: #FFFFFF;
    padding: 12px;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.modal-content button[type="submit"]:hover {
    background-color: #8aa523;
}