/* ---------------------------------------------------- */
/* 0. VARIABLES Y RESET BÁSICO */
/* ---------------------------------------------------- */

:root {
    --color-primary: #4CAF50; /* El verde vibrante de Little Santi's */
    --color-secondary: #388E3C; /* Un verde más oscuro para hover */
    --color-dark: #212121; /* Gris oscuro/negro para texto */
    --color-light: #f5f5f5; /* Gris muy claro para fondos */
    --color-white: #ffffff;
    --font-family-sans: 'Arial', sans-serif; /* Puedes reemplazar con una fuente de Google Fonts */
}

/* Reset simple */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-sans);
    line-height: 1.6;
    color: var(--color-dark);
    background-color: var(--color-white);
}

.container {
    width: 90%;
    max-width: 1200px; /* Ancho máximo para el contenido centrado */
    margin: 0 auto;
}

/* ---------------------------------------------------- */
/* 1. ESTILOS DE BOTONES */
/* ---------------------------------------------------- */

.btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 50px; /* Bordes muy redondeados para un look divertido */
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    text-align: center;
}

/* Botón de Llamada a la Acción (CTA) */
.btn-cta {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 1.1em;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-cta:hover {
    background-color: var(--color-secondary);
    transform: translateY(-2px); /* Efecto dinámico al pasar el cursor */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Botón primario (en la navegación) */
.btn-primary {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    
    /* ¡CAMBIO CLAVE AQUÍ! Hacemos el texto verde para que contraste con el fondo claro */
    color: var(--color-primary); 
    
    padding: 8px 20px;
}

.btn-primary:hover {
    background-color: var(--color-primary);
    color: var(--color-dark); /* ¡CAMBIO CLAVE! El texto del botón se vuelve NEGRO/GRIS OSCURO al hacer hover */
    /* Así, el texto oscuro contrasta perfectamente con el fondo verde. */
}

/* ---------------------------------------------------- */
/* 2. ENCABEZADO Y NAVEGACIÓN */
/* ---------------------------------------------------- */

.main-header {
    position: absolute; /* Para que la Hero Section quede debajo */
    width: 100%;
    padding: 15px 0;
    z-index: 100; /* Asegura que esté por encima de otros elementos */
}

.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
   font-size: 2.2em; /* Aumentado de 1.5em a 2.2em para que sea más grande */
    font-weight: 900;
    color: var(--color-white);
    text-decoration: none;
    transition: all 0.3s ease; /* Transición suave para el hover */
}
.logo:hover {
    color: var(--color-primary); /* Se pone verde al pasar el cursor */
}

.main-nav ul {
    list-style: none;
    display: flex;
}

.main-nav ul li a {
    color: var(--color-white); /* Color inicial del texto (sobre la Hero Section) */
    text-decoration: none;
    padding: 10px 15px;
    font-weight: 500;
}

.main-nav ul li a:hover {
    color: var(--color-dark); /* ¡CORRECCIÓN CLAVE! Cambia a un color oscuro (negro/gris) */
    background-color: var(--color-light); /* Añadimos un fondo claro sutil para el efecto */
    border-radius: 5px;
}

/* ---------------------------------------------------- */
/* 3. HERO SECTION (ZONA DE IMPACTO) */
/* ---------------------------------------------------- */

.hero-section {
    height: 100vh; /* Ocupa toda la altura de la vista */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* Configuración de Fondo (Reemplaza con tu imagen o video) */
    background-image: url('../images/hero_bg_1.jpg'); /* Asegúrate de que esta ruta sea correcta */
    background-size: cover;
    background-position: center;
    position: relative;
    /* Oscurecer un poco la imagen para que el texto resalte */
    overflow: hidden; /* Para contener la pseudo-clase */
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4); /* Capa oscura */
}

.hero-content {
    position: relative;
    z-index: 50;
    color: var(--color-white);
    max-width: 800px;
    padding: 20px;
}

.hero-content h1 {
    font-size: 3.5em;
    margin-bottom: 0.5em;
    line-height: 1.1;
}

.hero-content p {
    font-size: 1.4em;
    margin-bottom: 2em;
    font-weight: 300;
}

/* ---------------------------------------------------- */
/* 4. SECCIÓN POR QUÉ ELEGIRNOS (WHY-US-SECTION) */
/* ---------------------------------------------------- */

.why-us-section {
    padding: 80px 0;
    text-align: center;
    background-color: var(--color-light); /* Fondo gris claro para destacar */
}

.why-us-section h2 {
    font-size: 2.2em;
    margin-bottom: 50px;
    color: var(--color-dark);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Mínimo 250px por tarjeta */
    gap: 30px;
}

