/* SellPix — tokens de marca. Fuente única: brand/tokens.json. No edites valores sueltos en el código. */
/* Tipografías de marca, servidas desde brand/fonts/ (subconjunto latino, licencia OFL). Nunca desde Google Fonts. */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Pixelify Sans"; src: url("fonts/pixelify-sans-latin.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Reservas con métricas ajustadas a cada fuente de marca: el texto no cambia de línea al cargarla. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); font-weight: 400; size-adjust: 106.27%; ascent-override: 91.16%; descent-override: 22.70%; line-gap-override: 0.00%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); font-weight: 500; size-adjust: 107.82%; ascent-override: 89.85%; descent-override: 22.37%; line-gap-override: 0.00%; }
@font-face { font-family: "Pixelify Sans Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); font-weight: 500; size-adjust: 87.43%; ascent-override: 105.23%; descent-override: 32.03%; line-gap-override: 0.00%; }
@font-face { font-family: "Bricolage Grotesque Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 800; size-adjust: 101.95%; ascent-override: 91.22%; descent-override: 26.48%; line-gap-override: 0.00%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 600; size-adjust: 100.91%; ascent-override: 96.00%; descent-override: 23.90%; line-gap-override: 0.00%; }
@font-face { font-family: "Bricolage Grotesque Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 700; size-adjust: 99.07%; ascent-override: 93.87%; descent-override: 27.25%; line-gap-override: 0.00%; }
@font-face { font-family: "Bricolage Grotesque Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 600; size-adjust: 99.47%; ascent-override: 93.50%; descent-override: 27.14%; line-gap-override: 0.00%; }
@font-face { font-family: "Pixelify Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 600; size-adjust: 89.04%; ascent-override: 103.32%; descent-override: 31.45%; line-gap-override: 0.00%; }

:root {
  /* Color — tema claro (por defecto) */
  --color-ink: #0A0A0A;
  --color-paper: #F2F2EF;
  --color-lime: #C6F432;
  --color-lime-hover: #B5E31F;
  --color-on-lime: #0A0A0A;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F2F2EF;
  --color-surface-raised: #FFFFFF;
  --color-surface-inverse: #0A0A0A;
  --color-text: #0A0A0A;
  --color-text-muted: #5A5A57;
  --color-text-inverse: #F2F2EF;
  --color-line: #DCDCD8;
  --color-line-strong: #8A8A86;
  --color-focus-ring: #0A0A0A;
  --color-success: #1F7A3A;
  --color-warning: #8A5A00;
  --color-error: #B42318;
  --color-gray-50: #F7F7F5;
  --color-gray-100: #EDEDEA;
  --color-gray-200: #DCDCD8;
  --color-gray-300: #C4C4BF;
  --color-gray-400: #9A9A95;
  --color-gray-500: #737370;
  --color-gray-600: #5A5A57;
  --color-gray-700: #3D3D3B;
  --color-gray-800: #242423;
  --color-gray-900: #161616;

  /* Tipografía */
  --font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-pixel: "Pixelify Sans", "Pixelify Sans Fallback", ui-monospace, "SF Mono", Menlo, monospace;
  --text-display-size: 46px; --text-display-line: 48px; --text-display-weight: 800; --text-display-tracking: -0.035em;
  --text-h1-size: 38px; --text-h1-line: 42px; --text-h1-weight: 700; --text-h1-tracking: -0.03em;
  --text-h2-size: 30px; --text-h2-line: 36px; --text-h2-weight: 700; --text-h2-tracking: -0.025em;
  --text-h3-size: 22px; --text-h3-line: 28px; --text-h3-weight: 600; --text-h3-tracking: -0.015em;
  --text-h4-size: 18px; --text-h4-line: 26px; --text-h4-weight: 600; --text-h4-tracking: 0;
  --text-lead-size: 18px; --text-lead-line: 28px; --text-lead-weight: 400; --text-lead-tracking: 0;
  --text-body-size: 16px; --text-body-line: 26px; --text-body-weight: 400; --text-body-tracking: 0;
  --text-small-size: 14px; --text-small-line: 22px; --text-small-weight: 400; --text-small-tracking: 0;
  --text-caption-size: 12px; --text-caption-line: 16px; --text-caption-weight: 500; --text-caption-tracking: 0.01em;
  --text-eyebrow-size: 13px; --text-eyebrow-line: 16px; --text-eyebrow-weight: 500; --text-eyebrow-tracking: 0.08em;
  --text-stat-size: 40px; --text-stat-line: 40px; --text-stat-weight: 800; --text-stat-tracking: -0.03em;
  --text-button-size: 15px; --text-button-line: 20px; --text-button-weight: 600; --text-button-tracking: 0;

  /* Espaciado, radios, sombras */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(10,10,10,0.06);
  --shadow-md: 0 8px 24px rgba(10,10,10,0.10);

  /* Layout y movimiento */
  --container: 1200px;
  --container-wide: 1360px;
  --gutter: 16px;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 1024px) {
  :root {
    --gutter: 24px;
    --text-display-size: 80px; --text-display-line: 80px;
    --text-h1-size: 56px; --text-h1-line: 60px;
    --text-h2-size: 40px; --text-h2-line: 46px;
    --text-h3-size: 26px; --text-h3-line: 32px;
    --text-h4-size: 20px; --text-h4-line: 28px;
    --text-lead-size: 20px; --text-lead-line: 32px;
    --text-body-size: 17px; --text-body-line: 28px;
    --text-small-size: 15px; --text-small-line: 24px;
    --text-caption-size: 13px; --text-caption-line: 18px;
    --text-eyebrow-size: 15px; --text-eyebrow-line: 18px;
    --text-stat-size: 56px; --text-stat-line: 56px;
    --text-button-size: 16px; --text-button-line: 20px;
  }
}

/* Tema oscuro: automático según el sistema, o forzado con data-theme="dark" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-lime-hover: #D4FF55;
    --color-surface: #0A0A0A;
    --color-surface-alt: #161616;
    --color-surface-raised: #1E1E1D;
    --color-surface-inverse: #F2F2EF;
    --color-text: #F2F2EF;
    --color-text-muted: #A3A3A0;
    --color-text-inverse: #0A0A0A;
    --color-line: #2A2A2A;
    --color-line-strong: #77777A;
    --color-focus-ring: #C6F432;
    --color-success: #6FD08C;
    --color-warning: #F2C14E;
    --color-error: #FF8A80;
  }
}
:root[data-theme="dark"] {
    --color-lime-hover: #D4FF55;
    --color-surface: #0A0A0A;
    --color-surface-alt: #161616;
    --color-surface-raised: #1E1E1D;
    --color-surface-inverse: #F2F2EF;
    --color-text: #F2F2EF;
    --color-text-muted: #A3A3A0;
    --color-text-inverse: #0A0A0A;
    --color-line: #2A2A2A;
    --color-line-strong: #77777A;
    --color-focus-ring: #C6F432;
    --color-success: #6FD08C;
    --color-warning: #F2C14E;
    --color-error: #FF8A80;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; }
img, svg { max-width: 100%; }
body {
  margin: 0;
  background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-sans); font-size: var(--text-body-size); line-height: var(--text-body-line);
  -webkit-font-smoothing: antialiased;
}

.sp-display { font-family: var(--font-display); font-size: var(--text-display-size); line-height: var(--text-display-line); font-weight: var(--text-display-weight); letter-spacing: var(--text-display-tracking); }
.sp-h1 { font-family: var(--font-display); font-size: var(--text-h1-size); line-height: var(--text-h1-line); font-weight: var(--text-h1-weight); letter-spacing: var(--text-h1-tracking); }
.sp-h2 { font-family: var(--font-display); font-size: var(--text-h2-size); line-height: var(--text-h2-line); font-weight: var(--text-h2-weight); letter-spacing: var(--text-h2-tracking); }
.sp-h3 { font-family: var(--font-display); font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: var(--text-h3-weight); letter-spacing: var(--text-h3-tracking); }
.sp-h4 { font-family: var(--font-sans); font-size: var(--text-h4-size); line-height: var(--text-h4-line); font-weight: var(--text-h4-weight); letter-spacing: var(--text-h4-tracking); }
.sp-lead { font-family: var(--font-sans); font-size: var(--text-lead-size); line-height: var(--text-lead-line); font-weight: var(--text-lead-weight); letter-spacing: var(--text-lead-tracking); }
.sp-body { font-family: var(--font-sans); font-size: var(--text-body-size); line-height: var(--text-body-line); font-weight: var(--text-body-weight); letter-spacing: var(--text-body-tracking); }
.sp-small { font-family: var(--font-sans); font-size: var(--text-small-size); line-height: var(--text-small-line); font-weight: var(--text-small-weight); letter-spacing: var(--text-small-tracking); }
.sp-caption { font-family: var(--font-sans); font-size: var(--text-caption-size); line-height: var(--text-caption-line); font-weight: var(--text-caption-weight); letter-spacing: var(--text-caption-tracking); }
.sp-eyebrow { font-family: var(--font-pixel); font-size: var(--text-eyebrow-size); line-height: var(--text-eyebrow-line); font-weight: var(--text-eyebrow-weight); letter-spacing: var(--text-eyebrow-tracking); text-transform: uppercase; }
.sp-stat { font-family: var(--font-display); font-size: var(--text-stat-size); line-height: var(--text-stat-line); font-weight: var(--text-stat-weight); letter-spacing: var(--text-stat-tracking); }
.sp-button { font-family: var(--font-sans); font-size: var(--text-button-size); line-height: var(--text-button-line); font-weight: var(--text-button-weight); letter-spacing: var(--text-button-tracking); }

/* Contenedor */
.sp-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sp-section { padding-block: var(--space-8); }
@media (min-width: 1024px) { .sp-section { padding-block: var(--space-9); } }

/* Botones */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent;
  font-family: var(--font-sans); font-size: var(--text-button-size); line-height: var(--text-button-line); font-weight: 600;
  text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); }
.sp-btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.sp-btn--primary { background: var(--color-lime); color: var(--color-on-lime); }
.sp-btn--primary:hover { background: var(--color-lime-hover); }
.sp-btn--secondary { background: var(--color-surface-inverse); color: var(--color-text-inverse); }
.sp-btn--secondary:hover { opacity: .88; }
.sp-btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-line-strong); }
.sp-btn--ghost:hover { border-color: var(--color-text); }

/* Tarjeta */
.sp-card { background: var(--color-surface-alt); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-4); }
@media (min-width: 1024px) { .sp-card { padding: var(--space-5); } }

/* Píxel de marca: cuadrado lime decorativo (el píxel encendido) */
.sp-pixel { display: inline-block; width: .22em; height: .22em; background: var(--color-lime); border-radius: .04em; vertical-align: .52em; margin-left: .05em; }

/* Inputs */
.sp-input { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-text); font: inherit; }
.sp-input:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

/* Enlaces */
.sp-link { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--color-lime); }
.sp-link:hover { text-decoration-color: currentColor; }

/* Patrón de píxeles: rejilla de puntos cuadrados para fondos de sección */
/* Campo de píxeles: un cuadrado de 3 px cada 24 px, en el color de --color-line (funciona en los dos temas) */
.sp-pixel-field { position: relative; isolation: isolate; }
.sp-pixel-field::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-line-strong); opacity: .35;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27%3E%3Crect width=%273%27 height=%273%27/%3E%3C/svg%3E") 0 0 / 24px 24px repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27%3E%3Crect width=%273%27 height=%273%27/%3E%3C/svg%3E") 0 0 / 24px 24px repeat; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }