/* ==================================================================
   MD Shop: estilos
   Paleta y tipografía en :root. Cambia aquí y se aplica en todo.
   ================================================================== */

:root {
  /* Paleta: piedra de la fachada, lino, latón de los escaparates */
  --crema: #F2ECE1;
  --lino: #E6DCCB;
  --arena: #CBB894;
  --tinta: #1C1915;
  --humo: #625A50;
  --laton: #A0804A;
  --laton-oscuro: #7A5E2E;

  --serif: "Bodoni Moda", "Bodoni 72", "Didot", "Bodoni MT", Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", "Century Gothic", system-ui, sans-serif;

  --margen: clamp(1.25rem, 4.5vw, 4rem);
  --ancho: 78rem;
  --nav-alto: 4.25rem;

  /* Cuánto scroll ocupa el recorrido (en pantallas). Más alto = más lento */
  --film-largo: 5.5;
  /* Cuánto se solapa la colección con el final del recorrido (en pantallas).
     Si lo cambias, ajusta FIN_VIDEO y FUNDIDO_* en js/pelicula.js */
  --solape: .5;

  --curva: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--tinta);
  scroll-padding-top: var(--nav-alto);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1.05; }
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--laton);
  outline-offset: 3px;
}

.saltar {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .7rem 1rem;
  background: var(--crema);
  color: var(--tinta);
}
.saltar:focus { top: calc(env(safe-area-inset-top, 0px) + 1rem); }

/* ==================================================================
   NAVEGACIÓN
   Sobre el vídeo: texto crema, sin fondo.
   Al salir del recorrido: fondo crema, texto tinta (.is-solida).
   ================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: calc(var(--nav-alto) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--margen) 0;
  color: var(--crema);
  transition: color .5s var(--curva), background-color .5s var(--curva), border-color .5s var(--curva);
  border-bottom: 1px solid transparent;
}
html.film-claro .nav,
.nav.is-solida {
  color: var(--tinta);
}
.nav.is-solida {
  background: rgb(242 236 225 / .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: rgb(28 25 21 / .08);
}

.nav__marca {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-variation-settings: "opsz" 36;
  text-decoration: none;
  letter-spacing: .01em;
}

.nav__enlaces {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.nav__enlaces a,
.menu-movil__pie a {
  font-size: .95rem;
  letter-spacing: .04em;
  text-decoration: none;
  background: linear-gradient(var(--laton), var(--laton)) no-repeat 0 100% / 0 1px;
  padding-bottom: 2px;
  transition: background-size .35s var(--curva);
}
.nav__enlaces a:hover,
.nav__enlaces a:focus-visible { background-size: 100% 1px; }

.nav__boton {
  display: none;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .95rem;
  letter-spacing: .04em;
  cursor: pointer;
}
.nav__boton-lineas,
.nav__boton-lineas::before {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform .4s var(--curva);
}
.nav__boton-lineas { position: relative; transform: translateY(-3px); }
.nav__boton-lineas::before { content: ""; position: absolute; top: 6px; }
.nav__boton[aria-expanded="true"] .nav__boton-lineas { transform: translateY(0) rotate(45deg); }
.nav__boton[aria-expanded="true"] .nav__boton-lineas::before { transform: translateY(-6px) rotate(-90deg); }

.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-alto) + env(safe-area-inset-top, 0px) + 2rem) var(--margen) calc(env(safe-area-inset-bottom, 0px) + 2rem);
  background: var(--crema);
  color: var(--tinta);
}
.menu-movil[hidden] { display: none; }
.menu-movil nav { display: flex; flex-direction: column; gap: .4rem; }
.menu-movil nav a {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 12vw, 3.5rem);
  text-decoration: none;
  line-height: 1.2;
}
.menu-movil__pie { display: flex; gap: 2rem; }
body.menu-abierto .nav { color: var(--tinta); background: transparent; border-color: transparent; }
body.menu-abierto { overflow: hidden; }

@media (max-width: 760px) {
  .nav__enlaces { display: none; }
  .nav__boton { display: inline-flex; }
}

/* ==================================================================
   RECORRIDO CINEMATOGRÁFICO
   .film      alto (5.5 pantallas): el scroll recorre esta altura
   .film__escena   pegada arriba (sticky) mientras dura el recorrido
   ================================================================== */
