/* Estilos específicos para la página de detalle */
.service-detail {
    overflow-x: hidden;
}

/* Hero section */
.hero-image-container {
    position: relative;
    height: 50vh;
    overflow: hidden;
}

.hero-image-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
}

/* Animaciones adicionales */
.service-detail .animate-fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.5s ease-out forwards;
}

.service-detail .delay-100 {
    animation-delay: 100ms;
}

.service-detail .delay-200 {
    animation-delay: 200ms;
}

.service-detail .delay-300 {
    animation-delay: 300ms;
}

/* Efectos hover mejorados */
.service-detail .hover-effect {
    transition: all 0.3s ease;
}

.service-detail .hover-effect:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Estilos del formulario */
.service-detail input:focus,
.service-detail textarea:focus {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}

/* Responsive ajustes */
@media (max-width: 768px) {
    .service-detail .hero-image-container {
        height: 40vh;
    }

    .service-detail .grid {
        grid-template-columns: 1fr;
    }
}