html,body{max-width:100vw;overflow-x:hidden;margin:0;padding:0;}*,*::before,*::after{box-sizing:border-box;}img,video{max-width:100%;height:auto;}
/* =========================================
   1. VARIABLES Y CONFIGURACIÓN BASE
   ========================================= */
:root {
    --primary-red: #D00000;
    --dark-red: #8a0000;
    --bg-black: #0a0a0a;
    --bg-dark-grey: #121212;
    --bg-light-grey: #1e1e1e;
    --text-white: #ffffff;
    --text-grey: #b3b3b3;
    --whatsapp-green: #25D366;
    --font-main: 'Montserrat', sans-serif;
    --font-tech: 'Orbitron', sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    background-color: var(--bg-black);
    color: var(--text-white);
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

/* Scrollbar personalizada */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-black); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-red); }

/* =========================================
   2. UTILIDADES Y BOTONES
   ========================================= */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.text-red { color: var(--primary-red); }
.section-padding { padding: 80px 0; }

.section-title {
    font-family: var(--font-tech);
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Botones con Efecto Neón */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.btn-primary {
    background-color: var(--primary-red);
    color: white;
    border: 2px solid var(--primary-red);
    box-shadow: 0 0 10px rgba(208, 0, 0, 0.3);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--primary-red);
    box-shadow: 0 0 20px rgba(208, 0, 0, 0.8), inset 0 0 10px rgba(208, 0, 0, 0.4);
    transform: translateY(-2px);
}

.btn-outline { 
    border: 2px solid white; 
    color: white; 
    /* Margen izquierdo para separar en ESCRITORIO */
    margin-left: 25px; 
}

.btn-outline:hover { background-color: white; color: black; box-shadow: 0 0 15px rgba(255,255,255,0.5); }
.btn-block { width: 100%; margin-top: 10px; }

/* --- BOTÓN WHATSAPP "ELEGANTE" --- */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--whatsapp-green);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    animation: soft-pulse 3s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #20b858;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.6);
}

@keyframes soft-pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* =========================================
   3. NAVBAR
   ========================================= */
.navbar {
    position: fixed; top: 0; width: 100%;
    background: rgba(10, 10, 10, 0.95);
    padding: 20px 0; z-index: 1000;
    border-bottom: 1px solid #333;
    backdrop-filter: blur(10px);
}
.navbar .container { display: flex; justify-content: space-between; align-items: center; }
.logo {
    font-family: var(--font-tech); font-size: 1.8rem; font-weight: 700;
    color: var(--text-white); letter-spacing: 2px;
}
.logo .highlight { color: var(--primary-red); }
.nav-links { display: flex; gap: 30px; }
.nav-links a { font-size: 0.9rem; text-transform: uppercase; font-weight: 600; position: relative; }

.nav-links a::after {
    content: ''; position: absolute; width: 0; height: 2px;
    bottom: -5px; left: 0; background-color: var(--primary-red);
    transition: width 0.3s;
}
.nav-links a:hover { color: var(--primary-red); }
.nav-links a:hover::after { width: 100%; }

.btn-nav { background: var(--text-white); color: var(--bg-black); padding: 8px 20px; border-radius: 50px; font-weight: bold; }
.btn-nav:hover { background: var(--primary-red); color: white; }

.hamburger { display: none; font-size: 1.5rem; cursor: pointer; }

/* =========================================
   4. HERO SECTION (ZONA COCHE)
   ========================================= */
.hero {
    height: 100vh;
    background: url('https://images.unsplash.com/photo-1617788138017-80ad40651399?q=80&w=2070&auto=format&fit=crop') no-repeat center center/cover;
    position: relative; 
    z-index: 5; 
    display: flex; align-items: center; justify-content: center;
    text-align: center; margin-top: 0;
}

/* Base Oscura + Viñeta */
.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, transparent 20%, #0a0a0a 90%);
    background-color: rgba(0,0,0,0.3); 
    z-index: 1;
    overflow: hidden;
}

/* Textura "Monitor Digital" */
.overlay::before {
    content: " "; display: block; position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.07) 50%);
    background-size: 100% 4px;
    z-index: 2; pointer-events: none;
}

