/* Base Styles & Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8;
    scroll-behavior: smooth; /* Habilita scroll suave en navegadores modernos */
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

/* Buttons */
.btn {
    display: inline-block;
    background-color: #21a2d6;
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #0091c3;
    text-decoration: none;
}

/* Header / Navbar */
.header {
    background-color: #fff;
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
}

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

.main-nav ul li {
    margin-left: 30px;
}

.main-nav ul li a {
    color: #555;
    font-weight: 600;
    font-size: 16px;
    transition: color 0.3s ease;
    text-decoration: none;
}

.main-nav ul li a:hover,
.main-nav ul li a.active {
    color: #007bff;
}

.nav-toggle {
    display: none; /* Oculto por defecto en desktop */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}

/* Hero Section */
/* Estilos para la sección hero */
/* Estilos para la sección hero */
.hero-section {
    position: relative; /* Esencial para posicionar el video y el overlay */
    /* background-image: url("http://googleusercontent.com/image_generation_content/0"); */ /* ELIMINA ESTA LÍNEA (ya no necesitamos una imagen de fondo) */
    /* background-size: cover; */ /* Puedes eliminar estas también, el video lo manejará */
    /* background-position: center; */
    /* background-repeat: no-repeat; */

    color: white; /* Asegura que el texto sea blanco para mejor contraste */
    display: flex; /* Para centrar el hero-content */
    align-items: center;
    justify-content: center;
    min-height: 1080px; /* Mantén o ajusta la altura mínima deseada */
    text-align: center; /* Asegura que el texto dentro de hero-content esté centrado */
    padding: 100px 0; /* Ajusta el espaciado vertical según sea necesario */

    /* Agrega overflow: hidden para evitar barras de desplazamiento si el video se desborda ligeramente */
    overflow: hidden;
}

/* Estilos para el video de fondo */
.hero-section .background-video {
    position: absolute; /* Posiciona el video absolutamente respecto a .hero-section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que el video cubra todo el espacio sin dejar barras negras */
    z-index: 0; /* Coloca el video por debajo del overlay y el contenido */
}

/* El overlay oscuro sutil (asegúrate de que tenga z-index: 1) */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); /* Ajusta la opacidad */
    z-index: 1; /* Esto asegura que el overlay esté encima del video */
}

/* El contenido del hero (asegúrate de que tenga z-index: 2 o mayor) */
.hero-content {
    position: relative; /* Esencial para que z-index funcione */
    z-index: 2; /* Esto asegura que el contenido esté encima del overlay y del video */
    max-width: 800px;
    padding: 20px;
    box-sizing: border-box;
}

/* Mantén tus estilos para h2, p y el botón dentro de .hero-content */
.hero-content h2 { /* ... */ }
.hero-content p { /* ... */ }
.btn-primary { /* ... */ }

/* Media query para móviles, ajusta si el video causa problemas */
@media (max-width: 768px) {
    .hero-section {
        min-height: 450px; /* Menor altura mínima para dispositivos móviles */
    }
    /* Puedes ocultar el video de fondo en móviles para ahorrar datos si lo deseas */
    /* .hero-section .background-video {
        display: none;
    }
    /* Y si ocultas el video, podrías volver a poner una imagen de fondo para móviles: */
    /* .hero-section {
        background-image: url("ruta/a/imagen-fondo-movil.jpg");
        background-size: cover;
        background-position: center;
    } */
}

/* Definición de la animación de fade-in (aparecer gradualmente) */
@keyframes fadeIn {
    from {
        opacity: 0; /* Empieza completamente transparente */
        transform: translateY(20px); /* Un poco desplazado hacia abajo */
    }
    to {
        opacity: 1; /* Termina completamente visible */
        transform: translateY(0); /* Vuelve a su posición original */
    }
}

/* Asegura que el contenido esté sobre el overlay */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px; /* Limita el ancho del contenido para legibilidad en pantallas grandes */
    padding: 20px; /* Añade un padding para que el contenido no se pegue a los bordes en móviles */
    box-sizing: border-box; /* Asegura que el padding no añada ancho extra */
    /* text-align: center; */ /* Esta línea ya no es estrictamente necesaria aquí si se pone en hero-section */
}

