:root {
    --primary-color: #ffc8c6;

    /* MODO OSCURO (Por defecto y Principal) */
    --bg-color: #1a1617;
    --surface-color: #262122;
    --text-main: #ffffff;
    --text-muted: #cbd5e1;
    /* Color slate-300 */
    --text-darker: #94a3b8;
    /* Color slate-400 */
    --border-glass: rgba(255, 255, 255, 0.05);
    --bg-glass: rgba(255, 255, 255, 0.08);
    --bg-glass-header: rgba(0, 0, 0, 0.2);
}

/* MODO CLARO (Se activa solo si el HTML tiene la clase .light) */
html.light {
    --bg-color: #f8fafc;
    --surface-color: #ffffff;
    --text-main: #0f172a;
    --text-muted: #475569;
    --text-darker: #64748b;
    --border-glass: rgba(0, 0, 0, 0.1);
    --bg-glass: rgba(0, 0, 0, 0.05);
    --bg-glass-header: rgba(255, 255, 255, 0.7);
}

/* 🟢 Bloqueo Agresivo de Scroll Horizontal para Móviles */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overscroll-behavior-x: none;
    /* 👈 Este es el secreto para matar el rebote lateral en celulares */
}

body {
    font-family: 'Manrope', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    transition: background-color 0.4s ease, color 0.4s ease;
}

.font-brand {
    font-family: 'Playfair Display', serif;
}

/* --- EFECTO VIDRIO (GLASSMORPHISM) Dinámico --- */
.glass-header {
    background: var(--bg-glass-header);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-glass);
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.glass-button {
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* --- ANIMACIONES DE PORTADA --- */
@keyframes cover-drone {

    0%,
    100% {
        transform: scale(1.1) rotate(0deg);
    }

    50% {
        transform: scale(1.2) rotate(1.5deg);
    }
}

.animate-cover-drone {
    animation: cover-drone 25s ease-in-out infinite;
}

@keyframes cover-pan {

    0%,
    100% {
        object-position: 0% 50%;
        transform: scale(1.1);
    }

    50% {
        object-position: 100% 50%;
        transform: scale(1.1);
    }
}

.animate-cover-pan {
    animation: cover-pan 45s ease-in-out infinite;
}

@keyframes cover-breathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

.animate-cover-breathe {
    animation: cover-breathe 10s ease-in-out infinite;
}

.hero-slide {
    position: absolute;
    inset: 0;
    transition: opacity 1000ms ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

.social-btn {
    /* Agregamos text-text-main para que el color sea dinámico según el modo */
    @apply w-12 h-12 flex items-center justify-center rounded-full glass-button hover:bg-primary/20 hover:text-primary transition-all text-xl text-text-main;
}

/* 🟢 Estilos Menú Móvil */
#mobile-menu.active {
    transform: translateY(0);
}

.menu-link {
    @apply relative overflow-hidden flex flex-col opacity-0 translate-y-4 transition-all duration-500;
}

/* Cuando el menú está activo, los links suben y aparecen */
#mobile-menu.active .menu-link {
    @apply opacity-100 translate-y-0;
}

/* Delay para que salgan uno por uno (Efecto Escalonado) */
#mobile-menu.active .menu-link:nth-child(1) {
    transition-delay: 200ms;
}

#mobile-menu.active .menu-link:nth-child(2) {
    transition-delay: 300ms;
}

#mobile-menu.active .menu-link:nth-child(3) {
    transition-delay: 400ms;
}

#mobile-menu.active .menu-link:nth-child(4) {
    transition-delay: 500ms;
}

body.menu-open {
    overflow: hidden;
}


/* --- FIX GLOBAL PARA BOTONES DE SERVICIOS --- */
#servicios button {
    transition: all 0.3s ease !important;
}

/* Forzamos que el texto sea negro al pasar el mouse para que el precio se vea claro */
#servicios button:hover {
    background-color: var(--primary-color) !important;
    color: #000000 !important;
    border-color: transparent !important;
}

/* Efecto al presionar */
#servicios button:active {
    transform: scale(0.95);
}

/* --- FIX PARA MENÚ MÓVIL EN MODO CLARO --- */
.menu-link span:last-child {
    color: var(--text-main) !important;
    transition: color 0.3s ease;
}

/* Color dorado cuando pasas el mouse en el menú */
.menu-link:hover span:last-child {
    color: var(--primary-color) !important;
}

/* Asegurar que los iconos del header sigan el tema */
#theme-toggle i,
#menu-open-btn i {
    color: var(--text-main) !important;
}

/* --- FIX ICONOS SOCIALES MENU (MODO CLARO/OSCURO) --- */
#mobile-menu .fa-brands {
    /* Cambiamos a var(--text-main) para que tengan la misma intensidad que en la portada */
    color: var(--text-main) !important;
    transition: color 0.3s ease;
}

/* Color de marca al pasar el mouse */
#mobile-menu a:hover .fa-brands {
    color: var(--primary-color) !important;
}

/* El texto "Síguenos" también debe adaptarse si no es primary */
#mobile-menu p {
    color: var(--primary-color);
    opacity: 0.8;
}

/* Bloqueo total para el loader */
body.loading {
    overflow: hidden;
    height: 100vh;
}

#intro-loader.fade-away {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}


/* --- AJUSTE DE LOGOS POR SECCIÓN --- */

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Redondeamos solo un poquito las esquinas (8px es más sutil que 12px) */
    border-radius: 15px;
    transition: transform 0.5s ease;
}

/* 💎 El del loader se queda como está (porque te gusta así) */
#loader-logo .logo-img {
    transform: scale(1.1);
}

/* 🤏 Achicamos solo los logos del Header y Footer */
header .logo-img,
footer .logo-img {
    /* Bajamos el scale a 0.8 para que se vean más pequeños y elegantes */
    transform: scale(0.8);
}

/* Efecto al pasar el mouse solo para los pequeños */
header .logo-img:hover,
footer .logo-img:hover {
    transform: scale(0.9);
}