/* ═══ Siria Collection ═══════════════════════════════════════
   Tienda con carrito y checkout. Blancos y rosados.
   ════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  --bg:          #FAF8F6;   /* hueso tibio: el blanco puro se lee barato */
  --surface:     #F4EFEC;   /* piedra: fondo de tarjeta y mosaico */
  --surface-2:   #EDE6E2;
  --bar-bg:      rgba(250,248,246,.84);

  --text:        #14100F;   /* tinta */
  --text-dim:    #4A4340;
  --muted:       #77706C;   /* 4.59:1 sobre --bg; #8A807B daba 3.63 y no pasaba */

  --rose:        #B04A63;
  --rose-soft:   #CE7A90;
  --on-rose:     #FFFFFF;

  --line:        rgba(20,16,15,.22);
  --line-soft:   rgba(20,16,15,.10);

  --sheen:       rgba(255,255,255,.92);
  --tex:         rgba(176,74,99,.07);
  --tex-rose:    rgba(176,74,99,.10);
  --tint:        rgba(176,74,99,.09);

  /* Portada: la única superficie oscura del sitio. */
  --noche:       #15100F;   /* negro tibio, no azulado */
  --bone:        #F6F1EE;   /* la tinta de la portada */
  --rose-luz:    #E0A6B5;   /* el rosa sube de tono para sobrevivir al negro */

  --display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:    "Manrope", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  --maxw: 1240px;
  --gut:  clamp(1.15rem, 4vw, 3.5rem);
  --bay:  clamp(3.5rem, 6.5vw, 6rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:74px; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body.bloqueado{ overflow:hidden; }
img,svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; text-wrap:balance; }
h1,h2{ font-family:var(--display); font-weight:400; font-optical-sizing:auto; }
h3{ font-family:var(--display); font-weight:500; font-size:1.375rem; line-height:1.15; letter-spacing:-.012em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,select,textarea{ font:inherit; }
[hidden]{ display:none !important; }

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

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.shell{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.bay{ padding-block:var(--bay); }

.eyebrow{
  font-size:.6875rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted);
}
.lede{ color:var(--text-dim); max-width:60ch; font-weight:400; }
.fine{ font-size:.875rem; line-height:1.6; color:var(--muted); }
.dinero{ font-variant-numeric:tabular-nums; }

/* ─── Barra superior ─────────────────────────────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:var(--bar-bg);
  backdrop-filter:saturate(140%) blur(22px);
  -webkit-backdrop-filter:saturate(140%) blur(22px);
  transition:background-color .45s ease, color .45s ease;
}
/* Fija y no pegajosa: la portada tiene que llegar hasta el borde de la
   pantalla. Las otras dos vistas empiezan en el tope, así que ellas sí
   necesitan el espacio que la barra ya no ocupa. */
#vista-pagar, #vista-listo{ margin-top:62px; }
/* En vez de una línea dura bajo la barra, un desvanecido: el contenido pasa
   por debajo del material y se disuelve, no se corta. */
.topbar::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:18px;
  background:linear-gradient(180deg, rgba(250,248,246,.85), rgba(250,248,246,0));
  pointer-events:none; transition:opacity .45s ease;
}

/* ── La barra sobre la portada ──────────────────────────────────────
   Mientras la portada manda, la barra es solo tipografía sobre la foto;
   se vuelve material recién cuando el catálogo empieza a pasar debajo. */
