/* General Styles */
:root {
    /* Define color variables based on screenshots */
    --primary-green: #0f9d58; /* A shade of green from the buttons - UPDATED */
    --light-green: #66BB6A; /* Lighter green for gradients */
    --dark-green: #388E3C; /* Darker green for gradients */
    --blue-dark: #0873b9; /* Updated dark blue for footer */
    --blue-medium: #1080c8; /* Updated medium blue for footer bottom */
    --blue-light: #3F51B5; /* Lighter blue for sections */
    --text-dark: #333; /* Dark text for most content */
    --text-light: #fff; /* Light text for dark backgrounds */
    --gray-light: #f5f5f5; /* Light gray background */
    --gray-medium: #e0e0e0; /* Medium gray for borders/shadows */
    --border-color: #ddd; /* General border color */
    --button-hover-green: #78a33a; /* Adjusted hover state for green buttons */
    --button-hover-whatsapp: #25D366; /* Keeping standard WhatsApp green */

    --smalldata-green: #6EC44B;
    --smalldata-blue: #0099D0;
    --text-white: white; /* Explicitly define white for icons */
    --smalldata-blue-text: #005FAB;
    --smalldata-blue-text: #1A73E8; /* Valor de ejemplo, ajusta al real si es diferente */

    --white-transparent-20: rgba(255, 255, 255, 0.2); /* Fondo blanco con 20% de opacidad */
    --white-transparent-80: rgba(255, 255, 255, 0.8); /* Texto blanco con 80% de opacidad */
    --gray-600: #4B5563; /* Color gris de Tailwind, ajusta si es diferente */

}

/* Ensure border-box for all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif; /* Use Roboto font */
    margin: 0;
    padding: 0;
    color: var(--text-dark); /* Default text color */
}

