/* ---------- Barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40; height: 74px; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: color-mix(in srgb, var(--v-950) 92%, transparent); color: var(--ivory);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.top-nav { display: flex; gap: clamp(16px, 2.4vw, 38px); }
.top-nav a { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: color-mix(in srgb, var(--ivory) 82%, transparent); padding: 8px 0; background: linear-gradient(var(--brass), var(--brass)) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease-out), color .3s; }
.top-nav a:hover { color: var(--ivory); background-size: 100% 1px; }
.crest { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.crest-croc { width: clamp(70px, 6.4vw, 92px); }
.crest i { width: 1px; height: 30px; background: color-mix(in srgb, var(--brass) 60%, transparent); }
.crest-lq { width: auto; height: 40px; }
.top-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.top-wa { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--brass-hi); border: 1px solid color-mix(in srgb, var(--brass) 55%, transparent); }
.top-wa:hover { background: var(--brass); color: var(--v-950); }
.top-bag { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--brass) 55%, transparent); background: none; color: var(--ivory); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
.top-bag:hover { background: color-mix(in srgb, var(--brass) 14%, transparent); }
.top-bag b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--brass); color: var(--v-950); font-size: .74rem; letter-spacing: 0; display: grid; place-items: center; }

/* ---------- Portada: galería. La pieza enmarcada en marfil con filete de latón; el LQ grabado detrás ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate; color: var(--ivory); background: var(--v-900);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(32px, 6vw, 110px);
  min-height: clamp(660px, calc(100svh - 74px), 940px); padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(56px, 7vw, 110px);
}
.hero-lq { position: absolute; z-index: -1; right: 2%; top: 50%; translate: 0 -50%; width: min(58vw, 900px); height: auto; opacity: .12; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .hero-lq { animation: emboss 2.4s .2s var(--ease-out) backwards; } }
@keyframes emboss { from { opacity: 0; scale: 1.03; } }
.hero h1 { font-size: clamp(3.2rem, 6.8vw, 6rem); line-height: .94; letter-spacing: -.025em; font-weight: 400; }
.hero h1 em { display: block; font-style: italic; color: var(--brass-hi); padding-left: .5em; }
.lede { margin-top: 30px; max-width: 38ch; font-size: clamp(1.02rem, 1.3vw, 1.16rem); line-height: 1.7; color: color-mix(in srgb, var(--ivory) 78%, transparent); font-weight: 300; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 38px 0 0; }
.hero-sign { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 44px; }
.hero-house { font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--brass-hi); }

.hero-frame { margin: 0; justify-self: center; width: min(430px, 100%); display: grid; gap: 22px; }
.passe {
  width: 100%; aspect-ratio: 4 / 5; padding: 13% 12% 11%; border: 0; display: grid; place-items: center; background: var(--paper);
  box-shadow: inset 0 0 0 14px var(--paper), inset 0 0 0 15px color-mix(in srgb, var(--brass) 80%, transparent), 0 50px 90px -40px rgba(0, 0, 0, .75);
}
.passe > svg, .passe > img { width: 100%; height: 100%; object-fit: contain; }
.hero-frame figcaption { display: grid; justify-items: center; gap: 6px; text-align: center; }
.cap-no { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--brass-hi); }
.hero-frame figcaption strong { font: 400 1.6rem/1.15 var(--font-display); }
.hero-frame figcaption > span:not(.cap-no) { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--ivory) 66%, transparent); }
.hero-frame .price { color: var(--ivory); font-size: 1.04rem; }
.hero .price s { color: color-mix(in srgb, var(--ivory) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .hero-frame { animation: frame-in 1.4s .2s var(--ease-out) backwards; }
  .hero-copy > * { animation: copy-in 1.1s var(--ease-out) backwards; }
  .hero-copy > :nth-child(2) { animation-delay: .12s; }
  .hero-copy > :nth-child(3) { animation-delay: .22s; }
  .hero-copy > :nth-child(4) { animation-delay: .32s; }
}
@keyframes frame-in { from { opacity: 0; translate: 0 26px; } }
@keyframes copy-in { from { opacity: 0; translate: 0 14px; } }

/* ---------- Marcas ---------- */
.houses { background: var(--v-950); color: var(--ivory); padding: clamp(40px, 5vw, 64px) var(--gutter); display: grid; justify-items: center; gap: 16px; text-align: center; }
.houses-lq { width: 48px; height: auto; }
.houses ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0; list-style: none; margin: 0; padding: 0; }
.houses li { font: italic 400 clamp(1.7rem, 3.4vw, 2.6rem)/1.1 var(--font-display); }
.houses li + li::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 clamp(18px, 3vw, 40px); background: var(--brass); rotate: 45deg; vertical-align: middle; }
.houses-note { font-size: .86rem; letter-spacing: .03em; color: color-mix(in srgb, var(--ivory) 62%, transparent); }

