/* ==========================================================================
   Base — fichas del sistema y primitivas
   ==========================================================================
   Dirección: Swiss Modernism 2.0. Retícula estricta, espaciado matemático
   sobre una unidad de 8 px, un solo acento y cero decoración que no informe.
   Lo «futurista» sale de la precisión —líneas de un pixel, marcas de esquina,
   numeración de secciones, tramas técnicas—, nunca de brillos ni de neón:
   el neón se lee mal y este sitio le habla a alguien que está decidiendo si
   nos da su plata.

   Antes de esta versión el sitio tenía diecinueve radios distintos y seis
   sombras a ojo. Eso es exactamente lo que se ve como «hecho a pedazos». Aquí
   hay cinco radios y tres sombras, y no se añade ninguno más sin quitar otro. */

:root {
  /* --- Color -------------------------------------------------------------
     Un solo acento (azul). La señal verde NO es decorativa: marca «esto está
     vivo» sobre superficies oscuras y nada más. Si aparece en dos sitios de la
     misma pantalla, uno de los dos está mal. */
  --fondo: #f4f4ee;
  --papel: #ffffff;
  --papel-2: #ecece5;
  --papel-3: #e3e3db;
  --tinta: #101114;
  --tinta-2: #1b1d22;
  --tinta-3: #2a2d34;
  --texto: #4f5158;
  --texto-suave: #666970;
  --linea: rgba(16, 17, 20, 0.13);
  --linea-fuerte: rgba(16, 17, 20, 0.24);
  --linea-clara: rgba(255, 255, 255, 0.16);
  --linea-clara-fuerte: rgba(255, 255, 255, 0.32);
  --azul: #4657f5;
  --azul-oscuro: #2635cf;
  --azul-tenue: rgba(70, 87, 245, 0.09);
  --signal: #c8ff4d;
  --naranja: #ff6b45;
  --violeta: #8b6cff;

  /* --- Espaciado ---------------------------------------------------------
     Unidad base de 8 px. Todo margen y todo relleno del sitio sale de esta
     escala; no se escriben valores sueltos. */
  --u: 0.5rem;
  --e1: 0.5rem;
  --e2: 1rem;
  --e3: 1.5rem;
  --e4: 2rem;
  --e5: 3rem;
  --e6: 4rem;
  --e7: 6rem;
  --e8: 8rem;

  /* --- Radios ------------------------------------------------------------
     Cinco. Apretados a propósito: el radio grande y blando lee «aplicación
     amable»; el radio corto lee «instrumento». Ninguna píldora. */
  --radio-xs: 6px;
  --radio-sm: 10px;
  --radio-md: 14px;
  --radio-lg: 20px;
  --radio-xl: 28px;

  /* --- Retícula ----------------------------------------------------------- */
  --contenedor: 84rem;
  --columnas: 12;
  --canal: clamp(1.25rem, 4vw, 3.5rem);
  --calle: clamp(1rem, 1.6vw, 1.5rem);

  /* Alto real de las barras que flotan sobre el contenido. De aquí salen
     `scroll-padding` y `scroll-margin`: si cambia el alto de la nav, se cambia
     aquí y las anclas siguen cayendo debajo de la barra, no detrás. */
  --nav-alto: 4.75rem;
  --indice-alto: 3.7rem;

  /* --- Tipografía --------------------------------------------------------- */
  --display: 'Outfit', 'Arial Narrow', system-ui, sans-serif;
  --cuerpo: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Sombras ------------------------------------------------------------
     Dos capas cada una: un contacto de 1–4 px que asienta la pieza y una caída
     ancha y muy diluida. Las sombras blandas de antes hacían flotar todo a la
     misma altura, que es como no tener jerarquía. */
  --sombra-sm: 0 1px 2px rgba(16, 17, 20, 0.05), 0 8px 24px -14px rgba(16, 17, 20, 0.22);
  --sombra-md: 0 2px 4px rgba(16, 17, 20, 0.06), 0 18px 44px -22px rgba(16, 17, 20, 0.28);
  --sombra-lg: 0 4px 10px rgba(16, 17, 20, 0.07), 0 40px 90px -36px rgba(16, 17, 20, 0.38);

  /* --- Trama técnica ------------------------------------------------------
     La retícula de fondo. Es la misma medida en todo el sitio, así que las
     secciones oscuras y las claras comparten pauta aunque no se toquen. */
  --trama-paso: 4.5rem;
  --trama-clara: rgba(16, 17, 20, 0.032);
  --trama-oscura: rgba(255, 255, 255, 0.05);

  /* --- Movimiento --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-salida: cubic-bezier(0.4, 0, 0.2, 1);
  --rapido: 160ms;
  --medio: 260ms;
  --lento: 420ms;

  /* --- Capas -------------------------------------------------------------- */
  --z-fondo: 0;
  --z-contenido: 10;
  --z-sticky: 30;
  --z-nav: 50;
  --z-velo: 49;
}

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-alto) + var(--e3));
  -webkit-text-size-adjust: 100%;
  /* `overflow-x: clip` sólo en body deja que el elemento raíz siga paneando en
     iOS. Hace falta en los dos, y `overscroll-behavior-x` mata el rebote
     horizontal que deja arrastrar la página fuera de sus límites. */
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body {
  position: relative;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1rem;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* La trama NO va sobre el documento entero. Se probó y se quitó: unas secciones
   traen fondo opaco y otras no, así que la retícula aparecía sólo en las
   franjas destapadas y el resultado eran bandas horizontales de rejilla que
   parecían un error de maquetación.

   Ahora la trama significa algo: marca las superficies técnicas —el hero y los
   bloques oscuros— y en el resto del sitio no está. Si vuelve a hacer falta en
   una sección nueva, se le pone la clase `.trama`, no se pinta el body. */

img,
picture,
svg {
  display: block;
  max-inline-size: 100%;
}

img {
  block-size: auto;
}

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

button {
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

/* `hidden` tiene que ganar siempre. El valor por defecto del atributo es
   `display: block`, así que cualquier regla que ponga `flex`, `grid` o
   `inline-flex` lo anula sin avisar. */
[hidden] {
  display: none !important;
}

/* --- Tipografía ---------------------------------------------------------
   Escala contenida a propósito: con máximos mayores cada titular ocupaba tres
   o cuatro líneas y empujaba fuera de pantalla lo que de verdad vende. Los
   mínimos siguen mandando en móvil. */
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.7rem, 5.6vw, 4.9rem);
}