/* Custom Bootstrap Button Styles */
.btn-primary-custom {
    background-color: var(--smalldata-green);
    color: var(--text-light);
    border: 1px solid var(--primary-green);
    padding: 8px 18px;
    font-size: 0.9em;
    border-radius: 5px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary-custom:hover {
    background-color: var(--button-hover-green);
    border-color: var(--button-hover-green);
    color: var(--text-light); /* Keep text light on hover */
}

.btn-outline-light-custom {
    background-color: transparent;
    color: var(--text-light);
    border: 2px solid var(--text-light);
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-light-custom:hover {
    background-color: var(--text-light);
    color: var(--blue-medium);
}

.text-white-custom {
    color: var(--text-light) !important;
    text-decoration: none; /* Ensure no underline for link button */
    font-weight: bold;
    transition: color 0.3s ease;
}

.text-white-custom:hover {
    color: var(--primary-green) !important;
}


.btn-light-arrow-custom {
    background-color: var(--text-light);
    color: var(--primary-green);
    border: 1px solid var(--text-light);
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-light-arrow-custom:hover {
    background-color: var(--gray-light);
    color: var(--primary-green);
}

.btn-success-phone-custom {
    background-color: var(--primary-green);
    color: var(--text-light);
    border: 1px solid var(--primary-green);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-success-phone-custom:hover {
    background-color: var(--button-hover-green);
    color: var(--text-light);
}

.btn-whatsapp-custom {
    background-color: #25D366; /* WhatsApp green */
    color: var(--text-light);
    border: 1px solid #25D366;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-whatsapp-custom:hover {
    background-color: var(--button-hover-whatsapp);
    color: var(--text-light);
}

.btn-submit-demo-custom {
    background: linear-gradient(to right, var(--smalldata-green), var(--smalldata-blue));
    color: var(--text-light);
    border: none;
    padding: 15px;
    font-size: 1.1em;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: opacity 0.3s ease;
}

.btn-submit-demo-custom:hover {
    opacity: 0.9;
}

.btn-outline-light-custom-social {
    color: var(--text-light);
    border: 1px solid var(--text-light);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-outline-light-custom-social:hover {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: var(--text-light);
}

/* Header Section */
.main-header {
    background-color: var(--text-light);
}

.main-nav .nav-link {
    color: var(--text-dark);
    font-weight: 500;
    transition: color 0.3s ease;
}

.main-nav .nav-link:hover {
    color: var(--primary-green);
}

/* Hero Section (estilos generales para escritorio y tablets) */
.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('./portada.png') no-repeat center center/cover;
    min-height: 500px; /* 500 Altura generosa para escritorio */
    display: flex;
    align-items: center;
    background-size: cover; /* Asegura que la imagen cubra todo el espacio */
    background-position: center center; /* Centra la imagen por defecto */
}

/* Media Query para Dispositivos Móviles (pantallas de hasta 767.98px de ancho) */
@media (max-width: 500.98px) {
    .hero-section {
        /* Reducimos el alto mínimo para que la imagen tenga más "libertad" de ancho.
           Un valor de 250px o incluso 200px podría ser necesario para móviles.
           Probá con diferentes valores para ver cuál funciona mejor con tu imagen. */
        min-height: 150px; 
        
        /* Priorizamos que el fondo cubra bien el ancho, y luego ajustamos la posición vertical.
           'center center' suele ser la mejor base, pero si notás que la parte importante
           de tu imagen está en un lado específico (por ejemplo, a la izquierda),
           podrías usar 'left center' o 'right center'.
           Si el problema es que la imagen es muy panorámica, a veces centrarla
           en la parte superior o inferior ayuda a que se vea mejor en una pantalla vertical. */
        background-position: center center; 
        /* Si la imagen principal se corta de los lados, es que el 'cover' la está estirando para cubrir la altura.
           Mantener background-size: cover; es generalmente lo que queremos.
           El secreto suele estar en el min-height y/o en background-position. */
    }
}

/* Opcional: Si la imagen es muy ancha y quieres asegurarte de que SIEMPRE se vea el ancho completo*/
/*   (aunque deje espacio arriba/abajo), podrías considerar 'contain', pero esto es menos común para 'hero-section'.*/
   
   @media (max-width: 50.98px) {
       .hero-section {
           background-size: contain; 
           background-repeat: no-repeat;
           background-position: center center;
          background: linear-gradient(to right, var(--smalldata-green), var(--smalldata-blue));
       }
   }


/* Call to Action Section */
.call-to-action {
    background: linear-gradient(to right, var(--smalldata-green), var(--smalldata-blue));
}

/* Demo Request Section */
.demo-request {
    background-color: var(--gray-light);
}

.custom-gradient-card {
    background: linear-gradient(to right, var(--smalldata-green), var(--smalldata-blue));
}

/* Competitive Advantages Section */
.competitive-advantages {
    background-color: var(--text-light);
}

.advantage-item .icon-circle {
    /* Bootstrap's bg-success will apply the background, keep custom sizing */
    width: 70px;
    height: 70px;
}

/* Unique Features Section */
.unique-features {
    background: linear-gradient(to right, var(--smalldata-green), var(--smalldata-blue));
}

.feature-icon {
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent background for icons */
}

/* Footer Section */
.main-footer {

    background: linear-gradient(to right, var(--smalldata-green), var(--smalldata-blue));

}



.footer-brand p {
    text-align: left; /* Keep text aligned left for the brand paragraph */
}

/* Ensure list items in footer are styled correctly */
.main-footer .list-unstyled li {
    display: flex;
    align-items: center; /* Vertically align icon and text */
}

.main-footer .list-unstyled li i {
    margin-right: 0.5rem; /* Space between icon and text */
}

/* Media Queries for fine-tuning responsiveness (Bootstrap handles much of it) */

/* For screens smaller than 991.98px (e.g., tablets and smaller desktops) */
@media (max-width: 991.98px) { /* Bootstrap's lg breakpoint */
    .main-header .container {
        flex-direction: column;
        text-align: center;
    }

    /*nuevo*/
    .main-header .logo {
        margin-bottom: 10px !important; /* Reduce el margen inferior del logo en pantallas pequeñas */
    }

    .main-header .main-nav {
        margin-top: 10px; /* Ajusta el margen superior de la navegación si es necesario */
    }

    .main-header .main-nav .nav-item {
        margin-bottom: 5px; /* Reduce el espacio entre los items de navegación si se apilan */
    }
    /*fin de nuevo */

    .main-nav .nav {
        justify-content: center;
        margin-top: 1rem;
    }
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    .feature-content .row {
        flex-direction: column-reverse; /* Image above text on smaller screens */
    }
    .unique-features h2, .unique-features ul li h3, .unique-features ul li p {
        text-align: center !important;
    }
    .unique-features ul li {
        justify-content: center;
    }
    .footer-brand p {
        text-align: center;
    }
    .social-icons {
        justify-content: center !important;
    }
    .main-footer .list-unstyled {
        text-align: center;
    }
    .main-footer .list-unstyled li {
        justify-content: center;
    }
}

@media (max-width: 767.98px) { /* Bootstrap's md breakpoint */
    .hero-section h1 {
        font-size: 2.5rem !important;
    }
    .call-to-action h2, .demo-request h2, .competitive-advantages h2, .unique-features h2 {
        font-size: 2rem !important;
    }
    .contact-buttons {
        flex-direction: column;
    }
}

@media (max-width: 575.98px) { /* Bootstrap's sm breakpoint */
    .main-header {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9em;
    }
    .hero-section h1 {
        font-size: 2rem !important;
    }
}

/*agrego yo */


/* Intenta hacer la regla más específica */
.text-gradient {
    background: linear-gradient(135deg, #6EC44B 0%, #0099D0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* A veces necesario */

    /* Agregué un !important para forzar el estilo, úsalo solo si nada más funciona */
    /* font-size: 3em !important; */
    /* font-weight: bold !important; */

    /* Es crucial que el tamaño de fuente sea lo suficientemente grande para ver el degradado */
    font-size: 3em; /* Ajusta este valor */
    font-weight: bold;
}

/* En tu archivo styles.css */
/* Estilos para la sección principal con el degradado */
.section-gradient-blue {
    background: linear-gradient(135deg, var(--smalldata-green), var(--smalldata-blue));
    color: white; /* El texto general de esta sección será blanco */
}

/* Clases personalizadas para los elementos de las características */
.feature-icon-wrapper {
    width: 3rem; /* 48px */
    height: 3rem; /* 48px */
    background-color: var(--white-transparent-20);
    border-radius: 0.5rem; /* rounded-lg de Tailwind */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Asegura que el div del ícono no se encoja */
    color: white; /* Color del SVG */
}

.feature-description-text {
    color: var(--white-transparent-80);
}

/* Opcional: Ajuste del tamaño del h3 si no lo cubre Bootstrap con h2/h1 */
.text-3xl-custom {
    font-size: 2rem; /* Puedes ajustar este valor para que coincida con text-3xl de Tailwind */
    font-weight: 700; /* Equivalente a font-bold */
}

/* Ajustes de espaciado si las clases de Bootstrap no son exactas */
/* Puedes añadir estos si necesitas un espaciado más preciso que Bootstrap */
.space-y-6-custom > *:not(:first-child) {
    margin-top: 1.5rem; /* Recrea space-y-6 */
}
.space-x-4-custom > *:not(:first-child) {
    margin-left: 1rem; /* Recrea space-x-4 */
}

/* --- Nuevas Clases para la sección de Tarjetas --- */

.cards-grid-section {
    padding-top: 3rem; /* Equivalente a py-12 o un valor que te guste */
    padding-bottom: 3rem;
    background-color: #f8f9fa; /* Un color de fondo suave para esta sección */
}

.feature-card {
    background-color: white;
    padding: 1.5rem; /* p-6 de Tailwind (24px) */
    border-radius: 0.75rem; /* rounded-xl de Tailwind (12px) */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg de Tailwind */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Para el efecto hover */
}

.feature-card:hover {
    transform: translateY(-5px); /* Eleva la tarjeta */
    box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.15), 0 6px 8px -3px rgba(0, 0, 0, 0.08); /* Sombra más pronunciada */
}

.icon-circle {
    width: 4rem; /* w-16 h-16 de Tailwind (64px) */
    height: 4rem; /* w-16 h-16 de Tailwind (64px) */
    background: linear-gradient(135deg, var(--smalldata-green), var(--smalldata-blue)); /* gradient-bg */
    border-radius: 9999px; /* rounded-full de Tailwind */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto; /* mx-auto de Tailwind para centrar horizontalmente */
    margin-right: auto;
    margin-bottom: 1rem; /* mb-4 de Tailwind (16px) */
    flex-shrink: 0; /* Por si acaso */
}

.icon-circle svg {
    width: 2rem; /* w-8 h-8 de Tailwind (32px) */
    height: 2rem;
    color: white; /* Color del SVG */
}

.card-title-blue {
    color: var(--smalldata-blue-text); /* text-[var(--smalldata-blue-text)] */
    font-size: 1.125rem; /* text-lg de Tailwind (18px) */
    font-weight: 600; /* font-semibold de Tailwind */
    margin-bottom: 0.5rem; /* mb-2 de Tailwind (8px) */
}

.card-description-text {
    color: var(--gray-600); /* text-gray-600 */
    font-size: 0.875rem; /* text-sm de Tailwind (14px) */
}

/*color del spam utimo*/
.text-logo {
    
    background: linear-gradient(135deg, var(--smalldata-green), var(--smalldata-green)); /* gradient-bg */
}

.footer-bottom {
    
    background: linear-gradient(135deg, var(--smalldata-green), var(--smalldata-blue)); /* gradient-bg */
}

/* --- Nueva Clase para un Separador de Sección Delgado --- */
.section-divider-thin {
    /* Mantiene el color de fondo, asumiendo que quieres el 'bg-light' de Bootstrap */
    background-color: #f8f9fa; /* Este es el color por defecto de Bootstrap's .bg-light */
    
    /* Reduce el padding vertical para hacer la sección más "fina" */
    padding-top: 1.5rem; /* Equivalente a py-3 de Bootstrap, pero puedes ajustar */
    padding-bottom: 1.5rem; /* Equivalente a py-3 de Bootstrap, pero puedes ajustar */
    /* Puedes incluso usar valores más pequeños si lo necesitas, por ejemplo: */
    /* padding-top: 0.75rem; */
    /* padding-bottom: 0.75rem; */
}

/*NUEVOS ICONOS PARA LAS feature-card y la clase icon-circle*/
/* Base styles for all pure CSS icons */

//* Applying gradients directly to classes */
.icon-circle.color-gradient-1 {
    background: linear-gradient(135deg, var(--smalldata-green), var(--smalldata-blue));
}

.icon-circle.color-gradient-2 {
    background: linear-gradient(135deg, var(--smalldata-blue), var(--smalldata-green));
}

/* Styles for Font Awesome icons within the circle */
.icon-circle i.fas {
    font-size: 5rem; /* Adjust size to fit well within the 5rem circle (approx 48px) */
    color: var(--text-white); /* Keep the icons white */
    /* Font Awesome icons are already centered by the flexbox in .icon-circle */
}

/*para ajustar la separacion de fotos: buscar clase separation-mobile*/
/* Estilos específicos para pantallas pequeñas */
@media (max-width: 767.98px) {
    /* Agrega una clase a tu segundo div para ser más específico */
    .col-md-6.separation-mobile { 
        margin-top: 30px; /* Ajusta este valor según necesites */
    }
}