/* ---------- Colección: vitrina limpia sobre blanco ---------- */
.coleccion { max-width: 1480px; margin: 0 auto; padding: clamp(64px, 8vw, 120px) var(--gutter) clamp(64px, 8vw, 110px); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.sec-head h2 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); letter-spacing: -.02em; }
.sec-count { color: var(--muted); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; }

/* Barra de filtros: fina, fija bajo la barra superior mientras se recorre la colección */
.filterbar {
  position: sticky; top: 74px; z-index: 20; margin: 0 calc(var(--gutter) * -1) clamp(36px, 4vw, 56px); padding: 14px var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 14px 28px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 -1px 0 #E9E1D0;
}
.cat-tabs { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.cat { position: relative; padding: 8px 0; border: 0; background: none; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); transition: color .25s; }
.cat sup { margin-left: 4px; font-size: .62rem; letter-spacing: 0; color: var(--brass-lo); }
.cat::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
.cat:hover { color: var(--ink); }
.cat[aria-pressed=true] { color: var(--ink); }
.cat[aria-pressed=true]::after { transform: scaleX(1); }
.filter-selects { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.filter-selects label { display: flex; align-items: center; gap: 8px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.filter-selects select { width: auto; min-height: 36px; padding: 4px 26px 4px 2px; border: 0; border-radius: 0; background-color: transparent; background-position: right 4px center; font-size: .86rem; letter-spacing: .02em; color: var(--ink); box-shadow: none; }
.filter-selects select:focus { box-shadow: inset 0 -1px 0 var(--ink); }

.vitrinas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(14px, 2vw, 28px); }
.pieza { position: relative; min-width: 0; }
.hit { position: absolute; inset: 0; z-index: 2; border: 0; background: none; }
.frame { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; padding: 9% 10% 7%; background: #fff; overflow: hidden; }
.frame > svg, .frame > img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s var(--ease-out), transform 1.2s var(--ease-out); }
.frame > img.alt { opacity: 0; object-fit: cover; position: absolute; inset: 0; }
.pieza:hover .frame > img.alt { opacity: 1; }
.pieza:hover .frame > img:not(.alt):only-of-type { transform: scale(1.03); }
.frame .plaque { position: absolute; top: 14px; left: 14px; font-size: .58rem; padding: 3px 8px; }
.tags { position: absolute; top: 15px; right: 14px; display: grid; justify-items: end; gap: 4px; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.tags .tag-sale { color: var(--brass-lo); font-weight: 600; letter-spacing: .08em; }
.pieza.is-out .frame > svg, .pieza.is-out .frame > img { opacity: .38; }

/* Tallas para agregar directo: aparecen al pasar el mouse sobre la prenda */
.quick {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px;
  padding: 8px 10px; background: color-mix(in srgb, #fff 92%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; translate: 0 10px; transition: opacity .35s var(--ease-out), translate .35s var(--ease-out);
}
.quick span { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.quick button { min-width: 34px; height: 32px; padding: 0 8px; border: 0; background: none; font-size: .8rem; color: var(--ink); border-radius: 999px; }
.quick button:hover:not(:disabled) { background: var(--v-800); color: var(--ivory); }
.quick button:disabled { color: #A8AFA9; text-decoration: line-through; cursor: not-allowed; }
.pieza:hover .quick, .pieza:focus-within .quick { opacity: 1; translate: 0 0; }
@media (hover: none) { .quick { display: none; } }

.info { padding: 18px 2px 0; display: grid; gap: 5px; text-align: center; justify-items: center; }
.info h3 { font-size: 1.24rem; line-height: 1.15; font-weight: 400; }
.meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.fab { font-size: .8rem; color: var(--ink-2); margin-top: -2px; }
.price { font-size: .98rem; font-weight: 400; letter-spacing: .04em; margin-top: 2px; }
.price s { color: var(--muted); margin-right: 8px; font-size: .9em; }
.pd-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .92rem; color: var(--muted); }

/* ---------- Colección Privada ---------- */
.privada { padding: clamp(72px, 9vw, 130px) var(--gutter); background: var(--ivory-2); }
.priv-seal { width: 96px; }
.priv-head { max-width: 760px; margin: 0 auto clamp(44px, 5vw, 70px); display: grid; justify-items: center; gap: 18px; text-align: center; }
.priv-head h2 { font-size: clamp(2.8rem, 6.2vw, 5.4rem); letter-spacing: -.02em; }
.priv-head h2 em { font-style: italic; color: var(--brass-lo); }
.priv-head p { max-width: 52ch; color: var(--ink-2); font-weight: 300; }
.vitrinas-privadas { max-width: 1180px; margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 360px)); justify-content: center; }
.pieza-big .info h3 { font-size: 1.55rem; }
.vitrinas-privadas { gap: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 44px); }

/* ---------- La boutique ---------- */
.boutique { max-width: 1440px; margin: 0 auto; padding: clamp(72px, 9vw, 130px) var(--gutter); display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(36px, 5vw, 90px); align-items: center; }
.boutique h2 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); letter-spacing: -.02em; }
.bq-lede { margin-top: 18px; max-width: 46ch; color: var(--ink-2); font-weight: 300; font-size: 1.06rem; }
.bq-links { display: grid; gap: 8px; }
.bq-link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; border-radius: 16px; text-decoration: none; background: var(--ivory); transition: background-color .3s var(--ease-out); }
.bq-link b { display: block; font-weight: 500; letter-spacing: .02em; }
.bq-link small { color: var(--muted); font-size: .84rem; }
.bq-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--v-800); color: var(--brass-hi); }
.bq-link > .ico:last-child { color: var(--brass-lo); transition: translate .3s var(--ease-out); }
.bq-link:hover { background: var(--ivory-2); }
.bq-link:hover > .ico:last-child { translate: 4px 0; }
.bq-map { position: relative; min-height: 520px; height: 100%; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--brass) 60%, transparent), 0 0 0 10px var(--paper), 0 0 0 11px color-mix(in srgb, var(--brass) 30%, transparent), 0 40px 80px -40px rgba(19, 36, 27, .5); }
.bq-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.85); }

