/* === CONFIGURACIÓN GENERAL Y DE FONDO === */

body {
    background-color: #212529;
    font-family: 'Lora', bold;
}

#page-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-size: cover;
    background-position: center;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}

#page-background::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

#page-background.visible {
    opacity: 1;
}


/* === HEADER Y NAVEGACIÓN === */

.navbar.bg-dark {
    background-color: #000 !important;
}

.navbar-brand {
    font-size: 2.4rem;
    font-weight: 400;
}

.navbar-subtitle {
    font-size: 0.75em;
    font-weight: 500;
    text-transform: lowercase;
    vertical-align: middle;
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, color 0.5s ease-in-out;
}


/* === ESTILOS GLOBALES PARA TÍTULOS === */

h1, h2, h3, h4, h5, h6, .card-title {
    font-weight: 400;
}


/* === PÁGINA PRINCIPAL (#home-view) === */

#home-view {
    padding-top: 1rem; /* MODIFICADO: Reducido de 2rem para quitar espacio superior */
    padding-bottom: 4rem;
}

.card-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

/* === ESTILOS PARA LAS TARJETAS PRINCIPALES CON FONDO === */
.home-card-impact {
    border-radius: 0.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #1c1e22;
    min-height: 180px;
    max-width: 400px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.home-card-impact .card-img-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: brightness(0.5) saturate(1.1);
    transition: transform 0.3s ease, filter 0.3s ease;
}

.home-card-impact:hover .card-img-top {
    transform: scale(1.05);
    filter: brightness(0.6);
}

.home-card-impact:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.home-card-impact .card-body {
    position: relative;
    z-index: 2;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #f8f9fa;
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
}

.home-card-impact .card-title {
    font-size: 2.25rem;
    color: #f8f9fa;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

.card-title-suffix {
    font-size: 0.7em;
    font-weight: 700;
    vertical-align: text-bottom;
    text-transform: lowercase;
}

#link-lux .card-title-suffix {
    color: #ffc107;
}
#link-lux:hover .home-card-impact {
    border-color: rgba(255, 193, 7, 0.8);
}

#link-omnia .card-title-suffix {
    color: #fd7e14;
}
#link-omnia:hover .home-card-impact {
    border-color: rgba(253, 126, 20, 0.8);
}

#link-cursos:hover .home-card-impact,
#link-contacto:hover .home-card-impact {
    border-color: rgba(173, 181, 189, 0.8);
}

.home-card-icon {
    font-size: 2rem;
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}


/* === FOOTER === */

.home-footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}
.home-footer a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s;
}
.home-footer a:hover {
    color: #ffc107;
}
.footer-social-links {
    margin: 1rem 0;
}
.footer-social-links a {
    font-size: 1.5rem;
    margin: 0 0.75rem;
}
.copyright {
    font-size: 0.8rem;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.4);
}

/* === ESTILOS PARA SECCIONES INTERNAS (OMNIA, LUX, ETC.) === */

.service-card {
    background-color: rgba(52, 58, 64, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f8f9fa;
    transition: background-color 0.3s;
}
.service-card:hover {
    background-color: rgba(52, 58, 64, 0.9);
}
.service-card .card-title {
    color: #ffc107;
}
.tab-content {
    background-color: transparent;
    color: #f8f9fa;
}
.tab-pane {
    padding: 2rem 1rem;
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}
.tab-pane a {
    color: #ffc107;
}


/* === ESTILOS PARA TARJETAS DE CATEGORÍAS (SECCIÓN LUX) === */

.category-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}
.category-card {
    background-color: rgba(33, 37, 41, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}
.category-link:hover .category-card {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 193, 7, 0.8);
}
.category-card .category-title {
    color: #ffc107;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
.category-card .category-image-container {
    height: 250px;
    overflow: hidden;
}
.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.25rem;
}


/* === FORMULARIO DE CONTACTO === */

#tab-contacto .form-label {
    color: #f8f9fa;
}
#tab-contacto .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}
#tab-contacto .form-control:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #ffc107;
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
    color: white;
}
#tab-contacto .form-control::placeholder {
    color: #ccc;
    opacity: 1; 
}
#tab-contacto a.text-warning:hover {
    color: #e0a800 !important;
}


/* === ÍCONO FLOTANTE DE WHATSAPP === */

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    z-index: 100;
}
.whatsapp-float img {
    width: 100%;
}

/* === ESTILOS DE ALTO IMPACTO PARA SECCIÓN OMNIA (IMAGEN DE FONDO EN TARJETAS) === */

.omnia-card-impact {
    min-height: 60vh;
    border-radius: 0.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; 
    flex-direction: column; 
    position: relative; 
    background: #1c1e22; 
}

.omnia-card-impact .card-img-top {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 1; 
    filter: brightness(0.6) saturate(1.2); 
    transition: transform 0.3s ease;
}

.omnia-card-impact:hover .card-img-top {
    transform: scale(1.05); 
}

.omnia-card-impact .card-body {
    position: relative; 
    z-index: 2; 
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    text-align: center;
    color: #f8f9fa;
    background: rgba(0, 0, 0, 0.4); 
    height: 100%;
}

.omnia-card-impact .card-title {
    font-size: 1.9rem; /* Un poco más grande para más impacto */
    color: #fd7e14; /* MODIFICADO: Color naranja */
    /* MODIFICADO: Sombra de texto para crear un borde negro nítido y una sombra suave */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 0.75rem;
}

