/* ==========================================================================
   EL BAZAR DE CASA — estilos
   Idea: un tendedero afuera de la casa. Papel, cartón kraft, pinzas de madera,
   sellos de tinta y los colores de Puerto Peñasco (arena, sol, barro y mar).
   ========================================================================== */

:root {
  --papel: #F3EADB;
  --papel-claro: #FBF7EF;
  --papel-oscuro: #E8DCC6;
  --tinta: #221B16;
  --tinta-suave: #5B4E43;
  --linea: rgba(34, 27, 22, .14);
  --barro: #A9411F;
  --barro-vivo: #C4532D;
  --sol: #E9A23B;
  --mar: #0F5E63;
  --kraft: #D4AE7A;
  --kraft-oscuro: #A97B45;
  --wa: #1E7A46;
  --wa-hover: #17633A;
  --sello: #C23A26;

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-texto: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mano: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --ancho: 1180px;
  --margen: clamp(16px, 4vw, 40px);
  --resorte: cubic-bezier(.34, 1.56, .64, 1);
  --suave: cubic-bezier(.22, 1, .36, 1);
  --sombra-dura: 3px 3px 0 var(--tinta);

  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta);
  background-color: var(--papel);
  /* grano de papel */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; font-variation-settings: "SOFT" 60; }
h2 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 em, h1 em { font-style: italic; font-weight: 600; color: var(--barro); }
p { margin: 0; }

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }

.ico { width: 1.15em; height: 1.15em; flex: none; }

.antetitulo {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--barro);
  margin-bottom: 14px;
}

.nota-mano {
  font-family: var(--f-mano);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--barro);
}

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--tinta); color: var(--papel); padding: 10px 16px; border-radius: 8px;
}
.saltar:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--mar); outline-offset: 3px; border-radius: 6px; }

/* ---------- Botones (tipo calcomanía, con sombra dura) ---------- */
.btn {
  --fondo: var(--papel-claro);
  --texto: var(--tinta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .82em 1.3em;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: var(--fondo);
  color: var(--texto);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sombra-dura);
  transition: transform .18s var(--suave), box-shadow .18s var(--suave), background-color .2s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--tinta); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--tinta); }
.btn--tinta { --fondo: var(--tinta); --texto: var(--papel-claro); box-shadow: 3px 3px 0 var(--barro-vivo); }
.btn--tinta:hover { box-shadow: 4px 4px 0 var(--barro-vivo); }
.btn--wa { --fondo: var(--wa); --texto: #fff; }
.btn--wa:hover { --fondo: var(--wa-hover); }
.btn--wa .ico { transition: transform .4s var(--resorte); }
.btn--wa:hover .ico { transform: rotate(-14deg) scale(1.12); }
.btn--papel { --fondo: var(--papel-claro); }
.btn--papel:hover { --fondo: #fff; }
.btn--chico { font-size: .9rem; padding: .62em 1.05em; }
.btn--grande { font-size: 1.12rem; padding: 1em 1.4em; width: 100%; }

/* ---------- Cinta de avisos (marquesina) ---------- */
.cinta {
  background: var(--tinta);
  color: var(--papel);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  overflow: hidden;
  white-space: nowrap;
}
.cinta__pista {
  display: inline-flex;
  padding: 9px 0;
  animation: cinta 38s linear infinite;
}
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__pista > span { display: inline-block; }
.cinta__pista span::after {
  content: "✶";
  color: var(--sol);
  margin-inline: 1.6em;
}
.cinta b { font-weight: 700; color: var(--sol); text-transform: lowercase; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: background-color .3s, box-shadow .3s, backdrop-filter .3s;
}
.barra.es-fija {
  background: rgba(243, 234, 219, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--linea);
}
.barra__dentro {
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 14px;
  transition: padding .3s var(--suave);
}
.barra.es-fija .barra__dentro { padding-block: 9px; }

.marca { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.marca__sello {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--barro);
  color: var(--papel-claro);
  box-shadow: inset 0 0 0 3px var(--barro), inset 0 0 0 4.5px rgba(255,255,255,.55);
  transition: transform .5s var(--resorte);
}
.marca:hover .marca__sello { transform: rotate(-12deg); }
.marca__sello svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.marca__texto {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: -.02em;
  line-height: 1;
  font-variation-settings: "SOFT" 80;
}
.marca__texto em { font-style: italic; font-weight: 600; color: var(--barro); }

.barra__nav { display: flex; gap: 4px; margin-left: auto; }
.barra__nav a {
  position: relative;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  padding: 8px 12px;
}
.barra__nav a::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 3px;
  height: 2px; background: var(--barro);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--suave);
}
.barra__nav a:hover::after { transform: scaleX(1); }

@media (max-width: 820px) {
  .barra__nav { display: none; }
  .barra__wa { margin-left: auto; }
}
@media (max-width: 400px) {
  .marca__texto { font-size: 1.12rem; }
  .barra__wa span { display: none; }
  .barra__wa { padding: .62em .7em; }
}

/* ---------- Portada ---------- */
.portada {
  position: relative;
  padding-top: clamp(28px, 6vw, 72px);
  overflow: hidden;
}
.portada__sol {
  position: absolute;
  width: clamp(280px, 42vw, 560px);
  aspect-ratio: 1;
  right: clamp(-160px, -6vw, -40px);
  top: clamp(20px, 4vw, 60px);
  border-radius: 50%;
  background:
    linear-gradient(180deg, transparent 0 60%, var(--papel) 60% 62.5%, transparent 62.5% 69%, var(--papel) 69% 72.5%, transparent 72.5% 79%, var(--papel) 79% 84%, transparent 84% 89%, var(--papel) 89%),
    radial-gradient(circle at 40% 35%, #F2B85A, var(--sol) 60%, #DE8E2C);
  opacity: .92;
  animation: sol-sube 1.4s var(--suave) both;
}
@keyframes sol-sube { from { transform: translateY(80px); opacity: 0; } }


.portada__texto { position: relative; z-index: 2; }
.portada__titulo {
  font-size: clamp(2.9rem, 8.6vw, 6.4rem);
  max-width: 11.5ch;
  line-height: .96;
  letter-spacing: -.035em;
}
.portada__titulo .palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.portada__titulo .palabra > span {
  display: inline-block;
  animation: palabra 1s var(--suave) both;
  animation-delay: calc(var(--n) * 90ms + 150ms);
}
@keyframes palabra { from { transform: translateY(105%) rotate(4deg); } }

.subrayado {
  position: relative;
  display: inline-block;
  font-style: italic;
  font-weight: 600;
  color: var(--barro);
  font-variation-settings: "SOFT" 100;
}
.subrayado svg {
  position: absolute;
  left: -2%;
  bottom: -.12em;
  width: 104%;
  height: .32em;
  overflow: visible;
}
.subrayado path {
  fill: none;
  stroke: var(--sol);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: trazo 1s .95s var(--suave) forwards;
}
.subrayado path + path { stroke-width: 4; animation-delay: 1.25s; }
@keyframes trazo { to { stroke-dashoffset: 0; } }

.portada__bajada {
  max-width: 34rem;
  margin-top: 22px;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--tinta-suave);
  animation: aparece .9s .55s var(--suave) both;
}
.portada__bajada strong { color: var(--tinta); }
.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
  animation: aparece .9s .7s var(--suave) both;
}
.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin: 34px 0 0;
  animation: aparece .9s .85s var(--suave) both;
}
.cifras div { border-left: 2px solid var(--tinta); padding-left: 12px; }
.cifras dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--tinta-suave); }
.cifras dd { margin: 2px 0 0; font-family: var(--f-display); font-weight: 800; font-size: 1.45rem; line-height: 1.1; }
@keyframes aparece { from { opacity: 0; transform: translateY(18px); } }

@media (max-width: 560px) {
  .portada__bajada { margin-top: 16px; }
  .portada__acciones { flex-wrap: nowrap; gap: 10px; margin-top: 22px; }
  .portada__acciones .btn { flex: 1 1 auto; padding: .8em 1em; font-size: .95rem; }
  .solo-ancho { display: none; }
  .cifras { flex-wrap: nowrap; gap: 14px; margin-top: 26px; }
  .cifras div { padding-left: 9px; min-width: 0; }
  .cifras dt { font-size: .6rem; letter-spacing: .08em; white-space: nowrap; }
  .cifras dd { font-size: 1.08rem; white-space: nowrap; }
}

/* ---------- Tendedero ---------- */
.tendedero {
  --cuerda-h: clamp(70px, 9vw, 120px);
  position: relative;
  height: clamp(330px, 44vw, 520px);
  margin-top: clamp(10px, 3vw, 30px);
  z-index: 1;
}
.tendedero__cuerda {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: var(--cuerda-h);
  overflow: visible;
}
.tendedero__cuerda path {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: trazo 1.6s .3s var(--suave) forwards;
}
.tendedero__prendas { position: absolute; inset: 0; }

.colgada {
  position: absolute;
  width: var(--w);
  left: calc(var(--x) - var(--w) / 2);
  top: var(--y);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: cae 1.1s var(--resorte) both;
  animation-delay: calc(var(--i) * 140ms + 900ms);
  -webkit-tap-highlight-color: transparent;
}
@keyframes cae { from { transform: translateY(-120px) rotate(-8deg); opacity: 0; } 40% { opacity: 1; } }
.colgada__mecer {
  display: block;
  transform-origin: 50% var(--arriba-px);
  transform: rotate(var(--giro, 0deg));
  will-change: transform;
}
.colgada img {
  width: 100%;
  filter: drop-shadow(0 18px 18px rgba(34, 27, 22, .22));
  transition: filter .3s, transform .4s var(--suave);
}
.colgada:hover img, .colgada:focus-visible img { filter: drop-shadow(0 26px 24px rgba(34, 27, 22, .3)); transform: scale(1.03); }
.colgada .pinza {
  position: absolute;
  left: 50%;
  top: calc(var(--arriba-px) - 22px);
  width: 13px;
  height: 34px;
  margin-left: -6.5px;
  z-index: 2;
}
.colgada__precio {
  position: absolute;
  top: calc(var(--arriba-px) + 14px);
  left: calc(50% + 14px);
  padding: 4px 10px 3px 16px;
  background: var(--kraft);
  font-family: var(--f-mano);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--tinta);
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
  transform-origin: 0 50%;
  transform: rotate(var(--giro-tag, 12deg));
  box-shadow: 0 2px 0 var(--kraft-oscuro);
  z-index: 3;
}
.colgada__precio::before {
  content: "";
  position: absolute; left: 7px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--papel);
}

