/* ===================================== */
/* 1. Definición de Paleta de Colores y Fuentes */
/* ===================================== */
:root {
    --color-primario: #FFC107; /* Amarillo/Naranja (Clase warning de Bootstrap) - Seguridad */
    --color-secundario: #003366; /* Azul Oscuro (Ingeniería, Profesionalismo) */
    --color-fondo: #f8f9fa; /* Gris claro */
    --fuente-principal: 'Roboto', sans-serif;
    --fuente-titulos: 'Oswald', sans-serif;
}

/* Desplazamiento suave al hacer clic en enlaces del menú */
html {
    scroll-behavior: smooth;
}

/* Aplicar fuentes a los elementos */
body {
    font-family: var(--fuente-principal);
    background-color: var(--color-fondo);
    color: #333;
}

h1, h2, h3 {
    font-family: var(--fuente-titulos);
    color: var(--color-secundario);
    font-weight: 700;
}

/* ===================================== */
/* 2. Estilo de la Sección de Bienvenida (Hero) */
/* ===================================== */
.hero-section {
    height: 85vh; 
    
    /* Asegúrate de que la imagen 'taller.jpg' esté en img/ */
    background: linear-gradient(rgba(0, 51, 102, 0.7), rgba(0, 51, 102, 0.7)), 
                url('imagenes/3.jpeg') no-repeat center center;
    background-size: cover;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-section .text-warning {
    color: var(--color-primario) !important;
}

/* ===================================== */
/* 3. Estilos de Botones y Navegación */
/* ===================================== */

/* Botón principal del Hero y del Catálogo */
.btn-primary {
    background-color: var(--color-secundario); 
    border-color: var(--color-secundario);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #004488;
    border-color: #004488;
}

/* Estilo para el botón de WhatsApp (amarillo de Bootstrap) */
.custom-btn-whatsapp {
    background-color: var(--color-primario);
    color: #333;
    font-weight: bold;
    padding: 15px 30px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.custom-btn-whatsapp:hover {
    background-color: #e6b200;
    transform: scale(1.05);
}

/* Estilo de la Barra de Navegación */
.navbar-brand {
    color: var(--color-primario) !important;
    font-size: 1.6rem;
    font-weight: 700;
}

.navbar-nav .nav-link.active {
    color: var(--color-primario) !important;
    border-bottom: 3px solid var(--color-primario);
}

/* ===================================== */
/* 4. Estilos para el Catálogo de Servicios (UNIFICADOS) */
/* ===================================== */

/* Contenedor que define la altura uniforme de 200px para imágenes y área de video */
.card .card-top-media { 
    height: 200px; 
    width: 100%;
    overflow: hidden; 
    
    /* REMOVEMOS el background-color: var(--color-secundario); de aquí */
    /* Ya no necesitamos un color de fondo sólido, la imagen lo cubrirá */
    
    display: flex; /* Para centrar el ícono de play */
    justify-content: center;
    align-items: center;

    position: relative; /* CLAVE para posicionar el overlay de play sobre la imagen */

    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
}

/* Estilo para las imágenes dentro del contenedor para asegurar que cubran el espacio */
.card .card-top-media img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.card {
    border: none;
}

/* Efecto de Hover para las Tarjetas Clickables (Video) */
.custom-hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}

.custom-hover-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--color-primario); 
}

/* Estilo para el overlay de "Play" sobre la imagen del video */
.play-overlay {
    position: absolute; /* Posiciona el overlay sobre la imagen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente oscuro para el ícono */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Indica que es clickeable */
    opacity: 1; /* Inicia visible */
    transition: opacity 0.3s ease; /* Transición suave */
}

/* Efecto al pasar el mouse sobre la tarjeta con el video */
.custom-hover-card:hover .play-overlay {
    opacity: 0.8; /* Se vuelve un poco más transparente al hacer hover */
}