/* --- CONFIGURACIÓN BASE & VARIABLES --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* --- PALETA PRINCIPAL (RED & DARK) --- */
    --bx-dark: #1e1e1e;         /* Tu negro original (Gunmetal) - Base solida */
    --bx-dark-depth: #111316;   /* Un tono más oscuro para contrastes/footers */
    
    /* El nuevo color de marca: RED NEON / VELOCITY RED */
    --bx-brand: #FF1F2E;        /* Rojo vibrante, casi neón */
    --bx-brand-hover: #D6001C;  /* Rojo sangre para hovers */
    --bx-brand-glow: rgba(255, 31, 46, 0.6); /* Para efectos de luz */

    /* --- PALETA SECUNDARIA --- */
    --bx-yellow: #FFD600;       
    --bx-yellow-hover: #E5C100;

    --bx-gray-secondary: #8D99AE; 
    --bx-gray-light: #DEE2E6;     /* Gris para bordes sutiles */

    /* --- FONDOS Y TEXTOS --- */
    --bx-ice: #F8F9FA;          /* Fondo casi blanco para secciones limpias */
    --bx-white: #ffffff;
    --bx-text-main: #1A1D21;    /* Texto principal oscuro */
    --bx-text-inverse: #ffffff; /* Texto sobre fondos oscuros/rojos */
    --bx-text-muted: #6C757D;

    /* --- SOMBRAS MODERNAS & NEÓN --- */
    --shadow-soft: 0 10px 30px -10px rgba(0, 0, 0, 0.15);
    --shadow-neon: 0 4px 20px rgba(255, 31, 46, 0.4); 
    --shadow-hover: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
    
    /* --- BORDES & RADIUS --- */
    --radius-md: 8px;
    --radius-lg: 16px;
}

/* =========================================
   FIXES GLOBALES PARA MÓVIL Y SCROLL (MODIFICADO)
   ========================================= */

/* 1. BLINDAJE DE SCROLL (NUCLEAR FIX) */
html {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: scroll !important; /* Fuerza barra siempre */
}

body {
    width: 100%;
    /* overflow-x: hidden; <--- A veces esto da problemas, mejor lo manejamos abajo */
    overflow-x: clip; /* 'clip' es más moderno y seguro que 'hidden' para móviles */
    overflow-y: visible !important; /* Permite que el contenido fluya */
    height: auto !important;
    min-height: 100vh !important;
    position: static !important; /* Evita que se quede fijo */
    
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    
    /* Smooth scroll para iOS */
    -webkit-overflow-scrolling: touch;
    /* overscroll-behavior-y: contain; <--- ELIMINADO: Esto a veces traba Brave/Edge */
    overscroll-behavior-y: auto;
}

/* Box sizing para todos los elementos */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Prevenir zoom en inputs en iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select, textarea, input[type="text"], input[type="password"], 
    input[type="datetime"], input[type="datetime-local"], 
    input[type="date"], input[type="month"], input[type="time"], 
    input[type="week"], input[type="number"], input[type="email"], 
    input[type="url"], input[type="search"], input[type="tel"], 
    input[type="color"] {
        font-size: 16px !important; /* Prevenir zoom automático en iOS */
    }
}

/* Mejorar touch targets en móvil */
@media (max-width: 991.98px) {
    button, a, input, select, textarea {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
        tap-highlight-color: rgba(255, 255, 255, 0.1);
    }
    
    /* Asegurar que los botones sean clickeables */
    button, a.btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}