.tendedero__nota {
  position: absolute;
  left: max(var(--margen), calc((100% - var(--ancho)) / 2));
  bottom: 18px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  transform: rotate(-4deg);
  animation: aparece .8s 2s var(--suave) both;
}
.tendedero__nota svg { width: 48px; height: 32px; transform: scaleY(-1) rotate(-20deg); }
.tendedero__nota path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) { .tendedero__nota { display: none; } }

/* Escritorio: el texto a la izquierda y el tendedero a la derecha */
@media (min-width: 1000px) {
  .portada {
    display: flex;
    align-items: center;
    min-height: clamp(600px, calc(100svh - 96px), 860px);
    padding-block: 40px 70px;
  }
  .portada__texto > * { max-width: min(600px, 50%); }
  .portada__titulo { font-size: clamp(3.4rem, 5.6vw, 5.3rem); }
  .portada__sol { right: clamp(-120px, -4vw, 0px); top: 6%; width: clamp(380px, 36vw, 560px); }
  .tendedero {
    --cuerda-h: clamp(80px, 8vw, 120px);
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(50%, calc(50% - var(--ancho) / 2 + 620px));
    right: 0;
    height: auto;
    margin: 0;
  }
  .tendedero__cuerda { top: 14%; }
  /* nudo donde se amarra la cuerda */
  .tendedero::before {
    content: "";
    position: absolute;
    left: -7px;
    top: calc(14% + var(--cuerda-h) * .18 - 7px);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tinta);
    box-shadow: 0 0 0 4px var(--papel);
  }
  .tendedero__nota { left: 4%; bottom: auto; top: calc(14% + 380px); }
}

