/* ════════════════════════════════════════════════════════════════════════
   TRIXEL — Base
   Reset, variables, tipografia, utilidades.
   Estilo: claro / premium (alineado a Horeka), con acentos violeta + cian.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  /* Color base — paleta clara (estilo Horeka) */
  --c-white: #FFFFFF;
  --c-warm-white: #FAFAF7;
  --c-ice: #F3F4F8;
  --c-mist: #ECEDF3;
  --c-border: #E3E5EE;
  --c-border-strong: #C9CCDA;

  --c-text: #14121C;            /* texto principal (casi negro) */
  --c-text-soft: #4B4856;       /* texto secundario */
  --c-text-dim: #8A8896;        /* texto auxiliar */
  --c-graphite: #1F1D2A;        /* superficie oscura (footer/section--graphite) */
  --c-graphite-2: #2A2733;

  /* Acentos de marca — color único cian.
     Se conservan los nombres --c-violet* para no tocar 50+ reglas; ahora todos
     apuntan al cian #1FB6CE (decisión de diseño: una sola identidad). */
  --c-violet: #1FB6CE;
  --c-violet-soft: #5FD0E0;
  --c-violet-dark: #168FA2;
  --c-violet-tint: #E1F6FA;     /* fondo cian muy claro */
  --c-cyan: #1FB6CE;
  --c-cyan-soft: #5FD0E0;
  --c-cyan-dark: #168FA2;
  --c-cyan-tint: #E1F6FA;
  --c-whatsapp: #25D366;
  --c-whatsapp-dark: #1FB855;

  /* Color de marca sólido (sin degradados por decisión de diseño). */
  --grad-brand: #1FB6CE;
  --grad-brand-soft: rgba(31, 182, 206, 0.10);
  --grad-text: #1FB6CE;

  /* Tipografia */
  --font-display: "Space Grotesk", "Manrope", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Escala tipografica */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.75rem;
  --fs-5xl: 5rem;

  /* Espaciado */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-12: 7rem;
  --sp-16: 10rem;

  /* Radios — contenedores cuadrados por decisión de diseño.
     Solo --r-pill se conserva para que los botones mantengan su forma. */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;
  --r-pill: 999px;

  /* Sombras suaves para fondo claro */
  --sh-xs: 0 1px 2px rgba(20, 18, 28, 0.05);
  --sh-sm: 0 2px 10px rgba(20, 18, 28, 0.06);
  --sh-md: 0 10px 30px rgba(20, 18, 28, 0.08);
  --sh-lg: 0 28px 60px rgba(20, 18, 28, 0.14);
  --sh-glow: 0 12px 40px rgba(31, 182, 206, 0.28);
  --sh-glow-cyan: 0 12px 40px rgba(31, 182, 206, 0.28);

  /* Transiciones */
  --t-fast: 180ms cubic-bezier(0.22, 1, 0.36, 1);
  --t-base: 260ms cubic-bezier(0.22, 1, 0.36, 1);
  --t-slow: 460ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --container: 1180px;
  --container-narrow: 940px;
  --container-wide: 1320px;
  --header-h: 88px;
  --topbar-h: 0px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(31, 182, 206, 0.22); color: var(--c-text); }

/* ── Tipografia ────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--c-text);
}
h1 { font-size: clamp(2.5rem, 5.6vw, var(--fs-5xl)); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
h2 { font-size: clamp(1.875rem, 3.8vw, var(--fs-3xl)); letter-spacing: -0.025em; }
h3 { font-size: var(--fs-xl); letter-spacing: -0.015em; }
h4 { font-size: var(--fs-lg); letter-spacing: -0.01em; line-height: 1.25; }

p { color: var(--c-text-soft); line-height: 1.7; }
strong, b { color: var(--c-text); font-weight: 600; }
small { font-size: var(--fs-sm); color: var(--c-text-dim); }

/* Texto resaltado en color de marca (sin gradiente por decisión de diseño) */
.gradient-text {
  color: var(--c-violet);
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
}

/* Lead (parrafo destacado) */
.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--c-text-soft);
  line-height: 1.6;
}

/* ── Utilidades ────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide  { max-width: var(--container-wide); }

/* Eyebrow ahora es solo texto (sin cápsula, sin puntito) por decisión de diseño. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-violet-dark);
}
/* Variante sobre fondo oscuro (graphite/cta-block) */
.section--graphite .eyebrow,
.cta-block .eyebrow {
  color: var(--c-cyan-soft);
}

/* Section heads */
.section { padding: var(--sp-12) 0; position: relative; }
.section--tight { padding: var(--sp-10) 0; }
.section--ice { background: var(--c-ice); }
.section--mist { background: var(--c-mist); }
.section--graphite { background: var(--c-graphite); color: var(--c-warm-white); }
.section--graphite h1,
.section--graphite h2,
.section--graphite h3,
.section--graphite h4 { color: var(--c-warm-white); }
.section--graphite p { color: rgba(250, 250, 247, 0.78); }

.section__head { max-width: 720px; margin-bottom: var(--sp-9); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 var(--sp-4);
}
.section__sub { color: var(--c-text-soft); font-size: var(--fs-md); }
.section--graphite .section__sub { color: rgba(250, 250, 247, 0.72); }

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--c-ice); }
::-webkit-scrollbar-thumb { background: #BFC2D0; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #9598A6; }

/* ── Focus accesible ───────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--c-violet);
  outline-offset: 3px;
}

/* Textos rectos: conserva color/acento sin cursivas. */
em,
i,
cite,
blockquote,
.italic-accent,
[style*="font-style: italic"],
[style*="font-style:italic"] {
  font-style: normal !important;
}

/* Acentos dentro de titulos: evitan mezclar rojo/dorado con blanco. */
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em,
h1 .italic-accent,
h2 .italic-accent,
h3 .italic-accent,
h4 .italic-accent,
h5 .italic-accent,
h6 .italic-accent,
h1 [style*="color:"],
h2 [style*="color:"],
h3 [style*="color:"],
h4 [style*="color:"],
h5 [style*="color:"],
h6 [style*="color:"],
[class*="__title"] em,
[class*="__title"] .italic-accent,
[class*="-title"] em,
[class*="-title"] .italic-accent {
  color: inherit !important;
}