.hero-content h2 {
    font-size: 3em;
    margin-bottom: 20px;
    /* color: white; */ /* Ya se define en .hero-section */

    /* **** PROPIEDADES DE ANIMACIÓN **** */
    animation: fadeIn 1.5s ease-out 0.5s forwards; /* Nombre Duración Tipo_curva Retraso Estado_final */
    /* ********************************* */
}

.hero-content p {
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 30px;
}


/* Media Query para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
    .hero-section {
        min-height: 450px; /* Menor altura mínima para dispositivos móviles */
    }

    .hero-content h2 {
        font-size: 2em; /* Texto más pequeño en móviles */
    }

    .hero-content p {
        font-size: 1em; /* Texto más pequeño en móviles */
    }
}

/* Asegura que el contenido esté sobre el overlay */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center; /* Centra el texto */
}

.hero-content h2 {
    font-size: 3em; /* Ajusta el tamaño de la fuente */
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.2em; /* Ajusta el tamaño de la fuente */
    line-height: 1.6;
    margin-bottom: 30px;
}

.hero-content {
    max-width: 800px;
}

.hero-content h2 {
    font-size: 48px;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.hero-content p {
    font-size: 20px;
    margin-bottom: 30px;
}

/* Content Sections */
.content-section {
    padding: 30px 0;
    text-align: center;
}

.content-section h2 {
    font-size: 38px;
    margin-bottom: 40px;
    font-weight: 700;
    color: #333;
    position: relative;
    padding-bottom: 10px;
}

.content-section h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: #007bff;
    border-radius: 2px;
}

.content-section p {
    font-size: 18px;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 30px auto;
}

.bg-light {
    background-color: #f0f0f0;
}

/* About Section */
.about-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 50px;
}

.about-item {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.about-item:hover {
    transform: translateY(-5px);
}

.about-item .icon {
    font-size: 48px;
    color: #007bff;
    margin-bottom: 20px;
}

.about-item h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #333;
}

/* Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.service-item {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.service-item:hover {
    transform: translateY(-5px);
}

.service-item .icon {
    font-size: 48px;
    color: #007bff;
    margin-bottom: 20px;
}

.service-item h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #333;
}

/* Gallery Section */
/* Estilos para el título y el párrafo de la sección */
.gallery-section h2 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 2.8em; /* Ajusta el tamaño de la fuente si es necesario */
    color: #333; /* O el color que desees */
}

.gallery-section p {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.1em;
    color: #555; /* O el color que desees */
}

/* Contenedor principal de la grilla */
.gallery-grid {
    display: grid; /* Activa CSS Grid */
    grid-template-columns: repeat(2, 1fr); /* Crea 2 columnas de igual ancho */
    grid-template-rows: auto auto; /* Crea 2 filas, su altura se ajusta al contenido */
    gap: 30px; /* Espacio entre los elementos de la grilla (filas y columnas) */
    max-width: 1200px; /* Limita el ancho máximo de la grilla para que no se extienda demasiado */
    margin: 0 auto; /* Centra la grilla en la página */
    padding: 0 20px; /* Padding horizontal para que no se pegue a los bordes en pantallas pequeñas */
}

/* Estilos para cada elemento de la grilla */
.gallery-item {
    position: relative;
    overflow: hidden; /* Asegura que el contenido (imagen, overlay) no se desborde */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    aspect-ratio: 16 / 9; /* Mantiene una relación de aspecto 16:9 para cada item */
    display: flex; /* Para centrar el contenido verticalmente si es necesario */
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white; /* Color del texto del overlay */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo el item sin distorsión */
    display: block; /* Elimina espacio extra debajo de la imagen */
    transition: transform 0.3s ease-in-out; /* Transición para efecto hover */
}

.gallery-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Overlay semitransparente oscuro */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Por defecto, el overlay es invisible */
    transition: opacity 0.3s ease-in-out; /* Transición para el efecto hover */
    padding: 20px;
    box-sizing: border-box;
}