/* ---------- Cómo apartar ---------- */
.como {
  position: relative;
  padding-block: clamp(64px, 9vw, 120px);
  background: var(--tinta);
  color: var(--papel);
  /* orilla de papel rasgado arriba */
  -webkit-mask: linear-gradient(#000, #000) bottom / 100% calc(100% - 13px) no-repeat,
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V8l6-3 7 4 8-6 7 5 6-2 9 4 7-7 8 6 6-3 8 4 7-5 9 6 6-4 7 3 8-5 5 4 6-2v13z'/%3E%3C/svg%3E") top / 240px 14px repeat-x;
          mask: linear-gradient(#000, #000) bottom / 100% calc(100% - 13px) no-repeat,
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V8l6-3 7 4 8-6 7 5 6-2 9 4 7-7 8 6 6-3 8 4 7-5 9 6 6-4 7 3 8-5 5 4 6-2v13z'/%3E%3C/svg%3E") top / 240px 14px repeat-x;
}
.como .antetitulo { color: var(--sol); }
.encabezado { max-width: 40rem; }
.pasos {
  list-style: none;
  margin: clamp(36px, 5vw, 60px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.paso { position: relative; }
.paso__num {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(4.5rem, 9vw, 7rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px var(--sol);
  margin-bottom: 16px;
}
.paso h3 { font-size: 1.55rem; margin-bottom: 8px; }
.paso p { color: rgba(243, 234, 219, .78); max-width: 22rem; }
.paso__flecha {
  position: absolute;
  top: 12px;
  right: -8px;
  width: 92px;
  color: var(--sol);
}
.paso__flecha path {
  fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 200; stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.2s .5s var(--suave);
}
.paso.esta-visible .paso__flecha path { stroke-dashoffset: 0; }
@media (max-width: 760px) {
  .pasos { grid-template-columns: 1fr; }
  .paso { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; }
  .paso__num { grid-row: span 2; margin: 0; font-size: 4.2rem; }
  .paso__flecha { display: none; }
}

/* ---------- Catálogo ---------- */
.catalogo { padding-block: clamp(64px, 9vw, 120px); outline: none; }
.catalogo__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
}
.catalogo__cuenta { font-family: var(--f-mano); font-size: 1.7rem; font-weight: 700; color: var(--barro); transform: rotate(-2deg); }

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin: 30px 0 34px;
  padding: 16px 0;
  border-block: 1.5px dashed var(--linea);
}
.filtros__grupo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.filtros__titulo { font-family: var(--f-mano); font-size: 1.35rem; font-weight: 700; color: var(--tinta-suave); margin-right: 2px; }
.filtros__chips { display: flex; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 7px 14px;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  background: transparent;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s, color .2s, transform .25s var(--resorte);
}
.chip small { font-size: .72rem; opacity: .6; font-weight: 700; }
.chip:hover { background: var(--papel-claro); transform: translateY(-2px) rotate(-1.5deg); }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--papel-claro); }
.chip[aria-pressed="true"] small { opacity: .75; }
.filtros__orden { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.filtros__orden select {
  appearance: none;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  padding: 7px 34px 7px 14px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23221B16' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") right 10px center / 16px no-repeat;
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  color: var(--tinta);
  cursor: pointer;
}
@media (max-width: 760px) {
  .filtros { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  .filtros__grupo { overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--margen) * -1); padding-inline: var(--margen); padding-block: 3px; }
  .filtros__grupo::-webkit-scrollbar { display: none; }
  .filtros__orden { margin-left: 0; }
  .filtros__orden select { flex: 1; min-width: 0; }
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
@media (max-width: 560px) {
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 340px) {
  .rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* Tarjeta de prenda */
.prenda {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--papel-claro);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(34,27,22,.06), 0 0 0 1px var(--linea);
  transition: transform .45s var(--suave), box-shadow .45s var(--suave);
}
.prenda:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(34,27,22,.35), 0 0 0 1px var(--linea); }
.prenda.aparecer { opacity: 0; transform: translateY(26px) rotate(var(--rot, 0deg)); }
.prenda.aparecer.esta-visible { opacity: 1; transform: none; transition: opacity .7s var(--suave), transform .8s var(--suave); transition-delay: calc(var(--i, 0) * 70ms); }

.prenda__foto {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: radial-gradient(ellipse at 50% 42%, #fff 0%, var(--papel-claro) 55%, var(--papel-oscuro) 140%);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.prenda__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 8%;
  filter: drop-shadow(0 14px 14px rgba(34, 27, 22, .2));
  transition: transform .9s var(--suave);
}
.prenda:hover .prenda__foto img { animation: columpio 1.6s var(--suave); }
@keyframes columpio {
  20% { transform: rotate(2.6deg); }
  45% { transform: rotate(-1.8deg); }
  70% { transform: rotate(.9deg); }
  100% { transform: rotate(0); }
}

/* Etiqueta kraft colgando */
.etiqueta {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 66px;
  padding: 20px 6px 9px;
  background: var(--kraft);
  text-align: center;
  clip-path: polygon(22% 0, 78% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
  transform: rotate(7deg);
  transform-origin: 50% 8px;
  filter: drop-shadow(0 2px 0 var(--kraft-oscuro));
  pointer-events: none;
  z-index: 2;
}
.etiqueta::before {
  content: "";
  position: absolute;
  top: 7px; left: 50%;
  width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%;
  background: var(--papel-claro);
  box-shadow: inset 0 0 0 1.5px var(--kraft-oscuro);
}
.prenda:hover .etiqueta { animation: etiqueta-baila 1.4s var(--suave); }
@keyframes etiqueta-baila {
  25% { transform: rotate(-6deg); }
  55% { transform: rotate(11deg); }
  80% { transform: rotate(5deg); }
  100% { transform: rotate(7deg); }
}
.etiqueta__cod { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; opacity: .7; }
.etiqueta__precio { display: block; font-family: var(--f-mano); font-weight: 700; font-size: 1.85rem; line-height: .95; }
@media (max-width: 560px) {
  .etiqueta { width: 54px; top: 10px; right: 10px; padding: 17px 4px 7px; }
  .etiqueta__precio { font-size: 1.45rem; }
}

/* Calcomanía (nuevo con etiqueta / recién colgada) */
.calco {
  position: absolute;
  left: 12px;
  top: 14px;
  max-width: 62%;
  padding: 5px 11px 4px;
  border-radius: 999px;
  background: var(--sol);
  font-size: .74rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  transform: rotate(-5deg);
  box-shadow: 0 2px 0 rgba(34,27,22,.25);
  z-index: 2;
}
.calco--nueva { background: var(--mar); color: var(--papel-claro); }
@media (max-width: 560px) { .calco { font-size: .64rem; left: 8px; top: 10px; } }

/* Sello de tinta: APARTADA */
.sello {
  position: absolute;
  left: 50%;
  top: 46%;
  padding: .28em .7em .2em;
  border: .2em double var(--sello);
  border-radius: 10px;
  color: var(--sello);
  font-family: var(--f-texto);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.6vw, 1.65rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-14deg);
  background: rgba(251, 247, 239, .55);
  mix-blend-mode: multiply;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.8 1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.8 1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 3;
}
.esta-visible .sello, .ficha[open] .sello { animation: sellazo .5s .25s var(--resorte) both; }
@keyframes sellazo { from { transform: translate(-50%, -50%) rotate(-30deg) scale(2.2); opacity: 0; } }
.prenda--apartada .prenda__foto img { filter: grayscale(.55) drop-shadow(0 14px 14px rgba(34,27,22,.15)); opacity: .8; }

.prenda__info { padding: 16px 18px 6px; flex: 1; }
.prenda__nombre {
  font-size: 1.24rem;
  line-height: 1.12;
  letter-spacing: -.015em;
  font-weight: 700;
}
.prenda__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
  font-size: .86rem;
  color: var(--tinta-suave);
}
.prenda__meta b { color: var(--tinta); }
.prenda__acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px 18px;
}
.enlace {
  border: 0;
  background: none;
  padding: 6px 2px;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: var(--barro);
  cursor: pointer;
}
.prenda__libre { font-size: .86rem; font-weight: 700; color: var(--sello); }
@media (max-width: 560px) {
  .prenda__info { padding: 12px 12px 4px; }
  .prenda__nombre { font-size: 1.02rem; }
  .prenda__meta { font-size: .78rem; gap: 2px 8px; }
  .prenda__acciones { padding: 10px 12px 14px; }
  .prenda__acciones .enlace { display: none; }
  .prenda__acciones .btn { width: 100%; }
}

/* Tarjeta final: "¿buscas algo?" */
.prenda--pide {
  justify-content: center;
  padding: 28px 24px;
  background: var(--mar);
  color: var(--papel);
  box-shadow: none;
  text-align: left;
}
.prenda--pide:hover { transform: rotate(-1deg) translateY(-6px); }
.prenda--pide .nota-mano { color: var(--sol); font-size: 1.7rem; }
.prenda--pide h3 { font-size: 1.8rem; margin: 8px 0 10px; }
.prenda--pide p { color: rgba(243, 234, 219, .8); margin-bottom: 22px; }
.prenda--pide .btn { align-self: flex-start; box-shadow: 3px 3px 0 var(--sol); border-color: var(--tinta); }
@media (max-width: 560px) {
  .prenda--pide { grid-column: 1 / -1; }
}