.film {
  position: relative;
  height: calc(var(--film-largo) * 100vh);
  height: calc(var(--film-largo) * 100svh);
  background: var(--tinta);
}

.film__escena {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;       /* cubre también la zona de las barras de Safari */
  overflow: hidden;
  background: var(--tinta) url("../assets/frames/poster.webp") center / cover no-repeat;
}

.film__lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;               /* hasta pintar el primer fotograma se ve el póster */
}
.film__lienzo.is-visible { opacity: 1; }

/* Degradados para que el texto se lea sobre cualquier fotograma */
.film__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(28 25 21 / .55) 0%, rgb(28 25 21 / 0) 22%),
    linear-gradient(to top, rgb(28 25 21 / .7) 0%, rgb(28 25 21 / 0) 45%);
}

/* Fundido final a crema: "entrar" en la tienda */
.film__fundido {
  position: absolute;
  inset: 0;
  background: var(--crema);
  opacity: 0;
  pointer-events: none;
}

/* La capa de texto mide lo que se ve de verdad (sin barras de Safari) */
.film__capa {
  position: absolute;
  inset: 0 0 auto;
  height: 100vh;
  height: 100svh;
  color: var(--crema);
  pointer-events: none;
}

.film__titulo {
  position: absolute;
  inset: 0;
  isolation: isolate;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0 var(--margen);
}
.film__titulo::before {   /* sombra suave detrás del título para leerlo sobre la fachada */
  content: "";
  position: absolute;
  inset: 15% 0;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(28 25 21 / .5), rgb(28 25 21 / 0));
}
.film__titulo h1 {
  /* Tamaño adaptable: evita cortar la M en pantallas estrechas */
  font-size: clamp(2.45rem, 9.5vw, 8.5rem);
  white-space: nowrap;
  max-width: calc(100vw - 2 * var(--margen));
  margin-inline: auto;
  font-variation-settings: "opsz" 96;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .9;
  text-shadow: 0 2px 40px rgb(28 25 21 / .35);
}
.film__titulo p {
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-variation-settings: "opsz" 24;
  color: rgb(242 236 225 / .9);
}

.film__textos {
  position: absolute;
  left: var(--margen);
  right: var(--margen);
  bottom: clamp(5.5rem, 14vh, 9rem);
}
.film__texto {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 17ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 5.2vw, 4.25rem);
  font-variation-settings: "opsz" 72;
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgb(28 25 21 / .4);
  opacity: 0;
  will-change: opacity, transform;
}
.film__texto--final {
  left: 50%;
  translate: -50% 0;
  text-align: center;
}

.film__pista {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 2.25rem);
  translate: -50% 0;
  font-size: .85rem;
  letter-spacing: .08em;
  color: rgb(242 236 225 / .85);
  white-space: nowrap;
}
.film__pista::after {
  content: "";
  display: block;
  width: 1px;
  height: 2.25rem;
  margin: .6rem auto 0;
  background: linear-gradient(var(--crema), transparent);
  transform-origin: top;
}
@media (prefers-reduced-motion: no-preference) {
  .film__pista::after { animation: pista 2.4s var(--curva) infinite; }
}
@keyframes pista {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

.film__progreso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgb(242 236 225 / .12);
}
.film__progreso span {
  display: block;
  height: 100%;
  background: var(--laton);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- Movimiento reducido: imagen fija, textos visibles ---------- */
html.reduce .film { height: auto; }
html.reduce .film__escena {
  position: relative;
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  background-image: url("../assets/fotos/fachada.webp");
}
html.reduce .film__lienzo,
html.reduce .film__pista,
html.reduce .film__progreso,
html.reduce .film__fundido { display: none; }
html.reduce .film__capa {
  position: relative;
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-alto) + 3rem) var(--margen) 3rem;
}
html.reduce .film__titulo { position: static; place-content: start; text-align: left; padding: 0; }
html.reduce .film__textos { position: static; display: grid; gap: .75rem; }
html.reduce .film__texto,
html.reduce .film__texto--final {
  position: static;
  opacity: 1;
  translate: none;
  text-align: left;
  max-width: 24ch;
  font-size: clamp(1.4rem, 3vw, 2.25rem);
}

