/* ========================================= TOKENS GLOBALES (variables + reset + helpers) Carga este archivo en TODAS las páginas. ========================================= */ /* Reset mínimo moderno */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html, body { height: 100%; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } /* Accesibilidad */ :root { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } /* ========================= VARIABLES - Si un valor se repite ≥3 veces, súbelo aquí. ========================= */ :root{ /* Colores base */ --bg: #0b0b0c; --surface: #111216; --fg: #E9EEF2; --muted: #A9B4BD; --acc: #25D366; --stroke: rgba(255,255,255,.12); /* Sombras / vidrio */ --glow: 0 8px 28px rgba(0,0,0,.35); --blur: 6px; /* Tipografía */ --font-sans: ui-sans-serif, system-ui, "Inter", Arial, sans-serif; --fs-100: .8125rem; --fs-200: .875rem; --fs-300: 1rem; --fs-400: 1.125rem; --fs-500: 1.25rem; --fs-600: 1.5rem; /* Espaciado (8pt system) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* Radios */ --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; /* Layout */ --max-w: 980px; } /* (Opcional) Tema claro: añade data-theme="light" en si lo quieres */ html[data-theme="light"]{ --bg: #f6f8fa; --surface: #ffffff; --fg: #0b0b0c; --muted: #48515A; --stroke: rgba(0,0,0,.12); --glow: 0 8px 28px rgba(0,0,0,.10); } /* ========================= BASE ========================= */ body{ background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-300); line-height: 1.5; } /* Enlaces */ a{ color: var(--acc); text-decoration: none; } a:hover{ text-decoration: underline; } /* ========================= HELPERS / UTILIDADES ========================= */ .wrap{ max-width: var(--max-w); margin-inline: auto; padding: var(--space-4); } .container{ width: min(100%, var(--max-w)); margin-inline: auto; } .grid{ display: grid; gap: var(--space-4); } .grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); } .flex{ display: flex; gap: var(--space-3); } .center{ display: grid; place-items: center; } .hidden{ display:none !important; } .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Cards, botones, inputs reutilizables (básicos) */ .card{ background: rgba(0,0,0,.35); backdrop-filter: blur(var(--blur)); border: 1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--glow); padding: var(--space-4); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap: .5ch; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid var(--stroke); background: var(--surface); color: var(--fg); cursor: pointer; transition: transform .08s ease, opacity .2s ease; } .btn:hover{ transform: translateY(-1px); } .btn:active{ transform: translateY(0); } .btn--acc{ background: var(--acc); color:#0b0b0c; border-color: transparent; } .input, .select, .textarea{ width:100%; background: var(--surface); color: var(--fg); border:1px solid var(--stroke); border-radius: var(--radius-sm); padding: 10px 12px; } /* Responsivo rápido */ @media (max-width: 768px){ .grid-2, .grid-3{ grid-template-columns: 1fr; } .wrap{ padding: var(--space-3); } }