/* ============================================================================ Vuelame — base.css ============================================================================ Variables CSS (light + dark), reset universal, tipografía base y .container. Se carga PRIMERO en todas las páginas (home y rutas). ========================================================================== */ /* ================================================================ CSS VARIABLES ================================================================ */ :root { --color-primary: #ff731e; /* naranja de marca */ --color-hero: #ff731e; /* fondo del hero (mismo tono) */ --color-cyan: #35c6c9; /* sección "Los vuelos más populares..." */ --color-dark-strong: #24262B; --color-dark-light: #32353C; --color-grey: #838998; --color-beige: #A1824F; --border-radius: 10px; --font-text: 'Manrope', sans-serif; --font-title: 'Onest', sans-serif; /* Light mode */ --bg: #ffffff; --bg-alt: #f5f6f8; --bg-card: #ffffff; --text: #24262B; --text-muted: #838998; --border: rgba(0,0,0,0.08); --shadow: 0 4px 24px rgba(0,0,0,0.07); --shadow-hover: 0 8px 32px rgba(0,0,0,0.12); } body.dark-mode { --bg: #24262B; --bg-alt: #1e2024; --bg-card: #32353C; --text: #f0f0f0; --text-muted: #838998; --border: rgba(255,255,255,0.09); --shadow: 0 4px 24px rgba(0,0,0,0.3); --shadow-hover: 0 8px 32px rgba(0,0,0,0.4); } /* ================================================================ RESET & BASE ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* OJO: scroll-behavior: smooth se quitó a propósito. Choca con SmoothScroll.js (la inercia de rueda la maneja esa librería, cargada en el ); con el smooth nativo activo, cada micro-scroll de la librería se re-anima y el efecto se cancela. Si algún día se saca SmoothScroll.js, se puede volver a poner `html { scroll-behavior: smooth; }` acá. */ body { font-family: var(--font-text); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.6; transition: background 0.3s, color 0.3s; overflow-x: hidden; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-title); line-height: 1.25; } a { color: var(--color-primary); text-decoration: none; transition: opacity 0.2s; } a:hover { opacity: 0.8; } img { max-width: 100%; height: auto; display: block; } button { font-family: var(--font-text); cursor: pointer; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }