/* ==========================================================================
SUPERPODER — DESIGN SYSTEM v1.0
Vida saludable & fitness · Ecommerce de suplementos + productos digitales
--------------------------------------------------------------------------
Índice
01. Tokens (light) 07. Inputs / formularios
02. Tokens (dark) 08. Cards
03. Reset 09. Badges / Tags
04. Base + tipografía 10. Alertas
05. Logo 11. Layout (container, grid, stack)
06. Botones 12. Utilidades (espaciado, texto, display)
--------------------------------------------------------------------------
Uso: +
Mobile-first: estilos base = mobile; @media (min-width) agrega para pantallas grandes.
Breakpoints: sm 640px · md 768px · lg 1024px · xl 1280px
========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
/* ==========================================================================
01. TOKENS — MODO LIGHT (default)
========================================================================== */
:root {
color-scheme: light;
/* --- Colores de marca --- */
--text: #0e111b;
--background: #ffffff;
--primary: #0d8267; /* 4.77:1 sobre blanco → AA texto normal */
--secondary: #eaeafa;
--accent: #05765b; /* 5.60:1 sobre blanco */
/* --- Colores derivados (no editar: se calculan de los de marca) --- */
--on-primary: #ffffff; /* texto sobre fondo primary */
--link: var(--accent); /* links y texto de acento (AA garantizado) */
--primary-hover: color-mix(in srgb, var(--primary) 85%, #000);
--primary-active: color-mix(in srgb, var(--primary) 72%, #000);
--primary-soft: color-mix(in srgb, var(--primary) 12%, var(--background));
--surface: var(--background); /* fondo de cards / paneles */
--surface-alt: var(--secondary); /* fondo de secciones alternadas */
--muted: #5b6070; /* texto secundario 6.27:1 */
--border: color-mix(in srgb, var(--text) 14%, var(--background));
--border-strong: color-mix(in srgb, var(--text) 35%, var(--background));
--focus-color: var(--primary); /* outline de foco (≥3:1) */
--focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus-color) 45%, transparent);
/* --- Semánticos (alertas, estados de formulario) --- */
--info: #1d4ed8;
--success: #15803d;
--warning: #b45309;
--error: #b91c1c;
/* --- Tipografía --- */
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
--fw-regular: 400;
--fw-bold: 700;
--ratio: 1.333; /* Perfect Fourth */
--lh-tight: 1.15;
--lh-base: 1.6;
/* Escala 1.333 — valor fijo desktop (referencia) */
--fs-h1: 4.210rem; /* 67.36px */
--fs-h2: 3.158rem; /* 50.56px */
--fs-h3: 2.369rem; /* 37.92px */
--fs-h4: 1.777rem; /* 28.48px */
--fs-h5: 1.333rem; /* 21.28px */
--fs-body: 1rem; /* 16px */
--fs-small: 0.750rem; /* 12px */
/* Escala responsive (mobile → desktop) con clamp() */
--fs-h1-fluid: clamp(2.369rem, 1.6rem + 3.4vw, var(--fs-h1));
--fs-h2-fluid: clamp(1.777rem, 1.2rem + 2.6vw, var(--fs-h2));
--fs-h3-fluid: clamp(1.5rem, 1.1rem + 1.8vw, var(--fs-h3));
--fs-h4-fluid: clamp(1.333rem, 1.1rem + 1vw, var(--fs-h4));
--fs-h5-fluid: clamp(1.125rem, 1rem + 0.5vw, var(--fs-h5));
/* --- Espaciado (base 8px) --- */
--space-xs: 0.25rem; /* 4px */
--space-sm: 0.5rem; /* 8px */
--space-md: 1rem; /* 16px */
--space-lg: 1.5rem; /* 24px */
--space-xl: 2rem; /* 32px */
--space-2xl: 3rem; /* 48px */
--space-3xl: 4rem; /* 64px */
/* --- Border radius --- */
--radius-sm: 0.25rem; /* 4px */
--radius-md: 0.5rem; /* 8px */
--radius-lg: 0.75rem; /* 12px */
--radius-full: 9999px;
/* --- Sombras --- */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
/* --- Transiciones --- */
--transition-fast: 150ms ease-in-out;
--transition-base: 250ms ease-in-out;
/* --- Layout --- */
--container-max: 1280px;
--header-height: 72px;
/* --- Logo --- */
--logo-src: url("../img/brand/logoCuadrado.png");
}
/* ==========================================================================
02. TOKENS — MODO DARK
========================================================================== */
[data-theme="dark"] {
color-scheme: dark;
--text: #e4e7f1;
--background: #000000;
--primary: #7df2d7; /* 15.55:1 sobre negro */
--secondary: #050515;
--accent: #89fae0;
--on-primary: #000000; /* texto oscuro sobre primary claro */
--link: var(--primary);
--focus-color: var(--primary);
--primary-hover: color-mix(in srgb, var(--primary) 85%, #fff);
--primary-active: color-mix(in srgb, var(--primary) 70%, #fff);
--primary-soft: color-mix(in srgb, var(--primary) 14%, var(--background));
--surface: #0b0b18;
--surface-alt: var(--secondary);
--muted: #9aa0b0; /* 8.03:1 sobre negro */
--border: color-mix(in srgb, var(--text) 18%, var(--background));
--border-strong: color-mix(in srgb, var(--text) 40%, var(--background));
--info: #93c5fd;
--success: #86efac;
--warning: #fcd34d;
--error: #fca5a5;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.7), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.75), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
--logo-src: url("../img/brand/logoCuadradoBlanco.png");
}
/* ==========================================================================
03. RESET
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
font-size: 100%; /* 16px base, respeta la preferencia del usuario */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body { min-height: 100vh; }
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ==========================================================================
04. BASE + TIPOGRAFÍA
========================================================================== */
body {
font-family: var(--font-sans);
font-size: var(--fs-body);
font-weight: var(--fw-regular);
line-height: var(--lh-base);
color: var(--text);
background-color: var(--background);
-webkit-font-smoothing: antialiased;
transition: background-color var(--transition-base), color var(--transition-base);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5 {
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: -0.02em;
text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1-fluid); }
h2, .h2 { font-size: var(--fs-h2-fluid); }
h3, .h3 { font-size: var(--fs-h3-fluid); }
h4, .h4 { font-size: var(--fs-h4-fluid); letter-spacing: -0.01em; }
h5, .h5 { font-size: var(--fs-h5-fluid); letter-spacing: 0; }
h6, .h6 { font-size: var(--fs-body); letter-spacing: 0; }
p { text-wrap: pretty; }
p + p { margin-top: var(--space-md); }
small, .text-small { font-size: var(--fs-small); line-height: 1.5; }
.lead { font-size: var(--fs-h5-fluid); line-height: 1.5; color: var(--muted); }
.eyebrow {
font-size: var(--fs-small);
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--link);
}
a:not([class]) {
color: var(--link);
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
transition: text-decoration-thickness var(--transition-fast);
}
a:not([class]):hover { text-decoration-thickness: 2px; }
:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
::selection { background: var(--primary); color: var(--on-primary); }
code, kbd, pre { font-family: var(--font-mono); font-size: 0.875em; }
code {
background: var(--surface-alt);
padding: 0.1em 0.35em;
border-radius: var(--radius-sm);
}
hr { border: 0; border-top: 1px solid var(--border); margin-block: var(--space-xl); }
/* ==========================================================================
05. LOGO
Reglas: clear space ≥ 1× altura · mínimo 32px · nunca deformar.
Light → logoCuadrado.png · Dark → logoCuadradoBlanco.png
Opción A (recomendada): con dos ![]()
y .logo--light / .logo--dark
Opción B:
========================================================================== */
.logo {
height: 40px;
width: auto;
aspect-ratio: 1 / 1; /* el logo es cuadrado; evita saltos de layout */
object-fit: contain;
flex-shrink: 0;
}
.logo--small { height: 32px; } /* tamaño mínimo permitido */
.logo--large { height: 80px; } /* hero sections */
.logo__container {
display: inline-flex;
align-items: center;
padding: var(--space-md);
}
/* Clear space = 1× la altura del logo (hero) */
.logo__container--hero { padding: 80px; }
/* Swap automático light/dark con dos ![]()
*/
.logo--dark { display: none; }
[data-theme="dark"] .logo--light { display: none; }
[data-theme="dark"] .logo--dark { display: block; }
/* Variante por background-image (sin ![]()
) */
.logo--auto {
display: inline-block;
width: 40px;
background: var(--logo-src) center / contain no-repeat;
}
.logo--auto.logo--small { width: 32px; }
.logo--auto.logo--large { width: 80px; }
/* ==========================================================================
06. BOTONES