/* ==========================================================================
   VERSA Studio · Base styles
   Reset, fonts, tipografía base, utilities.
   ========================================================================== */

/* ---------- Font faces ---------- */
@font-face {
  font-family: 'Acumin Pro';
  src: url('../assets/fonts/Acumin-RPro.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Acumin Pro';
  src: url('../assets/fonts/Acumin-BdPro.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset moderno ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--carbon);
  color: var(--crema);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

img {
  image-rendering: -webkit-optimize-contrast;
}

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

button {
  cursor: pointer;
  background: transparent;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default),
              opacity var(--duration-fast) var(--ease-default);
}

a:hover { color: var(--mostaza); }

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

/* ---------- HTML5 hidden con prioridad ---------- */
[hidden] { display: none !important; }

/* ---------- Tipografía base ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

/* Headlines grandes: Bold + tracking más cerrado para presencia visual */
h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: var(--tracking-tighter);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--tracking-tighter);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-normal);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
}

h4 {
  font-size: var(--fs-body-lg);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
}

/* Hero headlines llevan tracking aún más cerrado por su tamaño */
.hero__headline,
.cta-final h2 {
  letter-spacing: -0.05em;
}

p { font-size: var(--fs-body); line-height: var(--lh-loose); }

strong { font-weight: 500; }
em { font-style: italic; }

/* Selección de texto */
::selection {
  background: var(--mostaza);
  color: var(--carbon);
}

/* ---------- Utilities ---------- */

/* Container ancho controlado con padding lateral fluido */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Columna estrecha de lectura. Se alinea a la izquierda, igual que los
   .section-header, para que el primer bloque de cada sección no quede
   centrado mientras el resto de la sección cuelga a la izquierda. */
.container-narrow {
  max-width: 880px;
  margin-inline: 0;
  padding-inline: var(--container-padding);
}

/* Reparte el texto entre líneas en lugar de dejar una palabra suelta abajo.
   Pensado para titulares cortos ("Tu momento empieza aquí."), donde un
   huérfano se nota. Los navegadores sin soporte simplemente lo ignoran. */
.text-balance {
  text-wrap: balance;
}

/* Stack vertical con gap configurable */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.stack-lg { gap: var(--space-lg); }
.stack-xl { gap: var(--space-xl); }
.stack-2xl { gap: var(--space-2xl); }

/* Stack para forms: separación generosa entre fields */
.stack-form { display: flex; flex-direction: column; gap: var(--space-xl); }
.stack-form > .submit-row { margin-top: var(--space-md); }

/* Cluster horizontal con wrap */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

/* Sección a sangre con padding vertical generoso */
.section {
  padding-block: var(--space-3xl);
}

@media (min-width: 1024px) {
  .section { padding-block: var(--space-4xl); }
}

.section-tight { padding-block: var(--space-2xl); }

/* Fondos de sección (ritmo carbón ↔ crema) */
.bg-carbon { background: var(--carbon); color: var(--crema); }
.bg-carbon-lighter { background: var(--carbon-lighter); color: var(--crema); }
.bg-carbon-deep { background: var(--carbon-deep); color: var(--crema); }
.bg-crema { background: var(--crema); color: var(--carbon); }

/* Textos especiales */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mostaza);
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}

.muted { opacity: 0.6; }

/* Hidden visualmente pero accesible para lectores */
.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;
}

/* Focus visible accesible */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

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