/* ============================================================ MecGo — Landing page Paleta: la misma marca real de las apps (negro + ámbar), no una nueva — el logo, los colores y el tono ya existen en producción. Tipografía: Archivo Black para títulos (bloque, tipo cartel de ruta — conecta con "auxilio en la ruta"), Archivo para el resto. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&display=swap'); :root { --negro: #0a0a0b; --superficie: #18181b; --superficie-2: #27272a; --borde: #3f3f46; --amber: #fbbf24; --amber-oscuro: #d97706; --texto: #fafafa; --texto-muted: #a1a1aa; --texto-faint: #71717a; --verde: #34d399; --radio: 16px; --fondo-nav: rgba(10,10,11,0.85); --transicion-tema: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* Tema claro — mismo mecanismo que las apps y el panel admin: se activa con un atributo en , guardado en localStorage, respeta la preferencia del sistema si nunca se eligió nada. */ html[data-theme="light"] { --negro: #fafafa; --superficie: #ffffff; --superficie-2: #e4e4e7; --borde: #d4d4d8; --texto: #18181b; --texto-muted: #52525b; --texto-faint: #71717a; --fondo-nav: rgba(250,250,250,0.85); } * { transition: var(--transicion-tema); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--negro); color: var(--texto); font-family: 'Archivo', -apple-system, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; } .contenedor { max-width: 1120px; margin: 0 auto; padding: 0 24px; } h1, h2, h3 { font-family: 'Archivo Black', sans-serif; line-height: 1.1; letter-spacing: -0.02em; } a { color: inherit; text-decoration: none; } /* ---- Nav ---- */ .nav { position: sticky; top: 0; z-index: 50; background: var(--fondo-nav); backdrop-filter: blur(10px); border-bottom: 1px solid var(--superficie-2); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: 1120px; margin: 0 auto; } .nav-logo { display: flex; align-items: center; gap: 10px; } .nav-logo img { height: 32px; width: auto; } .nav-logo-text { font-family: 'Archivo Black', sans-serif; font-size: 18px; } .nav-logo-text span { color: var(--amber); } .nav-links { display: flex; gap: 28px; font-size: 14px; color: var(--texto-muted); font-weight: 600; } .nav-links a { margin-right: 28px; } .nav-links a:last-child { margin-right: 0; } .nav-links a:hover { color: var(--texto); } .nav-cta { background: var(--amber); color: var(--negro); font-weight: 700; font-size: 13px; padding: 10px 18px; border-radius: 10px; border: none; cursor: pointer; } .theme-toggle { background: var(--superficie); border: 1px solid var(--superficie-2); width: 38px; height: 38px; border-radius: 10px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .theme-toggle:hover { border-color: var(--amber); } .nav-right { display: flex; align-items: center; gap: 12px; } @media (max-width: 700px) { .nav-links { display: none; } } /* ---- Botones ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 28px; border-radius: 12px; font-weight: 700; font-size: 15px; border: none; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; } .btn:hover { transform: translateY(-1px); } .btn-amber { background: var(--amber); color: var(--negro); } .btn-amber:hover { background: #fcd34d; } .btn-outline { background: transparent; color: var(--texto); border: 1.5px solid var(--superficie-2); } .btn-outline:hover { border-color: var(--amber); } /* ---- Hero ---- */ .hero { padding: 90px 24px 60px; background: radial-gradient(ellipse 800px 400px at 50% -10%, rgba(251,191,36,0.12), transparent), var(--negro); text-align: center; position: relative; overflow: hidden; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--superficie); border: 1px solid var(--superficie-2); padding: 7px 16px; border-radius: 100px; font-size: 13px; font-weight: 600; color: var(--texto-muted); margin-bottom: 28px; } .hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); } .hero h1 { font-size: clamp(32px, 5.5vw, 58px); max-width: 880px; margin: 0 auto 20px; } .hero h1 .amarillo { color: var(--amber); } .hero-sub { font-size: 18px; color: var(--texto-muted); max-width: 560px; margin: 0 auto 36px; } .hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; } .hero-nota { font-size: 12px; color: var(--texto-faint); } /* ---- Mapa/ruta de "cómo funciona" — elemento propio, conecta con el seguimiento en vivo real de la app (no es un ícono genérico) ---- */ .ruta-seccion { padding: 90px 24px; } .seccion-eyebrow { color: var(--amber); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; } .seccion-titulo { font-size: clamp(26px, 4vw, 38px); margin-bottom: 16px; max-width: 600px; } .seccion-sub { color: var(--texto-muted); font-size: 16px; max-width: 520px; margin-bottom: 56px; } .ruta { position: relative; display: flex; flex-direction: column; gap: 0; max-width: 720px; margin: 0 auto; } .ruta-paso { display: flex; gap: 24px; position: relative; padding-bottom: 56px; } .ruta-paso:last-child { padding-bottom: 0; } .ruta-linea { position: absolute; left: 23px; top: 48px; bottom: -8px; width: 2px; background: repeating-linear-gradient(to bottom, var(--superficie-2) 0 6px, transparent 6px 12px); } .ruta-paso:last-child .ruta-linea { display: none; } .ruta-pin { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--amber); display: flex; align-items: center; justify-content: center; font-family: 'Archivo Black', sans-serif; font-size: 18px; color: var(--amber); position: relative; z-index: 2; } .ruta-contenido h3 { font-size: 19px; margin-bottom: 6px; } .ruta-contenido p { color: var(--texto-muted); font-size: 14.5px; max-width: 480px; } /* ---- Para mecánicos ---- */ .mecanicos-seccion { padding: 90px 24px; background: var(--superficie); border-top: 1px solid var(--superficie-2); border-bottom: 1px solid var(--superficie-2); } .mecanicos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .mecanicos-lista { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; } .mecanicos-item { display: flex; gap: 14px; align-items: flex-start; } .mecanicos-check { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: rgba(52,211,153,0.15); color: var(--verde); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } .mecanicos-item-texto h4 { font-size: 15px; font-weight: 700; margin-bottom: 3px; } .mecanicos-item-texto p { font-size: 13.5px; color: var(--texto-muted); } .mecanicos-visual { background: var(--negro); border: 1px solid var(--superficie-2); border-radius: var(--radio); padding: 32px; text-align: center; } .mecanicos-visual .num { font-family: 'Archivo Black', sans-serif; font-size: 48px; color: var(--amber); } .mecanicos-visual .label { color: var(--texto-muted); font-size: 13px; margin-top: 4px; } .mecanicos-visual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; } .mecanicos-visual-item { background: var(--superficie); border-radius: 12px; padding: 18px; } @media (max-width: 800px) { .mecanicos-grid { grid-template-columns: 1fr; } } /* ---- Registro ---- */ .registro-seccion { padding: 90px 24px; text-align: center; } .tabs { display: inline-flex; background: var(--superficie); border-radius: 12px; padding: 4px; margin-bottom: 32px; border: 1px solid var(--superficie-2); } .tab { padding: 10px 24px; border-radius: 9px; border: none; background: transparent; color: var(--texto-muted); font-weight: 700; font-size: 14px; cursor: pointer; transition: all 0.15s; } .tab.activo { background: var(--amber); color: var(--negro); } .form-card { max-width: 440px; margin: 0 auto; background: var(--superficie); border: 1px solid var(--superficie-2); border-radius: var(--radio); padding: 32px; text-align: left; } .form-row { display: flex; gap: 12px; } .form-row > * { flex: 1; } .campo { margin-bottom: 14px; } .campo label { display: block; font-size: 12px; color: var(--texto-muted); margin-bottom: 6px; font-weight: 600; } .campo input { width: 100%; background: var(--negro); border: 1px solid var(--superficie-2); border-radius: 10px; padding: 12px 14px; color: var(--texto); font-size: 14px; font-family: inherit; } .campo input:focus { outline: none; border-color: var(--amber); } .checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; } .checkbox-row input { margin-top: 3px; accent-color: var(--amber); width: 16px; height: 16px; flex-shrink: 0; } .checkbox-row label { font-size: 12.5px; color: var(--texto-muted); line-height: 1.5; } .checkbox-row a { color: var(--amber); font-weight: 600; } .form-submit { width: 100%; margin-top: 4px; } .form-msg { margin-top: 16px; font-size: 13.5px; padding: 12px; border-radius: 10px; display: none; } .form-msg.ok { display: block; background: rgba(52,211,153,0.12); color: var(--verde); } .form-msg.error { display: block; background: rgba(239,68,68,0.12); color: #f87171; } /* ---- Footer ---- */ .footer { padding: 48px 24px 32px; border-top: 1px solid var(--superficie-2); } .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } .footer-links { display: flex; gap: 24px; font-size: 13px; color: var(--texto-faint); } .footer-links a { margin-right: 24px; } .footer-links a:last-child { margin-right: 0; } .footer-links a:hover { color: var(--texto-muted); } .footer-copy { font-size: 12px; color: var(--texto-faint); } /* ---- Banner de cookies ---- */ .cookie-banner { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 200; max-width: 900px; margin: 0 auto; background: var(--superficie); border: 1px solid var(--superficie-2); border-radius: 18px; padding: 22px 26px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); display: flex; gap: 24px; align-items: center; transform: translateY(140%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .cookie-banner.visible { transform: translateY(0); } .cookie-texto h4 { font-size: 15px; margin-bottom: 6px; } .cookie-texto p { font-size: 13px; color: var(--texto-muted); line-height: 1.6; } .cookie-texto a { color: var(--amber); font-weight: 600; } .cookie-botones { display: flex; gap: 10px; flex-shrink: 0; } .cookie-botones button { border: none; border-radius: 10px; padding: 11px 18px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; } .cookie-btn-config { background: transparent; color: var(--texto-muted); border: 1px solid var(--superficie-2) !important; } .cookie-btn-rechazar { background: var(--superficie-2); color: var(--texto); } .cookie-btn-aceptar { background: var(--amber); color: var(--negro); } @media (max-width: 760px) { .cookie-banner { flex-direction: column; align-items: stretch; left: 12px; right: 12px; bottom: 12px; padding: 20px; } .cookie-botones { flex-wrap: wrap; } .cookie-botones button { flex: 1; } } /* ---- Reveal al hacer scroll ---- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); } .reveal.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .cookie-banner { transition: none; } } /* ---- Páginas legales (Términos / Privacidad) ---- */ .legal-page { max-width: 760px; margin: 0 auto; padding: 60px 24px 100px; } .legal-page h1 { font-size: 32px; margin-bottom: 8px; } .legal-page .fecha { color: var(--texto-faint); font-size: 13px; margin-bottom: 32px; } .legal-page h2 { font-size: 19px; margin: 36px 0 12px; color: var(--amber); } .legal-page p, .legal-page li { color: var(--texto-muted); font-size: 15px; line-height: 1.7; margin-bottom: 12px; } .legal-page ul, .legal-page ol { padding-left: 22px; margin-bottom: 16px; } .legal-page strong { color: var(--texto); } .legal-aviso { background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.25); border-radius: 12px; padding: 16px 18px; font-size: 13.5px; color: var(--texto-muted); margin-bottom: 32px; }