body[data-vista="tienda"]:not(.desplazado) .topbar{
  background:transparent; color:var(--bone);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
body[data-vista="tienda"]:not(.desplazado) .topbar::after{ opacity:0; }
body[data-vista="tienda"]:not(.desplazado) .navlinks a{ color:rgba(246,241,238,.78); }
body[data-vista="tienda"]:not(.desplazado) .navlinks a:hover{ color:var(--bone); }
body[data-vista="tienda"]:not(.desplazado) .cartbtn{
  border-color:rgba(246,241,238,.34); color:var(--bone);
}
body[data-vista="tienda"]:not(.desplazado) .cartbtn:hover{ border-color:var(--bone); color:var(--bone); }
/* La cola de la barra son tres cajas iguales —WhatsApp, Instagram y la
   bolsa— y sobre la portada las tres se aclaran juntas. */
@media (prefers-reduced-transparency: reduce){
  .topbar{ background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; }
  body[data-vista="tienda"]:not(.desplazado) .topbar{ background:var(--noche); }
}
.topbar .shell{ display:flex; align-items:center; gap:1rem; min-height:62px; }
/* En pantalla ancha el nombre va al centro y la navegación a la izquierda:
   el eje de la marca es el mismo eje del titular de la portada. */
@media (min-width:920px){
  .topbar .shell{ display:grid; grid-template-columns:1fr auto 1fr; }
  .brandmark{ order:2; justify-self:center; }
  .navlinks{ order:1; justify-self:start; margin-inline:0; }
  .topbar .tail{ order:3; justify-self:end; }
}
/* En la barra la marca es solo el escudo. El nombre ya lo dice el escudo
   —y lo repetía en Cormorant, que no es la tipografía del logo: eran dos
   voces diciendo lo mismo. El nombre sigue ahí para quien no ve la
   imagen, en el `alt` y en el `aria-label`. */
.brandmark{ display:inline-flex; align-items:center; }
.brandmark img{ height:34px; width:auto; display:block; }
.navlinks{ display:none; gap:1.75rem; margin-inline:auto; }
.navlinks a{
  font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); padding-block:.3rem;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.navlinks a:hover{ color:var(--text); border-bottom-color:var(--rose-soft); }
@media (min-width:920px){ .navlinks{ display:flex; } }

.topbar .tail{ display:flex; align-items:center; gap:.6rem; margin-left:auto; }

.cartbtn{
  position:relative; display:grid; place-items:center;
  width:40px; height:40px;
  border:1px solid var(--line-soft); color:var(--text);
  transition:border-color .2s, color .2s;
}
.cartbtn:hover{ border-color:var(--rose); color:var(--rose); }
.cartbtn .globo{
  position:absolute; top:-7px; right:-7px;
  min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center; border-radius:10px;
  background:var(--rose); color:var(--on-rose);
  font-size:.6875rem; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;
}
.cartbtn[data-n="0"] .globo{ display:none; }

/* La red social vive en la barra, no en el pie: en el pie hay que llegar
   hasta abajo para encontrarla. Toma la misma caja que la bolsa para que
   la cola de la barra se lea como un juego y no como piezas sueltas. */
.social{ color:var(--text-dim); }
.social:hover{ border-color:var(--rose); color:var(--rose); }

/* ─── Botones ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-size:.8125rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.85rem 1.5rem; border:1px solid transparent;
  transition:background-color .25s, color .25s, border-color .25s, filter .25s;
}
/* La respuesta va en el momento de presionar, no al soltar: esperar al
   click deja la interfaz muerta durante el gesto. */
.btn:active{ transform:scale(.985); }
.btn{ transition:background-color .25s, color .25s, border-color .25s, filter .25s, transform .1s ease-out; }
.btn--solid{ background:var(--rose); color:var(--on-rose); border-color:var(--rose); }
.btn--solid:hover{ filter:brightness(1.12); }
.btn--ghost{ border-color:var(--line); color:var(--text); }
.btn--ghost:hover{ border-color:var(--rose); color:var(--rose); }
.btn--mini{ padding:.5rem 1rem; font-size:.75rem; }
.btn--ancho{ width:100%; }

/* ─── Portada ────────────────────────────────────────────── */
/* Una sola pantalla, un solo eje. Todo se apila en el centro —lugar,
   titular, línea, botones, pieza— y la imagen llega hasta los cuatro
   bordes. La oscuridad es deliberada: el resto del sitio es hueso, así
   que la apertura tiene que sonar distinta para leerse como portada y
   no como una sección más.
   La rejilla es 1fr/auto: el texto se centra en lo que sobra y la pieza
   se sienta abajo. Nunca se encabalgan, a ninguna altura de pantalla. */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  height:100vh; height:100svh;
  background:var(--noche); color:var(--bone);
  text-align:center;
}
/* Alto fijo y no mínimo, a propósito: con el escudo arriba la columna
   quedó al filo y en pantallas bajas se salía. Así la pieza —que es lo
   último y lo único que puede ceder— encoge sola hasta donde haga falta.
   El texto nunca encoge y nunca se corta: lo que se recorta, si se llega
   a recortar, es la cola del reflejo. */
.hero-copy{ flex:0 0 auto; }
.hero-pieza{ flex:0 1 auto; min-height:0; object-fit:contain; }
/* Dos focos y una viñeta. Sin ellos el negro se ve plano —apagado, no
   profundo—: el rosado tiñe el aire, el ámbar cae sobre la pieza. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(76% 56% at 50% 76%, rgba(199,107,131,.32), rgba(199,107,131,0) 70%),
    radial-gradient(32% 28% at 50% 82%, rgba(226,176,124,.26), rgba(226,176,124,0) 74%),
    radial-gradient(122% 96% at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,.60));
}
/* Grano. Un degradado limpio se banda en pantallas de 8 bits y delata la
   pantalla; el ruido lo rompe y le devuelve cuerpo de impresión. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.07; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
.hero-copy{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding-block:clamp(4.5rem,7.5vh,6.5rem) clamp(1.25rem,3vh,2.25rem);
}
.hero-copy .shell{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(.95rem,2.2vh,1.6rem);
  max-width:54rem;
}
/* El escudo abre el eje. Es la única pieza de la portada que no es
   tipografía ni foto de producto, así que lleva su propio aire debajo. */
