/* ============================================================
   GUZNEL FLOW - RE-STYLING DINÁMICO (LIGHT/DARK)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&family=Outfit:wght@300;400;600;900&display=swap');

:root {
    --bg: #000000;
    --text: #ffffff;
    --border: #1a1a1a;
    --grid-color: rgba(255, 255, 255, 0.05);
    --neon-green: #00ff00;
    --neon-pink: #ff0055;
    --nav-bg: rgba(0, 0, 0, 0.8);
}

body.light-mode {
    --bg: #ffffff;
    --text: #000000;
    --border: #e5e5e5;
    --grid-color: rgba(0, 0, 0, 0.05);
    --nav-bg: rgba(255, 255, 255, 0.8);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    font-family: 'Outfit', sans-serif;
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}

h1, h2, h3, h4 { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; }

/* ============================================================
   LEGIBILIDAD GLOBAL
   'Archivo Black' es muy pesada: con tracking ultra-cerrado las
   letras casi se tocan. Suavizamos el tracking negativo en toda
   la web para que el texto respire y se lea mejor.
   ============================================================ */
.tracking-tighter { letter-spacing: -0.01em !important; }
.tracking-tight   { letter-spacing: 0 !important; }

/* El texto largo en MAYÚSCULAS necesita MÁS aire entre letras para leerse bien.
   Aplicamos tracking positivo solo al cuerpo de texto (párrafos/listas en
   bold + uppercase), sin afectar a etiquetas (font-black), titulares ni el menú. */
p.font-bold.uppercase,
li.font-bold.uppercase,
p.font-semibold.uppercase,
li.font-semibold.uppercase { letter-spacing: 0.035em !important; line-height: 1.6; }

/* REJILLA DINÁMICA */
.bg-grid {
    background-size: 50px 50px;
    background-image: linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
}

/* --- FIX DE MENÚ --- */
#main-nav {
    background-color: transparent;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

/* En modo claro anulamos el mix-blend-difference que rompe la visual */
body.light-mode #main-nav {
    mix-blend-mode: normal !important;
}

body.light-mode #main-nav a,
body.light-mode #main-nav button {
    color: #000 !important;
}

/* Menú móvil sólido */
#mobile-menu {
    background-color: var(--bg) !important;
    z-index: 150;
}

body.light-mode #mobile-menu a {
    color: #000 !important;
}

/* --- TRUCO PARA TAILWIND --- */
body.light-mode .bg-black, body.light-mode .bg-zinc-950 { background-color: var(--bg) !important; }
body.light-mode .bg-white { background-color: var(--bg) !important; color: var(--text) !important; }
body.light-mode .text-white { color: var(--text) !important; }
body.light-mode .text-zinc-400, body.light-mode .text-zinc-500 { color: var(--text-muted) !important; }
body.light-mode .border-zinc-900, body.light-mode .border-black { border-color: var(--border) !important; }

/* TÍTULOS HERO CON MOVIMIENTO */
.hero-title {
    position: relative;
    font-size: clamp(2.2rem, 10vw, 7.5rem) !important;
    font-style: italic;
    z-index: 10;
}
.hero-title::before, .hero-title::after {
    content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; z-index: -1; opacity: 0.5;
}
.hero-title::before { left: -2px; text-shadow: 1px 0 var(--neon-pink); animation: glitch-anim-1 2s infinite linear alternate-reverse; }
.hero-title::after { left: 2px; text-shadow: -1px 0 var(--neon-green); animation: glitch-anim-2 3s infinite linear alternate-reverse; }

@keyframes glitch-anim-1 { 0% { transform: translate(-1px); } 100% { transform: translate(1px); } }
@keyframes glitch-anim-2 { 0% { transform: translate(1px); } 100% { transform: translate(-1px); } }

/* WHATSAPP */
#whatsapp-flow {
    position: fixed; bottom: 30px; left: 30px; z-index: 10000;
    background: #25D366; width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: white !important;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* MARQUEE INVERTIDO */
.marquee-parent {
    overflow: hidden; display: flex; width: 100%;
    background-color: var(--text) !important;
    color: var(--bg) !important;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.animate-marquee { display: flex; white-space: nowrap; min-width: 200%; animation: marquee-logic 40s linear infinite; }
@keyframes marquee-logic { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* STICKERS */
.sticker {
    background-color: var(--text); color: var(--bg);
    padding: 0.5rem 1.5rem; font-weight: 900;
    transform: rotate(-1.5deg); box-shadow: 5px 5px 0px var(--neon-pink);
}

/* --- FIX NAVEGACIÓN SCROLLED EN MODO OSCURO (por defecto) ---
   Sin esto, al scrollear sobre secciones claras (p.ej. los bloques de
   contacto en blanco) el mix-blend-difference invertía el texto a negro y
   el menú se volvía ilegible. Al scrollear forzamos barra sólida + texto blanco. */
#main-nav.scrolled {
    background-color: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #1a1a1a;
    mix-blend-mode: normal !important;
}
#main-nav.scrolled a,
#main-nav.scrolled > button,
#main-nav.scrolled .group > span,
#main-nav.scrolled i {
    color: #ffffff !important;
}
#main-nav.scrolled a.bg-green-400 { color: #000000 !important; } /* botón Contactar */
#main-nav.scrolled a:hover,
#main-nav.scrolled .group:hover > span {
    color: #8fa686 !important;
}

/* --- FIX NAVEGACIÓN SCROLLED EN MODO CLARO --- */

/* Cuando el nav tiene la clase 'scrolled' en modo claro, forzamos estética dark */
body.light-mode #main-nav.scrolled {
    background-color: #000000 !important; /* Fondo negro sólido */
    border-color: #222 !important;
    mix-blend-mode: normal !important;
}

body.light-mode #main-nav.scrolled a,
body.light-mode #main-nav.scrolled button,
body.light-mode #main-nav.scrolled i {
    color: #ffffff !important; /* Letras blancas */
}

/* Efecto hover en el menú fijo (salvia editorial) */
body.light-mode #main-nav.scrolled a:hover {
    color: #8fa686 !important;
}

/* --- FIX BOTÓN HAMBURGUESA DINÁMICO --- */

/* Color por defecto (Modo Oscuro) */
#menu-toggle span {
    background-color: #ffffff !important;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* En Modo Claro al inicio (Fondo blanco -> Rayas negras) */
body.light-mode #menu-toggle span {
    background-color: #000000 !important;
}

/* En Modo Claro cuando haces Scroll (Nav negro -> Rayas blancas) */
body.light-mode #main-nav.scrolled #menu-toggle span {
    background-color: #ffffff !important;
}

/* Cuando el menú móvil está abierto (Fondo siempre negro -> Rayas blancas) */
body.menu-open #menu-toggle span {
    background-color: #ffffff !important;
}