h2 {
  font-size: clamp(2.1rem, 3.9vw, 3.5rem);
}

p {
  text-wrap: pretty;
}

em {
  color: var(--azul);
  font-style: normal;
}

::selection {
  background: var(--signal);
  color: var(--tinta);
}

/* --- Retícula ------------------------------------------------------------ */
.contenedor {
  position: relative;
  z-index: var(--z-contenido);
  inline-size: min(calc(100% - var(--canal) - var(--canal)), var(--contenedor));
  margin-inline: auto;
}

.seccion {
  position: relative;
  padding-block: clamp(4.5rem, 7.5vw, 7rem);
}

/* Retícula de doce columnas para quien la necesite. El resto del sitio usa
   rejillas locales, pero todas se alinean a esta calle. */
.rejilla {
  display: grid;
  grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
  gap: var(--calle);
}

/* --- Utilidades ---------------------------------------------------------- */
.iconos {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

.solo-lectores {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--radio-xs);
  background: var(--signal);
  color: var(--tinta);
  font-weight: 600;
  translate: 0 -150%;
  transition: translate var(--rapido) var(--ease);
}

.saltar:focus-visible {
  translate: 0;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: var(--radio-xs);
}

/* --- Etiqueta de sección -------------------------------------------------
   El micro-rótulo que abre cada bloque. Lleva una marca cuadrada (no un punto:
   el cuadrado es la primitiva de la retícula), el texto en versalitas y una
   línea que se come el espacio sobrante hasta el número de sección.

   La numeración sale de un contador de CSS sobre `main > section`, así que no
   hay que escribir «03» a mano en ningún HTML ni recordar renumerar cuando se
   mueva un bloque. */