.omnia-card-impact .card-text {
    font-size: 1.1rem;
    /* Se añade una sombra más sutil también al texto para consistencia */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    margin-bottom: 1.5rem;
}


.omnia-card-impact:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
/* === AJUSTE DE COLOR PARA SECCIÓN OMNIA === */

#tab-omnia .btn-outline-warning {
    border-color: #fd7e14; /* Naranja Omnia */
    color: #fd7e14;
}

#tab-omnia .btn-outline-warning:hover,
#tab-omnia .btn-outline-warning:active,
#tab-omnia .btn-outline-warning:focus {
    background-color: #fd7e14;
    border-color: #fd7e14;
    color: #212529; /* Color de texto oscuro para buen contraste */
    box-shadow: none; /* Opcional: quita el resplandor de foco de Bootstrap */
}

/* === AJUSTES DE COLOR PARA SECCIONES INTERNAS DE OMNIA === */
.omnia-section-content .text-warning,
.omnia-section-content .service-card .card-title {
    color: #fd7e14 !important; /* Naranja Omnia */
}

.omnia-section-content .btn-outline-warning {
    border-color: #fd7e14;
    color: #fd7e14;
}

.omnia-section-content .btn-outline-warning:hover,
.omnia-section-content .btn-outline-warning:active,
.omnia-section-content .btn-outline-warning:focus {
    background-color: #fd7e14;
    border-color: #fd7e14;
    color: #212529; /* Color de texto oscuro para buen contraste */
    box-shadow: none;
}
/* === ESTILOS PARA GALERÍA HORIZONTAL (NUESTROS DISEÑOS) === */

.scroll-container {
    overflow-x: auto; /* Permite el scroll horizontal */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    scrollbar-width: thin; /* Para Firefox */
    scrollbar-color: #fd7e14 #343a40; /* Color del scroll (naranja sobre gris oscuro) */
}

/* Estilos para la barra de scroll en navegadores Webkit (Chrome, Safari) */
.scroll-container::-webkit-scrollbar {
    height: 8px; /* Altura de la barra */
}

.scroll-container::-webkit-scrollbar-track {
    background: rgba(33, 37, 41, 0.75); /* Fondo de la pista */
    border-radius: 4px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background-color: #fd7e14; /* Color de la barra (naranja) */
    border-radius: 4px;
    border: 2px solid rgba(33, 37, 41, 0.75); /* Crea un borde alrededor de la barra */
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: #e0a800; /* Color al pasar el mouse */
}

/* Define el tamaño de cada item en la galería */
.scroll-item {
    flex: 0 0 auto; /* Evita que los items se encojan */
    width: 280px; /* Ancho fijo para cada imagen */
    max-width: 75vw; /* En pantallas muy pequeñas, limita el ancho */
    position: relative;
    overflow: hidden; /* Oculta cualquier cosa que se salga del borde redondeado */
}

.scroll-item img {
    width: 100%;
    height: 280px;
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
    transition: transform 0.2s ease-in-out;
}

.scroll-item img:hover {
    transform: scale(1.05); /* Efecto de zoom sutil al pasar el mouse */
}

/* === ESTILOS PARA TEXTO SOBRE IMAGEN EN GALERÍA === */

/* Contenedor del texto que va sobre la imagen */
.image-overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); /* Gradiente oscuro para legibilidad */
    color: white;
    text-align: center;
    padding: 20px 10px 10px 10px; /* Más espacio arriba para el gradiente */
    
    /* Efecto de transición */
    opacity: 0; /* Por defecto está oculto */
    transform: translateY(10px); /* Ligeramente desplazado hacia abajo */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Párrafo dentro del contenedor */
.image-overlay-text p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* Cuando pasas el mouse sobre la imagen, el texto aparece */
.scroll-item:hover .image-overlay-text {
    opacity: 1; /* Se hace visible */
    transform: translateY(0); /* Vuelve a su posición original */
}
/* === AÑADIDO: ESTILOS ESPECÍFICOS PARA MÓVILES === */
@media (max-width: 576px) {
    #home-view {
        padding-top: 0.5rem; /* Aún menos espacio arriba en móviles */
    }

    .home-card-impact {
        min-height: 160px; /* Tarjetas más bajas en móviles */
    }

    .home-card-impact .card-body {
        padding: 1rem; /* Menos espacio interno */
    }

    .home-card-impact .card-title {
        font-size: 1.8rem; /* Título de tarjeta más pequeño */
    }

    .home-card-impact .card-text {
        font-size: 0.9rem; /* Texto de tarjeta más pequeño */
    }

    .home-card-icon {
        font-size: 1.5rem; /* Ícono más pequeño */
        margin-top: 0.5rem;
    }
}
/* === ESTILOS PARA BOTONES DE CURSOS === */

/* Botón Naranja (Omnia) */
.btn-outline-omnia {
    border-color: #fd7e14;
    color: #fd7e14;
}
.btn-outline-omnia:hover {
    background-color: #fd7e14;
    border-color: #fd7e14;
    color: #212529;
}

/* Botón Amarillo (Lux) */
.btn-outline-lux {
    border-color: #ffc107;
    color: #ffc107;
}
.btn-outline-lux:hover {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}