/* Velasco Abogados - Optimized Production Styles v4.4 */
h1, h2, h3, .font-serif { font-family: 'Playfair Display', serif; }

html {
    scrollbar-gutter: stable; /* Evita el salto/zoom de la página al abrir el buscador */
}

body { 
    font-family: 'Inter', sans-serif; 
    scroll-behavior: smooth; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Transiciones específicas y estabilización para eliminar el "temblor" */
#main-nav {
    transition: 
        background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
        padding 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
        box-shadow 0.6s ease, 
        backdrop-filter 0.6s ease;
    /* Estabilización total */
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    will-change: padding, background-color, backdrop-filter;
}

#nav-title, #nav-subtitle, #menu-links, #menu-btn, #logo-border {
    transition: color 0.5s ease, border-color 0.5s ease, opacity 0.5s ease;
    transform: translateZ(0); /* Mantiene el texto nítido durante el movimiento */
}

/* Coherencia Estética del Logo en estados Dark */
.logo-hover-transparent .group:hover #logo-border,
.logo-hover-opaque .group:hover #logo-border {
    border-color: white;
}

.logo-hover-transparent .group:hover #nav-title,
.logo-hover-opaque .group:hover #nav-title {
    color: #fb923c; /* orange-400 */
}

.logo-hover-transparent .group:hover #nav-subtitle,
.logo-hover-opaque .group:hover #nav-subtitle {
    color: white;
}

/* Hero Section */
.hero-bg { 
    background-color: #0f172a; /* Fallback: Slate-900 para que el texto blanco siempre se vea */
    background-size: cover;
    background-position: center;
}

/* Page Specific Heros - Architectural & Institutional Focus */
.hero-index {
    background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.4)), url('https://images.unsplash.com/photo-1505664194779-8beaceb93744?auto=format&fit=crop&q=80');
}

.hero-equipo {
    background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.4)), url('https://images.unsplash.com/photo-1521587760476-6c12a4b040da?auto=format&fit=crop&q=80');
}

.hero-servicios {
    background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.4)), url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&q=80');
}

.hero-trayectoria {
    background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.4)), url('https://images.unsplash.com/photo-1589994160839-163cd2b5fcff?auto=format&fit=crop&q=80');
}

.hero-contacto {
    background-image: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.5)), url('https://images.unsplash.com/photo-1528747045269-390fe33c19f2?auto=format&fit=crop&q=80');
}

/* Scrollbar personalizado para los resultados de búsqueda */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #ea580c; /* orange-600 */
    border-radius: 10px;
}

/* Animaciones para el buscador premium */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-result {
    animation: fadeInUp 0.4s ease forwards;
}

/* Prevenir el parpadeo de idioma (FOUC) */
[data-i18n] {
    opacity: 0 !important;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s ease-out;
    will-change: opacity;
    visibility: hidden !important;
}

/* Clase que se activa una vez el idioma está aplicado */
.lang-ready [data-i18n] {
    opacity: 1 !important; 
    visibility: visible !important;
}

/* Resaltado temporal al navegar desde el buscador */
@keyframes highlightPulse {
    0% {
        background-color: transparent;
    }
    30% {
        background-color: rgba(234, 88, 12, 0.1);
    }
    70% {
        background-color: rgba(234, 88, 12, 0.1);
    }
    100% {
        background-color: transparent;
    }
}

.search-highlight {
    animation: highlightPulse 3.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    border-radius: 4px;
    will-change: background-color;
    z-index: 10;
}

/* Offset para que el navbar no tape el contenido al navegar */
[id], [data-i18n] {
    scroll-margin-top: 120px;
}

/* Animaciones refinadas para el Overlay del Buscador (Efecto Cristal v3.4) */
#search-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s, backdrop-filter 0.8s ease;
    backdrop-filter: blur(0px);
    will-change: opacity, backdrop-filter;
    /* Un ligero tinte para dar cuerpo al cristal */
    background-color: rgba(15, 23, 42, 0); 
}

#search-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    backdrop-filter: blur(40px) saturate(180%) brightness(95%);
    background-color: rgba(15, 23, 42, 0.75); 
}

#search-overlay .search-container {
    transform: translate3d(0, 10px, 0); /* Desplazamiento más sutil y estable */
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
    opacity: 0;
}

#search-overlay.active .search-container {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

/* Fallback de seguridad: Si JS falla o tarda demasiado, mostrar contenido */
@media (prefers-reduced-motion: no-preference) {
    /* Si en 2.5s no ha cargado el JS, forzamos visibilidad para no perder al cliente */
    body:not(.lang-ready) [data-i18n] {
        animation: fadeInFallback 0.5s forwards;
        animation-delay: 2s; 
    }
}
@keyframes fadeInFallback { to { opacity: 1; } }