/* Configuración básica para responsive */
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}
body {
    margin: 0;
    font-family: sans-serif; /* O la que prefieras */
}

/* Las imágenes dentro de <picture> se hacen fluidas */
img {
    display: block;
    max-width: 100%;
    height: auto; /* Mantiene la proporción */
    width: 100%; /* Ocupa todo el ancho de su contenedor */
}

/* Contenedores de sección para asegurar que ocupen toda la pantalla */
#hero, #seccion-1, #seccion-2, #seccion-3, #seccion-4, #seccion-5 {
    width: 100%;
    /* Altura mínima para que sean visibles, ajusta según necesites */
    /* Usar vh (viewport height) es común para secciones grandes de imágenes */
    min-height: 50vh; 
    overflow: hidden; /* Oculta cualquier desbordamiento si la imagen no se ajusta perfectamente */
}
/* AÑADE ESTO JUSTO DEBAJO: */
@media (max-width: 799px) {
    #hero {
        min-height: auto !important; /* Esto quita el espacio obligatorio de 50vh */
        line-height: 0; /* Elimina espacios fantasma bajo la imagen */
    }
}
/*
Bloqueo de Descarga (Nivel CSS)
Dificulta arrastrar la imagen y usar el menú contextual (clic derecho).
*/
.bloqueo-descarga {
    /* Evita que el ratón interactúe con la imagen para arrastrar y clic derecho */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Navegadores modernos */
    pointer-events: none; /* Desactiva completamente los eventos del ratón en el elemento */
}





/* Configuración necesaria para el efecto Boto Gallery */
.hero__section {
    overflow: hidden;
    padding-top: 50px;
    padding-bottom: 50px;
}

/* Todas las diapositivas que NO están en el centro */
.hero-slider .slide-item {
    transition: all 0.6s ease; /* Transición suave */
    transform: scale(0.8);     /* Las hace un 20% más pequeñas */
    opacity: 0.5;              /* Las hace un poco transparentes */
}

/* La diapositiva que queda exactamente en el CENTRO */
.hero-slider .slide-item.slick-center {
    transform: scale(1.1);     /* La agranda un 10% del original */
    opacity: 1;                /* Se ve con toda su intensidad */
    z-index: 10;               /* Asegura que esté por encima de las otras */
}

/* Asegura que el contenedor del slider no corte la imagen agrandada */
.hero-slider .slick-list {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    overflow: visible; 
}

.hero-slider .slide-item img {
    min-width: 100%;
    height: 600px; /* Ajusta la altura a tu gusto */
    object-fit: cover;
    display: block;
}

/* El texto debajo de la galería */
.hero-text-slider {
    text-align: center;
    padding-top: 40px;
}

.hero-text-slider h2 {
    font-size: 48px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px;
}

.hero-text-slider p {
    color: #888;
    letter-spacing: 2px;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .hero-slider .slide-item img {
        height: 400px;
    }
}

/* fin de la galeria




/* Esto oculta la sección y elimina TODO su espacio en móviles */
@media (max-width: 799px) {
    .seccion-solo-pc {
        display: none !important;
    }
}


/* --- LÓGICA DE VISIBILIDAD --- */

/* 1. Por defecto, ocultamos lo que es "Solo Móvil" en pantallas grandes */
.solo-movil {
    display: none !important;
}

/* 2. Cuando la pantalla es pequeña (Móvil) */
@media (max-width: 799px) {
    /* Mostramos la sección que estaba oculta */
    .solo-movil {
        display: block !important;
    }

    /* Si llegaras a tener algo que solo quieres en PC, usas esta: */
    .solo-pc {
        display: none !important;
    }
}






/* Limitamos el tamaño del cuadro de testimonio */
.testimonio-box-mini {
    max-width: 350px; /* Tamaño similar a las fotos de tu galería */
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    line-height: 0;
}

.img-testimonio {
    width: 100%;
    height: 250px; /* Altura fija para que sea consistente */
    object-fit: cover; /* Evita que la foto se estire */
}