/* Haz de Luz (Escáner) */
.overlay::after {
    content: ""; position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(208, 0, 0, 0.05) 40%, transparent 100%);
    background-size: 100% 40%; 
    background-repeat: no-repeat;
    animation: scanBeam 6s linear infinite;
    z-index: 2; pointer-events: none;
}

@keyframes scanBeam {
    0% { top: -50%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.hero-content { position: relative; z-index: 2; padding: 20px; }
.hero-content h1 { 
    font-family: var(--font-tech); 
    font-size: 3.5rem; 
    margin-bottom: 20px; 
    line-height: 1.2; 
    text-shadow: 0 0 20px rgba(0,0,0,0.8); 
}
.hero-content p { font-size: 1.2rem; color: #ddd; margin-bottom: 30px; max-width: 700px; margin: 0 auto 30px auto; }

/* =========================================
   5. MARCAS (CARBON FIBER & CHROME)
   ========================================= */
.brands-section {
    padding: 50px 0;
    position: relative;
    z-index: 10; 
    overflow: hidden;
    border-top: 1px solid rgba(255, 0, 0, 0.15); 
    border-bottom: 1px solid rgba(255, 0, 0, 0.15);
    background-color: #080808; 
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent),
        linear-gradient(-45deg, rgba(0, 0, 0, 0.4) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.4) 75%, transparent 75%, transparent);
    background-size: 100% 100%, 16px 16px, 16px 16px;
    background-position: center, 0 0, 8px 8px;
    box-shadow: inset 0 10px 30px rgba(0,0,0,0.9), inset 0 -10px 30px rgba(0,0,0,0.9);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.brands-track {
    display: flex; align-items: center; gap: 20px;
    width: max-content;
    animation: scrollBrands 40s linear infinite; 
}

.brand-tag {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.6rem; 
    font-weight: 800;
    background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 50%, #b0b0b0 51%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    transition: 0.3s ease;
    cursor: default;
    filter: drop-shadow(0 2px 0px rgba(0,0,0,1));
    padding: 10px 20px;
}

.separator {
    color: var(--primary-red);
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: -3px;
    opacity: 1;
    user-select: none;
    transform: skew(-15deg);
    text-shadow: 0 0 5px rgba(208, 0, 0, 0.5);
}

.brands-track:hover .brand-tag,
.brands-track:hover .separator {
    opacity: 0.2; filter: blur(2px);
}

.brands-track .brand-tag:hover {
    opacity: 1; filter: blur(0px);
    transform: scale(1.2);
    background: none; color: #fff;
    text-shadow: 0 0 15px var(--primary-red), 0 0 30px var(--primary-red);
    z-index: 10;
}

@keyframes scrollBrands {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* =========================================
   6. SERVICIOS Y ABOUT
   ========================================= */
.services-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; padding: 20px 0;
}

.service-card {
    background: linear-gradient(145deg, rgba(30, 30, 30, 0.6), rgba(10, 10, 10, 0.8));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding: 40px 30px; 
    border-radius: 16px; 
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    text-align: center; 
    display: flex; flex-direction: column; align-items: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative; overflow: hidden;
}

.service-card:hover {
    transform: translateY(-15px) scale(1.02);
    border-color: var(--primary-red);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 25px rgba(208, 0, 0, 0.2); 
    background: linear-gradient(145deg, rgba(40, 40, 40, 0.8), rgba(20, 20, 20, 0.9));
}

.service-card i { 
    font-size: 3.5rem; color: var(--primary-red); margin-bottom: 25px; 
    transition: transform 0.4s ease, text-shadow 0.4s ease;
    text-shadow: 0 0 10px rgba(208, 0, 0, 0.3);
}

.service-card:hover i {
    transform: scale(1.1) rotate(5deg);
    text-shadow: 0 0 20px rgba(208, 0, 0, 0.8);
    color: #fff;
}

.service-card h3 { 
    font-family: var(--font-tech); margin-bottom: 15px; 
    font-size: 1.3rem; letter-spacing: 1px; color: #fff;
}
.service-card p { color: #aaa; font-size: 0.95rem; line-height: 1.6; margin-bottom: 15px; }

/* About Section */
.about-content { display: flex; align-items: center; gap: 60px; }
.about-text { flex: 1; }
.about-text h2 { 
    font-family: var(--font-tech); font-size: 2.5rem; margin-bottom: 20px; 
    text-transform: uppercase;
    background: linear-gradient(to right, #fff, #bbb);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.about-text p { color: var(--text-grey); margin-bottom: 25px; line-height: 1.6; font-size: 1.05rem; }
.features-list li { margin-bottom: 15px; font-size: 1.1rem; display: flex; align-items: center; }
.features-list i { color: var(--primary-red); margin-right: 15px; font-size: 1.2rem; text-shadow: 0 0 10px rgba(208, 0, 0, 0.4); }

.about-image {
    flex: 1; height: 320px; background: #000; border-radius: 12px;
    border: 1px solid rgba(208, 0, 0, 0.4); 
    position: relative; overflow: hidden;
    box-shadow: 0 0 30px rgba(208, 0, 0, 0.15);
}
.about-image video { 
    width: 100%; height: 100%; object-fit: cover; display: block; 
    opacity: 0.8; transition: opacity 0.3s;
}
.about-image:hover video { opacity: 1; }

.play-btn {
    position: absolute; top: 50%; left: 50%; 
    transform: translate(-50%, -50%) scale(0.8);
    width: 70px; height: 70px; 
    background-color: rgba(208, 0, 0, 0.9);
    border-radius: 50%; border: 2px solid white;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 20px rgba(208, 0, 0, 0.6); 
    z-index: 10; cursor: pointer;
    opacity: 0; visibility: hidden; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: play-pulse 2s infinite;
}
.play-btn i { color: white; font-size: 24px; margin-left: 4px; }
.play-btn.visible { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.play-btn:hover { 
    background-color: #ff0000; 
    transform: translate(-50%, -50%) scale(1.15); 
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
}

@keyframes play-pulse {
    0% { box-shadow: 0 0 0 0 rgba(208, 0, 0, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(208, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(208, 0, 0, 0); }
}

/* =========================================
   7. ESTADÍSTICAS Y PROCESO
   ========================================= */
.stats-bar {
    background: linear-gradient(to right, #000, #1a0000);
    padding: 40px 0;
    border-bottom: 1px solid #333; border-top: 1px solid #333;
}
.stats-grid { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; text-align: center; }
.stat-number {
    display: block; font-family: var(--font-tech); font-size: 2.5rem; font-weight: bold;
    color: var(--primary-red); text-shadow: 0 0 10px rgba(208,0,0,0.3);
    font-variant-numeric: tabular-nums;
}
.stat-label { display: block; color: #ccc; font-size: 0.9rem; text-transform: uppercase; margin-top: 5px; }

.process-grid { display: flex; justify-content: center; align-items: center; gap: 30px; flex-wrap: wrap; }
.process-step { text-align: center; max-width: 250px; position: relative; }
.step-number {
    font-family: var(--font-tech); font-size: 4rem; color: #1a1a1a;
    position: absolute; top: -20px; left: 50%; transform: translateX(-50%); z-index: 0; font-weight: bold;
}
.process-step h3, .process-step p, .process-step i { position: relative; z-index: 1; }
.process-step h3 { color: white; margin-bottom: 10px; }
.process-step p { color: var(--text-grey); font-size: 0.9rem; }
.process-step i { font-size: 2.5rem; color: var(--primary-red); margin-bottom: 15px; }
.process-arrow { color: #333; font-size: 1.5rem; }

/* =========================================
   8. TESTIMONIOS Y FAQ
   ========================================= */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.review-card {
    background: #0f0f0f; padding: 30px; border-radius: 10px; border: 1px solid #222;
    position: relative; transition: 0.3s;
}
.review-card:hover { border-color: var(--primary-red); transform: translateY(-5px); }
.stars { color: #FFD700; margin-bottom: 15px; font-size: 0.9rem; }
.review-text { font-style: italic; color: #ccc; margin-bottom: 20px; font-size: 0.95rem; }
.review-author { display: flex; align-items: center; gap: 10px; font-weight: bold; color: white; border-top: 1px solid #333; padding-top: 15px; }

.faq-grid { max-width: 800px; margin: 0 auto; }
.faq-item { background: var(--bg-dark-grey); border: 1px solid #333; margin-bottom: 15px; border-radius: 5px; overflow: hidden; }
.faq-item summary {
    padding: 20px; cursor: pointer; font-weight: bold; list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::after { content: '+'; font-size: 1.5rem; color: var(--primary-red); }
.faq-item[open] summary::after { content: '-'; }
.faq-item p {
    padding: 25px 20px; color: #ffffff; font-size: 1.05rem; line-height: 1.8;
    border-top: 1px solid var(--primary-red);
    background: linear-gradient(to bottom, rgba(208, 0, 0, 0.08), transparent);
}

/* =========================================
   9. FORMULARIO DE CONTACTO
   ========================================= */
.contact-wrapper {
    display: flex; gap: 50px; background: var(--bg-dark-grey);
    padding: 40px; border-radius: 15px; border: 1px solid #333;
}
.contact-info { flex: 1; padding-right: 20px; border-right: 1px solid #333; display: flex; flex-direction: column; justify-content: space-between; }
.contact-info h3 { font-family: var(--font-tech); color: var(--text-white); margin-bottom: 15px; }
.contact-info p { color: var(--text-grey); margin-bottom: 30px; }
.info-item { display: flex; align-items: center; margin-bottom: 20px; font-size: 1.1rem; }
.info-item i { color: var(--primary-red); margin-right: 15px; font-size: 1.2rem; width: 20px; }

.contact-form { flex: 2; display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; gap: 20px; }
.form-group input { flex: 1; }
.form-group-full { width: 100%; }

input, select, textarea {
    width: 100%; padding: 15px; 
    background: #0e0e0e;
    border: none; border-bottom: 2px solid #333; 
    color: white; border-radius: 4px 4px 0 0;
    font-family: var(--font-main); font-size: 0.95rem;
    transition: 0.3s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-bottom-color: var(--primary-red);
    background: #151515;
    box-shadow: 0 5px 10px -5px rgba(208, 0, 0, 0.2);
}

select option { background: #000; color: white; }
input[type="file"] { padding: 10px; background: #1a1a1a; cursor: pointer; border: 1px solid #333; }
.file-label { color: var(--text-grey); font-size: 0.85rem; margin-bottom: 5px; }
.checkbox-area { display: flex; align-items: flex-start; gap: 10px; }
.checkbox-area input { width: auto; margin-top: 5px; }

.map-container-side {
    width: 100%; height: 310px; margin-top: 20px; border-radius: 10px;
    overflow: hidden; border: 1px solid #444;
}
.map-container-side iframe {
    width: 100%; height: 100%; border: 0;
    filter: invert(90%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* =========================================
   10. WARNING BANNER & FOOTER
   ========================================= */
.warning-banner {
    background: linear-gradient(to right, #200000, #000000);
    border-top: 1px solid var(--primary-red); border-bottom: 1px solid #333;
    padding: 30px 0; margin-top: 50px;
}
.warning-content { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.warning-icon { font-size: 2.5rem; color: var(--primary-red); animation: pulse 2s infinite; }
.warning-text h3 { font-family: var(--font-tech); color: white; font-size: 1.5rem; margin-bottom: 5px; }
.warning-text p { color: #ccc; font-size: 1rem; margin: 0; }
.warning-text strong { color: var(--primary-red); text-transform: uppercase; }
.warning-btn { border-color: var(--primary-red); color: var(--primary-red); white-space: nowrap; }
.warning-btn:hover { background: var(--primary-red); color: white; }

@keyframes pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

footer { background: #050505; border-top: 3px solid var(--primary-red); padding-top: 60px; font-size: 0.95rem; }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 50px; padding-bottom: 40px; }
.footer-col h3 { font-family: var(--font-tech); font-size: 1.8rem; margin-bottom: 20px; color: white; }
.footer-col h4 { color: white; margin-bottom: 25px; font-family: var(--font-tech); font-size: 1.2rem; position: relative; padding-bottom: 10px; }
.footer-col h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--primary-red); }
.footer-col p { color: #999; margin-bottom: 15px; }
.footer-links a { color: #999; display: flex; align-items: center; margin-bottom: 12px; }
.footer-links a:hover { color: white; padding-left: 5px; }
.footer-links a i { font-size: 0.7rem; margin-right: 8px; color: #444; }
.footer-links a:hover i { color: var(--primary-red); }

.social-links { display: flex; gap: 15px; margin-top: 20px; }
.social-links a { width: 40px; height: 40px; background: #1a1a1a; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: white; border: 1px solid #333; }
.social-links a:hover { background: var(--primary-red); border-color: var(--primary-red); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(208,0,0,0.3); }

.schedule-box { background: #111; padding: 15px; border-left: 3px solid var(--primary-red); margin-top: 20px; border-radius: 0 5px 5px 0; }
.schedule-box span { display: block; color: #ccc; font-size: 0.9rem; margin-bottom: 5px; }
.schedule-box strong { color: white; font-family: var(--font-tech); font-size: 0.95rem; }
.copyright { background: #000; text-align: center; padding: 20px; border-top: 1px solid #1a1a1a; color: #555; font-size: 0.85rem; }

.cookie-banner {
    position: fixed; bottom: 20px; left: 20px; width: 300px;
    background-color: rgba(10, 10, 10, 0.95); border: 1px solid var(--primary-red);
    padding: 20px; border-radius: 10px; z-index: 10000; box-shadow: 0 0 20px rgba(0,0,0,0.8);
    display: none; animation: slideIn 0.5s ease-out;
}
.cookie-banner p { font-size: 0.85rem; color: #ccc; margin-bottom: 15px; }
.cookie-banner a { color: var(--primary-red); text-decoration: underline; }
.btn-small { padding: 8px 20px; font-size: 0.8rem; width: 100%; }

@keyframes slideIn { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* =========================================
   11. RESPONSIVE (MÓVIL)
   ========================================= */
@media (max-width: 768px) {
    .navbar .container {
        justify-content: space-between; align-items: center;
    }

    .btn-nav {
        font-size: 0; width: 40px; height: 40px; padding: 0;
        border-radius: 50%; display: flex; align-items: center; justify-content: center;
        margin-left: auto; margin-right: 15px; 
    }

    .btn-nav i { font-size: 1.2rem; display: block; margin: 0; }

    .hamburger { display: block; color: white; font-size: 1.8rem; cursor: pointer; margin-left: 0; }

    .nav-links { 
        display: none; flex-direction: column; position: absolute; 
        top: 80px; left: 0; width: 100%; 
        background: rgba(10, 10, 10, 0.98); backdrop-filter: blur(10px);
        padding: 25px 20px; border-bottom: 3px solid var(--primary-red); 
        box-shadow: 0 15px 30px rgba(0,0,0,0.9); z-index: 999;
    }
    
    .nav-links.active { display: flex; }
    
    .nav-links li { margin: 8px 0; width: 100%; border-bottom: none; padding-bottom: 0; }

    .nav-links a {
        display: block; padding: 15px 20px;
        background: linear-gradient(to right, #1a1a1a, #111);
        border: 1px solid #333; border-radius: 8px;
        font-family: var(--font-tech); font-size: 1.1rem;
        letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
        color: #aaa; text-align: center;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .nav-links a:hover {
        background: var(--primary-red); color: white; border-color: var(--primary-red);
        box-shadow: 0 0 20px rgba(208,0,0,0.4); transform: translateX(5px);
    }

    .nav-links a::after { display: none; }

    .hero-content h1 { font-size: 2.2rem; }

    /* CORRECCIÓN: Botones apilados pero sin estirarse */
    .hero-content .btn {
        display: block; /* Pone uno debajo de otro */
        width: fit-content; /* IMPORTANTE: Se ajusta al texto */
        min-width: 200px; /* Para que no sean muy estrechos */
        margin: 0 auto 20px auto; /* Centrado y separado */
    }

    .about-content { flex-direction: column-reverse; gap: 30px; }
    .contact-wrapper { flex-direction: column; padding: 20px; }
    .contact-info { border-right: none; border-bottom: 1px solid #333; padding-bottom: 30px; padding-right: 0; }
    .form-group { flex-direction: column; gap: 15px; }
    .whatsapp-float { width: 50px; height: 50px; bottom: 20px; right: 20px; font-size: 30px; }
    .process-arrow { display: none; }
    .process-grid { flex-direction: column; gap: 50px; }
    .warning-content { flex-direction: column; text-align: center; }
    .warning-icon { margin-bottom: 10px; }
    .warning-btn { width: 100%; }
    .brand-tag { font-size: 1.2rem; gap: 20px; }
    .map-container-side { height: 250px; }
    .cookie-banner { left: 0; bottom: 0; width: 100%; border-radius: 10px 10px 0 0; border-left: none; border-right: none; border-bottom: none; }
    .about-image { width: 100%; height: 250px; }
}

/* --- EFECTO GLITCH --- */
.glitch-text {
    position: relative; animation: glitch-anim 5s infinite;
}

@keyframes glitch-anim {
    0%, 90% { text-shadow: none; transform: skew(0deg); }
    91% { text-shadow: -3px 0 red, 3px 0 cyan; transform: skew(-10deg); }
    92% { text-shadow: none; transform: skew(0deg); }
    93% { text-shadow: 3px 0 red, -3px 0 cyan; transform: skew(5deg); }
    94% { text-shadow: none; transform: skew(0deg); }
    96% { text-shadow: 2px 0 red, -2px 0 blue; transform: skew(-5deg); }
    100% { text-shadow: none; transform: skew(0deg); }
}

/* =========================================
   FONDO "NODOS DE DATOS" (ALTA DENSIDAD)
   ========================================= */
.tech-background {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; z-index: 1; pointer-events: none; 
}
.tech-nodes { position: absolute; border-radius: 50%; background: transparent; }

/* CAPA 1: Puntos ROJOS */
.layer1 {
    width: 4px; height: 4px; background: var(--primary-red); top: 0;
    box-shadow: 
        10vw 10vh 4px var(--primary-red), 90vw 50vh 4px var(--primary-red), 
        30vw 80vh 4px var(--primary-red), 50vw 20vh 4px var(--primary-red),
        70vw 90vh 4px var(--primary-red), 15vw 60vh 4px var(--primary-red),
        85vw 30vh 4px var(--primary-red), 40vw 40vh 4px var(--primary-red),
        60vw 70vh 4px var(--primary-red), 25vw 5vh 4px var(--primary-red),
        75vw 15vh 4px var(--primary-red), 5vw 35vh 4px var(--primary-red);
    opacity: 0.6; animation: data-flow 25s linear infinite;
}

/* CAPA 2: Puntos BLANCOS */
.layer2 {
    width: 3px; height: 3px; background: #fff; top: 0;
    box-shadow: 
        20vw 90vh 3px rgba(255,255,255,0.8), 80vw 10vh 3px rgba(255,255,255,0.8), 
        40vw 30vh 3px rgba(255,255,255,0.8), 60vw 60vh 3px rgba(255,255,255,0.8),
        10vw 50vh 3px rgba(255,255,255,0.8), 95vw 80vh 3px rgba(255,255,255,0.8),
        35vw 20vh 3px rgba(255,255,255,0.8), 55vw 40vh 3px rgba(255,255,255,0.8),
        75vw 70vh 3px rgba(255,255,255,0.8), 5vw 25vh 3px rgba(255,255,255,0.8),
        45vw 85vh 3px rgba(255,255,255,0.8), 85vw 45vh 3px rgba(255,255,255,0.8);
    opacity: 0.4; animation: data-flow 35s linear infinite; animation-delay: -5s; 
}

/* CAPA 3: Polvo de fondo */
.layer3 {
    width: 2px; height: 2px; background: #aaa; top: 0;
    box-shadow: 
        12vw 12vh 0 #aaa, 87vw 87vh 0 #aaa, 23vw 76vh 0 #aaa, 54vw 23vh 0 #aaa, 
        65vw 45vh 0 #aaa, 32vw 54vh 0 #aaa, 91vw 12vh 0 #aaa, 9vw 91vh 0 #aaa, 
        45vw 67vh 0 #aaa, 78vw 34vh 0 #aaa, 21vw 43vh 0 #aaa, 67vw 89vh 0 #aaa,
        34vw 12vh 0 #aaa, 56vw 98vh 0 #aaa, 89vw 23vh 0 #aaa, 12vw 76vh 0 #aaa,
        43vw 54vh 0 #aaa, 76vw 32vh 0 #aaa, 98vw 65vh 0 #aaa, 5vw 45vh 0 #aaa;
    opacity: 0.2; animation: data-flow 50s linear infinite;
}

@keyframes data-flow {
    from { transform: translateY(0); }
    to { transform: translateY(-100vh); } 
}