:root {
    --rojo: #FF0000;
    --negro: #000000;
    --blanco: #FFFFFF;
    --verde-wa: #25d366;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Arial', sans-serif; background: var(--negro); color: var(--blanco); overflow-x: hidden; text-align: center; line-height: 1.5; }

/* FONDO */
.background-container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -2; }
.bg-image { 
    width: 100%; height: 100%; 
    background-image: url('cabina.jpg'); 
    background-size: cover; background-position: center; 
    filter: blur(10px); opacity: 0.5; transform: scale(1.1); 
}
.bg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, transparent, rgba(0,0,0,0.9)); z-index: -1; }

/* WHATSAPP SIDE */
.whatsapp-side { position: fixed; right: 0; top: 50%; transform: translateY(-50%); background: var(--verde-wa); color: white; padding: 15px; border-radius: 20px 0 0 20px; z-index: 1000; text-decoration: none; font-size: 24px; box-shadow: -2px 0 10px rgba(0,0,0,0.5); }

/* HEADER */
header { position: fixed; top: 0; width: 100%; padding: 15px 5%; z-index: 100; }
.header-container { display: flex; justify-content: space-between; align-items: center; }
.spacer, .menu-toggle { width: 35px; }
.logo img { height: 45px; width: auto; }
.menu-toggle { height: 22px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; }
.menu-toggle span { height: 4px; background: var(--rojo); width: 100%; border-radius: 2px; }

/* SIDEBAR */
.nav-sidebar { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: rgba(0,0,0,0.98); border-left: 2px solid var(--rojo); z-index: 2000; transition: 0.4s; padding: 60px 30px; }
.nav-sidebar.active { right: 0; }
.close-btn { position: absolute; top: 15px; right: 20px; font-size: 40px; color: var(--rojo); cursor: pointer; }
.nav-links { list-style: none; margin-top: 40px; margin-bottom: 40px; }
.nav-links li { margin-bottom: 25px; }
.nav-links a { color: white; text-decoration: none; font-size: 1.3rem; font-weight: bold; text-transform: uppercase; }
.social-sidebar { display: flex; justify-content: center; gap: 20px; font-size: 1.5rem; }
.social-sidebar a { color: var(--rojo); }

/* SECCIONES */
.section { min-height: 100vh; padding: 80px 10%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.main-logo-hero { max-width: 280px; width: 80%; margin-bottom: 20px; }
.main-title { font-size: 2.5rem; margin-bottom: 20px; letter-spacing: 2px; }

/* CONTENIDO */
h2 { font-size: 2rem; color: var(--rojo); margin-bottom: 20px; text-transform: uppercase; }
.content-box { background: rgba(0,0,0,0.8); padding: 35px; border-radius: 12px; border: 1px solid rgba(255,0,0,0.2); width: 100%; max-width: 650px; }

/* FORMULARIO */
form { width: 100%; }
form input, form textarea { width: 100%; padding: 12px; margin-bottom: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: white; text-align: center; border-radius: 4px; font-size: 1rem; }
form button { background: var(--rojo); color: white; padding: 12px; border: none; font-weight: bold; width: 100%; cursor: pointer; text-transform: uppercase; transition: 0.3s; }
form button:hover { background: white; color: var(--rojo); }

/* RESPONSIVE */
@media (max-width: 768px) {
    .nav-sidebar { width: 100%; }
    .main-title { font-size: 1.8rem; }
    .logo img { height: 35px; }
}