/* Ajuste del botón para que quepa en el cuadro pequeño */
.icono-play {
    width: 60px;
    height: 60px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.seccion-testimonios {
    padding: 60px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

.testimonio-wrapper {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.video-testimonio-link {
    display: block;
    position: relative;
    line-height: 0;
}



/* Capa oscura y botón de Play */
.capa-video {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}



.icono-play i {
    color: white;
    font-size: 25px;
    margin-left: 5px; /* Centrado óptico del triángulo */
}

.capa-video p {
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
}

.video-testimonio-link:hover .capa-video {
    background: rgba(0, 0, 0, 0.5);
}








/* --- CONFIGURACIÓN GENERAL --- */
.nav-principal {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
    background: transparent; padding: 20px 0; transition: 0.4s;
}
.nav-principal.scroll-activo { background: rgba(35, 31, 32, 0.98); padding: 10px 0; }

.contenedor-nav {
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; 
    justify-content: space-between; /* Esto empuja el menú al centro y el WA a la derecha */
}

/* --- CENTRADO DEL MENÚ --- */
.lista-navegacion {
    position: absolute; /* Clave para el centrado perfecto */
    left: 50%;
    transform: translateX(-50%);
}
.lista-navegacion ul {
    display: flex; list-style: none; gap: 30px; margin: 0; padding: 0;
}
.lista-navegacion a {
    color: white; text-decoration: none; font-size: 13px; font-weight: 600; text-transform: uppercase;
}

/* --- SUBMENÚ (Blindado) --- */
.dropdown { position: relative; }
.submenu {
    /* Estado: Totalmente inexistente */
    display: none !important; 
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    background: #231f20; min-width: 180px; padding: 10px 0;
    border-top: 2px solid #99A2B2; list-style: none;
}

/* Solo aparece en Web con Hover */
@media (min-width: 851px) {
    .dropdown:hover .submenu { display: block !important; }
}

.submenu a { font-size: 11px; padding: 12px 20px; display: block; text-align: center; }

/* --- BOTÓN WHATSAPP --- */
.boton-wa-container { margin-left: auto; } /* Asegura que se quede a la derecha */
.btn-wa-nav { background: #25d366; color: white !important; padding: 8px 20px; border-radius: 50px; font-weight: bold; text-decoration: none; }

/* --- RESPONSIVE MÓVIL --- */
.menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 25px; height: 18px; cursor: pointer; z-index: 1100; }
.menu-toggle span { width: 100%; height: 2px; background: white; transition: 0.3s; }

/* Animación X */
.menu-toggle.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 850px) {
    .menu-toggle { display: flex; }
    .boton-wa-container { display: none; } /* Ocultamos WA en móvil para limpiar */

    .lista-navegacion {
        position: fixed; top: 0; left: -100%; /* Fuera de pantalla */
        width: 100%; height: 100vh; background: #231f20;
        display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
        padding-top: 100px; transform: none; transition: 0.4s;
    }
    .lista-navegacion.active { left: 0; }
    .lista-navegacion ul { flex-direction: column; align-items: center; width: 100%; }

    /* Submenú en Móvil */
    .dropdown.open .submenu { display: block !important; position: static; transform: none; background: rgba(255,255,255,0.05); }
}
















/* countdown */

/* jQuery Countdown styles 2.0.0. */

/* modified */

.is-countdown {

}

.countdown-rtl {

  direction: rtl;

}

.countdown-holding span {

  color: #888;

}

.countdown-row {

  clear: both;

  width: 100%;

  padding: 0px 2px;

  text-align: center;

}

.countdown-show1 .countdown-section {

  width: 98%;

}

.countdown-show2 .countdown-section {

  width: 48%;

}

.countdown-show3 .countdown-section {

  width: 32.5%;

}

.countdown-show4 .countdown-section {

  width: 24.5%;

}

.countdown-show5 .countdown-section {

  width: 19.5%;

}

.countdown-show6 .countdown-section {

  width: 16.25%;

}

.countdown-show7 .countdown-section {

  width: 14%;

}

.countdown-section {

  display: block;

  float: left;

  font-size: 14px;

  text-align: center;

  color:rgba(255,255,255,.6);

  text-transform:uppercase;

  letter-spacing:1px;

}

.countdown-amount {

  font-family:"Dosis";

    font-size: 72px;

  color:#fff;

}

.countdown-period {

  font-family:"Dosis";

    display: block;

  width:70px;

  margin:0 auto;

  margin-top:5px;

}

.countdown-descr {

  display: block;

  width: 100%;

}

.countdown-s1{

  display:inline-block;

}


.countdown-s1 .countdown-show4 .countdown-section {

  width: 80px;

  float:left;

  background:rgba(255,255,255,.1);

  padding:20px 0 10px 0;

  margin:5px;

}


.countdown-s1.no-bg .countdown-section{

  background:none;

}


.countdown-s1 .countdown-amount {

  width:auto;

  margin:0;

  font-size:26px;

  font-weight:bold;

}


.countdown-s1 .countdown-period {

  width:auto;

  margin:0 auto;

  font-weight:400;

  font-size:12px;

}


.countdown-s2{

  display:inline-block;

}


.countdown-s2 .countdown-show4 .countdown-section {

  width: 80px;

  float:left;

  background:rgba(255,255,255,.1);

  padding:20px 0 10px 0;

  margin:5px;

}


.countdown-s2.no-bg .countdown-section{

  background:none;

}


.countdown-s2 .countdown-amount {

  width:auto;

  margin:0;

  font-size:26px;

  font-weight:bold;

}


.countdown-s2 .countdown-period {

  width:auto;

  margin:0 auto;

  font-weight:400;

  font-size:12px;

}


.countdown-s2.no-bg .countdown-section{

  background: none;

}


.text-dark .countdown-amount,

.text-dark .countdown-period{

  color:#111111;

}


.countdown-amount{

    line-height: .75em;

}


    .countdown-section {

    font-size: 12px;

    }

    .countdown-amount {

        font-size: 36px;

    }

.countdown-s1 .countdown-show4 .countdown-section {

        width: 18vw;

    }

    

.countdown-s1.countdown-bg-color .countdown-section,
.schedule-item:hover .sc-pic 
{
    background-color:var(--primary-color-1);

}


.countdown-s1 .countdown-show4 .countdown-section{
	background:linear-gradient(to top, var(--primary-color-1), var(--secondary-color));}


.countdown-amount,

.countdown-period,

blockquote.testimonial-big .title,

#mo-menu{

font-family: 'Plus Jakarta Sans',Arial, Helvetica, sans-serif;

}


/* -------------------------------------- */
/* POSICIONAMIENTO ABSOLUTO DE ELEMENTOS  */
/* -------------------------------------- */

/* CLAVE 1: Contenedor Padre para la posición */
#hero.seccion-con-elementos {
    position: relative; /* Establece el contexto para los hijos "absolute" */
    display: block;
    min-height: 50vh; /* Asegura que la sección tenga altura */
}