/* ==================================================================
   COLECCIÓN
   ================================================================== */
/* La colección sube por encima del final del recorrido (ya fundido a crema),
   así no queda una pantalla vacía entre el vídeo y el catálogo */
.coleccion {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--solape) * -100vh);
  margin-top: calc(var(--solape) * -100svh);
  padding: clamp(5rem, 12vw, 9rem) max(var(--margen), (100% - var(--ancho)) / 2) clamp(4rem, 10vw, 7rem);
  background: var(--crema);
}
html.reduce .coleccion { margin-top: 0; }

.coleccion__cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  align-items: end;
  gap: 1.5rem 4rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--arena);
}
.coleccion__cabecera h2 {
  font-size: clamp(3.25rem, 9vw, 7.5rem);
  font-variation-settings: "opsz" 96;
  letter-spacing: -.02em;
}
.coleccion__cabecera p { color: var(--humo); max-width: 38ch; }
@media (max-width: 760px) {
  .coleccion__cabecera { grid-template-columns: 1fr; }
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.5rem 0 .5rem;
}
.filtros__tipos { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.filtros__tipos button {
  padding: .35rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .98rem;
  color: var(--humo);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.filtros__tipos button:hover { color: var(--tinta); }
.filtros__tipos button[aria-pressed="true"] {
  color: var(--tinta);
  border-bottom-color: var(--laton);
}

.filtros__solo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .98rem;
  color: var(--humo);
  cursor: pointer;
}
.filtros__solo input {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 2.1rem;
  height: 1.2rem;
  border: 1px solid var(--humo);
  border-radius: 1rem;
  position: relative;
  cursor: pointer;
  transition: background-color .25s, border-color .25s;
}
.filtros__solo input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.2rem - 6px);
  height: calc(1.2rem - 6px);
  border-radius: 50%;
  background: var(--humo);
  transition: transform .3s var(--curva), background-color .25s;
}
.filtros__solo input:checked { background: var(--tinta); border-color: var(--tinta); }
.filtros__solo input:checked::after { transform: translateX(.9rem); background: var(--crema); }

.coleccion__cuenta {
  font-size: .9rem;
  color: var(--humo);
  margin-bottom: 2rem;
}
.coleccion__aviso { padding: 2rem 0; }

.rejilla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 3vw, 2.5rem);
}
@media (max-width: 960px) { .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .rejilla { gap: 2.25rem .9rem; } }

.vacio {
  grid-column: 1 / -1;
  padding: 3rem 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  max-width: 32ch;
}
.vacio a { text-decoration-color: var(--laton); text-underline-offset: .2em; }

/* ---------- Prenda ---------- */
.prenda { position: relative; }

.prenda__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--lino);
  overflow: hidden;
}
.prenda__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--curva);
}
.prenda:hover .prenda__foto img { transform: scale(1.03); }
.prenda--vendida .prenda__foto img,
.prenda--vendida .foto-pendiente { filter: grayscale(1) contrast(.9); opacity: .65; }

/* Hueco elegante mientras no haya foto */
.foto-pendiente {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .8rem;
  color: var(--humo);
  background:
    radial-gradient(120% 80% at 50% 0%, rgb(255 255 255 / .35), transparent 70%),
    var(--lino);
  font-size: .82rem;
  letter-spacing: .06em;
}
.foto-pendiente svg { width: 38%; max-width: 7rem; color: var(--arena); }

