/* ==========================================================================
   BLACK VERSIONS — global.css
   Variables, reset, tipografia base, utilidades y layout.

   Los tokens salen del sistema de diseno de Claude Design
   ("Home Black Versions v2" / "Black Versions - Servicios SEO"):
   monocromatico, Sora 200/300 para display, Inter 300 para texto,
   superficies en degradado y esquinas redondeadas.

   El diseno original solo define dos estados (Desktop y Mobile 390).
   Aqui se traduce mobile-first: los valores base son los de movil y el
   breakpoint principal (901px) activa el set de escritorio.
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */

:root {
  /* --- Superficies --- */
  --black: #000000;
  --surface-alt: #0b0b0b;   /* secciones alternas */
  --surface-alt-2: #0a0a0a; /* banda destacada dentro del flujo alterno */
  --surface-hi: #111111;    /* bloque de conclusion, por encima del resto */
  --surface-foot: #050505;  /* footer */
  --surface-hover: #151515; /* celdas de cliente en hover */

  /* Degradados de tarjeta: cada familia tiene su par (arriba, abajo) */
  --card-top: #131313;
  --card-bottom: #0b0b0b;
  --card-top-hover: #1c1c1c;
  --card-bottom-hover: #111111;
  --cell-top: #141414;
  --cell-bottom: #0d0d0d;
  --case-top: #151515;
  --case-bottom: #0d0d0d;
  --step-top: #131313;
  --step-bottom: #0a0a0a;
  --sol-top: #121212;
  --sol-bottom: #0b0b0b;
  --diff-top: #121212;
  --diff-bottom: #0a0a0a;
  --diff-hi-top: #1b1b1b;
  --diff-hi-bottom: #101010;

  /* Placeholder rayado para huecos de imagen aun sin foto */
  --hatch: repeating-linear-gradient(108deg, #101010 0 16px, #0a0a0a 16px 32px);

  /* Barras del grafico de intencion de busqueda */
  --bar-brand: #333333;
  --bar-info: #777777;
  --bar-commercial: #ffffff;

  /* --- Texto --- */
  --white: #ffffff;
  --text-hi: #e6e6e6;
  --text-strong: #cfcfcf;
  --text-tag: #b4b4b4;
  --text: #a5a5a5;
  --text-p: #9d9d9d;
  --text-link: #9a9a9a;
  --text-nav: #9c9c9c;
  --text-muted: #8f8f8f;
  --text-num: #8a8a8a;
  --text-dim: #7d7d7d;
  --text-label: #7c7c7c;
  --text-faint: #767676;
  --text-low: #6f6f6f;
  --text-arrow: #6a6a6a;
  --text-step: #606060;
  --text-xlow: #5f5f5f;
  --text-sep: #4a4a4a;
  --text-ghost: #3d3d3d;
  --text-placeholder: #4f4f4f;
  --text-crumb-current: #c8c8c8;

  /* --- Bordes (todos blancos con alfa) --- */
  --b-06: rgba(255, 255, 255, 0.06);
  --b-08: rgba(255, 255, 255, 0.08);
  --b-12: rgba(255, 255, 255, 0.12);
  --b-16: rgba(255, 255, 255, 0.16);
  --b-18: rgba(255, 255, 255, 0.18);
  --b-20: rgba(255, 255, 255, 0.2);
  --b-22: rgba(255, 255, 255, 0.22);
  --b-24: rgba(255, 255, 255, 0.24);
  --b-30: rgba(255, 255, 255, 0.3);
  --b-35: rgba(255, 255, 255, 0.35);
  --b-45: rgba(255, 255, 255, 0.45);
  --b-55: rgba(255, 255, 255, 0.55);

  /* --- Tipografias --- */
  --font-display: 'Sora', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* --- Escala tipografica (valores movil; se sobreescriben en 901px) --- */
  --fs-h1: 2.4rem;      /* hero */
  --fs-h1s: 2.1rem;     /* CTA final */
  --fs-h2: 1.8rem;      /* titulo de seccion */
  --fs-h2s: 1.65rem;    /* titulo de seccion en dos columnas */
  --fs-h3: 1.05rem;     /* titulo de tarjeta */
  --fs-num: 2.4rem;     /* cifras de metrica */
  --fs-step: 2.2rem;    /* numero de paso */
  --fs-p-lg: 1rem;
  --fs-p-md: 0.95rem;
  --fs-marquee: 1.2rem;
  --fs-eyebrow: 0.92rem;
  --fs-small: 0.88rem;
  --fs-xs: 0.84rem;

  /* --- Espaciado --- */
  --pad-x: 20px;        /* margen lateral */
  --pad-y: 76px;        /* alto de seccion */
  --pad-y2: 60px;       /* alto de seccion compacta */
  --gap-md: 40px;
  --gap-lg: 48px;
  --gap-xl: 56px;
  --gap-grid: 16px;     /* separacion entre tarjetas */
  --card-pad: 26px 22px;
  --cell-pad: 26px 24px;
  --card-min-h: auto;

  /* --- Layout --- */
  --container: 1520px;
  /* El alto del nav lo manda el logo: se le dejan ~14px de aire arriba y
     abajo. Todo lo que se apoya en la barra (hero, columnas sticky y los
     anclajes) deriva de este token. */
  --nav-h: 80px;
  --hero-h: 92vh;
  --hero-pad-t: 90px;
  --hero-pad-b: 64px;
  --band-1: 34vh;
  --band-2: 26vh;

  /* --- Decoracion --- */
  --grid-size: 56px;    /* rejilla de fondo */
  --diag-size: 160px;   /* trama diagonal */
  --burst-size: 420px;  /* starburst */
  --burst-right: -30%;
  --rail-w: 0px;        /* marquee vertical fijo (solo escritorio) */

  /* --- Radios --- */
  --r-card: 16px;
  --r-cell: 14px;
  --r-client: 12px;
  --r-pill: 999px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-mask: cubic-bezier(0.16, 0.84, 0.24, 1);
  --t-fast: 0.3s;
  --t-med: 0.5s;
  --t-reveal: 0.9s;

  /* --- Capas --- */
  --z-decor: 0;
  --z-content: 2;
  --z-rail: 6;
  --z-float: 790;   /* boton flotante: por debajo del nav y del menu movil */
  --z-nav: 800;
  --z-mobile-nav: 820;
  --z-grain: 940;
  --z-progress: 950;
  --z-cursor: 960;
}

@media (min-width: 901px) {
  :root {
    --fs-h1: clamp(3.4rem, 5.6vw, 6.6rem);
    --fs-h1s: clamp(2.8rem, 4.4vw, 5rem);
    --fs-h2: clamp(2.2rem, 3.4vw, 4rem);
    --fs-h2s: clamp(2rem, 2.7vw, 3.1rem);
    --fs-h3: 1.22rem;
    --fs-num: clamp(2.6rem, 3.4vw, 4rem);
    --fs-step: 3rem;
    --fs-p-lg: 1.12rem;
    --fs-p-md: 1.02rem;
    --fs-marquee: 2rem;

    --pad-x: 72px;
    --pad-y: 132px;
    --pad-y2: 100px;
    --gap-md: 56px;
    --gap-lg: 80px;
    --gap-xl: 84px;
    --card-pad: 34px 32px 38px;
    --cell-pad: 34px 30px 32px;
    --card-min-h: 280px;

    --nav-h: 106px;
    --hero-h: 100vh;
    --hero-pad-t: 130px;
    --hero-pad-b: 86px;
    --band-1: 54vh;
    --band-2: 42vh;

    --grid-size: 100px;
    --diag-size: 300px;
    --burst-size: 820px;
    --burst-right: 4%;
    --rail-w: 34px;
  }
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--black);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  border-style: none;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

a {
  color: var(--white);
  text-decoration: none;
}

hr {
  border: none;
  height: 1px;
  background: var(--b-06);
}

::selection {
  background: var(--white);
  color: var(--black);
}

:focus-visible {
  outline: 1px solid var(--white);
  outline-offset: 3px;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--black);
}
::-webkit-scrollbar-thumb {
  background: #2a2a2a;
}
::-webkit-scrollbar-thumb:hover {
  background: #3d3d3d;
}

