/* Base: reinicio mínimo, tipografía y foco. Lo comparten la tienda y el panel. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

/* Foco visible en todo lo que se alcanza con teclado. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--f-display); font-weight: 400; text-wrap: balance; margin: 0; line-height: 1.1; }
h4 { font-family: var(--f-caps); font-weight: 400; letter-spacing: .1em; margin: 0; }

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 16px; }
.eyebrow { font-family: var(--f-caps); letter-spacing: .14em; font-size: 13px; color: var(--stem-deep); text-transform: uppercase; }
.muted { color: var(--muted); }

/* «Saltar al contenido»: primer elemento enfocable, sólo visible con el foco. */
.saltar {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--card); color: var(--ink); padding: 10px 16px;
  border-radius: var(--r-sm); box-shadow: var(--shadow);
}
.saltar:focus { top: 12px; }

/* Texto sólo para lectores de pantalla. */
.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;
}

.icon {
  width: 24px; height: 24px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}