.benefit-card {
    display: flex; 
    flex-direction: column; /* Apila el contenido verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
    justify-content: flex-start; /* Alinea los contenidos al inicio de la tarjeta */

    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-5px); /* Efecto de 'levantarse' */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.benefit-card .icon {
    font-size: 3em;
    color: var(--color-primary);
    display: block;
    margin-bottom: 15px;
}

.benefit-card h3 {
    font-size: 1.3em;
    margin-bottom: 10px;
}

/* ---------------------------------------------------- */
/* 5. PIE DE PÁGINA */
/* ---------------------------------------------------- */

.main-footer {
    background-color: var(--color-dark);
    color: var(--color-light);
    padding: 30px 0;
    text-align: center;
}

.main-footer p {
    font-size: 0.9em;
}

/* ---------------------------------------------------- */
/* 6. RESPONSIVE BÁSICO (Para móviles) */
/* ---------------------------------------------------- */

@media (max-width: 768px) {
    .nav-bar {
        flex-direction: column;
        text-align: center;
    }
    
    .main-nav ul {
        margin-top: 10px;
    }

    .hero-content h1 {
        font-size: 2.5em;
    }

    .hero-content p {
        font-size: 1.1em;
    }
}

/* ---------------------------------------------------- */
/* 7. SECCIÓN DE PRODUCTOS */
/* ---------------------------------------------------- */

.products-section {
    padding: 80px 0;
    text-align: center;
}

.products-section h2 {
    font-size: 2.2em;
    margin-bottom: 10px;
}