.hero-escudo{
  height:clamp(76px,11vh,124px); width:auto;
  margin-bottom:clamp(.2rem,1.2vh,.9rem);
}
.hero .eyebrow{
  color:rgba(246,241,238,.62); letter-spacing:.34em;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.3rem .55rem;
}
.hero h1{
  font-size:clamp(2.4rem,5.2vw,4.5rem); line-height:1.02; letter-spacing:-.02em;
  font-weight:300; max-width:24ch;
}
/* El rosa de marca (#B04A63) se hunde en el negro; sobre la portada sube
   de tono y mantiene el mismo gesto. */
.hero h1 em{ font-style:italic; color:var(--rose-luz); }
.hero .lede{ color:rgba(246,241,238,.74); max-width:44ch; text-wrap:balance; }
.hero-actions{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.7rem; padding-top:.45rem;
}
/* La pieza cae al pie del eje. El reflejo viene pintado en el archivo y
   se desvanece a cero, así que el borde de abajo nunca se corta. */
.hero-pieza{
  position:relative; z-index:1;
  display:block; margin-inline:auto;
  height:clamp(180px,27vh,355px); width:auto;
  margin-bottom:clamp(1.25rem,5vh,3.25rem);   /* piso: el reflejo muere antes del borde */
}

/* Botones sobre fondo oscuro: el relleno es la luz, no el rosa. */
.btn--luz{ background:var(--bone); color:#161110; border-color:var(--bone); }
.btn--luz:hover{ background:var(--rose-luz); border-color:var(--rose-luz); }
.btn--linea{ border-color:rgba(246,241,238,.42); color:var(--bone); }
.btn--linea:hover{ border-color:var(--bone); background:rgba(246,241,238,.12); }

/* Entrada: el eje se arma de arriba abajo, un escalón por elemento.
   No hay gesto de por medio, así que un keyframe corto basta. */
@media (prefers-reduced-motion: no-preference){
  .hero-copy .shell > *{ animation:sube .85s cubic-bezier(.16,1,.3,1) backwards; }
  .hero-copy .shell > *:nth-child(1){ animation-delay:.05s; }
  .hero-copy .shell > *:nth-child(2){ animation-delay:.13s; }
  .hero-copy .shell > *:nth-child(3){ animation-delay:.21s; }
  .hero-copy .shell > *:nth-child(4){ animation-delay:.29s; }
  .hero-copy .shell > *:nth-child(5){ animation-delay:.37s; }
  .hero-pieza{ animation:asoma 1.1s cubic-bezier(.16,1,.3,1) .12s backwards; }
}
/* Portátiles de pantalla baja: el titular cede primero, la pieza después.
   Nada se corta al filo de la primera pantalla. */
@media (max-height:760px) and (min-width:720px){
  .hero h1{ font-size:clamp(2rem,3.9vw,3rem); }
  .hero-pieza{ height:clamp(165px,27vh,280px); }
}

@keyframes sube{ from{ opacity:0; transform:translateY(16px); } }
@keyframes asoma{ from{ opacity:0; transform:translateY(26px) scale(.985); } }

/* Franja de garantías: el renglón que separa la portada del catálogo. */
.franja{ border-block:1px solid var(--line-soft); background:var(--surface); }
.franja ul{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.7rem clamp(1.5rem,4vw,3.25rem); padding-block:1.15rem;
}
.franja li{
  font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-dim); display:flex; align-items:center; gap:.6rem;
}
.franja li + li::before{
  content:""; width:3px; height:3px; border-radius:50%;
  background:var(--rose-soft); margin-right:.4rem;
}

/* ─── Entrada al catálogo ────────────────────────────────── */
/* El mismo eje de la portada, ya en hueso: cabecera al centro, los tres
   rubros en columnas separadas por pelo, y un botón que abre todo. Cada
   rubro es un enlace con `data-filter`, el mismo contrato que usan los
   links de la barra: al tocarlo el catálogo ya viene filtrado. */
.intro{ text-align:center; }
.intro .shell{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.1rem,2.4vw,1.7rem);
}
.intro h2{
  font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.04; letter-spacing:-.02em;
  max-width:18ch;
}
.intro .lede{ max-width:52ch; }
/* Las dos líneas son un mismo pensamiento: van como estrofa, no como dos
   párrafos sueltos. Y el catálogo empieza justo debajo, así que la entrada
   no pone pie propio: el aire lo pone la sección de abajo. */
.intro .lede + .lede{ margin-top:-1.05rem; }
.intro.bay{ padding-bottom:0; }

.rubros{
  display:grid; grid-template-columns:repeat(3, 1fr);
  width:100%; margin-top:clamp(1rem,2.5vw,2rem);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.rubros li + li{ border-left:1px solid var(--line-soft); }
.rubros a{
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  height:100%; padding:clamp(1.6rem,3vw,2.4rem) clamp(.9rem,2vw,1.6rem);
  transition:background-color .25s;
}
.rubros a:hover{ background:var(--tint); }
.rubros h3{ transition:color .2s; }
.rubros a:hover h3{ color:var(--rose); }
.rubros h3{ font-size:1.5rem; }
.rubros p{
  color:var(--muted); font-size:.9375rem; line-height:1.55;
  max-width:26ch; text-wrap:balance;
}
/* La flecha corre al pasar: dice para dónde va el toque antes de darlo. */
.rubros .ir{
  margin-top:auto; padding-top:.6rem;
  font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rose); display:inline-flex; align-items:center; gap:.45rem;
}
.rubros .ir svg{ transition:transform .25s cubic-bezier(.16,1,.3,1); }
.rubros a:hover .ir svg{ transform:translateX(4px); }