.gallery-item:hover .overlay {
    opacity: 1; /* El overlay se vuelve visible al pasar el ratón */
}

.gallery-item:hover img {
    transform: scale(1.05); /* Efecto de zoom sutil en la imagen al pasar el ratón */
}

.gallery-item .overlay h3 {
    font-size: 1.8em; /* Ajusta tamaño del título en overlay */
    margin-bottom: 10px;
    color: white;
}

.gallery-item .overlay p {
    font-size: 1em; /* Ajusta tamaño del párrafo en overlay */
    color: #e0e0e0;
    padding: 0 10px;
    text-align: center;
    line-height: 1.4;
}

/* Media Queries para responsividad (una columna en pantallas pequeñas) */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
        gap: 20px; /* Ajusta el espacio para móviles */
    }

    .gallery-item .overlay h3 {
        font-size: 1.5em;
    }

    .gallery-item .overlay p {
        font-size: 0.9em;
    }
}

.video-container {
    position: relative;
    /* Comprueba la relación de aspecto real de tu video.
       Si es 16:9 (videos de YouTube, la mayoría de los videos modernos), 56.25% está bien.
       Si es 4:3, cambia a 75%.
       Si no estás seguro, puedes probar a eliminarlo temporalmente o usar object-fit: contain. */
    padding-bottom: 56.25%; /* Mantenemos 16:9 por defecto */
    height: 0;
    overflow: hidden;
    margin-top: 50px;

    /* **** AJUSTES PARA EL ANCHO DEL CONTENEDOR **** */
    width: 90%; /* Aumenta el ancho a 90% (prueba diferentes valores) */
    max-width: 1920px; /* Aumenta el ancho máximo (prueba diferentes valores o elimina si no quieres límite) */
    /* ********************************************* */

    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* **** AJUSTE CRÍTICO: object-fit **** */
    object-fit: contain; /* <-- CAMBIO CLAVE: Hace que el video se escale para caber sin recortar. */
                           /* Esto puede dejar "bandas" negras si la relación de aspecto no coincide. */
    /* object-fit: fill; */ /* <-- OTRA OPCIÓN: Estira el video para llenar el contenedor (puede distorsionar) */
    /* ************************************ */
    border-radius: 10px;
}

/* Regla para la etiqueta <video> dentro del contenedor */
.video-container video {
    position: absolute; /* Para que ocupe todo el espacio del contenedor */
    top: 0;
    left: 0;
    width: 100%; /* Ocupa el 100% del ancho de .video-container */
    height: 100%; /* Ocupa el 100% del alto de .video-container */
    object-fit: cover; /* Asegura que el video cubra el espacio sin distorsión */
    border-radius: 10px; /* Bordes redondeados (si los quieres en el video mismo) */
}

.video-container h3 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}


/* Benefits Section */
.benefits-list {
    text-align: left;
    max-width: 700px;
    margin: 50px auto 0 auto;
}

.benefits-list ul {
    list-style: none;
}

.benefits-list ul li {
    font-size: 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}

.benefits-list ul li .fas {
    color: #28a745; /* Color verde para el check */
    margin-right: 15px;
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}


/* Contact Section */
.contact-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 50px;
    text-align: left;
}

.contact-info, .contact-form {
    flex: 1;
    min-width: 300px;
}

.contact-info h3, .contact-form h3 {
    font-size: 24px;
    margin-bottom: 25px;
    color: #333;
}

.contact-info p {
    font-size: 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    max-width: 100%; /* Resetting from section-level p */
}

.contact-info p .fas {
    margin-right: 15px;
    color: #007bff;
    font-size: 20px;
}

.social-links {
    margin-top: 30px;
}

.social-links a {
    color: #007bff;
    font-size: 20px;
    margin-right: 20px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #0056b3;
    text-decoration: none;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #007bff;
}

/* Footer */
.footer {
    background-color: #0091c3;
    color: #fff;
    text-align: center;
    padding: 30px 0;
    font-size: 15px;
}

