/* ============================================================
   BASE — Tipografía variable + utilidades expresivas
   ============================================================ */

/* ════════════════════════════════════════════════════════
   TIPOGRAFÍA — Bricolage Grotesque variable como protagonista
   ════════════════════════════════════════════════════════ */

.display-hero,
h1.display-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
  color: var(--ink-900);
  font-variation-settings: "wdth" 90, "opsz" 96;
}

.display-mega {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
  font-variation-settings: "wdth" 85, "opsz" 96;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tighter);
  color: var(--ink-900);
  font-variation-settings: "wdth" 92, "opsz" 60;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
  font-variation-settings: "wdth" 95, "opsz" 40;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snugger);
  letter-spacing: var(--ls-snug);
  color: var(--ink-900);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snugger);
  letter-spacing: var(--ls-snug);
  color: var(--ink-900);
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snugger);
}

h6, .h6 {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--ink-500);
}

p {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--ink-600);
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink-500);
  font-weight: var(--fw-regular);
  text-wrap: pretty;
  max-width: 60ch;
}


/* ════════════════════════════════════════════════════════
   EYEBROW — etiqueta con triángulo (eco del logo)
   ════════════════════════════════════════════════════════ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: var(--space-5);
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--brand-500);
}

.eyebrow--ink { color: var(--ink-500); }
.eyebrow--ink::before { border-top-color: var(--ink-700); }

.eyebrow--white { color: rgba(255, 255, 255, 0.85); }
.eyebrow--white::before { border-top-color: rgba(255, 255, 255, 0.85); }


/* ════════════════════════════════════════════════════════
   UTILIDADES TIPOGRÁFICAS
   ════════════════════════════════════════════════════════ */

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "ss01";
  letter-spacing: var(--ls-snug);
}

.price {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-feature-settings: "tnum";
  letter-spacing: var(--ls-snug);
}

.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% 200%;
  background-position: 0% 50%;
}

/* Tracking ultra-amplio para etiquetas técnicas (estilo arquitectónico) */
.tech-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mega);
  text-transform: uppercase;
  color: var(--ink-400);
}


/* ════════════════════════════════════════════════════════
   ENLACES inline
   ════════════════════════════════════════════════════════ */

.prose a, p a {
  color: var(--brand-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--brand-300);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--duration-base) var(--ease-out-cubic),
              color var(--duration-base) var(--ease-out-cubic),
              text-decoration-thickness var(--duration-base) var(--ease-out-cubic);
}

.prose a:hover, p a:hover {
  color: var(--brand-900);
  text-decoration-color: var(--brand-700);
  text-decoration-thickness: 2px;
}


/* ════════════════════════════════════════════════════════
   PROSE
   ════════════════════════════════════════════════════════ */

.prose { max-width: 65ch; color: var(--ink-600); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2, .prose h3 { margin-top: var(--space-7); margin-bottom: var(--space-3); color: var(--ink-900); }
.prose h4 { margin-top: var(--space-6); margin-bottom: var(--space-2); color: var(--ink-900); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-block: var(--space-2); }
.prose strong { color: var(--ink-900); font-weight: var(--fw-semibold); }


/* ════════════════════════════════════════════════════════
   CONTAINERS
   ════════════════════════════════════════════════════════ */

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

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

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

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


/* ════════════════════════════════════════════════════════
   SECCIONES
   ════════════════════════════════════════════════════════ */

.section {
  padding-block: var(--section-py);
  position: relative;
}

.section--alt    { background-color: var(--bg-cool); }
.section--brand  { background: var(--brand-gradient); color: var(--bg-pure); }
.section--ink    { background-color: var(--ink-900); color: var(--bg-soft); }

.section--brand h1, .section--brand h2, .section--brand h3, .section--brand h4 { color: var(--bg-pure); }
.section--brand p, .section--brand .lead { color: var(--brand-100); }

.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--bg-pure); }
.section--ink p, .section--ink .lead { color: var(--ink-200); }


/* ════════════════════════════════════════════════════════
   UTILIDADES
   ════════════════════════════════════════════════════════ */

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

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--ink-900);
  color: var(--bg-pure);
  padding: var(--space-3) var(--space-5);
  z-index: var(--z-modal);
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--space-4); }

.text-center { text-align: center; }
.text-left   { text-align: left; }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.stack    > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }
.stack-xl > * + * { margin-top: var(--space-8); }

.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2           { gap: var(--space-2); }
.gap-4           { gap: var(--space-4); }
.gap-6           { gap: var(--space-6); }