/* 

    ARCHIVO: css/style.css

    VERSIÓN: 3.4 (Estilos para el nuevo slider de home1.php)

    FECHA: 26/08/2025

    MOTIVO: Hoja de estilos completa y unificada para todo el sitio, con estilos para el slider de home1.php.

*/



/* --- VARIABLES Y ESTILOS GENERALES --- */

:root {

    --primary-color: #005A8D;

    --secondary-color: #F2C14E;

    --text-color: #333;

    --bg-color: #f9f9f9;

    --whatsapp-color: #25D366;

    --success-color: #28a745;

    --error-color: #dc3545;

    /* Nueva variable CSS para el slider principal */

    --total-slides: 1; /* Valor por defecto, se sobrescribirá por JS */

    /* Nueva variable CSS para el slider de home1.php */

    --total-slides-home1: 1; /* Valor por defecto, se sobrescribirá por JS */

}



@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');



html {

    scroll-behavior: smooth;

}



body {

    font-family: 'Poppins', sans-serif;

    margin: 0;

    color: var(--text-color);

    background-color: var(--bg-color);

    line-height: 1.6;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



a {

    text-decoration: none;

    color: var(--primary-color);

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



/* --- HEADER Y NAVEGACIÓN --- */

header {

    background-color: #fff;

    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    padding: 10px 0;

    position: sticky;

    top: 0;

    z-index: 1000;

}



header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo img {

    height: 50px;

}



nav ul {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    gap: 25px;

}



nav a {

    font-weight: 600;

    padding: 5px 0;

    border-bottom: 2px solid transparent;

    transition: border-color 0.3s;

}



nav a:hover,

nav a.active {

    color: var(--primary-color);

    border-bottom-color: var(--secondary-color);

}



/* --- BOTONES DE IDIOMA --- */

.language-switcher {

    display: flex;

    gap: 5px;

    margin-left: 20px;

}



.lang-btn {

    background: none;

    border: 2px solid #ddd;

    border-radius: 5px;

    padding: 5px 10px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s;

}



.lang-btn:hover {

    background-color: #f0f0f0;

    border-color: var(--secondary-color);

}



.lang-btn.active {

    background-color: var(--primary-color);

    color: #fff;

    border-color: var(--primary-color);

}



/* --- SLIDER DE FOTOS (index.php) --- */

.slider-container {

    position: relative;

    width: 100%;

    height: 85vh;

    overflow: hidden;

    margin-bottom: 40px; /* Espacio debajo del slider */

    background-color: black; /* Agregado para que el fondo sea negro donde la imagen no cubra */



}



.slides {

    display: flex;

    width: calc(100% * var(--total-slides)); 

    height: 100%;

    transition: transform 0.7s ease-in-out;

}



.slide {

    width: calc(100% / var(--total-slides)); 

    height: 100%;

    /* background-size: cover; /* Mantiene el comportamiento original de 'cover' para el slider principal */



    background-size: contain; 

    background-repeat: no-repeat; /* Evita que la imagen se repita si no llena el contenedor */





    background-position: center;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: #fff;

    position: relative;

}





#slide-1 { background-image: url('../images/home1.jpg'); }

#slide-2 { background-image: url('../images/home2.jpg'); }

#slide-3 { background-image: url('../images/home3.jpg'); }

#slide-4 { background-image: url('../images/home4.jpg'); }

#slide-5 { background-image: url('../images/home5.jpg'); }

#slide-6 { background-image: url('../images/home6.jpg'); }



.slide::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0,0,0,0.4);

}



.slide-content {

    position: relative;

    z-index: 2;

    padding: 20px;

    background-color: rgba(0, 0, 0, 0.2);

    border-radius: 10px;

    transition: transform 0.3s;

}



.slide:hover .slide-content {

    transform: scale(1.05);

}



.slide-content h2 {

    font-size: 3rem;

    margin-bottom: 10px;

    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);

}



