/* Base · reset, tipografía y primitivas de composición.
 * Depende de tokens.css. No define ningún componente: eso vive en componentes.css.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-ui);
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-ui);
  line-height: var(--interlinea-cuerpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  line-height: var(--interlinea-titulo);
  letter-spacing: var(--tracking-hero);
  text-wrap: balance;
}
h1 { font-size: var(--t-hero); line-height: var(--interlinea-hero); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.01em; }

p { margin: 0; text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-rapida) var(--curva);
}
a:hover { text-decoration-color: currentColor; }

img, svg { max-width: 100%; height: auto; display: block; }

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

/* El foco visible NO se quita. Es la única forma de navegar con teclado, y un sitio
 * de ventas que no se puede tabular pierde a quien no usa ratón. */
:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
  border-radius: var(--r-chico);
}

::selection { background: var(--acento-tenue); color: var(--texto); }

/* ── primitivas de composición ─────────────────────────────────────────────── */

.envoltura {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
}

.franja { padding-block: var(--franja-y); }

/* Franja en tinta: la tarjeta oscura de bordes muy redondeados, como la que usa
 * Anthropic bajo su hero. Se separa del papel por radio y color, no por línea. */
.franja--tinta {
  background: var(--tinta);
  color: var(--papel);
  border-radius: var(--r-bloque);
  margin-inline: clamp(0.75rem, 0.3rem + 1.8vw, 2rem);
}
.franja--tinta .etiqueta { color: var(--acento); }
.franja--tinta .apagado { color: var(--suave-osc); }
.franja--tinta a { color: var(--papel); }

.medida { max-width: var(--ancho-texto); }
.apagado { color: var(--texto-2); }
.centrado { text-align: center; margin-inline: auto; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--texto-2);
}

/* ── la etiqueta con regla ámbar · gesto de firma de la marca ──────────────── */
/* Sale del carrusel de Weasy (docs/weasy/social/): una regla ámbar corta encima de
 * una etiqueta en versalitas. Es lo único que se repite en todo el sistema, y por eso
 * es lo que hace reconocible una franja aunque se vea fuera de contexto. */
.etiqueta {
  display: inline-flex;
  flex-direction: column;
  gap: var(--e3);
  font-family: var(--fuente-ui);
  font-size: var(--t-micro);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--marca);
}
.etiqueta::before {
  content: "";
  width: 2.75rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.centrado .etiqueta { align-items: center; }

/* ── rejilla ───────────────────────────────────────────────────────────────── */
.rejilla { display: grid; gap: var(--e6); }
@media (min-width: 720px) {
  .rejilla--2 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  /* Hero asimétrico: titular grande a la izquierda, cuerpo a la derecha. Es la
   * composición de Anthropic, y funciona porque el ojo no compite entre dos bloques
   * del mismo peso. */
  .rejilla--hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--e8); align-items: end; }
}

.pila { display: flex; flex-direction: column; }
.pila--2 { gap: var(--e2); } .pila--4 { gap: var(--e4); }
.pila--5 { gap: var(--e5); } .pila--6 { gap: var(--e6); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4); }

/* ── entrada al hacer scroll ───────────────────────────────────────────────── */
/* Una sola animación en todo el sitio, y sólo de entrada. Nada en bucle: las tres
 * referencias medidas no tienen un solo elemento que se repita. */
/* El ocultamiento se acota a `html.js`, que pone una línea en línea en el <head>. Sin
 * esa guarda, un JS que no corre —módulo que no importa, red que falla, extensión que
 * bloquea— deja la página EN BLANCO de la mitad para abajo, formulario incluido. Medido:
 * con JS desactivado quedaban 30 de 30 bloques invisibles. */
html.js .aparece {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-lenta) var(--curva), transform var(--dur-lenta) var(--curva);
}
html.js .aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .aparece { opacity: 1; transform: none; transition: none; }
}

.salta-al-contenido {
  position: absolute;
  left: -9999px;
  top: var(--e4);
  background: var(--tinta);
  color: var(--papel);
  padding: var(--e3) var(--e5);
  border-radius: var(--r-pastilla);
  z-index: 100;
}
.salta-al-contenido:focus { left: var(--e4); }