.vacio { text-align: center; padding: 50px 20px; }
.vacio__mano { font-family: var(--f-mano); font-size: 1.9rem; font-weight: 700; color: var(--barro); }
.vacio h3 { font-size: 1.9rem; margin: 8px 0 10px; }
.vacio p { color: var(--tinta-suave); max-width: 30rem; margin-inline: auto; }
.vacio__acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }

/* ---------- Dónde estamos ---------- */
.donde { padding-block: clamp(30px, 5vw, 70px) clamp(80px, 10vw, 130px); }
.donde__rejilla {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.donde__texto > p { color: var(--tinta-suave); margin-top: 18px; max-width: 32rem; }
.donde__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.rotulo {
  display: inline-grid;
  margin-top: 30px;
  padding: 16px 26px 18px;
  border: 3px solid var(--tinta);
  border-radius: 8px;
  background: var(--sol);
  box-shadow: 5px 5px 0 var(--tinta);
  transform: rotate(-2deg);
  text-align: center;
}
.rotulo__arriba { font-weight: 800; text-transform: uppercase; letter-spacing: .3em; font-size: .78rem; }
.rotulo__dias { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 1.9rem; line-height: 1.1; }
.rotulo__horas { font-weight: 700; font-size: 1.02rem; }

.polaroid {
  position: relative;
  margin: 0;
  padding: 14px 14px 18px;
  background: #fff;
  box-shadow: 0 30px 50px -25px rgba(34,27,22,.45), 0 0 0 1px rgba(34,27,22,.06);
  transform: rotate(2deg);
  transition: transform .6s var(--suave);
}
.polaroid:hover { transform: rotate(0.5deg) scale(1.01); }
.polaroid__foto { position: relative; aspect-ratio: 4 / 3; background: #DDE7E2; overflow: hidden; }
.polaroid__foto iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.polaroid figcaption { text-align: center; margin-top: 12px; font-size: 1.7rem; }
.cinta-adhesiva {
  position: absolute;
  top: -12px; left: 22px;
  width: 110px; height: 30px;
  background: rgba(233, 162, 59, .55);
  transform: rotate(-8deg);
  z-index: 2;
  clip-path: polygon(2% 0, 98% 6%, 100% 92%, 0 100%);
}
.cinta-adhesiva--der { left: auto; right: 22px; transform: rotate(9deg); background: rgba(15, 94, 99, .35); }

.mapa-tapa {
  position: absolute; inset: 0;
  width: 100%; border: 0; padding: 0;
  background: #E7EEE6;
  cursor: pointer;
  overflow: hidden;
}
.mapa-tapa__dibujo { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-tapa .calle { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: round; }
.mapa-tapa .calle--fina { stroke-width: 8; }
.mapa-tapa .mar { fill: #9CC9C6; }
.mapa-tapa__pin {
  position: absolute; left: 50%; top: 48%;
  width: 54px; height: 54px; margin: -54px 0 0 -27px;
  display: grid; place-items: center;
  border-radius: 50% 50% 50% 0;
  background: var(--barro);
  color: #fff;
  transform: rotate(-45deg);
  box-shadow: 0 8px 14px rgba(0,0,0,.2);
  animation: brinca 1.8s var(--suave) infinite;
}
.mapa-tapa__pin .ico { transform: rotate(45deg); width: 24px; height: 24px; }
@keyframes brinca { 0%, 100% { translate: 0 0; } 40% { translate: 0 -12px; } 60% { translate: 0 0; } }
.mapa-tapa__texto {
  position: absolute; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel);
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .donde__rejilla { grid-template-columns: 1fr; }
  .polaroid { max-width: 520px; }
}

/* ---------- Pie ---------- */
.pie {
  position: relative;
  background: var(--barro);
  color: var(--papel-claro);
  padding: clamp(70px, 10vw, 130px) 0 calc(36px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.pie::before {
  content: "";
  position: absolute;
  width: 640px; aspect-ratio: 1;
  right: -200px; bottom: -340px;
  border-radius: 50%;
  border: 2px dashed rgba(251, 247, 239, .25);
}
.pie__mano { color: var(--sol); font-size: 2.2rem; transform: rotate(-3deg); display: inline-block; }
.pie__titulo { font-size: clamp(2.8rem, 8vw, 6rem); margin-top: 10px; line-height: .95; }
.pie__telefono {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  margin-top: 36px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 6.4vw, 4.2rem);
  letter-spacing: -.02em;
  text-decoration: none;
  border-bottom: 4px solid var(--sol);
  line-height: 1.1;
  transition: color .2s, border-color .2s;
}
.pie__telefono .ico { width: .8em; height: .8em; transition: transform .5s var(--resorte); }
.pie__telefono:hover { color: var(--sol); }
.pie__telefono:hover .ico { transform: rotate(-16deg) scale(1.1); }
.pie__abajo {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 30px;
  margin-top: clamp(60px, 8vw, 100px);
  padding-top: 22px;
  border-top: 1.5px solid rgba(251, 247, 239, .3);
  font-size: .92rem;
  color: rgba(251, 247, 239, .85);
}

/* ---------- Barra fija en celular ---------- */
.barra-movil { display: none; }
@media (max-width: 760px) {
  .barra-movil {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 8px 8px 20px;
    border: 2px solid var(--tinta);
    border-radius: 999px;
    background: var(--papel-claro);
    box-shadow: 4px 4px 0 var(--tinta);
    font-family: var(--f-mano);
    font-size: 1.4rem;
    font-weight: 700;
    transform: translateY(150%);
    transition: transform .5s var(--resorte);
  }
  .barra-movil.esta-visible { transform: none; }
  .barra-movil .btn { font-family: var(--f-texto); box-shadow: none; border-width: 0; }
  .pie { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

/* ---------- Ficha (ventana de la prenda) ---------- */
.ficha {
  width: min(100% - 32px, 1000px);
  max-height: min(100% - 32px, 760px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--papel-claro);
  color: var(--tinta);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.5);
  overflow: hidden;
}
.ficha::backdrop { background: rgba(34, 27, 22, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ficha[open] { animation: ficha-entra .55s var(--suave); }
.ficha[open]::backdrop { animation: desvanece .4s ease; }
.ficha.cerrando { animation: ficha-sale .3s var(--suave) forwards; }
.ficha.cerrando::backdrop { animation: desvanece .3s ease reverse forwards; }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(40px) scale(.96); } }
@keyframes ficha-sale { to { opacity: 0; transform: translateY(30px) scale(.97); } }
@keyframes desvanece { from { opacity: 0; } }
html.vt-activa .ficha[open], html.vt-activa .ficha[open]::backdrop { animation: none; }

.ficha__caja { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); max-height: inherit; }
.ficha__foto {
  position: relative;
  margin: 0;
  background: radial-gradient(ellipse at 50% 40%, #fff, var(--papel) 80%);
  min-height: 0;
}
.ficha__foto img { width: 100%; height: 100%; max-height: 760px; object-fit: contain; padding: 20px; filter: drop-shadow(0 22px 22px rgba(34,27,22,.22)); }
.ficha__foto img.cambia { animation: cambia .45s var(--suave); }
@keyframes cambia { from { opacity: 0; transform: translateX(var(--desde, 30px)); } }
.ficha__foto .sello { font-size: 2rem; }
.ficha__nav {
  position: absolute; top: 50%;
  width: 44px; height: 44px; margin-top: -22px;
  display: grid; place-items: center;
  border: 2px solid var(--tinta);
  border-radius: 50%;
  background: var(--papel-claro);
  box-shadow: 2px 2px 0 var(--tinta);
  cursor: pointer;
  transition: transform .2s var(--suave);
}
.ficha__nav:hover { transform: scale(1.08); }
.ficha__nav:active { transform: scale(.94); }
.ficha__nav--ant { left: 14px; }
.ficha__nav--sig { right: 14px; }
.ficha__nav[hidden] { display: none; }
.ficha__cerrar {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--tinta); color: var(--papel);
  cursor: pointer;
  transition: transform .3s var(--resorte);
}
.ficha__cerrar:hover { transform: rotate(90deg); }

.ficha__info { padding: 44px 40px 32px; overflow-y: auto; display: flex; flex-direction: column; }
.ficha__codigo { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--barro); }
.ficha__codigo span + span { color: var(--tinta-suave); font-weight: 600; }
.ficha__info h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-top: 10px; }
.ficha__marca { color: var(--tinta-suave); margin-top: 8px; font-weight: 600; }
.ficha__datos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  margin: 26px 0 0;
  border: 1.5px solid var(--tinta);
  border-radius: 14px;
  overflow: hidden;
}
.ficha__datos div { padding: 12px 14px; background: var(--papel); min-width: 0; }
.ficha__datos div + div { border-left: 1.5px dashed var(--linea); }
.ficha__datos dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--tinta-suave); }
.ficha__datos dd { margin: 2px 0 0; font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; }
.ficha__precio { background: var(--kraft) !important; text-align: right; }
.ficha__precio dd { font-family: var(--f-mano); font-size: clamp(1.8rem, 3.4vw, 2.3rem); line-height: .9; white-space: nowrap; }
.ficha__nota {
  align-self: flex-start;
  margin-top: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--sol);
  font-weight: 700;
  font-size: .9rem;
  transform: rotate(-2deg);
}
.ficha .btn--grande { margin-top: 26px; white-space: normal; text-align: center; }
.ficha__secundarias { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ficha__secundarias .btn { flex: 1 1 130px; }
.ficha__letra-chica { margin-top: auto; padding-top: 22px; font-size: .86rem; color: var(--tinta-suave); }

@media (max-width: 760px) {
  .ficha {
    width: 100%;
    max-width: 100%;
    max-height: 94dvh;
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
  }
  .ficha[open] { animation: ficha-sube .5s var(--suave); }
  .ficha.cerrando { animation: ficha-baja .3s ease-in forwards; }
  @keyframes ficha-sube { from { transform: translateY(100%); } }
  @keyframes ficha-baja { to { transform: translateY(100%); } }
  .ficha__caja { grid-template-columns: minmax(0, 1fr); overflow-y: auto; overflow-x: hidden; max-height: 94dvh; }
  .ficha__foto { height: 48dvh; }
  .ficha__foto img { padding: 14px; }
  .ficha__info { padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); overflow: visible; }
  .ficha__datos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .ficha__datos div { padding: 10px 10px; }
  .ficha__datos dd { font-size: 1.15rem; }
  .ficha__nav { width: 38px; height: 38px; margin-top: -19px; }
}

