/* ==========================================================================
   BASE — tipografía y comportamientos de documento.
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 400;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  color: var(--ink);
}

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

p {
  color: var(--ink-soft);
  max-width: 62ch;
}

.eyebrow,
.label,
.meta {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--muted);
}

.price {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-price);
  font-weight: 600;
  color: var(--ink);
}

a {
  transition: color var(--dur-fast) var(--ease-soberano);
}

::selection {
  background: var(--seal);
  color: var(--paper);
}

/* Foco visible custom en toda la interfaz */
:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Scrollbar fina */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--stone-dark) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: var(--stone-dark);
  border-radius: var(--radius-sm);
}

*::-webkit-scrollbar-track {
  background: transparent;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-3) var(--space-5);
  z-index: 200;
  transition: top var(--dur-base) var(--ease-soberano);
}

.skip-link:focus {
  top: var(--space-4);
}

.divider-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--muted);
}

.divider-line::before,
.divider-line::after {
  content: "";
  height: 1px;
  width: 32px;
  background: var(--line);
}