/* ==========================================================================
   3. TIPOGRAFIA
   Los titulos NO van en mayusculas: el diseno usa Sora 200 en caja normal
   con tracking negativo.
   ========================================================================== */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--white);
  font-weight: 200;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 17ch;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0;
}

h4 {
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.35;
}

p {
  font-weight: 300;
  color: var(--text-p);
  text-wrap: pretty;
}

strong,
b {
  font-weight: 400;
  color: var(--text-hi);
}

/* Eyebrow: linea corta de 44px ARRIBA y texto en caja normal debajo */
.eyebrow {
  display: block;
  margin-bottom: 22px;
}

.eyebrow::before {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  margin-bottom: 16px;
  background: var(--b-30);
}

.eyebrow span,
.eyebrow > b {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 300;
  color: var(--text-muted);
}

.eyebrow--center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lead {
  font-size: var(--fs-p-lg);
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.container--narrow {
  max-width: 920px;
}

.section {
  position: relative;
  padding: var(--pad-y) var(--pad-x);
  overflow: hidden;
  background: var(--black);
}

.section--alt {
  background: var(--surface-alt);
}

/* Banda destacada: casi el mismo negro, se distingue por los filetes */
.section--alt2 {
  background: var(--surface-alt-2);
  border-block: 1px solid var(--b-06);
}

.section--tight {
  padding-block: var(--pad-y2);
}

.section--center {
  text-align: center;
}

.section-head {
  margin-bottom: var(--gap-md);
}

.section-head h2 {
  margin-bottom: 18px;
}

.section-head p {
  max-width: 54ch;
  font-size: var(--fs-p-md);
  color: var(--text-muted);
}

/* Rejillas de tarjetas: 1 col en movil, 2 en tablet, n en escritorio */
.grid {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .grid--3,
  .grid--4,
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 901px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Dos columnas asimetricas (media + texto) */
.split {
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: 1fr;
  align-items: start;
}

.split--center {
  align-items: center;
}

@media (min-width: 901px) {
  .split {
    grid-template-columns: 1fr 1.15fr;
  }
}

/* ==========================================================================
   5. UTILIDADES
   ========================================================================== */

.text-white {
  color: var(--white);
}
.text-muted {
  color: var(--text-muted);
}
.text-center {
  text-align: center;
}
.mx-auto {
  margin-inline: auto;
}
.mb-md {
  margin-bottom: var(--gap-md);
}
.mt-md {
  margin-top: var(--gap-md);
}
.relative {
  position: relative;
}

.z-content {
  position: relative;
  z-index: var(--z-content);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--black);
  font-family: var(--font-display);
  font-size: 0.8rem;
  transition: top var(--t-fast) var(--ease);
}

.skip-link:focus {
  top: 16px;
}

body.is-locked {
  overflow: hidden;
}

/* El contenido se desplaza para dejar sitio al rail vertical fijo */
@media (min-width: 901px) {
  .page {
    padding-left: var(--rail-w);
  }
}