.slide-content p {

    font-size: 1.2rem;

    font-weight: 300;

}



.slider-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background-color: rgba(255,255,255,0.7);

    border: none;

    color: var(--primary-color);

    font-size: 1.5rem;

    cursor: pointer;

    padding: 10px 15px;

    border-radius: 50%;

    transition: background-color 0.3s;

    z-index: 3;

}



.slider-btn:hover {

    background-color: white;

}



.prev { left: 20px; }

.next { right: 20px; }



.dots-container {

    position: absolute;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 10px;

    z-index: 3;

}



.dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background-color: rgba(255,255,255,0.5);

    cursor: pointer;

    transition: background-color 0.3s;

}



.dot.active {

    background-color: white;

}



/* --- NUEVOS ESTILOS PARA EL SLIDER DE home1.php --- */

/* Se utiliza una clase diferente para no interferir con el slider de index.php */

.slider-container-home1 {

    position: relative;

    width: 100%;

    height: 85vh; /* Ajusta la altura según sea necesario */

    overflow: hidden;

    margin-bottom: 40px; /* Espacio debajo del slider */

    background-color: black; /* Agregado para que el fondo sea negro donde la imagen no cubra */

}



.slides-home1 {

    display: flex;

    width: calc(100% * var(--total-slides-home1)); 

    height: 100%;

    transition: transform 0.7s ease-in-out;

}



.slide-home1 {

    width: calc(100% / var(--total-slides-home1)); 

    height: 100%;

    /* MODIFICACIÓN: Cambiado de 'cover' a 'contain' para mostrar la imagen completa */

    /* background-size: contain asegura que la imagen se escala lo más grande posible sin recortarse, */

    /* manteniendo sus proporciones. El fondo del .slider-container-home1 llenará el espacio restante. */

    background-size: contain; 

    background-repeat: no-repeat; /* Evita que la imagen se repita si no llena el contenedor */

    background-position: center;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: #fff;

    position: relative;

}



/* Imágenes específicas para el slider de home1.php */

#slide-home1-1 { background-image: url('../images/off-road1-cartagena-colombia-diversion-playas-tours-excursiones-actividades-pasadia-ofertas-barato-economico-paquetes-ofertas-hotel-alojamiento.png'); }

#slide-home1-2 { background-image: url('../images/off-road2-cartagena-colombia-diversion-playas-tours-excursiones-actividades-pasadia-ofertas-barato-economico-paquetes-ofertas-hotel-alojamiento.png'); }

#slide-home1-3 { background-image: url('../images/off-road3-cartagena-colombia-diversion-playas-tours-excursiones-actividades-pasadia-ofertas-barato-economico-paquetes-ofertas-hotel-alojamiento.png'); }



/* Sombra y contenido para los slides de home1.php, similar al principal pero con clases distintas */

.slide-home1::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0,0,0,0.4);

}



.slide-content-home1 {

    position: relative;

    z-index: 2;

    padding: 20px;

    background-color: rgba(0, 0, 0, 0.2);

    border-radius: 10px;

    transition: transform 0.3s;

}



.slide-home1:hover .slide-content-home1 {

    transform: scale(1.05);

}



.slide-content-home1 h2 {

    font-size: 3rem;

    margin-bottom: 10px;

    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);

}



.slide-content-home1 p {

    font-size: 1.2rem;

    font-weight: 300;

}



/* Botones de navegación para el slider de home1.php */

.slider-btn-home1 {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background-color: rgba(255,255,255,0.7);

    border: none;

    color: var(--primary-color);

    font-size: 1.5rem;

    cursor: pointer;

    padding: 10px 15px;

    border-radius: 50%;

    transition: background-color 0.3s;

    z-index: 3;

}



.slider-btn-home1:hover {

    background-color: white;

}



.prev-home1 { left: 20px; }

.next-home1 { right: 20px; }



/* Contenedor de puntos de navegación para el slider de home1.php */

.dots-container-home1 {

    position: absolute;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 10px;

    z-index: 3;

}



.dots-container-home1 .dot-home1 {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background-color: rgba(255,255,255,0.5);

    cursor: pointer;

    transition: background-color 0.3s;

}



.dots-container-home1 .dot-home1.active {

    background-color: white;

}





/* --- CONTENIDO GENERAL Y EXPERIENCIAS --- */

.content-section {

    padding: 60px 20px;

    text-align: center;

}



.btn {

    display: inline-block;

    background-color: var(--secondary-color);

    color: var(--text-color);

    padding: 12px 30px;

    border-radius: 30px;

    font-weight: 600;

    margin-top: 20px;

    transition: transform 0.2s, box-shadow 0.2s;

}



.btn:hover {

    transform: translateY(-3px);

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

}



.tours-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 30px;

    margin-top: 40px;

    text-align: left;

}



.tour-card {

    background-color: #fff;

    border-radius: 10px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.1);

    overflow: hidden;

    transition: transform 0.3s, box-shadow 0.3s;

}



.tour-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 8px 25px rgba(0,0,0,0.15);

}



.tour-card img {

    width: 100%;

    height: 200px;

    object-fit: cover;

}



.tour-info {

    padding: 25px;

}



.tour-info h3 {

    margin-top: 0;

    color: var(--primary-color);

    font-size: 1.4rem;

}



.tour-info p {

    font-size: 0.95rem;

    color: #666;

    margin-bottom: 20px;

}



.tour-info .btn {

    display: block;

    text-align: center;

    background-color: var(--primary-color);

    color: #fff;

}



.tour-info .btn:hover {

    background-color: #004a75;

}



/* --- PÁGINA DE CONTACTO (REDISEÑADA) --- */

.contact-page-bg {

    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/bg-contacto.jpg');

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

}



.contact-page-bg .content-section h1,

.contact-page-bg .content-section .subtitle {

    color: #fff;

    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

}



.contact-wrapper {

    max-width: 700px;

    margin: 30px auto;

    background-color: rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    padding: 40px;

    border-radius: 15px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.2);

}



.form-group label {

    display: block;

    margin-bottom: 5px;

    font-weight: 600;

    color: #111;

    text-align: left;

}



.form-group input,

.form-group textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid rgba(0, 0, 0, 0.2);

    border-radius: 5px;

    font-family: 'Poppins', sans-serif;

    font-size: 1rem;

    box-sizing: border-box;

    background-color: rgba(255, 255, 255, 0.7);

    color: #000;

}



.form-group input:focus,

.form-group textarea:focus {

    outline: none;

    border-color: var(--primary-color);

    box-shadow: 0 0 8px rgba(0, 90, 141, 0.6);

}



.contact-form .btn {

    width: 100%;

    border: none;

    cursor: pointer;

    background-color: var(--primary-color);

    color: #fff;

    font-size: 1.1rem;

}



.contact-form .btn:hover {

    background-color: #004a75;

}



#form-status-legacy .error-message {

    color: var(--error-color);

    background-color: rgba(255, 220, 220, 0.9);

    border: 1px solid var(--error-color);

    padding: 10px;

    margin-top: 15px;

    border-radius: 5px;

    font-weight: 600;

}



/* --- PÁGINA DE GRACIAS --- */

.thank-you-page-bg {

    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/bg-gracias.jpg');

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

}



.thank-you-page-bg .content-section h1,

.thank-you-page-bg .content-section .subtitle,

.thank-you-page-bg .content-section p {

    color: #fff;

    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);

}



.thank-you-wrapper {

    background-color: rgba(0, 0, 0, 0.3);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    padding: 50px;

    border-radius: 15px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.2);

    max-width: 700px;

    margin: 40px auto;

    text-align: center;

}



/* --- FOOTER (REDISEÑADO) Y BOTÓN WHATSAPP --- */

footer {

    background-color: var(--text-color);

    color: #fff;

    text-align: center;

    padding: 20px 0;

}