.section-subtitle {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 50px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.product-card {
    background-color: var(--color-light);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    
    /* ¡Añadimos Flexbox! */
    display: flex;
    flex-direction: column; /* Apila el contenido */
    align-items: center; /* Centra horizontalmente */
    justify-content: space-between; /* Distribuye espacio entre elementos (opcional, prueba con 'flex-start' si prefieres todo arriba) */
    
    height: 100%;
}

.product-card:hover {
    transform: translateY(-8px); /* Efecto de hover dramático */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.product-image {
   width: 100%;
    max-width: 200px; /* Reducimos el tamaño máximo para asegurar espacio */
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

.product-card h3 {
    color: var(--color-dark);
    margin-bottom: 5px;
}

.product-card .description {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
}

.product-card .price {
    display: block;
    font-weight: bold;
    color: var(--color-secondary);
    font-size: 1.1em;
}

/* ---------------------------------------------------- */
/* 8. MISIÓN Y VISIÓN */
/* ---------------------------------------------------- */

.mission-section {
    background-color: var(--color-primary); /* Fondo verde para un contraste fuerte */
    color: var(--color-white);
    padding: 80px 0;
}

.mission-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.mission-section h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.mission-section p {
    font-size: 1.1em;
    margin-bottom: 15px;
    line-height: 1.8;
}

/* ---------------------------------------------------- */
/* 9. SECCIÓN DE CONTACTO (CTA FINAL) */
/* ---------------------------------------------------- */

.contact-section {
    padding: 80px 0;
    text-align: center;
    background-color: var(--color-light);
}

.contact-section h2 {
    font-size: 2em;
    margin-bottom: 40px;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Mantiene 2 columnas */
    gap: 20px;
}

/* Modificamos esta regla para incluir SELECT y TEXTAREA */
.contact-form input,
.contact-form select,
.contact-form textarea { /* ¡Añadimos select y textarea! */
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    font-family: var(--font-family-sans); /* Hereda la fuente principal */
}

/* Hacemos que el TEXTAREA ocupe las dos columnas */
.contact-form textarea {
    grid-column: 1 / -1; 
    resize: vertical; /* Permite redimensionar verticalmente, no horizontalmente */
}

.contact-form button {
    grid-column: 1 / -1;
    font-size: 1.2em;
    padding: 15px;
}

/* Ajustes responsivos para el formulario de contacto */
@media (max-width: 600px) {
    .contact-form {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
    }
}
.mission-section {
    /* Quitamos el fondo de color y ponemos la imagen */
    background-image: url('../images/person_1-1.jpg'); 
    background-size: cover;
    background-position: center;
    position: relative;
    /* Necesitas el color del texto y padding */
    color: var(--color-white); 
    padding: 80px 0;
}

/* Añadimos un overlay verde oscuro para que el texto blanco resalte */
.mission-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(56, 142, 60, 0.8); /* Usamos el color secondary, 80% opacidad */
}

/* Aseguramos que el contenido esté por encima del overlay */
.mission-content {
    position: relative;
    z-index: 2; 
    /* ... otros estilos ... */
}
/* ---------------------------------------------------- */
/* 10. GALERÍA DEL LUGAR */
/* ---------------------------------------------------- */

.gallery-section {
    padding: 80px 0;
    text-align: center;
    background-color: var(--color-white);
}

.gallery-section h2 {
    font-size: 2.2em;
    margin-bottom: 10px;
}

.photo-grid {
    display: grid;
    /* Diseño de galería moderno: 4 columnas en desktop */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px; /* Espaciado ajustado */
    margin-top: 40px;
}

.gallery-item {
    overflow: hidden; /* Importante para el efecto de zoom */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.gallery-image {
    width: 100%;
    height: 300px; /* Altura fija para uniformidad */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    transition: transform 0.4s ease; /* Transición para el efecto de zoom */
}

/* Efecto de zoom y brillo al pasar el cursor */
.gallery-item:hover .gallery-image {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Ajustes responsivos para la galería */
@media (max-width: 600px) {
    .photo-grid {
        grid-template-columns: 1fr; /* Una sola columna en móviles para que las fotos sean grandes */
    }
}

/* ---------------------------------------------------- */
/* 7. ESTILOS PARA PRODUCTOS OCULTOS */
/* ---------------------------------------------------- */

/* Inicialmente ocultamos el contenedor de productos extra */
.hidden-products {
    display: none; /* Oculto por defecto */
    grid-column: 1 / -1; /* Ocupa el ancho completo del grid */
}

/* Cuando se añade la clase 'show' por JS, se muestran */
.hidden-products.show {
    display: contents; /* Permite que los hijos hereden el grid-layout de products-grid */
    /* Nota: 'display: contents' funciona bien en navegadores modernos para grids/flex. 
       Si prefieres una animación más fluida, podríamos usar max-height y opacity con CSS puro */
}

/* Opcional: Estilo para cuando el botón cambia a 'Ocultar' */
.secondary-cta {
    color: var(--color-primary); /* Texto verde */
    font-size: 1.1em;
}

/* Hover: Se rellena de verde y el texto se vuelve blanco */
.secondary-cta:hover {
    background-color: var(--color-primary);
    color: var(--color-white); 
}
.section-subtitle {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 50px;
}
@media (max-width: 768px) {
    
    /* ... estilos existentes ... */
    
    .nav-bar {
        flex-direction: column; /* La navegación apila el logo y el menú */
        text-align: center;
    }
    
    .main-nav ul {
        flex-direction: column; /* Los enlaces se apilan verticalmente */
        margin-top: 10px;
    }
    
    .main-nav ul li {
        margin-bottom: 5px;
    }

    /* Las grillas se ajustan solas gracias al 'auto-fit' que usamos, pero es bueno revisar. */
}
/* 11. SECCIÓN DE UBICACIÓN Y MAPA */
/* ---------------------------------------------------- */

.location-section {
    padding: 80px 0 0; /* Quitamos el padding inferior para que el mapa llegue al borde */
    text-align: center;
    background-color: var(--color-light); /* Fondo gris claro */
}

/* Contenedor que envuelve el mapa (por si necesitamos bordes o sombra) */
.map-container {
    width: 100%;
    overflow: hidden; /* Asegura que no haya barras de desplazamiento no deseadas */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1); /* Sombra sutil arriba del mapa */
    margin-top: 40px; /* Espacio entre el texto y el mapa */
}

/* Asegura que el iframe sea 100% responsivo dentro de su contenedor */
.map-container iframe {
    width: 100%;
    /* La altura fija de 450px es un buen estándar para la mayoría de pantallas */
    height: 450px; 
    display: block; /* Elimina espacios extra debajo del iframe */
}

/* Ajustes responsivos para dispositivos pequeños */
@media (max-width: 600px) {
    .map-container iframe {
        height: 300px; /* Hacemos el mapa un poco más pequeño en móviles */
    }
}

/* ---------------------------------------------------- */
/* 11. SECCIÓN DE UBICACIÓN Y CONTACTO (NUEVO ESTILO) */
/* ---------------------------------------------------- */

.location-section {
    padding: 80px 0; /* Añadimos padding arriba y abajo */
    background-color: var(--color-white); /* Fondo blanco */
}

/* Contenedor principal de 2 columnas */
.location-grid {
    display: grid;
    /* 1 columna para el mapa (map-container) y 1 columna para el detalle (contact-details) */
    grid-template-columns: 1.5fr 1fr; /* El mapa es ligeramente más ancho que los detalles */
    gap: 40px;
    margin-top: 50px;
    align-items: flex-start; /* Alinea las columnas al inicio */
}

/* Estilos del Mapa (Columna Izquierda) */
.map-container {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.map-container iframe {
    width: 100%;
    height: 450px;
    display: block;
}

/* Estilos de los Detalles de Contacto (Columna Derecha) */
.contact-details {
    padding: 20px;
    background-color: var(--color-light); /* Fondo gris sutil */
    border-left: 5px solid var(--color-primary); /* Borde verde lateral para destacar */
    border-radius: 5px;
    height: 100%; /* Ocupa toda la altura disponible en la grid */
}

.contact-details h3 {
    color: var(--color-dark);
    margin-bottom: 25px;
    font-size: 1.6em;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.detail-item {
    display: flex; /* Para alinear el ícono con el texto */
    align-items: flex-start;
    margin-bottom: 18px;
    line-height: 1.4;
    color: var(--color-dark);
}

.detail-item strong {
    margin-right: 5px;
}

.detail-item i {
    font-size: 1.2em;
    margin-right: 15px;
    margin-top: 3px; /* Pequeño ajuste vertical para el ícono */
}

.maps-link {
    color: var(--color-primary);
    text-decoration: underline;
    display: block; /* Para que el enlace vaya en una nueva línea si es necesario */
    margin-top: 5px;
    font-size: 0.95em;
}

.responsible-info {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px dashed var(--color-primary); /* Línea punteada de separación */
}

.responsible-info h4 {
    color: var(--color-primary);
    margin-bottom: 10px;
    font-size: 1.1em;
}

/* Media Query para Responsividad */
@media (max-width: 992px) {
    .location-grid {
        /* En pantallas medianas y pequeñas, se apilan en una sola columna */
        grid-template-columns: 1fr;
    }

    .map-container iframe {
        height: 350px;
    }
}
/* ---------------------------------------------------- */
/* 12. ESTILOS PARA REDES SOCIALES EN EL FOOTER */
/* ---------------------------------------------------- */

/* Ajustamos el layout del footer para centrar contenido */
.main-footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.social-links {
    margin-top: 20px;
    margin-bottom: 10px;
}

.social-links a {
    color: var(--color-light); /* Color claro para los íconos */
    font-size: 1.5em;
    margin: 0 10px;
    transition: color 0.3s ease;
    text-decoration: none;
}

.social-links a:hover {
    color: var(--color-primary); /* Se vuelven verdes al pasar el cursor */
    transform: scale(1.1);
}

/* Estilos para el texto de derechos de autor */
.main-footer p {
    font-size: 0.85em;
    margin-top: 10px;
}
/* ---------------------------------------------------- */
/* 13. BOTÓN FLOTANTE DE WHATSAPP */
/* ---------------------------------------------------- */

/* ---------------------------------------------------- */
/* 13. BOTÓN FLOTANTE DE WHATSAPP CON MENSAJE */
/* ---------------------------------------------------- */

.whatsapp-widget-container {
    /* Mantiene el contenedor fijo en la esquina */
    position: fixed;
    bottom: 25px; /* Separación desde abajo */
    right: 25px; /* Separación desde la derecha */
    z-index: 1000;
}

.whatsapp-float {
    /* Se mantienen los estilos del botón, pero ahora dentro del contenedor */
    background-color: #25D366; 
    color: var(--color-white);
    text-align: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    line-height: 60px; 
    font-size: 2.5em; 
    transition: transform 0.3s ease;
    display: block;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}


/* Estilo de la Burbuja de Mensaje Flotante */
.whatsapp-message-bubble {
    /* Posicionamiento Absoluto */
    position: absolute;
    bottom: 15px; /* Altura sobre el botón */
    right: 80px; /* Posición a la izquierda del botón (60px ancho + margen) */
    
    /* Estilos de la Burbuja */
    background-color: var(--color-white); 
    color: var(--color-dark); /* Texto oscuro para contraste */
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    font-size: 0.9em;
    font-weight: 600;
    white-space: nowrap; /* Mantiene el texto en una sola línea */
}


/* Opcional: Ocultar el mensaje en móviles para evitar saturación */
@media (max-width: 768px) {
    .whatsapp-message-bubble {
        display: none; 
    }
}
/* ===================================== */
/* LOGO PEQUEÑO CENTRADO DENTRO DE HERO SECTION */
/* ===================================== */

.logo-hero-pequeño {
    /* Centra el contenedor del logo horizontalmente */
    width: 100%;
    text-align: center;
    
    /* Le da un margen para separarlo del contenido del hero-section */
    margin: 40px 0 20px 0; 
    
    /* Asegura que esté por encima de la imagen de fondo */
    position: relative;
    z-index: 50; 
}

.logo-hero-pequeño img {
    /* 💡 CLAVE: Ajusta el tamaño de la imagen */
    width: 200px; /* Reducimos el tamaño (ajusta este valor si necesitas que sea más grande o más pequeño) */
    height: auto; 
    
    /* Sombra opcional para que destaque un poco */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
    border-radius: 5px; /* Bordes suaves */
}