/* =========================================================
SODI · Sistema de diseño v1
Paleta A · Abismo | Tipografía: Outfit + Figtree
Colores de marca extraídos de logotivo_v1
---------------------------------------------------------
Fuentes (poner en el de cada página):
========================================================= */
:root {
color-scheme: dark;
/* ---- Marca (degradado del logo) ---- */
--brand-cyan: #03C9EC;
--brand-blue: #0098D8;
--brand-deep: #0070B8; /* solo tamaños grandes sobre fondo oscuro (3.8:1) */
--brand-navy: #005996;
--brand-gradient: linear-gradient(135deg, #03C9EC 0%, #0098D8 45%, #0070B8 100%);
/* ---- Paleta A · Abismo ---- */
--bg: #050A12; /* fondo de página */
--surface: #0B1422; /* tarjetas, bloques */
--surface-2: #111D30; /* hover, elementos elevados */
--border: #1C2A40;
--text: #E8F1FA; /* 17.4:1 sobre --bg */
--muted: #8A9BB3; /* 7.0:1 sobre --bg */
--primary: #0FB8EC; /* acento principal, 8.6:1 sobre --bg */
--on-primary: #03121D; /* texto sobre botón primario */
--secondary: #3D9BE0;
--on-secondary: #03121D;
--glow: rgba(15, 184, 236, 0.38);
/* ---- Estados ---- */
--success: #3DDC97;
--warning: #F5B83D;
--danger: #FF6B6B;
/* ---- Tipografía ---- */
--font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
--fs-h1: clamp(2.3rem, 5.6vw, 4.4rem);
--fs-h2: clamp(1.6rem, 3vw, 2.2rem);
--fs-h3: 1.4rem;
--fs-body: 1rem;
--fs-small: 0.85rem;
--fs-label: 0.75rem;
/* ---- Forma y espacio ---- */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--radius-pill: 999px;
--container: 1180px;
--gutter: clamp(16px, 4vw, 48px);
--section-gap: clamp(64px, 9vw, 120px);
/* ---- Movimiento ---- */
--ease: cubic-bezier(.22, .8, .24, 1);
--t-fast: .2s;
--t-med: .35s;
}
/* =================== Base =================== */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 400 var(--fs-body)/1.6 var(--font-body);
-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin: 0; }
a { color: var(--primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
::selection { background: var(--primary); color: var(--on-primary); }
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-gap); }
.muted { color: var(--muted); }
.label {
font: 500 var(--fs-label) var(--font-mono);
letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.grad-text {
background: var(--brand-gradient);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* =================== Botones =================== */
.btn {
display: inline-flex; align-items: center; gap: 10px;
font: 700 .95rem var(--font-body);
padding: 13px 22px; border-radius: var(--radius-sm);
border: 1px solid transparent; cursor: pointer; text-decoration: none;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med), background var(--t-med), border-color var(--t-med);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { box-shadow: 0 8px 30px -6px var(--glow); }
.btn-secondary { background: var(--secondary); color: var(--on-secondary); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--primary); }
.btn-grad { position: relative; background: var(--bg); color: var(--text); isolation: isolate; }
.btn-grad::before {
content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
background: var(--brand-gradient); z-index: -1;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
/* =================== Tarjetas =================== */
.card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-md); padding: 24px;
}
/* Tarjeta con luz que sigue al cursor (requiere JS que actualice --mx / --my) */
.card-glow { position: relative; overflow: hidden; transition: border-color var(--t-med), transform var(--t-med) var(--ease); }
.card-glow::before {
content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-med);
background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--primary) 18%, transparent), transparent 45%);
}
.card-glow:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); transform: translateY(-3px); }
.card-glow:hover::before { opacity: 1; }
.card-glow > * { position: relative; }
.icon-box {
width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
color: var(--primary);
background: color-mix(in srgb, var(--primary) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}
/* =================== Etiquetas y badges =================== */
.eyebrow {
display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
border-radius: var(--radius-pill); border: 1px solid var(--border);
font: 500 var(--fs-label) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-pill); font: 600 .78rem var(--font-body); }
.badge-info { color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
.badge-success { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.badge-warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
.badge-danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
/* =================== Formularios =================== */
.field { display: grid; gap: 6px; }
.field label { font-size: var(--fs-small); font-weight: 600; }
.input, .select, .textarea {
font: inherit; color: var(--text); background: var(--bg);
border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .select:focus, .textarea:focus {
outline: none; border-color: var(--primary);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent);
}
/* =================== Accesibilidad =================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.btn svg { width: 16px; height: 16px; flex: none; }
[hidden] { display: none !important; }