/* ==========================================================================
   BRIGHTLOOP — BASE
   Reset, elementos, tipografía y layout primitivo.
   Ningún valor literal: todo sale de tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-6));
  /* Elimina el salto de layout al aparecer la barra de scroll */
  scrollbar-gutter: stable;
}

body {
  min-height: 100svh;
  background-color: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: calc(var(--fs-body) * var(--font-body-scale));
  font-weight: var(--fw-normal);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;   /* nunca falsear un peso */
  overflow-x: clip;
}

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

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

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

ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

/* Los titulares y toda la interfaz son Switzer; sólo el texto corrido cambia */
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  text-wrap: balance;   /* B8 — sin viudas en titulares */
}

:where(p, li) { text-wrap: pretty; }

hr {
  border: 0;
  border-top: 1px solid var(--border-hairline);
}

/* Gris, nunca el acento: subrayar un párrafo es leer, no una acción de marca */
::selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}


/* --------------------------------------------------------------------------
   2. FOCO — anillo propio, nunca el del navegador
   -------------------------------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Enlace de salto para teclado */
.skip-link {
  position: absolute;
  inset-inline-start: var(--sp-4);
  inset-block-start: var(--sp-4);
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background-color: var(--action-bg);
  color: var(--action-text);
  border-radius: var(--r-sm);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  transform: translateY(calc(-100% - var(--sp-6)));
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }


/* --------------------------------------------------------------------------
   3. MOVIMIENTO REDUCIDO — E3
   -------------------------------------------------------------------------- */

@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;
  }
}


/* ==========================================================================
   4. TIPOGRAFÍA — roles, no tamaños sueltos
   Cada clase fija tamaño + tracking + interlineado juntos, porque los tres
   son una sola decisión óptica.
   ========================================================================== */

.t-display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display-1);
  font-weight: var(--fw-medium);
}

.t-display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display-2);
  font-weight: var(--fw-medium);
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-h1);
  font-weight: var(--fw-medium);
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-h2);
  font-weight: var(--fw-medium);
}

.t-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  font-weight: var(--fw-medium);
}

.t-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.35;
  letter-spacing: var(--tr-h4);
  font-weight: var(--fw-medium);
}

.t-lead {
  font-family: var(--font-body);
  font-size: calc(var(--fs-body-lg) * var(--font-body-scale));
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  color: var(--text-secondary);
  max-width: var(--measure-lead);
}

.t-body    { font-family: var(--font-body); font-size: calc(var(--fs-body)    * var(--font-body-scale)); line-height: var(--lh-body); }
.t-body-sm { font-family: var(--font-body); font-size: calc(var(--fs-body-sm) * var(--font-body-scale)); line-height: var(--lh-body); letter-spacing: var(--tr-small); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-ui);   letter-spacing: var(--tr-small); color: var(--text-tertiary); }

/* Micro-etiqueta. FUE mono, en versalitas y con tracking abierto; era la
   firma tipográfica de la marca y hoy está RETIRADA en esa forma (listón
   A15). La clase sigue existiendo para no romper el marcado que ya la usa,
   pero pinta lo que pinta ahora el sistema: Switzer, caja baja, sin tracking.
   Ninguna etiqueta de la web vuelve a ir en mayúsculas. */
.t-micro {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
  letter-spacing: var(--tr-small);
  color: var(--text-tertiary);
}
/* El tracking abierto era parte del look retirado: ya no hace nada */
.t-micro--wide { letter-spacing: var(--tr-small); }

/* Etiqueta de grupo: la versión callada de .t-micro. Sin mono, sin mayúsculas
   y sin tracking. Ordena la página igual, pero no compite con los titulares:
   es lo que se usa cuando la etiqueta acompaña, no cuando es el dato. */
.t-label {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
  letter-spacing: var(--tr-small);
  color: var(--text-tertiary);
}

.t-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Cifras: siempre tabulares para que las columnas cuadren — B4 */
.t-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-h2);
}

.t-secondary { color: var(--text-secondary); }
.t-tertiary  { color: var(--text-tertiary); }
.t-accent    { color: var(--text-accent); }

/* Prosa larga */
.prose {
  font-family: var(--font-body);
  font-size: calc(var(--fs-body) * var(--font-body-scale));
  max-width: var(--measure-prose);
  line-height: var(--lh-prose);
  color: var(--text-secondary);
}
.prose > * + * { margin-block-start: var(--sp-5); }
.prose strong  { color: var(--text-primary); font-weight: var(--fw-medium); }


/* --------------------------------------------------------------------------
   5. ENLACES — subrayado que crece desde el borde inferior del texto,
   no un `text-decoration` por defecto.
   -------------------------------------------------------------------------- */

.link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-block-end: 2px;
  transition: background-size var(--dur-base) var(--ease-out),
              color var(--dur-instant) var(--ease-in-out);
}
.link:hover { background-size: 0% 1px; background-position: 100% 100%; }

/* Variante inversa: el subrayado aparece al pasar */
.link-reveal {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-block-end: 3px;
  transition: background-size var(--dur-base) var(--ease-out);
}
.link-reveal:hover { background-size: 100% 2px; }


/* ==========================================================================
   6. LAYOUT
   ========================================================================== */

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

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

.narrow { max-width: var(--narrow-max); }

/* Tres ritmos de sección distintos: A4 exige que no todo respire igual */
.section     { padding-block: var(--section-pad); }
.section--sm { padding-block: var(--section-pad-sm); }
.section--lg { padding-block: var(--section-pad-lg); }

/* Regla estructural a sangre: el recurso suizo que ordena la página */
.rule {
  height: 1px;
  background-color: var(--border-hairline);
  border: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.stack > * + * { margin-block-start: var(--stack-gap, var(--sp-5)); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--sp-3));
}

/* Cabecera de sección: índice mono + kicker + titular.
   Es el patrón que se repite en toda la web y le da ritmo. */
.section-head {
  display: grid;
  gap: var(--sp-4);
  margin-block-end: clamp(var(--sp-8), 4vw, var(--sp-11));
}
.section-head__index {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.section-head__index::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--border-hairline);
  transform: translateY(-3px);
}


/* --------------------------------------------------------------------------
   7. UTILIDADES
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

.surface-ink {
  background-color: var(--surface-page);
  color: var(--text-primary);
}