/* CLAVE 2: Estilos del Countdown sobre la imagen */
#defaultCountdown {
    /* Mueve el elemento de forma ABSOLUTA dentro del #hero */
    position: absolute;
    
    /* Centrado Horizontal (empuja el elemento al 50% desde la izquierda) */
    left: 50%;
    
    /* Posición Vertical (55% desde arriba, ligeramente por debajo del centro 50%) */
    top: 55%; 
    
    /* Ajuste de centrado (mueve el elemento hacia la izquierda el 50% de su propio ancho) */
    transform: translateX(-50%); 
    
    /* Asegura que el contador siempre esté encima de la imagen (aunque ya lo estaría) */
    z-index: 100;
    
    /* Ancho máximo para evitar que se extienda demasiado en escritorios grandes */
    max-width: 90%; 
}

/* -------------------------------------- */
/* AJUSTES RESPONSIVOS DEL POSICIONAMIENTO */
/* -------------------------------------- */

@media (max-width: 600px) {
    /* En móvil, si lo quieres más cerca del centro (50%) */
    #defaultCountdown {
        top: 30%; /* Puedes poner 50% para el centro exacto, o 45% para más arriba, o 60% para más abajo */
        
        /* Mantenemos el centrado horizontal */
        transform: translateX(-50%);
    }

    /* Nota: Los ajustes de tamaño de fuente del countdown ya están en el CSS que me diste */
}