/* Responsive Design */
@media (max-width: 900px) {
    .main-nav {
        display: none; /* Oculta el menú en pantallas más pequeñas */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px; /* Altura del header */
        left: 0;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .main-nav.active {
        display: flex; /* Muestra el menú cuando está activo */
    }

    .main-nav ul {
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
    }

    .main-nav ul li {
        margin: 10px 0;
    }

    .nav-toggle {
        display: block; /* Muestra el botón de toggle */
    }

    .hero-content h2 {
        font-size: 38px;
    }

    .hero-content p {
        font-size: 18px;
    }

    .content-section h2 {
        font-size: 32px;
    }

    .about-grid, .services-grid, .contact-grid {
        flex-direction: column;
        align-items: center;
    }

    .about-item, .service-item, .contact-info, .contact-form {
        max-width: 90%;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .hero-section {
        padding: 100px 20px;
    }

    .hero-content h2 {
        font-size: 30px;
    }

    .hero-content p {
        font-size: 16px;
    }

    .content-section {
        padding: 60px 0;
    }

    .content-section h2 {
        font-size: 28px;
    }

    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    .logo a {
        font-size: 24px;
    }

    .gallery-item img {
        height: 200px;
    }
}

/* Map Location Section Styles */
.map-location-section {
    padding: 80px 0; /* Ajusta el padding si es necesario */
    background-color: #f0f0f0; /* Fondo claro para destacarlo */
}

/* Contenedor fluido para que el mapa ocupe todo el ancho disponible */
.container-fluid {
    width: 100%;
    padding: 0; /* Sin padding lateral para que ocupe el 100% del ancho */
    margin: 0;
}

/* Estilos para hacer el iframe responsivo */
.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 (altura/ancho). Ajusta si el mapa se ve distorsionado */
    position: relative;
    height: 0;
    margin-top: 40px; /* Espacio entre el texto y el mapa */
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%; /* ¡Esta es la clave para que el iframe interno se estire! */
    position: absolute;
    border: none; /* Asegura que no haya borde en el iframe */
}

/* Asegurar que el título y párrafo de la sección sigan centrándose */
.map-location-section h2,
.map-location-section p {
    text-align: center;
    max-width: 800px; /* Limita el ancho del texto para legibilidad */
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px; /* Pequeño padding para que el texto no se pegue a los bordes */
}
#logo {
  width: 150px; /* Ejemplo: el contenedor del logo tendrá 150px de ancho */
  /* Opcional: max-width para que no crezca más allá de cierto punto */
  /* max-width: 200px; */
}

html {
  scroll-behavior: smooth; /* Ya deberías tener esto para el scroll suave */
  scroll-padding-top: 60px; /* Ajusta este valor al alto de tu header + el espacio deseado */
}

/* Opcional: Si tu header es responsivo y cambia de altura,
puedes definir un scroll-padding-top diferente en media queries */
@media (max-width: 768px) { /* Ejemplo para móviles */
  html {
    scroll-padding-top: 60px; /* Un valor menor si tu header es más bajo en móviles */
  }
}

/* Estilos para la Nueva Sección de Promoción (Promo Section) */
.promo-section {
position: relative;
background-image: url("https://media500.com.ar/images/mapa.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
display: flex;
align-items: center;
justify-content: center;
min-height: 600px;
text-align: center;
padding: 50px 0;
width: 90%; /* Establece el ancho al 80% del contenedor padre */
max-width: 1200px; /* Mantén o ajusta un ancho máximo si lo deseas */
margin-left: auto; /* Centra la sección horizontalmente */
margin-right: auto; /* Centra la sección horizontalmente */
}

/* Overlay oscuro sutil para la nueva sección (similar al Hero) */
.promo-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Ajusta la opacidad para el nivel de oscuridad */
    z-index: 1; /* Asegura que el overlay esté detrás del contenido */
}

.promo-section {
    /* ... otras propiedades ... */
    color: #f0f0f0; /* Cambia a tu color deseado */
}

/* Estilos para el contenido de la nueva sección */
.promo-content {
    position: relative;
    z-index: 2; /* Asegura que el contenido esté sobre el overlay */
    max-width: 700px; /* Limita el ancho del contenido para legibilidad. Ajusta. */
    padding: 20px; /* Añade un padding para que el contenido no se pegue a los bordes en móviles */
    box-sizing: border-box; /* Asegura que el padding no añada ancho extra */
}

