/* --- ESTILOS GLOBALES Y DE BASE --- */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #0d1a2e; /* <<--- AQUÍ ESTÁ EL FONDO AZUL OSCURO */
    color: #f0f0f0;
}

/* --- ESTILOS DE COMPONENTES REUTILIZABLES --- */
.btn-primary {
    @apply bg-orange-500 text-white font-bold py-3 px-8 rounded-full hover:bg-orange-600 transition-transform transform hover:scale-105 duration-300 shadow-lg;
}

.btn-naranja {
    /* --- Estilos principales --- */
    background-color: #f59e0b; /* Color naranja específico que pediste */
    color: white;             /* Color del texto */
    padding: 10px 24px;       /* Espaciado interno (vertical y horizontal) */
    border-radius: 9999px;    /* Bordes completamente redondeados */
    text-decoration: none;    /* Quita el subrayado del enlace */
    font-weight: bold;        /* Texto en negritas */
    
    /* --- Estilos adicionales para mejor comportamiento --- */
    border: none;             /* Sin borde */
    cursor: pointer;          /* Muestra el cursor de mano */
    text-align: center;       /* Centra el texto (por si acaso) */

    /* --- Efecto de transición suave --- */
    transition: background-color 0.3s ease;
}

/* --- Efecto al pasar el cursor por encima (hover) --- */
.btn-naranja:hover {
    background-color: #d97706; /* Un tono de naranja un poco más oscuro */
}

.ult-btn {
    margin-bottom: 3.5rem; /* Espacio inferior para separar del contenido siguiente */
    display: inline-block; /* Asegura que el botón se comporte como un bloque en línea */
}

.btn-secondary {
    @apply bg-orange-500 text-white font-bold py-3 px-8 rounded-full hover:bg-orange-600 transition-transform transform hover:scale-105 duration-300 shadow-lg;
}

/* --- NAVEGACIÓN Y HEADER --- */
header nav a {
    position: relative;
}
header nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f59e0b; /* Naranja */
    transition: width 0.3s ease-out;
}
header nav a:hover::after {
    width: 100%;
}

/* --- ANIMACIONES DE SCROLL --- */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- ESTILOS PARA LA PÁGINA DE SERVICIOS --- */
.service-card {
    display: flex;
    flex-direction: column;
    background-color: #1a2a4c;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}
.service-image-container { width: 100%; height: 250px; flex-shrink: 0; overflow: hidden; }
.service-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease-out; }
.service-card:hover .service-image { transform: scale(1.05); }
.service-text-container { padding: 2rem; }
.service-title { font-size: 2rem; font-weight: 900; color: #f59e0b; margin-bottom: 1rem; }
.service-description { font-size: 1.125rem; color: #cbd5e1; }

@media (min-width: 768px) {
    .service-card { flex-direction: row; }
    .service-image-container { width: 50%; height: auto; }
    .service-text-container { width: 50%; }
    .service-title { font-size: 2.5rem; }
}

#service-nav {
    position: sticky;
    top: 72px; /* Altura del header principal */
    z-index: 30;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
#service-nav.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- ESTILOS PARA OTRAS PÁGINAS (PROYECTOS, JUGUETERÍA) --- */
.project-card, .product-card {
    @apply bg-[#1a2a4c] rounded-lg shadow-lg overflow-hidden transition-all duration-300;
}
.project-card:hover, .product-card:hover {
    @apply transform -translate-y-2 shadow-2xl;
}
.image-wrapper { @apply overflow-hidden; }
.image-wrapper img { @apply transition-transform duration-500; }
.project-card:hover .image-wrapper img, .product-card:hover .image-wrapper img {
    @apply scale-105;
}

/* --- ESTILOS PARA FORMULARIO DE CONTACTO --- */

.form-label {
    @apply block text-slate-300 mb-2 font-semibold;
}

.form-input {
    @apply w-full bg-gray-800 bg-opacity-50 border border-slate-600 rounded-lg py-3 px-4 text-white placeholder-slate-400;
    @apply focus:outline-none focus:ring-2 focus:ring-[#f59e0b] focus:border-transparent transition-shadow duration-300;
}

.form-button {
    @apply w-full bg-[#f59e0b] text-white font-bold py-3 px-6 rounded-full cursor-pointer text-lg;
    @apply hover:bg-[#d97706] transition-colors duration-300;
}

/* --- WHATSAPP BUTTON --- */
.whatsapp-button {
    @apply fixed bottom-6 right-6 bg-orange-500 text-white p-4 rounded-full shadow-lg z-50 transition-transform transform hover:scale-110 duration-300;
}

/* --- BURGER MENU --- */
#menu-btn .fa-bars, #menu-btn .fa-times {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

#menu-btn .fa-times {
    transform: rotate(-90deg);
    opacity: 0;
    position: absolute;
}

#menu-btn.open .fa-bars {
    transform: rotate(90deg);
    opacity: 0;
}

#menu-btn.open .fa-times {
    transform: rotate(0);
    opacity: 1;
}

/* --- ACTIVE NAV LINK --- */
header nav a.active {
    color: #f59e0b; /* Naranja */
}

header nav a.active::after {
    width: 100%;
}

#mobile-menu a.active {
    @apply bg-orange-500 text-white;
}


/* --- FOOTER --- */
.main-footer {
    @apply bg-black bg-opacity-30 pt-16 pb-8 text-center text-gray-400;
}

.footer-logo {
    @apply h-16 mb-6;
}

.social-icons {
    @apply flex justify-center space-x-6 my-6;
}

.social-icons a {
    @apply text-gray-400 text-2xl transition-colors duration-300;
}

.social-icons a:hover {
    @apply text-orange-500;
}

.footer-links {
    @apply flex justify-center flex-wrap gap-x-6 gap-y-2 my-6;
}

.footer-links a {
    @apply hover:text-orange-500 transition-colors;
}

/* --- CONTACT FORM --- */

.contact-button {
    @apply inline-block text-center w-full md:w-auto;
}


/* --- ESTILO PARA EL BOTÓN NARANJA --- */
.btn-naranja {
    background-color: #f59e0b; 
    color: white;             
    padding: 10px 24px;       
    border-radius: 9999px;   
    text-decoration: none;   
    font-weight: bold;       
    display: inline-block;   
    border: none;            
    cursor: pointer;         
    text-align: center;      
    transition: background-color 0.3s ease;
}

.btn-naranja:hover {
    background-color: #d97706;
}