@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,400;9..144,0,500;9..144,0,600;9..144,0,900;9..144,1,500&family=Inter:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; }

/* Foco visible para navegación por teclado (accesibilidad) */
:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; border-radius: 4px; }

.container { width: 100%; max-width: 480px; margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section-y); }
.eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--sea); }

/* Solo para lectores de pantalla (texto que existe para SEO/accesibilidad pero no se ve). */
.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; }

@media (min-width: 768px) {
  :root { --fs-hero: 64px; --fs-h2: 34px; --fs-h3: 22px; --fs-body: 16px; }
  /* 1360 y no 1100: con el sidebar de filtros restando, a 1100 las tarjetas quedaban
     en ~260px y la foto del producto se veía pequeña. Aquí llegan a ~350px. */
  .container { max-width: 1360px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}