.promo-content h2 {
    font-size: 2.8em; /* Ajusta el tamaño de la fuente para que combine con el Hero */
    margin-bottom: 20px;
    line-height: 1.2;
    /* Puedes añadir aquí una animación si quieres, similar al h2 del Hero */
    /* animation: fadeIn 1.5s ease-out 0.5s forwards; */
}

.promo-content p {
    font-size: 1.1em; /* Ajusta el tamaño de la fuente */
    line-height: 1.6;
    margin-bottom: 30px;
}

.promo-content h2 {
    /* ... otras propiedades ... */
    color: #FFD700; /* Ejemplo: color dorado */
}

.promo-content p {
    /* ... otras propiedades ... */
    color: #E0E0E0; /* Ejemplo: un gris más claro */
}

/* Media Query para pantallas más pequeñas en la nueva sección */
@media (max-width: 768px) {
    .promo-section {
        min-height: 350px; /* Menor altura mínima para dispositivos móviles */
    }

    .promo-content h2 {
        font-size: 2em; /* Texto más pequeño en móviles */
    }

    .promo-content p {
        font-size: 0.95em; /* Texto más pequeño en móviles */
    }
}
/* Estilos para el contenedor del título ancla */
.section-title-anchor {
    text-align: center; /* Centra el título */
    padding-top: 30px; /* Espacio superior para que no se pegue al borde superior de la pantalla al hacer scroll */
    padding-bottom: 20px; /* Espacio inferior */
    background-color: #f8f9fa; /* Un color de fondo para el título, ajusta a tu diseño */
    color: #333; /* Color del texto del título */
}

.section-title-anchor .anchor-title {
    font-size: 2.8em; /* Ajusta el tamaño de la fuente para el título */
    margin-bottom: 0; /* Elimina márgenes extra */
    line-height: 1.2;
}

/* Media queries para móviles */
@media (max-width: 768px) {
    .section-title-anchor {
        padding-top: 50px;
    }
    .section-title-anchor .anchor-title {
        font-size: 2em;
    }
}
/* Estilos para el Overlay */
.welcome-popup-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 semitransparente */
    z-index: 999; /* Por debajo del popup, pero por encima de todo lo demás */
}

/* Estilos para el Popup principal */
.welcome-popup {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el popup perfectamente */
    width: 90%; /* Ancho para móviles */
    max-width: 400px; /* Ancho máximo en escritorio */
    background-color: #fff; /* Fondo blanco del popup */
    border-radius: 10px; /* Esquinas redondeadas */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Sombra para profundidad */
    z-index: 1000; /* Por encima del overlay y de todo lo demás */
    font-family: Arial, sans-serif; /* Puedes usar tu fuente principal */
    overflow: hidden; /* Asegura que los bordes redondeados se vean bien */
}

.popup-header {
    background-color: #2e8b57; /* Verde oscuro similar al de la imagen */
    color: white;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    position: relative;
}

.popup-logo {
    width: 40px; /* Tamaño del logo en el header */
    height: 40px;
    border-radius: 50%; /* Si el logo es circular */
    margin-right: 15px;
    border: 2px solid white; /* Borde blanco alrededor del logo */
}

.popup-header h3 {
    margin: 0;
    font-size: 1.2em; /* Tamaño del texto MEDIA 500 */
    flex-grow: 1;
}

.close-popup {
    font-size: 2em;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
    color: white; /* Color de la 'x' de cierre */
}

.popup-subheader {
    background-color: #25D366; /* Verde un poco más claro */
    color: white;
    padding: 10px 20px;
    text-align: center;
    font-size: 0.9em; /* */
}