/* ---------- Pie ---------- */
.foot { background: var(--v-950); color: var(--ivory); padding: 70px var(--gutter) 130px; display: grid; justify-items: center; gap: 22px; text-align: center; }
.foot-seal { width: 120px; }
.foot-croc { width: 150px; margin-top: -6px; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.foot nav a { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: color-mix(in srgb, var(--ivory) 66%, transparent); }
.foot nav a:hover { color: var(--ivory); }

/* ---------- Marcador del pedido ---------- */
.score {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 50; width: min(560px, calc(100% - 20px));
  display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 14px; border-radius: 999px;
  background: var(--v-950); color: var(--ivory); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brass) 55%, transparent), 0 20px 40px -18px rgba(6, 13, 10, .8);
}
.score-thumbs { display: flex; flex: 1; }
.mini { width: 40px; height: 40px; margin-left: -10px; border-radius: 50%; display: grid; place-items: center; padding: 4px; background: var(--ivory); box-shadow: 0 0 0 2px var(--v-950); }
.mini:first-child { margin-left: 0; }
.mini svg, .mini img { width: 100%; height: 100%; object-fit: contain; }
.score-cell { display: grid; line-height: 1.1; }
.score-cell small { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--ivory) 62%, transparent); }
.score-cell b { font-size: 1.08rem; font-weight: 500; color: var(--brass-hi); }
.wa-float { position: fixed; right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--brass); color: var(--v-950); box-shadow: 0 14px 30px -12px rgba(6, 13, 10, .7); }
.wa-float .ico { width: 26px; height: 26px; }
body:has(.score:not([hidden])) .wa-float { display: none; }