/* ---------- Aviso flotante ---------- */
.aviso {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 60;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel);
  font-weight: 700;
  font-size: .95rem;
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform .45s var(--resorte), opacity .3s;
  pointer-events: none;
}
.aviso.esta-visible { transform: translate(-50%, 0); opacity: 1; }
@media (max-width: 760px) { .aviso { bottom: 96px; } }

/* ---------- Aparecer al hacer scroll ---------- */
.js .aparecer:not(.prenda) { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--suave), transform .9s var(--suave); }
.js .aparecer.esta-visible:not(.prenda) { opacity: 1; transform: none; }
.pasos .paso:nth-child(2) { transition-delay: .12s; }
.pasos .paso:nth-child(3) { transition-delay: .24s; }

.sin-js { padding: 20px; text-align: center; background: var(--sol); margin: 0; }

/* Transiciones de vista (filtros y ficha) */
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(foto-prenda), ::view-transition-new(foto-prenda) { height: 100%; object-fit: contain; }

/* ==========================================================================
   MEJORAS DE EXPERIENCIA
   ========================================================================== */

/* Nota de pesos / actualizado */
.catalogo__nota { margin-top: 12px; font-size: .9rem; color: var(--tinta-suave); }
.catalogo__nota b { color: var(--tinta); font-weight: 700; }
.corazon-texto { color: var(--sello); }

