/* ============================================================================
   base.css — Reset, tipografía y helpers de layout · mobile-first
   Depende de tokens.css. Sin hex crudos: solo var(--token).
   ========================================================================== */

/* Animaciones del portal (CSS puro, centralizadas). Los @import deben ir antes
   de cualquier regla; así las 11 vistas los cargan sin tocar su HTML. */
@import url("animations.css");
@import url("print.css") print;

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

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;   /* guard contra desbordamiento horizontal en móvil */
}

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

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

button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

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

/* ----------------------------------------------------------- Tipografía */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: 1.25;
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.overline {
  font-family: var(--font-head);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

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

/* ------------------------------------------------------------- A11y */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -3rem;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--brand-primary);
  color: var(--text-inverse);
  border-radius: var(--radius-badge);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-2); }

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

/* Foco visible consistente en todo elemento interactivo */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-badge);
}

/* ------------------------------------------------------- Helpers layout */
.is-hidden { display: none !important; }
.print-only { display: none !important; }   /* visible solo en papel (print.css) */

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

.stack > * + * { margin-top: var(--space-4); }

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

/* ------------------------------------------- Marca (logo intercambiable) */
/* ÚNICA referencia al asset de marca blanca en todo el sitio: cambiar de
   marca = reemplazar assets/img/brand/logo.svg, sin tocar código.
   background-size: contain + origin: content-box → cualquier proporción de
   logo cabe sin deformarse, con aire dado por el padding. El SVG inline del
   markup (globo placeholder) queda oculto; al migrar a HubSpot puede
   eliminarse de la plantilla. Vive en base.css porque lo cargan TODAS las
   páginas (sidebar, login y guía de componentes). */
.brand__mark {
  display: block;
  width: 36px;
  height: 36px;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  background-image: url("../img/brand/logo.svg"), var(--grad-primary);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: contain, cover;
  background-origin: content-box, border-box;
}
.brand__mark svg { display: none; }