/* Etiqueta colgante con precio y talla */
.etiqueta {
  position: absolute;
  right: .9rem;
  bottom: .9rem;
  display: grid;
  gap: .05rem;
  padding: .55rem .9rem .6rem 1.55rem;
  background: var(--crema);
  color: var(--tinta);
  clip-path: polygon(.85rem 0, 100% 0, 100% 100%, .85rem 100%, 0 50%);
  transform: rotate(-3deg);
  transform-origin: right center;
  text-align: right;
}
.etiqueta::before {          /* agujero del cordel */
  content: "";
  position: absolute;
  left: .7rem;
  top: 50%;
  width: .38rem;
  height: .38rem;
  margin-top: -.19rem;
  border-radius: 50%;
  background: var(--laton);
}
.etiqueta__precio {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-variation-settings: "opsz" 36;
  line-height: 1.1;
}
.etiqueta__talla { font-size: .78rem; color: var(--humo); letter-spacing: .03em; }
.prenda--vendida .etiqueta__precio { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--humo); }

.estado {
  position: absolute;
  left: .9rem;
  top: .9rem;
  padding: .25rem .6rem;
  font-size: .78rem;
  letter-spacing: .04em;
  background: var(--tinta);
  color: var(--crema);
}
.estado--reservada { background: var(--crema); color: var(--tinta); border: 1px solid var(--tinta); }

.prenda__pie { padding-top: 1rem; }
.prenda__nombre {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-variation-settings: "opsz" 28;
  line-height: 1.2;
}
.prenda__abrir {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.prenda__abrir::after {          /* toda la tarjeta es pulsable */
  content: "";
  position: absolute;
  inset: 0;
}
.prenda__abrir:focus-visible { outline: none; }
.prenda__abrir:focus-visible::after { outline: 2px solid var(--laton); outline-offset: 6px; }

.prenda__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem 1rem;
  margin-top: .35rem;
  font-size: .88rem;
  color: var(--humo);
}
.prenda__disp--disponible { color: var(--laton-oscuro); }

/* ==================================================================
   LA TIENDA
   ================================================================== */
.tienda {
  padding: clamp(3rem, 8vw, 6rem) max(var(--margen), (100% - var(--ancho)) / 2) clamp(5rem, 12vw, 9rem);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}
.tienda__foto { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lino); }
.tienda__foto img { width: 100%; height: 100%; object-fit: cover; }

.tienda__texto h2 {
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  font-variation-settings: "opsz" 96;
  letter-spacing: -.015em;
  max-width: 14ch;
  text-wrap: balance;
}
.tienda__entrada {
  margin-top: 1.75rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  font-variation-settings: "opsz" 18;
  line-height: 1.6;
  max-width: 36em;
}

.criterios {
  margin: 2.75rem 0 0;
  display: grid;
  gap: 1.25rem;
}
.criterios div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--arena);
}
.criterios dt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  font-variation-settings: "opsz" 24;
}
.criterios dd { margin: 0; color: var(--humo); max-width: 44ch; }

@media (max-width: 820px) {
  .tienda { grid-template-columns: 1fr; }
  .tienda__foto { aspect-ratio: 4 / 3; }
  .criterios div { grid-template-columns: 1fr; gap: .25rem; }
}

/* ==================================================================
   CONTACTO
   ================================================================== */
.contacto {
  background: var(--tinta);
  color: var(--crema);
  padding: clamp(5rem, 12vw, 9rem) var(--margen);
  text-align: center;
}
.contacto h2 {
  font-size: clamp(2.75rem, 7.5vw, 6rem);
  font-variation-settings: "opsz" 96;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.contacto__entrada {
  margin: 1.5rem auto 0;
  max-width: 34em;
  color: rgb(242 236 225 / .78);
}
.contacto__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.75rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 3.4rem;
  padding: .9rem 1.9rem;
  font-size: 1rem;
  letter-spacing: .03em;
  text-decoration: none;
  border: 1px solid currentColor;
  transition: background-color .3s var(--curva), color .3s var(--curva), border-color .3s;
}
.contacto .boton--lleno { background: var(--crema); color: var(--tinta); border-color: var(--crema); }
.contacto .boton--lleno:hover { background: var(--arena); border-color: var(--arena); }
.contacto .boton--linea { color: var(--crema); }
.contacto .boton--linea:hover { border-color: var(--laton); color: var(--arena); }