/* Buscador y quitar filtros */
.buscador {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 240px; max-width: 340px; min-height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--tinta); border-radius: 999px;
  background: var(--papel-claro);
  transition: box-shadow .2s;
}
.buscador:focus-within { box-shadow: 3px 3px 0 var(--tinta); }
.buscador .ico { color: var(--tinta-suave); }
.buscador input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--tinta); padding: 8px 0; }
.buscador input::placeholder { color: #8C7F72; }
.filtros__limpiar {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; min-height: 38px;
  border: 1.5px dashed var(--barro); border-radius: 999px;
  background: transparent; color: var(--barro);
  font-weight: 700; font-size: .9rem; cursor: pointer;
}
.filtros__limpiar:hover { background: var(--barro); color: var(--papel-claro); border-style: solid; }
.filtros__limpiar[hidden] { display: none; }
@media (max-width: 760px) {
  .filtros { gap: 8px; padding: 12px 0; }
  .chip { min-height: 40px; padding: 8px 15px; align-items: center; }
  .buscador { max-width: none; flex-basis: auto; }
  .filtros__limpiar { align-self: flex-start; }
}

/* Foto de la tarjeta: cargando / rota / corazón */
.prenda__media { position: relative; }
.prenda__foto img { transition: opacity .45s ease, transform .9s var(--suave); }
.prenda__foto.cargando img { opacity: 0; }
.prenda__foto.cargando::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%) 0 0 / 220% 100%;
  animation: brillo 1.3s linear infinite;
}
@keyframes brillo { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.prenda__foto.rota::before {
  content: attr(data-rota); position: absolute; inset: 0; display: grid; place-items: center;
  padding: 20px; text-align: center; font-family: var(--f-mano); font-size: 1.4rem; color: var(--tinta-suave);
}
.corazon {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1.5px solid var(--tinta); border-radius: 50%;
  background: rgba(251, 247, 239, .94); color: var(--tinta);
  cursor: pointer; box-shadow: 2px 2px 0 var(--tinta);
  transition: transform .25s var(--resorte), color .2s;
}
.corazon:hover { transform: scale(1.08); }
.corazon:active { transform: scale(.92); }
.corazon[aria-pressed="true"], [data-guardar-ficha][aria-pressed="true"] { color: var(--sello); }
.corazon .ico, [data-guardar-ficha] .ico { width: 22px; height: 22px; }
.ico--lleno { display: none; }
[aria-pressed="true"] > .ico--lleno { display: block; }
[aria-pressed="true"] > .ico--vacio { display: none; }
.late { animation: late .45s var(--resorte); }
@keyframes late { 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (max-width: 560px) { .corazon { width: 40px; height: 40px; right: 8px; bottom: 8px; } }

/* Botón "Mi lista" en la barra de arriba (computadora) */
.mi-lista {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .55em .9em .55em 1em;
  border: 2px solid var(--tinta); border-radius: 999px;
  background: var(--papel-claro); color: var(--tinta);
  font-weight: 700; font-size: .9rem; cursor: pointer;
  box-shadow: 3px 3px 0 var(--tinta);
  animation: sube .5s var(--resorte);
  transition: transform .18s var(--suave), box-shadow .18s var(--suave);
}
.mi-lista:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--tinta); }
.mi-lista .ico { color: var(--sello); }
.mi-lista b { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: var(--sello); color: #fff; font-size: .8rem; }
.mi-lista.salta { animation: salta .5s var(--resorte); }
.mi-lista[hidden] { display: none; }
@keyframes sube { from { transform: translateY(-14px); opacity: 0; } }
@keyframes salta { 30% { transform: translateY(-6px) rotate(-4deg) scale(1.06); } }
@media (max-width: 820px) { .barra__dentro .mi-lista { margin-left: auto; } .barra__dentro .mi-lista ~ .barra__wa { margin-left: 0; } }
@media (max-width: 760px) { .mi-lista { display: none !important; } }

/* Barra de celular en modo lista */
.barra-movil__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-movil .btn[hidden] { display: none; }
.barra-movil.con-lista .barra-movil__texto { font-family: var(--f-texto); font-size: .98rem; }
.barra-movil.con-lista .barra-movil__texto b { color: var(--sello); }

/* Ventana "Mi lista" */
.lista {
  width: min(100% - 24px, 460px);
  max-height: min(100% - 24px, 720px);
  padding: 0; border: 0; border-radius: 22px;
  background: var(--papel-claro); color: var(--tinta);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.5);
}
.lista::backdrop { background: rgba(34, 27, 22, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.lista[open] { animation: ficha-entra .45s var(--suave); }
.lista__caja { position: relative; padding: 30px 26px 24px; display: flex; flex-direction: column; max-height: inherit; }
.lista h2 { font-size: 2.2rem; margin: 2px 0 6px; }
.lista__ayuda { color: var(--tinta-suave); font-size: .95rem; padding-right: 30px; }
.lista__items { list-style: none; margin: 18px 0 0; padding: 0; overflow-y: auto; flex: 1; display: grid; gap: 10px; align-content: start; }
.lista__item {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 8px 6px 8px 8px; border-radius: 14px; background: var(--papel);
}
.lista__item img { width: 60px; height: 80px; object-fit: contain; background: #fff; border-radius: 10px; }
.lista__item h3 { font-size: 1rem; line-height: 1.15; font-weight: 700; }
.lista__item p { font-size: .8rem; color: var(--tinta-suave); margin-top: 3px; }
.lista__precio { font-family: var(--f-mano); font-size: 1.6rem; font-weight: 700; }
.lista__item--apartada { opacity: .6; }
.lista__item--apartada .lista__precio { text-decoration: line-through; }
.lista__quitar { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--tinta-suave); }
.lista__quitar:hover { background: var(--papel-oscuro); color: var(--tinta); }
.lista__quitar .ico { width: 18px; height: 18px; }
.lista__vacia { margin: 26px 0 10px; text-align: center; color: var(--tinta-suave); }
.lista__vacia[hidden] { display: none; }
.lista__pie { border-top: 1.5px dashed var(--linea); margin-top: 16px; padding-top: 14px; }
.lista__pie[hidden] { display: none; }
.lista__total { display: flex; align-items: baseline; margin-bottom: 12px; font-weight: 700; }
.lista__total b { font-family: var(--f-mano); font-size: 2rem; margin-left: auto; margin-right: 6px; }
.lista__total small { color: var(--tinta-suave); }
.lista__vaciar { display: block; margin: 10px auto 0; color: var(--tinta-suave); }
@media (max-width: 760px) {
  .lista { width: 100%; max-width: 100%; max-height: 90dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .lista[open] { animation: ficha-sube .45s var(--suave); }
  .lista__caja { padding: 26px 18px calc(18px + env(safe-area-inset-bottom)); }
}

/* Ficha: acercar la foto */
.ficha__foto { overflow: hidden; }
.ficha__foto img { cursor: zoom-in; transition: transform .35s var(--suave); }
.ficha__foto.ampliada img { transform: scale(2.3); cursor: zoom-out; touch-action: none; }
.ficha__foto.ampliada .ficha__nav, .ficha__foto.ampliada .sello { opacity: 0; pointer-events: none; }
.ficha__pista {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(34, 27, 22, .78); color: var(--papel);
  font-size: .8rem; font-weight: 700; white-space: nowrap; pointer-events: none;
  transition: opacity .4s;
}
.ficha__pista .ico { width: 15px; height: 15px; }
.ficha.ya-acerco .ficha__pista, .ficha__foto.ampliada .ficha__pista { opacity: 0; }

/* Ficha: botón de apartar siempre a la mano */
.ficha__acciones { display: flex; gap: 10px; margin-top: 26px; }
.ficha .ficha__acciones .btn--grande { margin-top: 0; flex: 1; }
.btn--cuadrado { flex: none; width: 58px; padding: 0; border-radius: 16px; }
.ficha__precio dd small { font-family: var(--f-texto); font-size: .8rem; font-weight: 700; margin-left: 4px; color: var(--tinta-suave); }
@media (max-width: 760px) {
  .ficha__acciones {
    position: sticky; bottom: 0; z-index: 4;
    margin: 18px -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: var(--papel-claro);
    box-shadow: 0 -12px 18px -14px rgba(34, 27, 22, .45);
  }
  .ficha__info { padding-bottom: 0; }
  .ficha__letra-chica { padding-bottom: 18px; }
  .ficha__acciones .btn--grande { font-size: 1rem; padding: .95em 1em; white-space: nowrap; }
  .btn--cuadrado { width: 54px; }
}

/* Pie: llamar y compartir */
.pie__extra { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }
.pie__enlace {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0;
  border: 0; background: none; color: var(--papel-claro);
  font: inherit; font-weight: 700; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(251,247,239,.4); text-underline-offset: 5px;
}
.pie__enlace:hover { text-decoration-color: var(--sol); color: var(--sol); }

/* Página 404 */
.perdido { min-height: 100vh; display: grid; place-content: center; justify-items: start; gap: 14px; max-width: 34rem; margin: 0 auto; padding: 40px 20px; }
.perdido h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); }
.perdido > p:not(.nota-mano) { color: var(--tinta-suave); }
.perdido__gancho { width: 90px; fill: none; stroke: var(--barro); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 10%; animation: columpio 2.4s var(--suave) infinite; }
.perdido__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .cinta__pista { animation: none; }
}