/* ─── Catálogo ───────────────────────────────────────────── */
.toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.25rem;
  padding-bottom:1.5rem; margin-bottom:2rem;
  border-bottom:1px solid var(--line-soft);
}
.filtros{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; }
.filters{ display:flex; flex-wrap:wrap; gap:.45rem; }
.grupo-etq{
  flex:none; font-size:.6875rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.sep{ flex:none; width:1px; height:22px; background:var(--line); }
.chip-f{
  font-size:.75rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  padding:.55rem 1rem; border:1px solid var(--line-soft); color:var(--text-dim);
  transition:border-color .2s, color .2s, background-color .2s;
}
.chip-f:hover{ border-color:var(--line); color:var(--text); }
.chip-f[aria-pressed="true"]{ background:var(--rose); border-color:var(--rose); color:var(--on-rose); }

.search{
  display:flex; align-items:center; gap:.6rem; margin-left:auto;
  border-bottom:1px solid var(--line-soft); padding:.3rem .1rem;
}
.search:focus-within{ border-bottom-color:var(--rose); }
.search svg{ flex:none; color:var(--muted); }
.search input{
  border:none; background:none; color:var(--text);
  font-size:.9375rem; font-weight:500; width:clamp(120px,20vw,190px); padding:.25rem 0;
}
.search input::placeholder{ color:var(--muted); }
.search input:focus{ outline:none; }
#conteo{
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums;
}

