/* ============================================================ DESPIERTA ARGENTINA — style.css (único archivo CSS) Tema DARK PREMIUM (inspirado en despiertaargentina.impulsopro.tech) Fondo casi negro azulado + turquesa como acento, tipografía Poppins ============================================================ */ /* ── RESET + BASE ─────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ── Fondos dark ── */ --bg: #071013; --bg2: #0b1519; --panel: #101b20; --panel2: #17262d; /* ── Texto ── */ --text: #f5f8fa; --muted: #e0ecef; /* contraste ≥4.5:1 sobre los fondos dark */ /* ── Acentos turquesa ── */ --turq: #00d6c9; --turq2: #44fff2; --turq-dark: #00b3a8; /* ── Gradientes / glow reutilizables ── */ --grad-turq: linear-gradient(135deg, #00d6c9, #78fff6); --grad-card: linear-gradient(145deg, #17262d, #101b20); --glow-turq: 0 0 24px rgba(0, 214, 201, 0.35); /* ── Glassmorphism dark ── */ --glass-bg: rgba(16, 27, 32, 0.55); --glass-border: rgba(0, 214, 201, 0.18); --glass-blur: blur(16px); /* ── Tipografía (Poppins con fallbacks) ── */ --font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* ── Layout ── */ --max-w: 1200px; --nav-h: 80px; --radius: 22px; --radius-sm: 12px; --transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* ── Aliases de compatibilidad ── Las páginas internas usan var(--navy)/var(--white)/var(--text-dark)... en estilos inline/embebidos. Redefinirlas en dark hace que ese HTML se oscurezca solo, sin tener que tocar cada regla. (Los literales #fff/#f4f5f7 sí se editan.) */ --teal: var(--turq); --teal-dark: var(--turq-dark); --navy: var(--bg2); --navy-2: var(--bg); --white: var(--text); --off-white: var(--panel2); --text-dark: var(--text); --text-mid: var(--muted); --text-light: #9fb4ba; --border: rgba(255, 255, 255, 0.08); --glow-teal: var(--glow-turq); } /* ── KEYFRAMES ─────────────────────────────── */ @keyframes pageFadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.6; overflow-x: hidden; /* Sin 'forwards': el transform de la animación no debe persistir, porque un transform en rompe position:fixed (navbar y modal quedarían anclados al body en vez del viewport). Tras la animación, body vuelve a transform:none. */ animation: pageFadeIn 0.6s ease-out; } img { display: block; max-width: 100%; height: auto; } a { text-decoration: none; color: inherit; } ul { list-style: none; } .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: 24px; } /* ── Accesibilidad: focus visible para teclado ── */ :focus-visible { outline: 2px solid var(--turq2); outline-offset: 2px; border-radius: 4px; } /* ── Scroll reveal (solo con JS activo y sin reduced-motion) ── */ @media (prefers-reduced-motion: no-preference) { .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .js .reveal.visible { opacity: 1; transform: none; } } /* ── BUTTONS ──────────────────────────────── */ .btn-dark { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--grad-turq); color: #071013; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; padding: 13px 32px; border-radius: 50px; border: none; cursor: pointer; box-shadow: var(--glow-turq); transition: transform var(--transition), box-shadow var(--transition); } .btn-dark:hover { transform: translateY(-3px); box-shadow: 0 0 36px rgba(0, 214, 201, 0.55); } .btn-wa { position: relative; width: 100%; min-height: 44px; background: var(--panel2); color: var(--text); font-family: var(--font-head); font-weight: 700; font-size: 1rem; padding: 16px 24px; border-radius: 50px; border: 1px solid var(--glass-border); cursor: pointer; overflow: hidden; transition: all var(--transition); z-index: 1; } .btn-wa::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,214,201,0.18), transparent); transition: all 0.5s ease; z-index: -1; } .btn-wa:hover { background: #25D366; color: #071013; border-color: #25D366; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(37, 211, 102, 0.32); } .btn-wa:hover::before { left: 100%; } .btn-wa-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--grad-turq); color: #071013; font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; padding: 18px 48px; border-radius: 50px; box-shadow: var(--glow-turq); transition: transform var(--transition), box-shadow var(--transition); } .btn-wa-pill:hover { transform: translateY(-3px); box-shadow: 0 0 40px rgba(0, 214, 201, 0.6); } /* ── NAVBAR ───────────────────────────────── */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(7, 16, 19, 0.55); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-border); height: var(--nav-h); transition: background 0.4s ease, box-shadow 0.4s ease; } .navbar.scrolled { background: rgba(7, 16, 19, 0.9); border-bottom: 1px solid var(--glass-border); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.45); } .nav-inner { max-width: var(--max-w); margin-inline: auto; padding-inline: 24px; height: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; flex-shrink: 0; } .nav-logo img { width: 70px; height: 70px; object-fit: contain; } .nav-logo-fallback { width: 60px; height: 60px; background: var(--panel2); color: var(--turq); border-radius: 50%; font-family: var(--font-head); font-weight: 900; font-size: 1.4rem; align-items: center; justify-content: center; } .nav-links { display: flex; align-items: center; gap: 36px; } .nav-link { font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--text); position: relative; padding-bottom: 4px; transition: color var(--transition); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--turq); transition: width var(--transition); } .nav-link:hover, .nav-link.active { color: var(--turq); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } /* CTA "Resultados" en el navbar */ .nav-link-cta { color: var(--turq2); font-weight: 700; } .nav-link-cta::after { background: var(--turq2); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } .nav-toggle span { display: block; width: 25px; height: 2px; background: var(--text); transition: all var(--transition); border-radius: 2px; } .nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ── HERO ─────────────────────────────────── */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: var(--nav-h); overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* WebP vía