/* --- Fuentes y Colores Base --- */
body {
    font-family: 'Inter', sans-serif; /* Fuente base de la web */
    background-color: #F8F5F2; /* Blanco cremoso */
    overflow-x: hidden; /* Evita el scroll horizontal */
}

/* Tipografía de títulos */
h1, h2, h3, h4, .font-serif {
    font-family: 'Playfair Display', serif;
}

/* --- Fondo de Vídeo Hero --- */
.hero-video-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover; /* Asegura que el vídeo cubra todo el espacio */
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
}

/* --- Botones --- */
.cta-button {
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(192, 57, 43, 0.2);
}
.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(192, 57, 43, 0.3);
}

/* --- Tarjetas de Características --- */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.video-trigger .video-overlay {
    transition: background-color 0.3s ease, opacity 0.3s ease;
    opacity: 0; /* Oculto por defecto */
    background-color: rgba(0,0,0,0.4);
}
.video-trigger:hover .video-overlay {
    opacity: 1; /* Aparece al hacer hover */
}
.video-trigger:hover .fa-play-circle {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* --- Modal de Vídeo --- */
.aspect-w-9 {
    position: relative;
    width: 100%;
    padding-bottom: 177.78%; /* 9:16 Aspect Ratio (16 / 9 * 100) */
}
.aspect-w-9 video,
.aspect-w-9 .modal-video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.5rem; /* Bordes redondeados para el vídeo */
}

/* --- Carrusel de Vídeo --- */
.carousel-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Estilos de las flechas */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    border-radius: 50%;
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    font-size: 1.5rem; /* 24px */
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.carousel-arrow:hover {
    background-color: rgba(0, 0, 0, 0.6);
}
.carousel-arrow.prev {
    left: -3rem; /* Fuera del modal por defecto */
}
.carousel-arrow.next {
    right: -3rem; /* Fuera del modal por defecto */
}

/* Puntos de paginación */
.carousel-dot {
    width: 0.75rem; /* 12px */
    height: 0.75rem; /* 12px */
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.carousel-dot.active {
    background-color: white;
}

/* --- Estilos Responsive para el Carrusel --- */
@media (max-width: 640px) {
    .carousel-arrow {
        width: 2rem; /* 32px */
        height: 2rem; /* 32px */
        font-size: 1.25rem; /* 20px */
    }
    .carousel-arrow.prev {
        left: 0.5rem; /* Dentro del modal en pantallas pequeñas */
    }
    .carousel-arrow.next {
        right: 0.5rem; /* Dentro del modal en pantallas pequeñas */
    }
}

/* --- Selector de Idioma --- */
.lang-switcher {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s ease-in-out;
}