@font-face { font-family: "Bricolage Grotesque"; font-weight: 600 800; font-stretch: 75% 100%; font-display: swap; src: url("../../fuentes/bricolage-grotesque-latin.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400 700; font-display: swap; src: url("../../fuentes/figtree-latin.woff2") format("woff2"); }
/* Lupe: una tienda chica de barrio. Bordó, rosa empolvado y papel claro. */
:root {
  --fondo: #faf6f3; --superficie: #ffffff; --tinta: #2a1b1f; --suave: #6b5359; --linea: #eadcd6;
  --marca: #7a2e45; --marca-tinta: #ffffff; --suave-marca: #f3e3e6; --agotado: #9a8a8e;
  --titulos: "Bricolage Grotesque", Georgia, serif; --texto: "Figtree", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fondo: #1a1214; --superficie: #241a1d; --tinta: #f5e9ec; --suave: #c7b2b8; --linea: #3b2c31;
  --marca: #e08aa2; --marca-tinta: #2a1b1f; --suave-marca: #3a2229; --agotado: #8c7b80; color-scheme: dark; } }
:root[data-theme="dark"] { --fondo: #1a1214; --superficie: #241a1d; --tinta: #f5e9ec; --suave: #c7b2b8; --linea: #3b2c31; --marca: #e08aa2; --marca-tinta: #2a1b1f; --suave-marca: #3a2229; --agotado: #8c7b80; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 1rem/1.5 var(--texto); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; border-radius: 4px; }
.aviso { background: var(--tinta); color: var(--fondo); text-align: center; font-size: 0.9rem; padding: 9px 16px; }
.aviso a { color: inherit; font-weight: 700; }
.envoltura { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
header.tienda { padding-block: 36px 24px; display: grid; gap: 10px; }
.tienda h1 { margin: 0; font: 800 clamp(3.4rem, 12vw, 6rem)/0.85 var(--titulos); color: var(--marca); letter-spacing: -0.03em; }
.tienda p { margin: 0; color: var(--suave); }
.estado { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.estado i { width: 9px; height: 9px; border-radius: 50%; background: #2f8a55; }
.temporada { margin-top: 8px; background: var(--suave-marca); border-radius: 14px; padding: 18px 20px; display: grid; gap: 4px; }
.temporada strong { font: 700 1.5rem/1.1 var(--titulos); }
.filtros { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--superficie); cursor: pointer; font-weight: 600; }
.filtros button[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.grilla { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.producto { background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; display: grid; }
.producto .foto { aspect-ratio: 4 / 4.4; background: var(--suave-marca); display: grid; place-items: center; }
.producto .foto svg { width: 62%; height: auto; }
@media (max-width: 520px) { .producto .foto { aspect-ratio: 16 / 10; } .producto .foto svg { width: auto; height: 82%; } }
.producto .datos { padding: 14px 16px 16px; display: grid; gap: 10px; }
.producto h2 { margin: 0; font: 700 1.15rem/1.15 var(--titulos); }
.producto .precio { font-weight: 700; font-variant-numeric: tabular-nums; }
.opciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.opciones legend { width: 100%; font-size: 0.82rem; color: var(--suave); margin-bottom: 4px; padding: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.color { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--linea); cursor: pointer; display: grid; place-items: center; background: transparent; padding: 0; }
.color span { width: 26px; height: 26px; border-radius: 50%; display: block; border: 1px solid rgba(0,0,0,.15); }
.color[aria-pressed="true"] { border-color: var(--tinta); }
.talle { min-width: 44px; min-height: 44px; border-radius: 10px; border: 1.5px solid var(--linea); background: transparent; cursor: pointer; font-weight: 700; }
.talle[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.talle:disabled { color: var(--agotado); text-decoration: line-through; cursor: not-allowed; }
.consultar { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; background: var(--marca); color: var(--marca-tinta); font-weight: 700; text-decoration: none; text-align: center; padding: 0 16px; }
.info { margin-block: 48px 40px; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 2px solid var(--tinta); padding-top: 24px; }
.info h2 { margin: 0 0 6px; font: 700 1.1rem/1.2 var(--titulos); }
.info p { margin: 0; color: var(--suave); }
.pie { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); color: var(--suave); font-size: 0.9rem; }