:root {
  --fondo: #fde6d8;   /* melocotón suave */
  --papel: #fffaf6;
  --tinta: #2a1d1a;
  --suave: #7d5f55;
  --borde: #f3cdb8;
  --acento: #d9486f;
  --acento-tinta: #ffffff;
  --ok: #1f7a4d;
  --mal: #b3261e;
  --sombra: 0 1px 2px rgba(42, 29, 26, .06), 0 8px 24px rgba(42, 29, 26, .06);
  --radio: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #171213; --papel: #221b1c; --tinta: #f3e9e5; --suave: #b6a39d; --borde: #3a2e2f;
    --acento: #ff6f94; --acento-tinta: #1c0f13; --ok: #5bd39a; --mal: #ff8a80;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #171213; --papel: #221b1c; --tinta: #f3e9e5; --suave: #b6a39d; --borde: #3a2e2f;
  --acento: #ff6f94; --acento-tinta: #1c0f13; --ok: #5bd39a; --mal: #ff8a80;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  max-width: 1100px; margin: 0 auto; padding: 1.25rem 16px;
}
.marca { display: flex; align-items: center; gap: .8rem; }
.logo { font-size: 2.4rem; line-height: 1; }
h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.01em; }
.sub { margin: 0; color: var(--suave); font-size: .95rem; }
.acciones { display: flex; gap: .5rem; align-items: center; }

button { font: inherit; cursor: pointer; border-radius: 999px; padding: .55rem 1.1rem; border: 1px solid transparent; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.principal { background: var(--acento); color: var(--acento-tinta); font-weight: 600; }
.fantasma { background: transparent; color: var(--tinta); border-color: var(--borde); }
.enlace { background: none; color: var(--suave); text-decoration: underline; padding: .4rem; }
.ancho { width: 100%; margin: .35rem 0; }

.aviso-red {
  max-width: 1100px; margin: 0 auto 1rem; padding: .6rem 16px; text-align: center;
  background: #fff3c4; color: #5a4300; border-radius: 10px;
}
.estado {
  max-width: 1100px; margin: 0 auto 1rem; padding: .75rem 1rem; border-radius: 10px;
  background: var(--papel); border: 1px solid var(--borde); box-shadow: var(--sombra);
  width: calc(100% - 32px);
}
.estado.ok { border-color: var(--ok); color: var(--ok); }
.estado.error { border-color: var(--mal); color: var(--mal); }
.estado a { color: inherit; font-weight: 600; }

main { max-width: 1100px; margin: 0 auto; padding: 0 16px 3rem; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.vacio { color: var(--suave); grid-column: 1 / -1; text-align: center; padding: 3rem 0; }
.pieza {
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: .75rem; display: flex; flex-direction: column; gap: .4rem;
}
.marco {
  aspect-ratio: 1 / 1; border-radius: 10px; background: #f7d9c8; overflow: hidden;
  display: grid; place-items: center; font-size: 3rem;
}
.marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pieza h3 { margin: .2rem 0 0; font-size: 1.02rem; line-height: 1.3; overflow-wrap: anywhere; }
.meta { margin: 0; color: var(--suave); font-size: .78rem; font-family: ui-monospace, monospace; }
.pie { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; }
.precio { font-weight: 700; font-size: 1.1rem; }
.stock { color: var(--suave); font-size: .85rem; }
.comprar { background: var(--acento); color: var(--acento-tinta); font-weight: 600; width: 100%; }
.nota { color: var(--suave); font-size: .85rem; text-align: center; margin-top: 2rem; }

.fondo {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: grid; place-items: center; padding: 16px; z-index: 10;
}
.fondo[hidden] { display: none; }
.dialogo {
  background: var(--papel); color: var(--tinta); border-radius: var(--radio); padding: 1.4rem;
  width: min(380px, 100%); box-shadow: var(--sombra); text-align: center;
}
.dialogo h2 { margin: 0 0 .8rem; font-size: 1.15rem; }
.qr-caja { margin: .8rem 0; }
.qr-caja canvas { background: #fff; border-radius: 10px; padding: 8px; max-width: 100%; height: auto; }
.qr-caja a { display: block; color: var(--acento); margin-top: .4rem; }

@media (max-width: 520px) {
  .cabecera { padding: 1rem 16px; }
  h1 { font-size: 1.35rem; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
  .precio { font-size: 1rem; }
}

/* Fotos difuminadas: se ven al tocar y se vuelven a tapar solas */
.marco { position: relative; }
.marco.sensible { cursor: pointer; }
.marco.sensible img {
  filter: blur(22px) saturate(.8); transform: scale(1.15);
  transition: filter .25s ease, transform .25s ease;
  -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; pointer-events: none;
}
.marco.sensible.visto img { filter: none; transform: none; }
.velo {
  position: absolute; inset: auto 8px 8px 8px; padding: .35rem .5rem; border-radius: 8px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: .78rem; text-align: center; line-height: 1.3;
  transition: opacity .2s ease;
}
.marco.sensible.visto .velo { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .marco.sensible img, .velo { transition: none; } }

/* Páginas legales y pie */
[data-idioma="es"] [lang="en"], [data-idioma="en"] [lang="es"] { display: none; }
.volver { text-decoration: none; }
.sub a { color: var(--suave); }
.legal { max-width: 760px; }
.indice { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.indice a {
  color: var(--tinta); text-decoration: none; padding: .4rem .9rem; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--papel);
}
.hoja {
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 1.2rem 1.4rem; margin-bottom: 1rem; scroll-margin-top: 1rem;
}
.hoja h2 { margin: 0 0 .6rem; font-size: 1.3rem; }
.hoja h3 { margin: 1.1rem 0 .3rem; font-size: 1.02rem; }
.hoja p, .hoja li { overflow-wrap: anywhere; }
.hoja a { color: var(--acento); }
.hoja ul { padding-left: 1.2rem; }
.pendiente { background: #fff3c4; color: #5a4300; padding: 0 .3rem; border-radius: 4px; font-weight: 600; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; margin-top: .6rem; font-size: .85rem; }
.pie-legal a { color: var(--suave); }

/* Piezas que son vídeo: mismo difuminado y un ▶ para saber que se mueven */
.marco video { width: 100%; height: 100%; object-fit: cover; display: block; }
.marco.sensible video {
  filter: blur(22px) saturate(.8); transform: scale(1.15);
  transition: filter .25s ease, transform .25s ease; pointer-events: none;
}
.marco.sensible.visto video { filter: none; transform: none; }
.marco.es-video::after {
  content: "▶"; position: absolute; top: 8px; right: 8px; width: 1.8rem; height: 1.8rem;
  display: grid; place-items: center; border-radius: 999px; font-size: .8rem;
  background: rgba(0, 0, 0, .55); color: #fff;
}
.marco.es-video.visto::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .marco.sensible video { transition: none; } }