@media (max-width: 600px) {

    /* Punto clave: SOLUCIONA el desbordamiento horizontal (la "franja negra").

    Esto asegura que nada pueda forzar un ancho mayor al 100% en el cuerpo de la página.

    */

    body {

        overflow-x: hidden;

    }

    

    /* Contenedor principal del contador */

    #defaultCountdown {

        /* Se usa box-sizing para asegurar que el padding/border no afecte el ancho */

        box-sizing: border-box; 

    }


    /* Ajuste para cada una de las 4 cajas del contador */

    .countdown-s2 .countdown-show4 .countdown-section {

        /*

        REAJUSTE DEL CÁLCULO: Usamos un 23% para que el margen de 5px (10px total por caja) 

        sea más fácil de acomodar, dejando un pequeño margen de error.

        (23% * 4) + (10px * 4) caben cómodamente dentro del 100%.

        */

        width: 19% !important; 
        
        float: left;

        box-sizing: border-box; 

        /* Reducimos los márgenes a 3px para mayor seguridad en el espacio horizontal */

        margin: 3px !important; 

        /* Aseguramos que el padding interno (espacio entre borde y texto) no sea excesivo */

        padding: 8px 4px 3px 0 !important; 

    }

    

    /* Reducción del texto (para que quepa en las cajas más estrechas) */

    .countdown-s2 .countdown-amount {

        font-size: 19px !important; 

        line-height: 1.1em !important; /* Para evitar que los números se rompan verticalmente */

    }

    

    .countdown-s2 .countdown-period,

    .countdown-s2 .countdown-section {

        font-size: 4px !important; /* Reducimos las etiquetas Días, Horas, etc. */

    }

}







.seccion-contacto {
    padding: 80px 20px;
    background-color: #fff;
    font-family: 'Montserrat', sans-serif;
}

.contenedor-contacto {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; /* Permite el salto en móvil */
    gap: 50px;
}

