@font-face {
    font-family: 'BrandFont';
    src: url('../font/delgado.woff2') format('woff2');
    font-weight: 300; /* Delgado */
    font-style: normal;
}

@font-face {
    font-family: 'BrandFont';
    src: url('../font/semi.woff2') format('woff2');
    font-weight: 600; /* Semi-Grueso */
    font-style: normal;
}

@font-face {
    font-family: 'BrandFont';
    src: url('../font/8f6889041e396ce4d96e.woff2') format('woff2');
    font-weight: 700; /* Grueso/Bold */
    font-style: normal;
}

html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopping { scroll-behavior: auto !important; }

body {
    font-family: 'BrandFont', sans-serif;
    font-weight: 400; /* Default to regular */
    background-color: #F3F4F6;
    color: #111827;
}

h1, h2, h3, h4, h5, h6, .font-bold, .font-extrabold, .font-semibold {
    font-weight: 700 !important; /* Grueso/Bold para todos los títulos */
    text-transform: uppercase;
}

#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #111827; z-index: 100; display: flex;
    justify-content: center; align-items: center; color: white;
}
.preloader-text {
    display: flex; overflow: hidden; font-size: 2rem; font-weight: 800;
}
.preloader-text .char { transform: translateY(100%); }

#navbar { transform: translateY(0); opacity: 1; }

.hero-line { display: block; overflow: hidden; }
.hero-line > span { 
    display: block;
    transform: translateY(110%); 
    transition: filter 0.4s ease-out, opacity 0.4s ease-out;
}

.service-item { border-top: 1px solid #D1D5DB; }
.process-section { overflow: hidden; }
.process-track { display: flex; width: 400%; }
.process-slide { width: 100vw; height: 100vh; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 5vw; }
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-content { display: inline-block; animation: marquee 30s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }

/* Contact Form Overhaul */
.contact-input {
    background-color: #F9FAFB;
    border: 2px solid #E5E7EB;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.contact-input:focus {
    outline: none;
    border-color: #4F46E5;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.2);
}
.contact-input::placeholder {
    color: #9CA3AF;
}
/* Validation States */
.contact-input.invalid {
    border-color: #EF4444;
}
.contact-input.invalid:focus {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}
.contact-input.valid {
    border-color: #10B981;
}
.contact-input.valid:focus {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

/* Loading state for submit button */
.submit-loading .btn-text {
    opacity: 0;
}
.submit-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Tech Logos Styles */
.tech-logo, .store-logo {
    opacity: 0.8;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.tech-logo:hover, .store-logo:hover {
    opacity: 1;
    transform: translateY(-8px) scale(1.1);
}

.store-logo {
    opacity: 0.9;
}

/* Media Queries Responsivas Mejoradas */

/* Móviles pequeños (320px - 480px) */
@media (max-width: 480px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Ajustar tipografía para móviles muy pequeños */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
    }
    
    /* Botones más pequeños en móviles pequeños */
    .btn-mobile-small {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }
}

/* Tablets pequeñas (481px - 640px) */
@media (min-width: 481px) and (max-width: 640px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    /* Mejorar espaciado en tablets pequeñas */
    .section-padding {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* Tablets (641px - 768px) */
@media (min-width: 641px) and (max-width: 768px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    /* Transición suave entre móvil y desktop */
    .hero-title {
        font-size: 3rem;
    }
}

/* Desktop pequeño (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 1024px;
        margin: 0 auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Desktop grande (1025px+) */
@media (min-width: 1025px) {
    .container {
        max-width: 1280px;
        margin: 0 auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Mejoras específicas para dispositivos móviles */
@media (max-width: 768px) {
    /* Mejorar la experiencia táctil general */
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        -webkit-touch-callout: none;
    }
    
    /* Nuevo botón de navegación móvil - Completamente limpio */
    #nav-toggle-btn {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        max-width: 56px !important;
        max-height: 56px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        box-sizing: border-box !important;
        
        /* Mejorar feedback táctil */
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
        touch-action: manipulation;
        
        /* Prevenir selección de texto */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        
        /* Asegurar que no haya duplicaciones */
        position: relative;
        overflow: visible;
        
        /* Mejorar rendimiento */
        will-change: background-color;
    }
    
    /* Centrado perfecto - Solo visible en móvil */
    @media (max-width: 767px) {
        #nav-toggle-btn {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
    }
    
    /* Estados del botón */
    #nav-toggle-btn:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }
    
    #nav-toggle-btn:active {
        background-color: rgba(0, 0, 0, 0.15) !important;
    }
    
    #nav-toggle-btn:focus {
        outline: 2px solid rgba(0, 0, 0, 0.3);
        outline-offset: 2px;
    }
    
    /* Icono del botón - Sin duplicaciones */
    #nav-toggle-btn .nav-toggle-icon {
        pointer-events: none !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        flex-shrink: 0 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        transition: none !important;
        /* Asegurar que solo hay un SVG */
        position: relative;
        z-index: 1;
    }
    
    /* Eliminar cualquier pseudo-elemento que pueda duplicar */
    #nav-toggle-btn::before,
    #nav-toggle-btn::after {
        display: none !important;
        content: none !important;
    }
    
    #nav-toggle-btn .nav-toggle-icon::before,
    #nav-toggle-btn .nav-toggle-icon::after {
        display: none !important;
        content: none !important;
    }
    
    /* Optimización iOS */
    @supports (-webkit-touch-callout: none) {
        #nav-toggle-btn {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
            -webkit-touch-callout: none;
        }
    }
}

/* Ocultar cualquier botón antiguo mobile-menu-btn si existe */
#mobile-menu-btn {
    display: none !important;
}

/* Ocultar botón y menú móvil en desktop (md breakpoint = 768px) */
@media (min-width: 768px) {
    #nav-toggle-btn {
        display: none !important;
    }
    
    #mobile-menu-btn {
        display: none !important;
    }
    
    #mobile-menu {
        display: none !important;
    }
}

/* Mejoras para tarjetas de filosofía - Prevenir desbordamiento de texto */
@media (max-width: 640px) {
    /* Asegurar que las tarjetas manejen correctamente el texto largo */
    .grid.grid-cols-1 > div,
    .grid.sm\\:grid-cols-2 > div {
        min-width: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    .grid.grid-cols-1 > div h3,
    .grid.sm\\:grid-cols-2 > div h3 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
        -moz-hyphens: auto !important;
        word-break: break-word !important;
        overflow: visible !important;
        white-space: normal !important;
        line-height: 1.4 !important;
    }
}

/* Mobile Menu Responsive Improvements */
@media (max-width: 768px) {
    #mobile-menu {
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    #mobile-menu a {
        min-height: 48px; /* Mejora la accesibilidad táctil */
        display: flex;
        align-items: center;
        /* Mejorar navegación táctil */
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        touch-action: manipulation;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Estados táctiles para enlaces del menú móvil */
    #mobile-menu a:active,
    #mobile-menu a.active {
        background-color: rgba(0, 0, 0, 0.1) !important;
        transform: scale(0.98);
        transition: all 0.1s ease-out;
    }
    
    /* Mejorar feedback visual en dispositivos táctiles */
    @media (hover: none) and (pointer: coarse) {
        #mobile-menu a:active,
        #mobile-menu a.active {
            background-color: rgba(0, 0, 0, 0.15) !important;
            transform: scale(0.95);
        }
    }
    
}

/* Mejoras adicionales para el menú móvil */
#mobile-menu {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

#mobile-menu a {
    position: relative;
    overflow: hidden;
}

#mobile-menu a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

#mobile-menu a:hover::before {
    left: 100%;
}