.contacto__datos {
  margin: clamp(3.5rem, 8vw, 5.5rem) auto 0;
  max-width: 60rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.75rem 2rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgb(203 184 148 / .3);
}
.contacto__datos dt {
  font-family: var(--serif);
  font-style: italic;
  color: var(--arena);
  font-variation-settings: "opsz" 18;
}
.contacto__datos dd { margin: .3rem 0 0; }
.contacto__datos a { text-decoration-color: var(--laton); text-underline-offset: .25em; }
.contacto__datos [hidden] { display: none; }

.pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding: 2rem var(--margen) calc(env(safe-area-inset-bottom, 0px) + 2rem);
  background: var(--tinta);
  color: rgb(242 236 225 / .6);
  font-size: .88rem;
  border-top: 1px solid rgb(242 236 225 / .08);
}
.pie__marca { font-family: var(--serif); color: var(--crema); font-size: 1.05rem; }

/* ==================================================================
   FICHA DE PRENDA (ventana)
   ================================================================== */
.ficha {
  position: fixed;
  width: min(62rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  padding: 0;
  border: 0;
  background: var(--crema);
  color: var(--tinta);
  overflow: auto;
}
.ficha[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.ficha::backdrop { background: rgb(28 25 21 / .72); }
@media (prefers-reduced-motion: no-preference) {
  .ficha[open] { animation: ficha-abre .5s var(--curva); }
  .ficha[open]::backdrop { animation: velo-abre .5s var(--curva); }
}
@keyframes ficha-abre { from { opacity: 0; transform: translateY(18px); } }
@keyframes velo-abre { from { opacity: 0; } }

.ficha__foto { position: relative; min-height: 30rem; background: var(--lino); }
.ficha__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ficha__info {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 4vw, 3rem);
}
.ficha__cerrar {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 2;
  padding: .45rem .9rem;
  border: 0;
  background: var(--crema);
  font: inherit;
  font-size: .9rem;
  color: var(--tinta);
  cursor: pointer;
}
.ficha__ref { margin-top: 2rem; font-size: .85rem; color: var(--humo); }
.ficha__nombre {
  margin-top: .4rem;
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  font-variation-settings: "opsz" 72;
  line-height: 1.1;
  text-wrap: balance;
}
.ficha__precio {
  margin-top: 1rem;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-variation-settings: "opsz" 36;
}
.ficha__datos {
  margin: 1.75rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem 1.5rem;
  font-size: .95rem;
}
.ficha__datos dt { color: var(--humo); }
.ficha__datos dd { margin: 0; }
.ficha__nota {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--arena);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-variation-settings: "opsz" 18;
  line-height: 1.6;
}
.ficha__wa {
  margin-top: auto;
  background: var(--tinta);
  color: var(--crema);
  border-color: var(--tinta);
}
.ficha__nota + .ficha__wa { margin-top: 2rem; }
.ficha__wa:hover { background: var(--laton-oscuro); border-color: var(--laton-oscuro); }

@media (max-width: 720px) {
  .ficha[open] { grid-template-columns: 1fr; }
  .ficha__foto { min-height: 0; aspect-ratio: 4 / 3.4; }
  .ficha__ref { margin-top: 0; }
}

/* ==================================================================
   Movimiento reducido: sin transiciones decorativas
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Más contraste para el título sobre la imagen fija */
html.reduce .film__velo {
  background:
    linear-gradient(to bottom, rgb(28 25 21 / .6) 0%, rgb(28 25 21 / 0) 45%),
    linear-gradient(to top, rgb(28 25 21 / .75) 0%, rgb(28 25 21 / 0) 50%);
}

/* ==================================================================
   Catálogo conectado a Supabase: carga, error y galería de la ficha
   ================================================================== */
.prenda--cargando .prenda__foto { background: var(--lino); }
.prenda__linea {
  display: block;
  height: .9rem;
  width: 70%;
  margin-top: .35rem;
  background: var(--lino);
}
.prenda__linea--corta { width: 40%; height: .7rem; }
@media (prefers-reduced-motion: no-preference) {
  .prenda--cargando .prenda__foto,
  .prenda--cargando .prenda__linea { animation: latido 1.6s ease-in-out infinite; }
}
@keyframes latido { 50% { opacity: .55; } }