.popup-content-whatsapp {
    padding: 20px;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z" fill="%23E8F5E9"/%3E%3Cpath d="M16.9292 14.2831C16.9292 14.2831 16.9292 14.2831 16.9292 14.2831C16.8927 14.2467 16.8576 14.2129 16.8242 14.1795C16.7909 14.1462 16.7589 14.1139 16.7279 14.0827C16.697 14.0515 16.6669 14.0209 16.6378 13.991C16.6086 13.961 16.5799 13.9315 16.5516 13.9023C16.5233 13.8732 16.4952 13.8441 16.4673 13.8153C16.4394 13.7865 16.4117 13.7578 16.3842 13.7293C16.3567 13.7008 16.3294 13.6725 16.3023 13.6443C16.2753 13.6162 16.2484 13.5882 16.2217 13.5603C16.1951 13.5324 16.1687 13.5046 16.1425 13.477C16.1163 13.4493 16.0903 13.4218 16.0645 13.3944C16.0388 13.3671 16.0132 13.3399 15.9878 13.3129C15.9626 13.286 15.9375 13.2592 15.9126 13.2326C15.8878 13.206 15.8631 13.1796 15.8386 13.1533C15.8143 13.1271 15.7901 13.1011 15.7661 13.0753C15.7422 13.0496 15.7185 13.024 15.6949 12.9985C15.6715 12.9732 15.6482 12.948 15.6251 12.923C15.6022 12.898 15.5794 12.8732 15.5568 12.8485C15.5344 12.824 15.5121 12.7995 15.4901 12.7752C15.4682 12.751 15.4465 12.7268 15.4251 12.7028C15.4038 12.6789 15.3826 12.6552 15.3616 12.6316C15.3408 12.608 15.3201 12.5846 15.2996 12.5613C15.2794 12.5382 15.2593 12.5152 15.2394 12.4924C15.2198 12.4697 15.2003 12.4471 15.181 12.4246C15.1619 12.4023 15.143 12.3801 15.1243 12.358C15.1058 12.3361 15.0874 12.3143 15.0692 12.2926C15.0513 12.2711 15.0335 12.2497 15.0159 12.2285C14.9985 12.2074 14.9813 12.1864 14.9642 12.1656C14.9474 12.145 14.9307 12.1245 14.9142 12.1042C14.898 12.084 14.8819 12.064 14.8661 12.0442C14.8504 12.0245 14.835 12.005 14.8198 11.9856C14.8048 11.9664 14.7899 11.9474 14.7753 11.9286C14.7609 11.9099 14.7466 11.8914 14.7325 11.873C14.7187 11.8548 14.705 11.8368 14.6915 11.819C14.6782 11.8013 14.6651 11.7838 14.6521 11.7664C14.6394 11.7492 14.6268 11.7322 14.6144 11.7153C14.6022 11.6986 14.5902 11.6821 14.5783 11.6657C14.5667 11.6495 14.5552 11.6334 14.5439 11.6175C14.5328 11.6018 14.5218 11.5862 14.5111 11.5708C14.5005 11.5555 14.4901 11.5404 14.4799 11.5254C14.4699 11.5105 14.4601 11.4958 14.4504 11.4812C14.4409 11.4668 14.4315 11.4526 14.4224 11.4385C14.4134 11.4246 14.4046 11.4108 14.396 11.3972C14.3876 11.3837 14.3793 11.3704 14.3712 11.3572C14.3633 11.3441 14.3555 11.3312 14.3479 11.3184C14.3405 11.3058 14.3332 11.2933 14.3261 11.281C14.3191 11.2688 14.3123 11.2567 14.3057 11.2448C14.2993 11.233 14.293 11.2214 14.2869 11.2099C14.2809 11.1985 14.2751 11.1872 14.2694 11.176C14.264 11.165 14.2586 11.1541 14.2535 11.1434C14.2485 11.1328 14.2436 11.1223 14.2389 11.112C14.2343 11.1017 14.2299 11.0916 14.2256 11.0816C14.2215 11.0718 14.2175 11.0621 14.2136 11.0525C14.2099 11.0431 14.2062 11.0338 14.2027 11.0246C14.1994 11.0156 14.1961 11.0067 14.193 10.998C14.19 10.9894 14.1871 10.9809 14.1843 10.9725C14.1816 10.9642 14.179 10.9561 14.1766 10.9481C14.1743 10.9402 14.172 10.9324 14.1699 10.9248C14.1679 10.9173 14.1659 10.9099 14.1641 10.9026C14.1625 10.8955 14.1609 10.8885 14.1594 10.8816C14.158 10.8748 14.1567 10.8681 14.1554 10.8616C14.1543 10.8552 14.1532 10.8489 14.1523 10.8427C14.1514 10.8367 14.1506 10.8308 14.1499 10.8251C14.1493 10.8194 14.1488 10.8139 14.1484 10.8085C14.1481 10.8033 14.1478 10.7981 14.1477 10.7931C14.1476 10.7881 14.1476 10.7833 14.1477 10.7785C14.1478 10.7738 14.1481 10.7692 14.1484 10.7648C14.1488 10.7604 14.1493 10.7561 14.1499 10.7519C14.1506 10.7478 14.1514 10.7437 14.1523 10.7398C14.1532 10.736 14.1543 10.7323 14.1554 10.7287C14.1567 10.7251 14.158 10.7216 14.1594 10.7182C14.1609 10.7149 14.1625 10.7117 14.1641 10.7086C14.1659 10.7056 14.1679 10.7027 14.1699 10.6999C14.172 10.6973 14.1743 10.6947 14.1766 10.6923C14.179 10.6899 14.1816 10.6877 14.1843 10.6855C14.1871 10.6835 14.19 10.6815 14.193 10.6796C14.1961 10.6778 14.1994 10.6761 14.2027 10.6745C14.2062 10.6729 14.2099 10.6715 14.2136 10.6702C14.2175 10.669 14.2215 10.6678 14.2256 10.6668C14.2299 10.6659 14.2343 10.665 14.2389 10.6643C14.2436 10.6636 14.2485 10.6629 14.2535 10.6624C14.2586 10.662 14.264 10.6617 14.2694 10.6615C14.2751 10.6613 14.2809 10.6612 14.2869 10.6614C14.293 10.6615 14.2993 10.6617 14.3057 10.6621C14.3123 10.6624 14.3191 10.6629 14.3261 10.6634C14.3332 10.6641 14.3405 10.6648 14.3479 10.6657C14.3555 10.6667 14.3633 10.6678 14.3712 10.669C14.3793 10.6702 14.3876 10.6716 14.396 10.6731C14.4046 10.6747 14.4134 10.6764 14.4224 10.6783C14.4315 10.6802 14.4409 10.6823 14.4504 10.6845C14.4601 10.6868 14.4699 10.6892 14.4799 10.6917C14.4901 10.6943 14.5005 10.6971 14.5111 10.7C14.5218 10.703 14.5328 10.7061 14.5439 10.7093C14.5552 10.7126 14.5667 10.7161 14.5783 10.7196C14.5902 10.7233 14.6022 10.7271 14.6144 10.731C14.6268 10.735 14.6394 10.7391 14.6521 10.7434C14.6651 10.7477 14.6782 10.7522 14.6915 10.7568C14.705 10.7616 14.7187 10.7665 14.7325 10.7715C14.7466 10.7766 14.7609 10.7819 14.7753 10.7874C14.7899 10.793 14.8048 10.7987 14.8198 10.8046C14.835 10.8106 14.8504 10.8168 14.8661 10.8231C14.8819 10.8295 14.898 10.8361 14.9142 10.8428C14.9307 10.8497 14.9474 10.8567 14.9642 10.8638C14.9813 10.8711 14.9985 10.8785 15.0159 10.8861C15.0335 10.8938 15.0513 10.9016 15.0692 10.9096C15.0874 10.9178 15.1058 10.9261 15.1243 10.9346C15.143 10.9432 15.1619 10.952 15.181 10.9609C15.2003 10.9699 15.2198 10.9791 15.2394 10.9885C15.2593 10.998 15.2794 11.0076 15.2996 11.0174C15.3201 11.0274 15.3408 11.0375 15.3616 11.0478C15.3826 11.0582 15.4038 11.0688 15.4251 11.0796C15.4465 11.0905 15.4682 11.1015 15.4901 11.1128C15.5121 11.1242 15.5344 11.1358 15.5568 11.1475C15.5794 11.1594 15.6022 11.1714 15.6251 11.1836C15.6482 11.1959 15.6715 11.2084 15.6949 11.2211C15.7185 11.2339 15.7422 11.2469 15.7661 11.2601C15.7901 11.2734 15.8143 11.2869 15.8386 11.3006C15.8631 11.3144 15.8878 11.3284 15.9126 11.3426C15.9375 11.357 15.9626 11.3716 15.9878 11.3863C16.0132 11.4012 16.0388 11.4162 16.0645 11.4314C16.0903 11.4468 16.1163 11.4623 16.1425 11.478C16.1687 11.4939 16.1951 11.5099 16.2217 11.5261C16.2484 11.5425 16.2753 11.5591 16.3023 11.5759C16.3294 11.5928 16.3567 11.6099 16.3842 11.6272C16.4117 11.6447 16.4394 11.6624 16.4673 11.6803C16.4952 11.6983 16.5233 11.7165 16.5516 11.7349C16.5799 11.7535 16.6086 11.7723 16.6378 11.7912C16.6669 11.8104 16.697 11.8298 16.7279 11.8494C16.7589 11.8692 16.7909 11.8892 16.8242 11.9095C16.8576 11.9299 16.8927 11.9506 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 11.9715C16.9292 11.9715 16.9292 11.9715 16.9292 14.2831Z" fill="%23FFFFFF"/%3E%3C/svg%3E'); /* Icono de patrón de WhatsApp */
    background-repeat: repeat;
    background-size: 18px; /* Ajusta el tamaño del icono de patrón */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.whatsapp-chat-preview {
    background-color: #e4e3e3; /* Fondo del "bocadillo" de chat */
    border-radius: 10px; /* Bordes redondeados del bocadillo */
    padding: 15px;
    margin-bottom: 25px;
    width: 85%; /* Ancho del bocadillo */
    text-align: left;
}

.whatsapp-chat-preview p {
    margin: 5px 0;
    color: #333;
    font-size: 0.9em;
    line-height: 1.4;
}

.whatsapp-chat-preview p strong {
    color: #25D366; /* Color para el "MEDIA 500" en el chat */
}

.whatsapp-button {
    background-color: #25D366; /* Color del botón de chat */
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 30px; /* Botón más redondeado */
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none; /* Quita el subrayado del enlace */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.whatsapp-button:hover {
    background-color: #1DA851; /* Un verde más oscuro al pasar el ratón */
}

.whatsapp-button .fab {
    margin-right: 10px;
    font-size: 1.2em;
}

/* Media Queries para ajustar en pantallas más pequeñas */
@media (max-width: 480px) {
    .welcome-popup {
        width: 95%; /* Un poco más de ancho en pantallas muy pequeñas */
    }
    .popup-header {
        padding: 10px 15px;
    }
    .popup-header h3 {
        font-size: 1.1em;
    }
    .close-popup {
        font-size: 1.8em;
    }
    .popup-subheader {
        font-size: 0.8em;
        padding: 8px 15px;
    }
    .whatsapp-chat-preview {
        width: 90%;
        padding: 10px;
    }
    .whatsapp-button {
        padding: 12px 25px;
        font-size: 1em;
    }
}

/* Reemplaza 'nombre-de-la-clase-o-id' con el que encontraste */
.wa-chat-box-poweredby {
    display: none !important;
}
/* style.css */

/* style.css */

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    /* Ajusta este margin-top para que no quede detrás del header */
    margin-top: 150px; /* Ejemplo, ajusta a la altura de tu header + extra */
    position: relative;
    z-index: 10;
}
.success-message {
    background-color: #d4edda; /* Verde claro */
    color: #155724; /* Texto verde oscuro */
    border: 1px solid #c3e6cb;
}
.error-message {
    background-color: #f8d7da; /* Rojo claro */
    color: #721c24; /* Texto rojo oscuro */
    border: 1px solid #f5c6cb;
}
/* También puedes añadir esto para el body para un espacio general (opcional) */
/*
body {
    padding-top: 80px; /* O la altura de tu header para que todo el contenido empiece debajo del header
}
*/