/* 25/08/2025, 11:55 AM - Motivo: Estilos para los iconos de contacto en el footer. */

.footer-contact-icons {

    margin-bottom: 15px;

    display: flex;

    justify-content: center;

    gap: 25px;

}



.footer-contact-icons a {

    color: #ccc;

    font-size: 1.8rem;

    transition: color 0.3s, transform 0.3s;

}



.footer-contact-icons a:hover {

    color: #fff;

    transform: scale(1.1);

}



.whatsapp-float {

    position: fixed;

    width: 60px;

    height: 60px;

    bottom: 40px;

    right: 40px;

    background-color: var(--whatsapp-color);

    color: #FFF;

    border-radius: 50px;

    text-align: center;

    font-size: 30px;

    box-shadow: 2px 2px 6px rgba(0,0,0,0.3);

    z-index: 100;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: transform 0.3s, box-shadow 0.3s;

}



.whatsapp-float:hover {

    transform: scale(1.1);

    box-shadow: 4px 4px 10px rgba(0,0,0,0.4);

}



/* --- 25/08/2025, 1:00 PM - Motivo: Estilos para ocultar el campo honeypot de los humanos. --- */

.honeypot {

    position: absolute;

    left: -9999px;

    opacity: 0;

    visibility: hidden;

}

/* --- INICIO: Estilos Galería de Videos y Modal - 27/08/2025 --- */

/* Contenedor de la sección */
.adventure-video-gallery {
    padding-bottom: 50px;
}

/* Tarjeta de Video */
.video-card {
    position: relative;
    cursor: pointer;
    border-radius: 15px;
    overflow: hidden;
    background: #000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.video-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.video-thumbnail-container {
    position: relative;
    aspect-ratio: 16 / 9;
}

.video-thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8; /* Efecto cine */
    transition: opacity 0.3s ease;
}

.video-card:hover img {
    opacity: 1;
}

/* Icono de Play */
.play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 69, 0, 0.9); /* Naranja vibrante para urgencia visual */
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 2;
    transition: transform 0.3s ease;
}

.video-card:hover .play-icon-overlay {
    transform: translate(-50%, -50%) scale(1.1);
}

.video-info {
    padding: 15px;
    background: white;
    text-align: center;
}

.video-info h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #333;
}

/* ESTILOS DEL MODAL (VENTANA EMERGENTE) */
.modal-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- INICIO: Botón con Efecto Respiración y Sombra Iluminada - 27/08/2025 --- */

.btn-adventure-pulse {
    display: inline-block;
    padding: 20px 45px;
    font-size: 1.4rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    color: white;
    background: linear-gradient(45deg, #ff4500, #ff8c00); /* Naranja lava ardiente */
    border-radius: 50px;
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.5);
    transition: all 0.3s ease;
    animation: breathing 2.5s ease-in-out infinite; /* El efecto respiración */
    position: relative;
    border: none;
    cursor: pointer;
}

/* Animación de Respiración (Latido) */
@keyframes breathing {
    0% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 69, 0, 0.5);
    }
    50% {
        transform: scale(1.08); /* Crece un poco */
        box-shadow: 0 0 35px rgba(255, 69, 0, 0.8), 0 0 60px rgba(255, 140, 0, 0.4); /* Brillo intenso */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 69, 0, 0.5);
    }
}

/* Efecto al pasar el mouse (Hover) */
.btn-adventure-pulse:hover {
    animation: none; /* Se detiene para dar control al usuario */
    transform: translateY(-5px) scale(1.1);
    background: linear-gradient(45deg, #ff8c00, #ff4500);
    box-shadow: 0 15px 40px rgba(255, 69, 0, 0.9);
    filter: brightness(1.2);
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .btn-adventure-pulse {
        font-size: 1.1rem;
        padding: 15px 30px;
    }
}

/* --- FIN: Botón de Acción Especial --- */


/* --- FIN: Estilos Galería de Videos y Modal --- */