/* Estilos generales */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- Hero Section y Efecto Puerta de Garaje --- */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden; /* Oculta la puerta cuando se mueve hacia arriba */
    background: url('/assets/img/gdoor2.jpg') no-repeat center center/cover; /* Fondo interior del garaje */
}

.hero-content {
    z-index: 1; /* El contenido está detrás de la puerta */
}

.shadow-text {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

.garage-door-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* La puerta está al frente de todo */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Posiciona el botón en la parte inferior */
    padding-bottom: 50px;
}

#garage-door-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo el espacio */
    transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Transición suave con efecto */
}

/* Clase que activa la animación */
.door-opening {
    transform: translateY(-100%);
}

#open-door-btn {
    z-index: 11; /* El botón está sobre la imagen de la puerta */
    transition: opacity 0.5s ease;
}


/* --- Estilos de Secciones --- */
.icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
}

.placeholder-section {
    background-color: #f8f9fa; /* Un gris claro para indicar que está inactivo */
    border: 2px dashed #dee2e6;
}
/* --- Estilos de la Galería --- */
.gallery-item {
    transition: transform 0.3s ease-in-out, opacity 0.4s ease-in-out;
}

.gallery-item img {
    cursor: pointer;
    transition: transform 0.3s ease;

/* --- Estilos para unificar el tamaño de las imágenes de la galería --- */

    width: 100%; /* La imagen ocupará todo el ancho de su columna */
    height: 280px; /* ¡Altura Fija! Puedes ajustar este valor a tu gusto */
    object-fit: cover; /* Recorta la imagen para que llene el espacio sin deformarse */
    object-position: center; /* Centra la imagen antes de recortar */
}
.gallery-item:hover img {
    transform: scale(1.05);
}

/* Clase para ocultar los elementos filtrados */
.gallery-item.hide {
    transform: scale(0.8);
    opacity: 0;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#filter-buttons .btn.active {
    background-color: var(--bs-primary);
    color: white;
}

/* --- Estilos de la Sección de Testimonios --- */
.review-card {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.review-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
}

.review-stars {
    font-size: 1.25rem;
}

/* Estilos para los controles del carrusel para que sean más visibles sobre fondo claro */
#reviews .carousel-control-prev-icon,
#reviews .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 1.2rem;
    background-size: 50%;
}

/* --- Footer --- */
footer .btn-floating {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}