/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    background-color: #0d0d0d;
    color: #fff;
    overflow-x: hidden;
}
h1, h2, h3, h4, .font-display {
    font-family: 'Teko', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ─── Scroll-reveal Global ───────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(.25,.46,.45,.94),
                transform 0.65s cubic-bezier(.25,.46,.45,.94);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.10s; }
.reveal-d2 { transition-delay: 0.20s; }
.reveal-d3 { transition-delay: 0.30s; }

/* ─── Navbar & WhatsApp FAB ──────────────────────────────── */
#navbar { transition: background .35s ease, box-shadow .35s ease; }
#navbar.scrolled {
    background: rgba(13,13,13,0.88) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 4px 28px rgba(0,0,0,0.7);
}
#wa-fab {
    position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 999;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25D366;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.65rem; color: #fff;
    box-shadow: 0 4px 24px rgba(37,211,102,0.45);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
#wa-fab:hover { transform: scale(1.12); box-shadow: 0 6px 32px rgba(37,211,102,0.65); }

/* ─── Elementos Generales (Brillos y Títulos) ────────────── */
.noise-overlay { position: relative; }
.noise-overlay::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.038; pointer-events: none; z-index: 1; mix-blend-mode: overlay;
}
.glow-ambient-right { position: absolute; right: -6rem; top: 50%; transform: translateY(-50%); width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(230,36,41,0.12) 0%, transparent 70%); pointer-events: none; z-index: 1; }
.glow-ambient-left { position: absolute; left: -6rem; top: 30%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(176,26,30,0.14) 0%, transparent 70%); pointer-events: none; z-index: 1; }
.text-neon-red { text-shadow: 0 0 8px rgba(230,36,41,0.75), 0 0 24px rgba(230,36,41,0.35); }
.heading-line::after { content: ''; display: block; width: 60px; height: 3px; background: #e62429; margin-top: 0.45rem; }
.heading-center::after { margin-left: auto; margin-right: auto; }

/* ─── INICIO (Hero & Ticker Moderno) ─────────────────────── */
#hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness(0.48) saturate(0.75); }
.scanline-bar { position: absolute; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(230,36,41,0.25), rgba(230,36,41,0.12), transparent); pointer-events: none; z-index: 3; animation: scanline 6s linear infinite; }
.hero-title { font-family: 'Teko', sans-serif; text-transform: uppercase; font-weight: 700; font-size: clamp(3.6rem, 10.5vw, 8rem); line-height: 0.9; letter-spacing: -0.01em; }
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.animate-marquee-scroll { display: flex; width: max-content; animation: marquee-scroll 25s linear infinite; }
.ticker-mask { -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); }

/* ─── SERVICIOS (Arsenal) ────────────────────────────────── */
.tex-servicios::after { content: ''; position: absolute; inset: 0; background-image: url('./texturas/bg-rojo-1.jpg'); background-size: cover; background-position: center; opacity: 0.07; mix-blend-mode: multiply; pointer-events: none; z-index: 0; }
.text-glow-sm { text-shadow: 0 0 12px rgba(230,36,41,0.45); }
.divider-red { height: 1px; background: linear-gradient(90deg, transparent, rgba(230,36,41,0.6), transparent); }
.service-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.service-card:hover { transform: translateY(-6px); }
.service-card-std:hover { border-color: rgba(230,36,41,0.45) !important; box-shadow: 0 12px 40px -8px rgba(230,36,41,0.22); }
.glow-red-card { border-color: rgba(230,36,41,0.65) !important; box-shadow: 0 0 0 1px rgba(230,36,41,0.2), 0 8px 40px -8px rgba(230,36,41,0.35), inset 0 0 32px rgba(230,36,41,0.04); }
.glow-red-card-alt { border-color: rgba(255,45,53,0.5) !important; box-shadow: 0 0 0 1px rgba(255,45,53,0.15), 0 8px 36px -6px rgba(255,45,53,0.28), inset 0 0 28px rgba(255,45,53,0.04); }
.badge-shimmer { position: relative; overflow: hidden; }
.badge-shimmer::after { content: ''; position: absolute; top: -50%; left: -75%; width: 50%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-20deg); animation: shimmer 2.8s infinite; }
.price-tag { font-family: 'Teko', sans-serif; font-size: 2.4rem; font-weight: 700; line-height: 1; }
.stat-num { font-family: 'Teko', sans-serif; font-size: clamp(2.8rem, 6vw, 4.5rem); line-height: 1; font-weight: 700; }
.audience-card { transition: transform .3s ease, border-color .3s ease; }
.audience-card:hover { transform: translateY(-4px); border-color: rgba(230,36,41,0.4) !important; }

/* ─── PORTAFOLIO ─────────────────────────────────────────── */
.tex-portafolio::after { content: ''; position: absolute; inset: 0; background-image: url('./texturas/textura-grunge.png'); background-size: cover; background-position: center top; opacity: 0.10; mix-blend-mode: soft-light; pointer-events: none; z-index: 0; }
.portfolio-img { overflow: hidden; cursor: pointer; position: relative; }
.portfolio-img img { transition: transform .55s cubic-bezier(.25,.46,.45,.94), filter .55s ease; filter: brightness(0.72) saturate(0.85); display: block; width: 100%; height: auto; }
.portfolio-img:hover img { transform: scale(1.08); filter: brightness(0.92) saturate(1.1); }
.portfolio-img .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,13,0.9) 0%, rgba(230,36,41,0.12) 50%, transparent 100%); opacity: 0; transition: opacity .35s ease; display: flex; align-items: flex-end; padding: 1.2rem; z-index: 2; }
.portfolio-img:hover .overlay { opacity: 1; }

/* ─── CONTACTO ───────────────────────────────────────────── */
.tex-contacto::after { content: ''; position: absolute; inset: 0; background-image: url('./texturas/bg-rojo-2.jpg'); background-size: cover; background-position: center; opacity: 0.06; mix-blend-mode: color-dodge; pointer-events: none; z-index: 0; }
.form-input { transition: border-color .2s ease, box-shadow .2s ease; }
.form-input:focus { outline: none; border-color: #e62429 !important; box-shadow: 0 0 0 3px rgba(230,36,41,0.16); }

/* ─── Optimizaciones Móviles (Touch) ─────────────────────── */
@media (max-width: 768px) {
    .group:hover .overlay { opacity: 1; }
    .service-card:active, .audience-card:active, a[class*="bg-luque-card"]:active {
        transform: scale(0.97) !important;
        transition: transform 0.1s ease;
    }
    .hero-title { line-height: 1.05 !important; }
}