.vacio__reintentar {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--laton);
  text-underline-offset: .2em;
  cursor: pointer;
}

.ficha__miniaturas {
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .75rem;
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.ficha__miniaturas::-webkit-scrollbar { display: none; }
.ficha__miniaturas button {
  flex: none;
  width: 3.25rem;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 1px solid rgb(242 236 225 / .6);
  background: var(--lino);
  cursor: pointer;
  opacity: .75;
  transition: opacity .25s, border-color .25s;
}
.ficha__miniaturas button[aria-current="true"] { opacity: 1; border-color: var(--crema); outline: 1px solid var(--tinta); }
.ficha__miniaturas img { position: static; width: 100%; height: 100%; object-fit: cover; }

/* ==================================================================
   TIENDA ONLINE: cesta, compra y páginas
   ================================================================== */

/* "VENDIDO" en las tarjetas */
.estado--vendida { text-transform: uppercase; letter-spacing: .12em; }

/* Botón de cesta en el menú */
.nav__derecha { display: flex; align-items: center; gap: 1.5rem; }
.nav__cesta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .95rem;
  letter-spacing: .04em;
  cursor: pointer;
}
.nav__cesta[hidden] { display: none; }
.nav__cesta-num {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .3rem;
  border-radius: 1rem;
  background: var(--laton);
  color: var(--crema);
  font-size: .75rem;
  letter-spacing: 0;
}
.nav__cesta-num[hidden] { display: none; }

/* Ficha: comprar + WhatsApp */
.ficha__acciones { margin-top: auto; display: grid; gap: .75rem; padding-top: 2rem; }
.ficha__acciones .ficha__wa { margin-top: 0; }
.ficha__comprar { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
.ficha__comprar:hover { background: var(--laton-oscuro); border-color: var(--laton-oscuro); }
.ficha__wa--secundario { background: transparent; color: var(--tinta); }
.ficha__wa--secundario:hover { background: transparent; border-color: var(--laton); color: var(--laton-oscuro); }

/* ---------- Cesta (panel lateral) ---------- */
.cesta {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(28rem, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 1.25rem) clamp(1.25rem, 4vw, 2rem) calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
  border: 0;
  background: var(--crema);
  color: var(--tinta);
  overflow-y: auto;
}
.cesta[open] { display: flex; flex-direction: column; gap: 1.25rem; }
.cesta::backdrop { background: rgb(28 25 21 / .6); }
@media (prefers-reduced-motion: no-preference) {
  .cesta[open] { animation: cesta-entra .45s var(--curva); }
  .cesta[open]::backdrop { animation: velo-abre .45s var(--curva); }
}
@keyframes cesta-entra { from { transform: translateX(100%); } }

.cesta__cabecera { display: flex; align-items: baseline; justify-content: space-between; }
.cesta__cabecera h2 { font-size: 2rem; font-variation-settings: "opsz" 72; }
.cesta__cerrar {
  padding: .3rem 0;
  border: 0;
  border-bottom: 1px solid var(--laton);
  background: none;
  font: inherit;
  font-size: .9rem;
  color: var(--tinta);
  cursor: pointer;
}
.cesta__aviso {
  padding: .75rem .9rem;
  border-left: 2px solid var(--laton);
  background: var(--lino);
  font-size: .95rem;
}
.cesta__aviso[hidden] { display: none; }

.cesta__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.cesta__vacia { padding: 2rem 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; }
.cesta__item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--arena);
}
.cesta__foto { aspect-ratio: 4 / 5; background: var(--lino); overflow: hidden; }
.cesta__foto img { width: 100%; height: 100%; object-fit: cover; }
.cesta__nombre { font-family: var(--serif); font-size: 1.1rem; line-height: 1.25; }
.cesta__meta { margin-top: .2rem; font-size: .88rem; color: var(--humo); }
.cesta__quitar {
  margin-top: .5rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .85rem;
  color: var(--humo);
  text-decoration: underline;
  text-decoration-color: var(--laton);
  text-underline-offset: .2em;
  cursor: pointer;
}
.cesta__precio { font-family: var(--serif); font-size: 1.15rem; white-space: nowrap; }

