/* VARIABLES DE ANIMACIÓN AVANZADA */
    :root {
      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
    }
    /* FIX LENIS CSS */
    html.lenis, html.lenis body { height: auto; width: 100vw; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
    .lenis.lenis-stopped { overflow: hidden; }
    .lenis.lenis-smooth iframe { pointer-events: none; }
    @media (pointer: fine) { html, body, a, button, input, select, textarea { cursor: none !important; } }
    html { overflow-x: clip; background-color: #0A0F24; scroll-behavior: auto !important; }
    body { overflow-x: clip; margin: 0; }
    
    /* --- PRELOADER CINEMATOGRÁFICO --- */
    #preloader { position: fixed; inset: 0; z-index: 99999; background: #0A0F24; display: flex; align-items: center; justify-content: center; transition: transform 1.2s var(--ease-in-out-circ); }
    .preloader-text { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
    .preloader-inner { transform: translateY(100%); animation: revealUp 1s var(--ease-out-expo) forwards 0.2s; }
    @keyframes revealUp { to { transform: translateY(0); } }
    
    /* --- CURSOR DE VANGUARDIA (DIFFERENCE BLEND) --- */
    .cursor-dot { pointer-events: none; position: fixed; top: 0; left: 0; z-index: 9999999; width: 6px; height: 6px; background-color: #fff; border-radius: 50%; mix-blend-mode: difference; transform: translate(-50%, -50%); transition: opacity 0.3s; }
    .cursor-ring { pointer-events: none; position: fixed; top: 0; left: 0; z-index: 9999998; will-change: transform; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 50%; transition: width 0.4s var(--ease-out-expo), height 0.4s var(--ease-out-expo), background-color 0.4s, border-color 0.4s; mix-blend-mode: difference; }
    .cursor-ring.hover-active { width: 90px; height: 90px; background: rgba(255,255,255,0.1); border-color: transparent; mix-blend-mode: difference; }
    .cursor-ring.hover-card { width: 120px; height: 120px; border-color: rgba(197, 160, 89, 0.5); mix-blend-mode: normal; backdrop-filter: blur(2px); background: radial-gradient(circle, rgba(197,160,89,0.1) 0%, transparent 70%); }
    
    /* --- RUIDO CINEMATOGRÁFICO Y SCANLINES --- */
    .noise-overlay { position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay; background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E'); animation: noiseShift 1s steps(2) infinite; }
    @keyframes noiseShift { 0% { background-position: 0 0; } 100% { background-position: 100% 100%; } }
    .scanlines { position: fixed; inset: 0; z-index: 9989; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.05)); background-size: 100% 4px; opacity: 0.5; }
    
    /* --- NAVIGATION --- */
    .glass-nav { background: rgba(3, 5, 16, 0.6); backdrop-filter: blur(24px); border-bottom: 1px solid rgba(255, 255, 255, 0.03); }
    
    /* --- BOTONES MAGNÉTICOS --- */
    .magnetic-wrap { display: inline-block; position: relative; padding: 1.5rem; margin: -1.5rem; }
    .magnetic-btn { will-change: transform; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); cursor: pointer; }
    .magnetic-wrap:hover .magnetic-btn { transition: transform 0.2s ease-out; }
    
    /* --- TARJETAS 3D PREMIUM Y FLIP --- */
    .tilt-card { perspective: 2000px; position: relative; transition: transform 0.4s var(--ease-out-expo); }
    .tilt-card:hover { transform: translateY(-10px) scale(1.02); z-index: 20; }
    .tilt-inner { will-change: transform; transform-style: preserve-3d; transition: transform 0.2s linear; height: 100%; position: relative; overflow: hidden; border-radius: 1.25rem; }
    .tilt-content { transform: translateZ(60px); position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; }
    .tilt-icon { transform: translateZ(90px); transition: transform 0.5s var(--ease-out-expo), color 0.3s; }
    .tilt-card:hover .tilt-icon { transform: translateZ(130px) scale(1.2); color: #FFF; }
    .glare-container { position: absolute; inset: 0; overflow: hidden; pointer-events: none; transform: translateZ(1px); border-radius: inherit; }
    .glare { position: absolute; width: 250%; height: 250%; top: -75%; left: -75%; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 0%, transparent 60%); }
    .tilt-card:hover .glare { opacity: 1; }
    
    /* Estructura de Flip */
    .flip-container { perspective: 2000px; cursor: pointer; }
    .flip-container .flip-inner { transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d; }
    .flip-container.flipped .flip-inner { transform: rotateY(180deg); }
    .flip-front, .flip-back { backface-visibility: hidden; width: 100%; height: 100%; }
    .flip-back { transform: rotateY(180deg); position: absolute; top: 0; left: 0; }
    .tilt-wrapper { transform-style: preserve-3d; transition: transform 0.5s ease; }
    .hero-image { will-change: transform; transform: scale(1.15); filter: saturate(1.1) contrast(1.15); }
    
    /* --- ESTILOS ARC.OS BENTO AVANZADOS --- */
    #arcos-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.8; mix-blend-mode: screen; }
    .marquee-text { animation: marquee 30s linear infinite; font-weight: 900; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.03); user-select: none; }
    @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }
    .bento-card { position: relative; background: rgba(255, 255, 255, 0.01); border-radius: 1.5rem; overflow: hidden; transform-style: preserve-3d; transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s; cursor: none; }
    .bento-card:hover { transform: translateY(-8px) scale(1.01); z-index: 10; box-shadow: 0 30px 60px -15px rgba(0,0,0,0.6), 0 0 40px rgba(197, 160, 89, 0.1); }
    .bento-card::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(197, 160, 89, 0.15), transparent 40%); transition: opacity 0.5s; pointer-events: none; }
    .bento-card::after { content: ""; position: absolute; inset: 0px; border-radius: inherit; z-index: -1; opacity: 0; padding: 1px; background: radial-gradient(500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(197, 160, 89, 0.8), rgba(255,255,255,0.1) 40%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity 0.5s; pointer-events: none; }
    .bento-card:hover::before, .bento-card:hover::after { opacity: 1; }
    .bento-content { background: rgba(3, 5, 16, 0.75); backdrop-filter: blur(30px); margin: 1px; border-radius: calc(1.5rem - 1px); height: calc(100% - 2px); padding: 3rem; position: relative; z-index: 1; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.02); transition: background 0.4s; }
    .bento-card:hover .bento-content { background: rgba(3, 5, 16, 0.6); border-color: rgba(197,160,89,0.1); }
    
    /* --- FORMULARIO --- */
    .form-group { position: relative; margin-bottom: 3rem; }
    .form-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.15); color: white; padding: 12px 0; outline: none; font-family: 'Montserrat', sans-serif; font-size: 1rem; transition: border-color 0.3s; }
    .form-label { position: absolute; left: 0; top: 12px; color: rgba(255,255,255,0.4); pointer-events: none; transition: 0.4s var(--ease-out-expo); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem; font-weight: 500; }
    .form-input:focus ~ .form-label, .form-input.has-value ~ .form-label { top: -18px; font-size: 0.65rem; color: #C5A059; letter-spacing: 0.2em; }
    .form-line { position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background: #C5A059; transition: width 0.6s var(--ease-out-expo); pointer-events: none; }
    .form-input:focus ~ .form-line { width: 100%; }
    
    .text-gold-gradient { background: linear-gradient(to right, #C5A059, #FFF, #C5A059); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: shine 6s linear infinite; }
    @keyframes shine { to { background-position: 200% center; } }
    .gold-halo { filter: drop-shadow(0 0 35px rgba(197, 160, 89, 0.5)); }
    
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #0A0F24; }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: #C5A059; }
    
    /* Estilos para tarjeta especial Ingeniería Fiscal */
    .card-02-logic { background: #0A0F24; transition: all 0.5s; }
    @media(hover:hover) and (pointer: fine) {
      .flip-container:hover .card-02-logic { background: #1A237E; box-shadow: 0 0 50px rgba(197, 160, 89, 0.2); }
    }
    
    /* MODALES */
    .modal-overlay { position: fixed; inset: 0; z-index: 999999; background: rgba(5, 10, 24, 0.9); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.4s var(--ease-out-expo); }
    .modal-overlay.active { opacity: 1; visibility: visible; }
    .modal-box { background: rgba(10, 15, 36, 1); border: 1px solid rgba(197, 160, 89, 0.3); border-radius: 1rem; padding: 3rem; width: 90%; max-width: 600px; transform: translateY(20px); transition: transform 0.4s var(--ease-out-expo); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
    .modal-overlay.active .modal-box { transform: translateY(0); }