.grid{
  display:grid; gap:clamp(1.25rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
}
.card{ display:flex; flex-direction:column; gap:.85rem; }
.frame{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background-color:var(--surface);
  display:grid; place-items:center;
  color:var(--rose-soft);
}
/* La foto se acerca al pasar el mouse. La escala va en el <img>, que es
   compositable; animar el marco obligaría a recalcular la rejilla. */
.frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.card:hover .frame img{ transform:scale(1.045); }
.frame .mark{ width:52%; height:auto; opacity:.55; transition:opacity .25s; }
.card:hover .frame .mark{ opacity:.9; }
/* La ilustración es el respaldo: cede el lugar recién cuando la foto ya
   pintó, no antes, o el marco se queda en blanco mientras carga. El
   `opacity` de .mark crea contexto de apilamiento, así que sin esconderla
   se pinta encima del <img>. Si la foto no carga, el onerror borra el
   <img> y la marca se queda donde estaba. */
.frame img.cargada + .mark{ display:none; }

.f-perfumeria{ background-image:linear-gradient(180deg,var(--sheen),transparent 55%); }
.f-calzado{ background-image:radial-gradient(120% 90% at 22% 8%,var(--tint),transparent 60%); }
.f-accesorios{
  background-image:
    repeating-linear-gradient(0deg,var(--tex) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,var(--tex) 0 1px,transparent 1px 4px);
}

.card-body{ display:flex; flex-direction:column; gap:.35rem; flex:1 1 auto; }
.card-cat{ font-size:.625rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.card h3{ font-size:1.3125rem; line-height:1.2; }
.card-detail{ font-size:.8125rem; color:var(--muted); line-height:1.55; }
.card-foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  margin-top:auto; padding-top:.7rem; border-top:1px solid var(--line-soft);
}
.card-price{ font-weight:600; font-size:1.0625rem; letter-spacing:.01em; font-variant-numeric:tabular-nums; }
.card-price--pedir{ font-size:.9375rem; font-weight:500; letter-spacing:.01em; color:var(--muted); }
.stock{ font-size:.625rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.stock--si{ color:var(--text-dim); }
.stock--pocas{ color:var(--rose); }
.stock--encargo{ color:var(--muted); }

.card-add{ display:flex; gap:.5rem; }
.talla{
  flex:0 0 auto; width:5.6rem;
  border:1px solid var(--line-soft); background:var(--bg); color:var(--text);
  font-size:.8125rem; font-weight:600; padding:.55rem .4rem;
}
.talla[data-vacia="1"]{ color:var(--muted); border-color:var(--rose); }
.btn--add{
  flex:1 1 auto; padding:.75rem .8rem; font-size:.6875rem; letter-spacing:.18em;
  background:var(--text); border-color:var(--text); color:var(--bg);
}
.btn--add:hover{ background:var(--rose); border-color:var(--rose); filter:none; }
.btn--add[data-hecho="1"]{ background:var(--rose); border-color:var(--rose); }

/* Revelado al entrar en vista: 12 px, que se lee como aparición y no como
   deslizamiento. El estado inicial lo pone el JS, así que sin JS las
   tarjetas quedan visibles. */
.card[data-revelar]{ opacity:0; transform:translateY(12px); }
.card[data-revelar="visto"]{
  opacity:1; transform:none;
  transition:opacity .35s ease-out, transform .35s cubic-bezier(.2,.7,.2,1);
}

#vacio{ padding:3rem 0; text-align:center; }
#vacio p{ color:var(--muted); }

/* ─── Garantías · pasos · logística ──────────────────────── */
.trio{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
@media (min-width:800px){ .trio{ grid-template-columns:repeat(3,1fr); } }
.trio section{ display:flex; flex-direction:column; gap:.6rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.trio h3{ font-size:1.25rem; font-weight:700; line-height:1.3; }
.trio p{ font-size:.9375rem; color:var(--text-dim); }
.trio .num{ font-family:var(--display); font-style:italic; font-size:2rem; line-height:1; color:var(--rose); }

.logistics{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
@media (min-width:800px){ .logistics{ grid-template-columns:1fr 1fr; } }
.logistics section{ display:flex; flex-direction:column; gap:1rem; }
.logistics h3{ font-size:1.5rem; font-weight:700; }
.facts li{
  display:flex; gap:.9rem; padding-block:.75rem;
  border-bottom:1px solid var(--line-soft);
  font-size:.9375rem; color:var(--text-dim); line-height:1.6;
}
.facts li::before{ content:""; flex:none; width:12px; height:1px; background:var(--rose-soft); margin-top:.7em; }
.facts b{ color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; }

/* ─── Cierre y pie ───────────────────────────────────────── */
.closing{ border-top:1px solid var(--line); background:linear-gradient(180deg,var(--surface),var(--bg)); }
.closing .shell{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; text-align:center; }
.closing h2{ font-size:clamp(1.75rem,3.6vw,2.75rem); line-height:1.15; max-width:20ch; }
.closing h2 em{ font-style:italic; color:var(--rose); }

.foot{ border-top:1px solid var(--line-soft); }
.foot .shell{ display:grid; gap:2.25rem; padding-block:clamp(2.25rem,4vw,3.25rem); }
@media (min-width:800px){ .foot .shell{ grid-template-columns:1.5fr 1fr 1fr; } }
.foot h4{
  font-size:.6875rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rose); margin:0 0 .9rem;
}
.foot .brandmark{ display:block; font-size:1.25rem; margin-bottom:.8rem; }
.pie-escudo{ height:78px; width:auto; display:block; margin-bottom:1rem; }
.foot ul{ display:flex; flex-direction:column; gap:.5rem; }
.foot a{ color:var(--text-dim); }
.foot a:hover{ color:var(--rose); }
.colophon{
  border-top:1px solid var(--line-soft); padding-block:1.1rem;
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; justify-content:space-between;
}

/* ─── Cajón del pedido ───────────────────────────────────── */
.fondo{ position:fixed; inset:0; z-index:80; background:rgba(43,26,30,.42); }
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:90;
  width:min(420px,100%);
  display:flex; flex-direction:column;
  background:var(--bg); border-left:1px solid var(--line);
  box-shadow:-30px 0 70px rgba(20,16,15,.13);
  animation:entra .28s cubic-bezier(.22,.7,.2,1);
}
@keyframes entra{ from{ transform:translateX(100%); } to{ transform:none; } }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.25rem; border-bottom:1px solid var(--line-soft);
}
.drawer-head h2{ font-size:1.35rem; }
.cerrar{
  display:grid; place-items:center; width:38px; height:38px;
  border:1px solid var(--line-soft); color:var(--text-dim);
  transition:border-color .2s, color .2s;
}
.cerrar:hover{ border-color:var(--rose); color:var(--rose); }
.drawer-cuerpo{ flex:1 1 auto; overflow-y:auto; padding:.5rem 1.25rem 1.25rem; }
.drawer-pie{
  border-top:1px solid var(--line);
  padding:1.15rem 1.25rem calc(1.15rem + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; gap:.85rem;
  background:var(--surface);
}

.linea{
  display:grid; grid-template-columns:1fr auto; gap:.4rem .9rem;
  padding-block:1rem; border-bottom:1px solid var(--line-soft);
}
.linea-nombre{ font-weight:700; font-size:.9375rem; line-height:1.35; }
.linea-var{ font-size:.8125rem; color:var(--muted); line-height:1.4; }
.linea-precio{ font-weight:800; font-variant-numeric:tabular-nums; text-align:right; }
.linea-abajo{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.cant{ display:flex; align-items:center; border:1px solid var(--line-soft); }
.cant button{
  width:34px; height:34px; display:grid; place-items:center;
  font-size:1.05rem; font-weight:700; color:var(--text-dim);
  transition:background-color .2s, color .2s;
}
.cant button:hover{ background:var(--surface-2); color:var(--rose); }
.cant span{ min-width:2.1rem; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.quitar{
  font-size:.75rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid transparent; padding-bottom:1px;
}
.quitar:hover{ color:var(--rose); border-bottom-color:var(--rose); }

.vacio-carrito{ padding:3rem 0; text-align:center; display:flex; flex-direction:column; gap:1.25rem; align-items:center; }
.vacio-carrito p{ color:var(--muted); }

.sumario{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.sumario .etq{ font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.sumario .val{ font-weight:800; font-size:1.35rem; }

/* ─── Checkout ───────────────────────────────────────────── */
.pagar{ display:grid; gap:clamp(1.75rem,4vw,3rem); align-items:start; }
@media (min-width:900px){ .pagar{ grid-template-columns:1.4fr 1fr; } }
.pagar-form{ display:flex; flex-direction:column; gap:2rem; }
.bloque{ display:flex; flex-direction:column; gap:1rem; }
.bloque > h3{ font-size:1.25rem; font-weight:700; }
.rejilla{ display:grid; gap:1rem; }
@media (min-width:560px){ .rejilla--2{ grid-template-columns:1fr 1fr; } }

.campo{ display:flex; flex-direction:column; gap:.35rem; }
.campo label{
  font-size:.75rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-dim);
}
.campo input, .campo select, .campo textarea{
  border:1px solid var(--line-soft); background:var(--bg); color:var(--text);
  font-size:1rem; font-weight:500; padding:.8rem .9rem; width:100%;
}
.campo textarea{ resize:vertical; min-height:5rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus{ outline:none; border-color:var(--rose); }
.campo[data-mal="1"] input, .campo[data-mal="1"] select, .campo[data-mal="1"] textarea{
  border-color:var(--rose); background:var(--surface);
}
.campo .err{ font-size:.8125rem; font-weight:600; color:var(--rose); }

.opciones{ display:flex; flex-direction:column; gap:.6rem; }
.opcion{
  display:flex; gap:.85rem; align-items:flex-start;
  padding:.9rem 1rem; border:1px solid var(--line-soft); cursor:pointer;
  transition:border-color .2s, background-color .2s;
}
.opcion.sel{ border-color:var(--rose); background:var(--surface); }
.opcion input{ margin:.4rem 0 0; accent-color:var(--rose); flex:none; }
.opcion .op-t{ display:block; font-weight:700; font-size:.9375rem; }
.opcion .op-d{ display:block; font-size:.875rem; color:var(--muted); line-height:1.5; }
.opcion .op-p{ margin-left:auto; font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums; }
.opcion[data-off="1"]{ opacity:.45; cursor:not-allowed; }

.resumen{
  border:1px solid var(--line); background:var(--surface);
  padding:1.35rem; display:flex; flex-direction:column; gap:1.1rem;
}
@media (min-width:900px){ .resumen{ position:sticky; top:82px; } }
.resumen h3{ font-size:1.25rem; font-weight:700; }
.resumen-lineas{ display:flex; flex-direction:column; gap:.75rem; }
.rl{ display:flex; justify-content:space-between; gap:1rem; font-size:.9375rem; }
.rl span:first-child{ color:var(--text-dim); }
.rl span:last-child{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.resumen-sumas{ display:flex; flex-direction:column; gap:.5rem; padding-top:.9rem; border-top:1px solid var(--line-soft); }
.total{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding-top:.85rem; border-top:1px solid var(--line);
  font-size:1.35rem; font-weight:800; font-variant-numeric:tabular-nums;
}
.aviso{
  font-size:.8125rem; line-height:1.55; color:var(--muted);
  border-left:2px solid var(--rose-soft); padding-left:.8rem;
}

/* ─── Confirmación ───────────────────────────────────────── */
.listo{ max-width:660px; margin-inline:auto; display:flex; flex-direction:column; gap:1.4rem; align-items:flex-start; }
.listo h1{ font-size:clamp(1.9rem,5vw,2.75rem); line-height:1.12; }
.pedido-num{
  font-weight:800; font-size:1.35rem; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; color:var(--rose);
}
.banco{
  width:100%; border:1px solid var(--line-soft); background:var(--surface);
  padding:1.1rem 1.25rem; display:flex; flex-direction:column; gap:.6rem;
}
.banco .cta-b{ display:flex; justify-content:space-between; gap:1rem; font-size:.9375rem; flex-wrap:wrap; }
.banco .cta-b span{ font-variant-numeric:tabular-nums; color:var(--text-dim); }

/* ─── Vistas ─────────────────────────────────────────────── */
body[data-vista="pagar"] .foot,
body[data-vista="listo"] .foot{ display:none; }
body[data-vista="pagar"] .wa-bar,
body[data-vista="listo"] .wa-bar,
body[data-vista="pagar"] .cart-bar,
body[data-vista="listo"] .cart-bar{ display:none !important; }

.vista-head{
  display:flex; flex-direction:column; gap:.8rem; align-items:flex-start;
  margin-bottom:clamp(1.75rem,4vw,2.5rem);
}
.volver{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); transition:color .2s;
}
.volver:hover{ color:var(--rose); }

/* ─── Barras fijas de móvil ──────────────────────────────── */
.wa-bar, .cart-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  align-items:center; gap:.6rem; width:100%;
  background:var(--rose); color:var(--on-rose);
  font-size:.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom,0px));
  box-shadow:0 -14px 34px rgba(20,16,15,.10);
}
.wa-bar{ justify-content:center; }
.cart-bar{ justify-content:space-between; }

/* ─── Móvil ──────────────────────────────────────────────── */
@media (max-width:719px){
  body{ padding-bottom:5rem; }
  html{ scroll-padding-top:72px; }

  /* El mismo eje de la portada manda en la barra: el nombre al centro,
     con la bolsa a la derecha y su hueco espejo a la izquierda. El botón
     de WhatsApp de la barra sobra —la barra fija de abajo ya lo es— y sin
     él el nombre queda centrado en la pantalla, no empujado. */
  /* `1fr auto 1fr` en vez de anchos fijos: el escudo queda centrado sin
     importar cuántas piezas tenga la cola. */
  .topbar .shell{ display:grid; grid-template-columns:1fr auto 1fr; }
  /* El tracking deja aire después de la última letra: centrado, hay que
     devolver la mitad para que el nombre quede óptico y no matemático. */
  .brandmark{ grid-column:2; justify-self:center; }
  .brandmark img{ height:30px; }
  .topbar .tail{ grid-column:3; justify-self:end; }
  /* En el teléfono la barra fija de abajo ya es el botón de WhatsApp, y
     tres cajas no caben sin descentrar el escudo: se va la de WhatsApp. */
  .topbar .tail .wa-icono{ display:none; }

  .hero-copy{ padding-block:clamp(4.75rem,11vh,6.5rem) 1.1rem; }
  /* El renglón de lugar no cabe de un tirón en el teléfono: en vez de
     dejar que se parta por donde sea, se apila en dos líneas limpias y el
     punto separador se retira. */
  .hero-escudo{ height:clamp(64px,9.5vh,96px); }
  .hero .eyebrow{ flex-direction:column; gap:.3rem; letter-spacing:.26em; }
  .hero .eyebrow .punto{ display:none; }
  .hero h1{ font-size:clamp(1.9rem,7.8vw,2.7rem); max-width:17ch; }
  .hero .lede{ font-size:.9375rem; max-width:30ch; }
  .hero-actions{ width:100%; gap:.6rem; justify-content:center; }
  .hero-actions .btn{ flex:0 1 auto; width:min(100%, 19rem); }
  /* En el teléfono la barra fija de abajo ya es el botón de WhatsApp:
     repetirlo en la portada es ruido. */
  .hero-actions .btn--linea{ display:none; }

  .rubros{ grid-template-columns:1fr; }
  .rubros li + li{ border-left:0; border-top:1px solid var(--line-soft); }
  .rubros a{ padding:1.4rem .5rem; }
  /* La barra fija de WhatsApp tapa los últimos 5rem: la pieza los cede. */
  .hero-pieza{ height:clamp(155px,23vh,245px); margin-bottom:clamp(4.5rem,9vh,6rem); }


  .toolbar{
    position:sticky; top:63px; z-index:50;
    margin-inline:calc(var(--gut) * -1);
    margin-bottom:1.5rem;
    padding:.7rem var(--gut);
    gap:.55rem .8rem;
    background:var(--bar-bg);
    backdrop-filter:saturate(150%) blur(12px);
    -webkit-backdrop-filter:saturate(150%) blur(12px);
  }
  .search{ order:0; flex:1 1 auto; min-width:0; margin-left:0; }
  .search input{ width:100%; min-width:0; }
  #conteo{ order:1; }
  .filtros{
    order:2; flex:1 1 100%; flex-wrap:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut);
  }
  .filtros::-webkit-scrollbar{ display:none; }
  .filters{ flex-wrap:nowrap; }
  .chip-f{ flex:none; padding:.65rem 1.05rem; }

  .grid{ grid-template-columns:repeat(2,1fr); gap:1.35rem .8rem; }
  .card{ gap:.7rem; }
  .card h3{ font-size:1rem; }
  .card-detail{ font-size:.8125rem; line-height:1.45; }
  .card-foot{ flex-direction:column; align-items:flex-start; gap:.15rem; padding-top:.6rem; }
  .card-price{ font-size:1.0625rem; }
  .card-add{ flex-direction:column; gap:.4rem; }
  .talla{ width:100%; }

  .colophon{ flex-direction:column; gap:.35rem; }

  .wa-bar:not([hidden]){ display:flex; }
  .cart-bar:not([hidden]){ display:flex; }
}

/* Teléfono chico o con mucha barra de navegador: el alto útil baja de 700
   y la portada, tal cual, empuja la pieza fuera de la pantalla. Todo cede
   un punto —tipografía, aire y pieza— antes que dejar la foto a medias.
   Va después del bloque de móvil a propósito: tiene que ganarle. */
@media (max-width:719px) and (max-height:700px){
  .hero-copy{ padding-block:3.9rem .8rem; }
  .hero-copy .shell{ gap:.75rem; }
  .hero-escudo{ height:clamp(52px,8vh,70px); margin-bottom:0; }
  .hero .eyebrow{ font-size:.625rem; letter-spacing:.22em; }
  .hero h1{ font-size:clamp(1.6rem,6.6vw,2.2rem); }
  .hero .lede{ font-size:.875rem; }
  .hero-pieza{ height:20vh; margin-bottom:3.8rem; }
}

/* Movimiento reducido no es "sin respuesta": es la misma información sin
   desplazamiento. Se quedan opacidad y color; se van traslación y escala.
   Va al final de la hoja a propósito: tiene que ganarle a las reglas de
   movimiento que están más arriba. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .drawer{ animation:none; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.12s !important;
  }
  .card[data-revelar]{ transform:none; }
  .card:hover .frame img{ transform:none; }
  .btn:active{ transform:none; }
}

/* ─── Ficha de producto ──────────────────────────────────── */
/* Cada pieza tiene su página propia bajo /producto/. La ficha es la
   tarjeta del catálogo abierta: la misma foto en el mismo marco, los
   mismos datos, pero con aire para leerlos y una dirección que se puede
   mandar por WhatsApp. */
.hoja{ padding-top:62px; }

.migas{
  display:flex; flex-wrap:wrap; gap:.5rem;
  font-size:.6875rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
  margin-bottom:clamp(1.25rem,3vw,2.25rem);
}
.migas a:hover{ color:var(--rose); }
.migas span{ color:var(--line); }

.ficha{ display:grid; gap:clamp(1.5rem,4vw,3.25rem); align-items:start; }
@media (min-width:880px){
  .ficha{ grid-template-columns:minmax(0,.9fr) minmax(0,1fr); }
  /* La foto de una pieza es 4:5 y siempre sale más alta que sus datos.
     El texto se queda mientras la foto corre —al revés se veía un hueco
     largo a la derecha— y la foto lleva techo para no comerse la página. */
  .ficha-datos{ position:sticky; top:86px; }
}
.ficha .frame{ aspect-ratio:4/5; max-width:520px; width:100%; }

.ficha-datos{ display:flex; flex-direction:column; align-items:flex-start; gap:.85rem; }
.ficha-datos h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.85rem,3.4vw,2.85rem); line-height:1.08; letter-spacing:-.015em;
}
.ficha-detalle{ color:var(--text-dim); }
.ficha-precio{
  font-family:var(--display); font-size:clamp(1.6rem,2.6vw,2.1rem);
  line-height:1; letter-spacing:-.01em;
}
.ficha-precio--pedir{ font-size:1.25rem; color:var(--muted); }
.ficha-datos .talla{ margin-top:.35rem; }
.ficha-acciones{ display:flex; flex-wrap:wrap; gap:.7rem; padding-top:.5rem; width:100%; }
.ficha-acciones .btn{ flex:1 1 13rem; }
/* El botón vuelve a su tamaño de botón: en la tarjeta es un remate chico,
   acá es la acción de toda la página. */
.ficha-acciones .btn[data-hecho="1"]{ background:var(--text); border-color:var(--text); }

/* El acuse no reemplaza al botón: lo acompaña. Quitarlo de la pantalla
   deja al que agregó sin saber si pasó algo. */
.ficha-hecho{
  width:100%; padding:.85rem 1rem;
  border-left:2px solid var(--rose); background:var(--tint);
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .9rem;
}
.ficha-hecho a{ font-weight:700; color:var(--rose); }
.ficha-hecho a:hover{ text-decoration:underline; }

.ficha-nota{ padding-top:.6rem; border-top:1px solid var(--line-soft); width:100%; }

.tambien{ margin-top:clamp(3rem,7vw,5.5rem); }
.tambien h2{
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  padding-bottom:1.25rem; margin-bottom:2rem;
  border-bottom:1px solid var(--line-soft);
}

/* En la tarjeta, la foto y el nombre llevan a la ficha. */
.card h3 a{ transition:color .2s; }
.card:hover h3 a, .card h3 a:hover{ color:var(--rose); }

@media (max-width:719px){
  .ficha-acciones .btn{ flex:1 1 100%; }
}

/* Lo que se puede afirmar de la pieza: de dónde viene y cómo llega. Va
   arriba del botón porque es parte de la decisión de comprar, no letra
   chica. Solo perfumería lo lleva; del resto el sitio no afirma
   procedencia. */
.ficha-sello{
  display:flex; align-items:flex-start; gap:.6rem;
  width:100%; padding:.75rem .9rem;
  border:1px solid var(--line-soft);
  font-size:.9375rem; line-height:1.5; color:var(--text-dim);
}
.ficha-sello svg{ flex:none; margin-top:.15rem; color:var(--rose); }