.cesta__pie { display: grid; gap: 1rem; margin-top: auto; }
.cesta__pie[hidden] { display: none; }
.cesta__importes { margin: 0; display: grid; gap: .4rem; }
.cesta__importes div { display: flex; justify-content: space-between; gap: 1rem; }
.cesta__importes dt { color: var(--humo); }
.cesta__importes dd { margin: 0; }
.cesta__total { padding-top: .6rem; border-top: 1px solid var(--arena); font-family: var(--serif); font-size: 1.35rem; }
.cesta__total dt { color: var(--tinta); }
.cesta__nota { font-size: .85rem; color: var(--humo); }
.cesta__acepto { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.cesta__acepto input { flex: none; width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: var(--tinta); }
.cesta__acepto a { text-decoration-color: var(--laton); text-underline-offset: .2em; }
.cesta__pagar { width: 100%; background: var(--tinta); color: var(--crema); border-color: var(--tinta); cursor: pointer; font-family: inherit; }
.cesta__pagar:disabled { opacity: .45; cursor: default; }

/* Pie con enlaces legales */
.pie__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.pie__legal a { color: inherit; text-decoration: none; }
.pie__legal a:hover { color: var(--crema); }

/* ---------- Páginas sueltas (confirmación, legales) ---------- */
.pagina { background: var(--crema); min-height: 100vh; display: flex; flex-direction: column; }
.pagina__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(env(safe-area-inset-top, 0px) + 1.25rem) var(--margen) 1.25rem;
  border-bottom: 1px solid var(--arena);
}
.pagina__cabecera a { text-decoration: none; }
.pagina__marca { font-family: var(--serif); font-size: 1.5rem; }
.pagina__volver { font-size: .95rem; text-decoration: underline !important; text-decoration-color: var(--laton) !important; text-underline-offset: .25em; }
.pagina__cuerpo {
  flex: 1;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5rem) var(--margen) clamp(4rem, 10vw, 6rem);
}
.pagina__cuerpo h1 {
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  font-variation-settings: "opsz" 96;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.pagina__cuerpo h2 {
  margin-top: 2.75rem;
  font-size: 1.6rem;
  font-variation-settings: "opsz" 48;
}
.pagina__cuerpo p, .pagina__cuerpo li { margin-top: 1rem; max-width: 65ch; }
.pagina__cuerpo ul { padding-left: 1.2rem; }
.pagina__entrada { margin-top: 1.5rem !important; font-family: var(--serif); font-size: 1.25rem; line-height: 1.55; }
.pagina__acciones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.pagina__acciones .boton { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
.pagina__acciones .boton--linea { background: transparent; color: var(--tinta); }

.pendiente {
  display: block;
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--laton);
  background: var(--lino);
  font-size: .95rem;
}
.completar {
  padding: .05em .35em;
  background: rgb(160 128 74 / .18);
  border-bottom: 1px dashed var(--laton-oscuro);
  font-style: normal;
}

.resumen { margin-top: 2.25rem; border-top: 1px solid var(--arena); }
.resumen__linea { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--arena); }
.resumen__linea span:first-child small { display: block; color: var(--humo); font-size: .85rem; }
.resumen__total { font-family: var(--serif); font-size: 1.35rem; border-bottom: 0; }
.cargando { color: var(--humo); }

/* Lo que está oculto, oculto de verdad (algunos botones fijan su propio display) */
[hidden] { display: none !important; }

/* MD SHOP - nitidez y encuadre: versión 2 */
@media (max-width: 700px) and (orientation: portrait) {
  /* No ampliar y recortar la primera imagen al cargar */
  .film__escena {
    background-size: contain;
    background-position: center center;
    background-color: #1C1915;
  }
  .film__titulo h1 {
    font-size: clamp(2.35rem, 9vw, 4.5rem);
    max-width: calc(100vw - 2.5rem);
    line-height: 1.04;
    overflow: visible;
  }
}