/* ---------- Ficha: la pieza sola bajo el foco ---------- */
#product { width: min(1080px, calc(100% - 32px)); margin: auto; border-radius: 18px; overflow: hidden; }
#product::backdrop { background: color-mix(in srgb, var(--v-950) 93%, transparent); }
.pd { position: relative; display: grid; grid-template-columns: 1.08fr 1fr; max-height: min(92dvh, 860px); }
.pd-close { position: absolute; top: 14px; right: 14px; z-index: 4; }
.pd-stage { position: relative; display: grid; place-items: center; padding: 9% 12% 13%; background: var(--ivory); overflow: hidden; min-height: 520px; }
.pd-art { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.pd-art > svg, .pd-art > img { width: 100%; max-height: 62vh; object-fit: contain; }
.pd-plaque { position: absolute; bottom: 22px; left: 50%; translate: -50% 0; white-space: nowrap; }
.pd-views { position: absolute; top: 18px; left: 18px; display: flex; gap: 6px; }
.pd-views .chip { background: color-mix(in srgb, var(--paper) 90%, transparent); }
.pd-info { padding: 40px 40px 32px; display: grid; gap: 16px; align-content: start; overflow-y: auto; }
.pd-info h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); padding-right: 46px; letter-spacing: -.015em; }
.pd-meta { justify-content: flex-start; margin-top: -10px; font-size: .92rem; }
.pd-price { display: grid; gap: 4px; }
.pd-price .price { font-size: 1.5rem; }
.pd-save { font-size: .82rem; color: var(--brass-lo); }
.pd-colors > div { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-colors legend b { color: var(--ink); font-weight: 500; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--c); box-shadow: inset 0 0 0 1px rgba(19, 36, 27, .25), 0 0 0 3px var(--paper); position: relative; }
.swatch[aria-pressed=true] { box-shadow: inset 0 0 0 1px rgba(19, 36, 27, .25), 0 0 0 3px var(--paper), 0 0 0 4.5px var(--brass); }
.swatch[data-out]::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1.5px; background: var(--ink); rotate: 45deg; }
.size-row { display: flex; flex-wrap: wrap; gap: 8px; }
.size { min-width: 54px; height: 48px; padding: 0 14px; border: 1px solid #D6CCB6; border-radius: 999px; background: #fff; font-weight: 500; }
.size:hover:not(:disabled) { border-color: var(--ink); }
.size[aria-pressed=true] { background: var(--v-800); border-color: var(--v-800); color: var(--ivory); }
.size:disabled { color: #9AA39C; text-decoration: line-through; border-style: dashed; background: none; cursor: not-allowed; }
.pd-stock { margin-top: 10px; font-size: .9rem; color: var(--ink-2); }
.pd-actions { display: grid; gap: 10px; }
/* Tela, ajuste y detalles a la vista, junto al precio */
.pd-facts { margin: 0; padding: 14px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; box-shadow: inset 0 1px 0 #E6DECD, inset 0 -1px 0 #E6DECD; }
.pd-facts .wide { grid-column: 1 / -1; }
.pd-facts dt { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pd-facts dd { margin: 2px 0 0; font-size: .9rem; line-height: 1.4; color: var(--ink); }
.pd-care { font-size: .82rem; color: var(--ink-2); }
.pd-care b { font-weight: 500; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-right: 10px; }

/* ---------- Pedido por pasos ---------- */
.drawer { margin: 0 0 0 auto; width: min(500px, 100%); height: 100dvh; max-height: 100dvh; }
.drawer[open] { animation: slide .5s var(--ease-out); }
@keyframes slide { from { transform: translateX(48px); opacity: 0; } }
.cart { height: 100%; display: flex; flex-direction: column; }
.cart-head { background: var(--v-900); color: var(--ivory); padding: 18px 22px 16px; display: grid; gap: 14px; }
.cart-top { display: flex; align-items: center; gap: 12px; }
.cart-top h2 { flex: 1; font-size: 1.9rem; }
.cart-head .x { background: transparent; color: var(--ivory); border-color: color-mix(in srgb, var(--ivory) 30%, transparent); }
.steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.steps li { flex: 1; }
.steps button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 6px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ivory) 8%, transparent); color: color-mix(in srgb, var(--ivory) 70%, transparent); font-size: .76rem; letter-spacing: .06em; }
.steps button b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; background: color-mix(in srgb, var(--ivory) 14%, transparent); }
.steps button[aria-current=step] { background: var(--brass); color: var(--v-950); font-weight: 500; }
.steps button[aria-current=step] b { background: var(--v-950); color: var(--brass-hi); }
.steps button:disabled { opacity: .5; cursor: default; }
.cart-body { flex: 1; overflow-y: auto; padding: 8px 22px 22px; overscroll-behavior: contain; }
.cart-foot { padding: 14px 22px max(18px, env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -16px 30px -24px rgba(19, 36, 27, .5); display: grid; gap: 12px; }
.cart-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cart-sum span { font-size: .84rem; color: var(--muted); }
.cart-sum strong { font: 400 1.7rem/1 var(--font-display); }

.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-lines li { display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; padding: 16px 0; }
.cart-lines li + li { box-shadow: inset 0 1px 0 #E6DECD; }
.cl-art { width: 74px; height: 88px; border-radius: 40px 40px 8px 8px; display: grid; place-items: center; padding: 10px 8px 6px; background: var(--ivory); }
.cl-art > svg, .cl-art > img { width: 100%; height: 100%; object-fit: contain; }
.cl-info { display: grid; gap: 2px; font-size: .88rem; color: var(--ink-2); }
.cl-info strong { font: 400 1.14rem/1.2 var(--font-display); color: var(--ink); }
.cl-unit { color: var(--muted); }
.cl-unit em { font-style: normal; color: var(--brass-lo); font-weight: 500; }
.cl-info .qty { margin-top: 8px; width: max-content; }
.cl-end { display: grid; justify-items: end; align-content: space-between; }

.deliv-list { display: grid; gap: 10px; padding-top: 12px; }
.deliv, .carrier { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px #E2D9C6; cursor: pointer; transition: box-shadow .25s, background-color .25s; letter-spacing: 0; color: var(--ink); }
.deliv input, .carrier input { position: absolute; opacity: 0; pointer-events: none; }
.deliv.on, .carrier.on { background: var(--ivory); box-shadow: inset 0 0 0 1.5px var(--brass); }
.deliv:has(input:focus-visible), .carrier:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }
.deliv-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--v-800); color: var(--brass-hi); }
.deliv-txt b, .carrier b { display: block; font-weight: 500; font-size: .98rem; }
.deliv-txt small, .carrier small { color: var(--muted); font-size: .82rem; font-weight: 400; }
.deliv-price { font-weight: 500; font-size: .92rem; white-space: nowrap; }
.ship-box { margin-top: 14px; padding: 16px; border-radius: 16px; background: var(--ivory); display: grid; gap: 12px; }
.ship-dest { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.carriers { display: grid; gap: 8px; }
.carrier { grid-template-columns: 1fr auto; }

.details { display: grid; gap: 14px; padding-top: 14px; }
.gift-toggle { display: flex !important; align-items: center; gap: 14px !important; padding: 14px 16px; border-radius: 16px; background: var(--ivory); cursor: pointer; letter-spacing: 0 !important; }
.gift-toggle span { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; color: var(--ink); }
.gift-toggle .ico { grid-row: span 2; color: var(--brass-lo); width: 26px; height: 26px; }
.gift-toggle b { font-weight: 500; font-size: .98rem; }
.gift-toggle small { color: var(--muted); font-weight: 400; }
.gift { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: var(--ivory); }
.card-preview { justify-self: center; width: min(300px, 100%); aspect-ratio: 5 / 3.4; padding: 18px 22px; border-radius: 6px; display: grid; justify-items: center; align-content: center; gap: 6px; text-align: center; background: #FFFDF8; box-shadow: inset 0 0 0 6px #FFFDF8, inset 0 0 0 7px var(--brass), 0 16px 30px -18px rgba(19, 36, 27, .45); }
.card-preview img { width: 34px; }
.cp-to { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-lo); }
.cp-msg { font: italic 400 1.04rem/1.35 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.cp-from { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.recap { margin: 4px 0 0; padding: 14px 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px #E2D9C6; display: grid; gap: 8px; }
.recap div { display: grid; grid-template-columns: 80px 1fr; gap: 10px; font-size: .88rem; }
.recap dt { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.recap dd { margin: 0; color: var(--ink-2); }
.cart-empty { padding: 60px 0; display: grid; gap: 18px; justify-items: center; text-align: center; color: var(--ink-2); }
.cart-empty img { width: 180px; filter: brightness(.9); }

/* ---------- Tableta ---------- */
@media (max-width: 1024px) {
  .top-nav { gap: 18px; }
  .vitrinas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filterbar { top: 64px; }
  .boutique { grid-template-columns: 1fr; }
  .bq-map { min-height: 420px; }
}
/* ---------- Celular y tableta vertical ---------- */
@media (max-width: 820px) {
  .topbar { grid-template-columns: auto 1fr; height: 64px; }
  .top-nav { display: none; }
  .top-bag-label { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 44px; padding-top: 44px; }
  .hero-lq { width: 130vw; right: -40%; top: 30%; opacity: .06; }
  .hero-frame { width: min(340px, 86%); }
  .crest-croc { width: 64px; }
  .crest-lq { height: 32px; }
  .pd { grid-template-columns: 1fr; max-height: none; }
  #product { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 96dvh; overflow-y: auto; }
  .pd-stage { min-height: 0; height: 42vh; padding: 6% 20% 13%; }
  .pd-info { padding: 26px 20px 30px; overflow: visible; }
}
@media (max-width: 560px) {
  .vitrinas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 10px; }
  .vitrinas-privadas { grid-template-columns: minmax(0, 1fr); }
  .info h3 { font-size: 1.02rem; }
  .meta { font-size: .58rem; letter-spacing: .14em; gap: 5px; }
  .fab { font-size: .72rem; }
  .price { font-size: .9rem; }
  .frame .plaque { top: 8px; left: 8px; font-size: .52rem; padding: 2px 6px; }
  .tags { top: 9px; right: 8px; font-size: .54rem; }
  .filterbar { padding: 10px var(--gutter); gap: 8px; }
  .cat-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 18px; width: 100%; scrollbar-width: none; }
  .cat { white-space: nowrap; }
  .filter-selects { gap: 4px 14px; }
  .filter-selects label { letter-spacing: .1em; font-size: .7rem; }
  .ship-dest { grid-template-columns: 1fr; }
  .score { gap: 10px; padding-left: 10px; }
  .score-cell:nth-of-type(2) { display: none; }
  .cart-lines li { grid-template-columns: 64px 1fr; }
  .cl-art { width: 64px; height: 78px; }
  .cl-end { grid-column: 2; grid-auto-flow: column; justify-content: space-between; justify-items: start; }
  .steps button { font-size: 0; gap: 0; justify-content: center; }
  .steps button b { font-size: .72rem; }
  .steps button[aria-current=step] { font-size: .74rem; gap: 6px; }
}

/* Conmutador de vista en la ficha (en gancho / con modelo) */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 1px solid #D6CCB6; border-radius: 999px; background: #fff; font-size: .74rem; letter-spacing: .08em; color: var(--ink-2); }
.chip[aria-pressed=true] { background: var(--v-800); border-color: var(--v-800); color: var(--ivory); }

/* Solicitud lista */
.cart-body.sent { display: grid; justify-items: center; gap: 14px; padding-top: 34px; text-align: center; }
.sent img { width: 110px; }
.sent-no { font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--brass-lo); }
.sent h3 { font-size: 2.2rem; }
.sent > p { color: var(--ink-2); max-width: 38ch; }
.sent .recap { width: 100%; text-align: left; }
.sent .btn .ico { width: 18px; height: 18px; }

/* Pago en línea */
.paybox { margin-top: 14px; padding: 18px; border-radius: 16px; background: var(--ivory); display: grid; gap: 14px; }
.pay-demo { justify-self: center; padding: 4px 12px; border-radius: 999px; background: var(--alert); color: #fff; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.pay-amount { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; }
.pay-amount span { grid-column: 1 / -1; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pay-amount strong { font: 400 2rem/1 var(--font-display); }
.pay-grid { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; }
.pay-qr { position: relative; margin: 0; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: .8rem; }
.pay-qr > div { width: 150px; height: 150px; padding: 10px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px #E2D9C6; }
.pay-qr svg, .pay-qr img { width: 100%; height: 100%; }
.pay-qr small { color: var(--muted); }
.pay-stamp { position: absolute; top: 58px; left: 50%; translate: -50% 0; rotate: -12deg; padding: 3px 10px; border: 2px solid var(--alert); border-radius: 4px; background: #fff; color: var(--alert); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.pay-key { display: grid; gap: 6px; justify-items: start; }
.pay-key span { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pay-key b { font: 500 1.3rem/1.2 var(--font-text); letter-spacing: .02em; word-break: break-all; }
.pay-key small { color: var(--muted); font-size: .8rem; }
.pay-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: .9rem; color: var(--ink-2); }
.check.paid { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #fff; color: var(--ink); font-size: .92rem; letter-spacing: 0; }
@media (max-width: 420px) { .pay-grid { grid-template-columns: 1fr; justify-items: center; } .pay-key { justify-items: center; text-align: center; } }

.lede em { display: block; margin-top: 14px; font: italic 400 1.18rem/1.4 var(--font-display); color: var(--brass-hi); }

/* Placa de la boutique: latón cepillado con grabado, como la de la puerta */
.bq-plaque {
  position: relative; width: min(440px, 100%); margin: 30px 0 30px; padding: 38px 34px 32px; border-radius: 6px;
  display: grid; justify-items: center; gap: 6px; text-align: center; color: #2B220F;
  background: linear-gradient(135deg, #E9D09A 0%, #C8A35A 34%, #EBD5A4 52%, #B8924A 76%, #DCC085 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(70, 52, 20, .35), 0 26px 50px -28px rgba(19, 36, 27, .6);
}
.bq-plaque::before { content: ''; position: absolute; inset: 11px; border: 1px solid rgba(70, 52, 20, .42); border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .3); pointer-events: none; }
.bq-plaque::after {
  content: ''; position: absolute; inset: 20px; pointer-events: none;
  background:
    radial-gradient(circle, #F3E2BB 0 1.5px, #7D6230 2px 3.5px, transparent 4px) left top / 9px 9px no-repeat,
    radial-gradient(circle, #F3E2BB 0 1.5px, #7D6230 2px 3.5px, transparent 4px) right top / 9px 9px no-repeat,
    radial-gradient(circle, #F3E2BB 0 1.5px, #7D6230 2px 3.5px, transparent 4px) left bottom / 9px 9px no-repeat,
    radial-gradient(circle, #F3E2BB 0 1.5px, #7D6230 2px 3.5px, transparent 4px) right bottom / 9px 9px no-repeat;
}
.bq-plaque img { width: 64px; margin-bottom: 6px; filter: drop-shadow(0 2px 3px rgba(60, 40, 10, .35)); }
.bq-plaque p { text-shadow: 0 1px 0 rgba(255, 245, 220, .45); }
.pl-name { font: 400 2rem/1 var(--font-display); color: #13241B; letter-spacing: .01em; }
.pl-kind { font: 500 .7rem/1.3 var(--font-text); letter-spacing: .32em; text-transform: uppercase; color: #3A2E14; }
.pl-rule { width: 64px; height: 1px; margin: 10px 0 6px; background: rgba(43, 34, 15, .5); box-shadow: 0 1px 0 rgba(255, 245, 220, .45); }
.pl-addr { font: italic 400 1.12rem/1.3 var(--font-display); color: #13241B; }
.pl-city { font: 500 .72rem/1.3 var(--font-text); letter-spacing: .3em; text-transform: uppercase; color: #3A2E14; }