/* --- VARIABLES Y RESET --- */
:root {
    --bg-dark: #0f1013;
    --bg-card: rgba(255, 255, 255, 0.02);
    --bg-footer: #050506;
    --cobre-premium: #d48b44;
    --cobre-oscuro: #8b5624;
    --texto-claro: #F2F2F2;
    --texto-mutado: #8a8d96;
}

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }

body { background-color: var(--bg-dark); color: var(--texto-claro); font-family: 'Satoshi', sans-serif; overflow-x: hidden; }

/* Ruido analógico */
body::before { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: 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.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E'); pointer-events: none; z-index: 9999; }
.text-cobre { color: var(--cobre-premium); text-shadow: 0 0 20px rgba(212, 139, 68, 0.3); }

/* --- CURSOR SÓNICO OPTIMIZADO (Cero Lag) --- */
#cursor-punto, #cursor-sonico {
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10000;
    will-change: transform; /* Le decimos a la gráfica que se prepare */
}

#cursor-punto {
    width: 6px; height: 6px; background-color: var(--cobre-premium); border-radius: 50%;
    margin: -3px 0 0 -3px; /* Centramos con margen en lugar de transform */
}

#cursor-sonico {
    width: 40px; height: 40px; border: 1px solid rgba(212, 139, 68, 0.5); border-radius: 50%;
    margin: -20px 0 0 -20px; 
    transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, background-color 0.3s ease;
}

.cursor-hover #cursor-sonico {
    width: 60px; height: 60px; margin: -30px 0 0 -30px;
    background-color: rgba(212, 139, 68, 0.1); backdrop-filter: blur(2px);
}

/* --- PRELOADER CUÁNTICO --- */
#preloader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--bg-dark); z-index: 99999; display: flex; justify-content: center; align-items: center; transition: opacity 0.8s ease, visibility 0.8s; }
.loader-contenido { width: 300px; }
.cyber-texto { font-family: 'Clash Display', sans-serif; font-size: 0.9rem; letter-spacing: 4px; color: var(--cobre-premium); display: block; margin-bottom: 1rem; text-align: center; }
.barra-carga { width: 100%; height: 2px; background: rgba(255,255,255,0.1); position: relative; overflow: hidden; }
.progreso-cobre { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: var(--cobre-premium); box-shadow: 0 0 10px var(--cobre-premium); animation: cargar 2s cubic-bezier(0.77, 0, 0.175, 1) forwards; }
@keyframes cargar { 0% { width: 0; } 50% { width: 60%; } 100% { width: 100%; } }

/* --- HEADER Y MENÚ --- */
.header-exotico { position: fixed; top: 0; left: 0; width: 100%; padding: 2rem 5%; display: flex; justify-content: space-between; align-items: center; z-index: 1000; }
.logo { font-family: 'Clash Display', sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: 2px; }
.menu-toggle { width: 40px; height: 20px; display: flex; flex-direction: column; justify-content: space-between; z-index: 1001; }
.linea { display: block; width: 100%; height: 2px; background-color: var(--texto-claro); transition: all 0.4s ease; }
.menu-toggle.activo .linea:nth-child(1) { transform: translateY(9px) rotate(45deg); background-color: var(--cobre-premium); }
.menu-toggle.activo .linea:nth-child(2) { transform: translateY(-9px) rotate(-45deg); background-color: var(--cobre-premium); }

.menu-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(15, 16, 19, 0.95); backdrop-filter: blur(20px); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 999; opacity: 0; transform: scale(1.05); transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); pointer-events: none; }
.menu-overlay.abierto { opacity: 1; transform: scale(1); pointer-events: all; }
.menu-gigante ul { list-style: none; text-align: center; }
.menu-gigante li { margin: 1.5rem 0; overflow: hidden; }
.menu-gigante a { font-family: 'Clash Display', sans-serif; font-size: clamp(3rem, 8vw, 6rem); text-transform: uppercase; text-decoration: none; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1); position: relative; display: inline-block; transition: all 0.4s ease; }
.menu-gigante a::before { content: attr(data-text); position: absolute; left: 0; top: 0; width: 0; color: var(--cobre-premium); -webkit-text-stroke: 0px; overflow: hidden; transition: width 0.5s cubic-bezier(0.77, 0, 0.175, 1); white-space: nowrap; }
.menu-gigante a:hover::before { width: 100%; }