main {
  counter-reset: seccion;
}

main > section {
  counter-increment: seccion;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--texto-suave);
  font-family: var(--display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.eyebrow > span {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  flex: none;
  border-radius: 1px;
  background: var(--azul);
  rotate: 45deg;
}

/* La línea y el número: decorativos, así que se esconden del lector de
   pantalla con `aria-hidden` implícito (son contenido generado). */
.eyebrow::before {
  content: '';
  order: 3;
  flex: 1 1 auto;
  min-inline-size: var(--e2);
  max-inline-size: 12rem;
  block-size: 1px;
  background: var(--linea);
}

.eyebrow::after {
  content: counter(seccion, decimal-leading-zero);
  order: 4;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* --- Botones -------------------------------------------------------------
   Sin píldoras. Altura mínima de 48 px (por encima del mínimo táctil de 44) y
   radio corto: el botón tiene que leerse como un control, no como una etiqueta
   de precio. */
.boton {
  display: inline-flex;
  min-block-size: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.8rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color var(--rapido) var(--ease), background-color var(--rapido) var(--ease),
    border-color var(--rapido) var(--ease), box-shadow var(--rapido) var(--ease),
    translate var(--rapido) var(--ease);
}

.boton svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  flex: none;
  transition: translate var(--rapido) var(--ease);
}

.boton:hover svg {
  translate: 0.2rem 0;
}

.boton:active {
  translate: 0 1px;
}

.boton--primario {
  background: var(--tinta);
  color: white;
}

.boton--primario:hover {
  background: var(--azul);
  box-shadow: 0 10px 26px -12px rgba(70, 87, 245, 0.7);
}

.boton--secundario {
  border-color: var(--linea-fuerte);
  background: transparent;
  color: var(--tinta);
}

.boton--secundario:hover {
  border-color: var(--tinta);
  background: var(--papel);
}

/* --- Marcas de esquina ---------------------------------------------------
   El único guiño abiertamente futurista del sistema: dos escuadras finas en
   las esquinas de una pieza, como la mira de un visor. Se pone con la clase
   `.escuadras` y sólo en piezas que ya son importantes; repartido por toda la
   página deja de significar nada. */
.escuadras {
  position: relative;
}

.escuadras::before,
.escuadras::after {
  content: '';
  position: absolute;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  pointer-events: none;
  opacity: 0.55;
}

.escuadras::before {
  inset-block-start: 0.6rem;
  inset-inline-start: 0.6rem;
  border-block-start: 1px solid currentColor;
  border-inline-start: 1px solid currentColor;
}

.escuadras::after {
  inset-block-end: 0.6rem;
  inset-inline-end: 0.6rem;
  border-block-end: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Transiciones entre páginas (View Transitions) — NO ACTIVAR ---------------
   Se probó `@view-transition { navigation: auto; }` para animar el salto entre
   páginas. En Chromium 149 congela el renderizado del documento nuevo:
   requestAnimationFrame deja de dispararse y la página queda muerta después de
   navegar. Se reprodujo con la regla desnuda, sin view-transition-name ni
   animaciones propias, así que no es cosa de cómo se configuró.

   Lo que sí da fluidez está en el <head>: las speculation rules prerenderizan
   la página de destino al pasar el cursor, y el salto es instantáneo. Eso vale
   más que un fundido. Si algún día se reintenta esto, `npm run check` lo
   detecta: el test del puente entre páginas se queda colgado. */