/* Formulario */
.formulario-container { flex: 1; min-width: 300px; }
.campo { margin-bottom: 20px; }
.campo input, .campo textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    outline: none;
}
.campo textarea { height: 150px; resize: none; }
.nota-form { color: #888; font-size: 11px; display: block; margin-top: 5px; }

#btn-enviar {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

#btn-enviar:hover { background-color: #0056b3; }

/* Info lateral */
.info-contacto { flex: 0 0 350px; }
.info-contacto h2 { margin-bottom: 30px; font-size: 28px; }
.dato { display: flex; align-items: flex-start; margin-bottom: 25px; gap: 15px; }
.dato strong { display: block; color: #333; }
.dato p { margin: 0; color: #666; font-size: 14px; }

.redes-sociales { 
    display: flex; 
    gap: 15px; 
    margin-top: 30px; 
}

.redes-sociales a {
    width: 45px; 
    height: 45px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 50%; 
    color: white; 
    text-decoration: none;
    transition: 0.3s;
    font-size: 20px; /* Tamaño del icono */
}

.redes-sociales a.fb { background: #3b5998; }
.redes-sociales a.wa { background: #25d366; }

/* Efecto al pasar el mouse */
.redes-sociales a:hover {
    transform: translateY(-5px);
    filter: brightness(1.1);
}

/* RESPONSIVE MÓVIL */
@media (max-width: 850px) {
    .contenedor-contacto {
        flex-direction: column; /* Info arriba, Form abajo */
    }
    .info-contacto {
        flex: 1;
        order: 1; /* Asegura que la info vaya primero */
    }
    .formulario-container {
        order: 2;
    }
}







/* -------------------------------------- */
/* GALERÍA GRID ASIMÉTRICO (ESCRITORIO) */
/* -------------------------------------- */

#gallery-section {
   
    background-color: #fff;
}

.gallery-container {
    max-width: 1100px; /* Ancho más grande para el grid asimétrico */
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
}

.gallery-title {
     font-family: "Time New Romance"; /* CLAVE: La nueva fuente cursiva */
    text-align: center;
    color: #2A3A3A;
    margin-bottom: 40px;
    font-size: 50px;
}

/* === 1. ESTILOS DE ESCRITORIO (GRID) === */
.gallery-desktop {
    /* VISIBLE por defecto */
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-gap: 15px; 
    grid-auto-rows: 250px; /* Altura de fila base, ajústala */
}

/* === 2. ESTILOS DE MÓVIL (CARRUSEL) === */
.gallery-mobile {
    /* OCULTO por defecto */
    display: none; 
}

/* Estilo para cada celda (imagen) */
.grid-item {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    line-height: 0;
    cursor: pointer;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.grid-item:hover img {
    transform: scale(1.05); 
}

/* LAYOUT ASIMÉTRICO (Solo aplica al contenedor .gallery-desktop) */
.gallery-desktop .grid-span-2 {
    grid-column: span 2; 
}
.gallery-desktop .grid-span-2-vertical {
    grid-row: span 2; 
}






/* -------------------------------------- */
/* FOOTER */
/* -------------------------------------- */

#main-footer {
    /* Color de fondo solicitado (Gris oscuro/negro suave) */
    background-color: #231f20; 
    padding: 30px 0; /* Espacio interno superior e inferior */
    width: 100%;
}

.footer-content {
    text-align: center; /* CLAVE: Centra el contenido (el logo) */
}

.footer-logo-link {
    /* Asegura que el enlace no tenga estilos molestos (como subrayado) */
    display: inline-block;
    line-height: 0; 
}

.footer-logo {
    display: block;
    /* Tamaño del logo (ajusta este valor para hacerlo más pequeño o grande) */
    width: 220px; 
    height: auto;
    margin: 0 auto; /* Asegura el centrado si el padre fuera display: block */
    transition: opacity 0.3s;
}

.footer-logo-link:hover .footer-logo {
    opacity: 0.8; /* Efecto sutil al pasar el ratón */
}

/* -------------------------------------- */
/* RESPONSIVE (Móvil) */
/* -------------------------------------- */

@media (max-width: 600px) {
    #main-footer {
        padding: 20px 0; /* Menos padding en móvil */
    }
    .footer-logo {
        width: 150px; /* Logo un poco más pequeño en móvil */
    }
}






/* -------------------------------------- */
/* PANTALLA DE CARGA (PRELOADER) */
/* -------------------------------------- */

#preloader {
    position: fixed; /* Mantiene el preloader fijo en la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #231f20; /* Usa el color gris-azulado de tu footer/botón */
    z-index: 9999  !important; /* Asegura que esté por encima de todo lo demás */
    display: flex; /* Centra el contenido */
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease; /* Transición suave al desaparecer */
}

/* Contenido interno (Logo y Spinner) */
.loader-content {
    text-align: center;
}

/* Estilo del Logo en la Pantalla de Carga */
.preloader-logo {
    width: 120px; /* Tamaño del logo: Más grande que el del footer (80px), ajústalo a tu gusto */
    height: auto;
    margin-bottom: 20px;
    animation: pulse-logo 2s infinite ease-in-out; /* Efecto sutil para indicar actividad */
}

/* Animación de pulso para el logo */
@keyframes pulse-logo {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* -------------------------------------- */
/* OPCIONAL: SPINNER DE CARGA (Circulo giratorio) */
/* -------------------------------------- */
.loader-spinner {
    border: 4px solid rgba(255, 255, 255, 0.3); /* Color claro semi-transparente */
    border-top: 4px solid #FFFFFF; /* Borde superior blanco brillante */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

/* Definición de la animación de giro */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/* -------------------------------------- */
/* UBICACIONES Y BOTONES DE MAPAS */
/* -------------------------------------- */

#location-section {
    padding: 40px 0;
    background-color: #ffffff; 
}

.location-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 15px;
    text-align: center;
}

.location-title {
    font-family: 'Times New Roman', serif;
    color: #2A3A3A;
    margin-bottom: 30px;
    font-size: 24px;
}

/* === CONTENEDOR CLAVE: MANTIENE LADO A LADO EN CUALQUIER TAMAÑO === */
.map-buttons-wrapper {
    display: flex;
    flex-direction: row; /* Fuerza la disposición horizontal */
    justify-content: center; /* Centra las imágenes/enlaces en la sección */
    gap: 20px; /* Espacio entre las dos imágenes/botones */
    margin-top: 20px;
    
    /* Evita que se rompan a la siguiente línea en móvil */
    flex-wrap: nowrap; 
}

/* El enlace que contiene la imagen */
.map-link {
    display: block; /* Asegura que se comporta bien dentro de flex */
    line-height: 0; /* Elimina cualquier espacio extra debajo de la imagen */
    transition: opacity 0.3s;
}

/* Efecto al pasar el ratón */
.map-link:hover {
    opacity: 0.8; /* Hace que se vea ligeramente transparente al pasar el ratón */
}

/* La imagen PNG/JPG en sí */
.map-image {
    /* Define el tamaño máximo de tus imágenes/botones en PC */
    width: 250px; 
    height: auto;
    display: block;
}


/* -------------------------------------- */
/* RESPONSIVE (Ajustes para Móvil) */
/* -------------------------------------- */

@media (max-width: 480px) {
    
    .map-buttons-wrapper {
        gap: 10px; /* Reducimos el espacio entre ellas */
    }
    
    .map-image {
        /* Reduce el tamaño de las imágenes para que quepan lado