/* --- HERO BENTO BOX --- */
.bento-hero { min-height: 100vh; padding: 8rem 5% 2rem; display: flex; align-items: center; }
.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(250px, auto)); gap: 1rem; width: 100%; max-width: 1600px; margin: 0 auto; }
.bento-item { background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 20px; padding: 3rem; position: relative; overflow: hidden; backdrop-filter: blur(10px); }
.bento-principal { grid-column: 1 / 3; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: center; }
.badge-futuro { font-family: 'Satoshi', sans-serif; font-size: 0.75rem; color: var(--cobre-premium); border: 1px solid var(--cobre-oscuro); padding: 0.4rem 1rem; border-radius: 50px; display: inline-block; width: max-content; margin-bottom: 2rem; letter-spacing: 2px; }
.bento-principal h1 { font-family: 'Clash Display', sans-serif; font-size: clamp(3rem, 5vw, 5rem); text-transform: uppercase; line-height: 0.9; margin-bottom: 1.5rem; }
.bento-principal p { font-size: 1.2rem; color: var(--texto-mutado); margin-bottom: 2.5rem; max-width: 400px; }
.btn-premium { background: transparent; border: 1px solid var(--cobre-premium); color: var(--cobre-premium); padding: 1rem 2rem; font-family: 'Satoshi', sans-serif; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; border-radius: 50px; }
.btn-premium:hover { background: var(--cobre-premium); color: var(--bg-dark); box-shadow: 0 0 20px rgba(212, 139, 68, 0.4); }
.bento-visual { grid-column: 3 / 5; grid-row: 1 / 2; padding: 0; }
.holo-efecto { width: 100%; height: 100%; background: linear-gradient(135deg, #16181c, #0a0b0d); display: flex; align-items: center; justify-content: center; color: var(--cobre-oscuro); font-family: 'Clash Display', sans-serif; }
.scanline { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: rgba(212, 139, 68, 0.5); box-shadow: 0 0 15px var(--cobre-premium); opacity: 0.5; animation: scan 3s linear infinite; z-index: 10; }
@keyframes scan { 0% { top: -10%; } 100% { top: 110%; } }
.bento-stats { grid-column: 3 / 5; grid-row: 2 / 3; display: flex; gap: 2rem; align-items: center; justify-content: space-around; }
.stat { text-align: center; }
.stat .numero { display: block; font-family: 'Clash Display', sans-serif; font-size: 3.5rem; font-weight: 700; line-height: 1; margin-bottom: 0.5rem; }
.stat .label { font-size: 0.9rem; color: var(--texto-mutado); text-transform: uppercase; letter-spacing: 1px; }

@media (max-width: 1024px) {
    .bento-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
    .bento-principal { grid-column: 1 / -1; grid-row: 1; }
    .bento-visual { grid-column: 1 / -1; grid-row: 2; min-height: 300px; }
    .bento-stats { grid-column: 1 / -1; grid-row: 3; flex-direction: column; }
}

/* --- SCROLL HORIZONTAL --- */
.contenedor-horizontal { height: 400vh; position: relative; }
.sticky-wrapper { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; background-color: var(--bg-dark); }
.titulo-flotante { position: absolute; top: 10%; left: 5%; font-family: 'Clash Display', sans-serif; font-size: 1rem; color: var(--cobre-premium); letter-spacing: 6px; z-index: 10; opacity: 0.5; }
.pista-horizontal { display: flex; gap: 8vw; padding: 0 10vw; will-change: transform; }
.item-galeria { position: relative; width: 50vw; height: 60vh; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; }
.numero-gigante { position: absolute; top: -10%; right: -5%; font-family: 'Clash Display', sans-serif; font-size: 20vw; font-weight: 700; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.02); z-index: 0; line-height: 1; }
.foto-planta { width: 100%; height: 80%; background: #131418; border: 1px solid rgba(255, 255, 255, 0.05); position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; color: var(--texto-mutado); overflow: hidden; transition: transform 0.5s ease; border-radius: 10px; }
.foto-planta:hover { transform: scale(1.02); border: 1px solid rgba(212, 139, 68, 0.3); }
.info-galeria { margin-top: 1.5rem; z-index: 1; }
.info-galeria h3 { font-family: 'Clash Display', sans-serif; font-size: 2rem; margin-bottom: 0.5rem; }
.info-galeria p { color: var(--texto-mutado); }
.final-galeria { width: 40vw; align-items: center; text-align: center; }
.final-galeria h2 { font-family: 'Clash Display', sans-serif; font-size: 4vw; }

/* --- TARJETAS MAGNÉTICAS --- */
.productos-section { padding: 5rem 5%; }
.section-title { font-family: 'Clash Display', sans-serif; font-size: 3rem; margin-bottom: 3rem; }
.grid-productos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.tarjeta-planta { background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.05); position: relative; overflow: hidden; border-radius: 20px; padding: 2.5rem; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; backdrop-filter: blur(10px); }
.tarjeta-planta::before { content: ""; position: absolute; top: var(--mouse-y, 0); left: var(--mouse-x, 0); transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(212, 139, 68, 0.1) 0%, transparent 40%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 1; }
.tarjeta-planta:hover::before { opacity: 1; }
.tarjeta-contenido { position: relative; z-index: 2; }
.tarjeta-contenido h3 { font-family: 'Clash Display', sans-serif; font-size: 1.8rem; margin-bottom: 0.5rem; }
.tarjeta-contenido p { color: var(--texto-mutado); line-height: 1.5; }

/* --- FOOTER CUÁNTICO --- */
.footer-cuantico { background-color: var(--bg-footer); padding: 8rem 5% 0; position: relative; overflow: hidden; border-top: 1px solid rgba(212, 139, 68, 0.1); }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4rem; margin-bottom: 5rem; position: relative; z-index: 2; }
.footer-info { max-width: 400px; }
.footer-logo { font-family: 'Clash Display', sans-serif; font-size: 2.5rem; margin-bottom: 1rem; }
.footer-info p { color: var(--texto-mutado); line-height: 1.6; font-size: 1.1rem; }
.footer-enlaces { display: flex; gap: 5rem; }
.col-enlace h4 { font-family: 'Clash Display', sans-serif; margin-bottom: 1.5rem; color: var(--texto-claro); letter-spacing: 2px; text-transform: uppercase; font-size: 0.9rem; }
.col-enlace a { display: block; color: var(--texto-mutado); text-decoration: none; margin-bottom: 1rem; font-size: 1.1rem; transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1); }
.col-enlace a:hover { color: var(--cobre-premium); transform: translateX(10px); }
.footer-bottom { position: relative; display: flex; flex-direction: column; align-items: center; }
.texto-masivo { font-family: 'Clash Display', sans-serif; font-size: 17vw; line-height: 0.75; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05); text-align: center; width: 100%; margin-bottom: -1vw; pointer-events: none; transition: -webkit-text-stroke 0.5s ease; }
.footer-cuantico:hover .texto-masivo { -webkit-text-stroke: 1px rgba(212, 139, 68, 0.2); }
.copy-box { background: rgba(15, 16, 19, 0.8); padding: 1rem 2.5rem; border-radius: 50px; border: 1px solid rgba(212, 139, 68, 0.2); color: var(--texto-mutado); font-size: 0.9rem; position: absolute; bottom: 20px; z-index: 2; backdrop-filter: blur(10px); }