/* Luque Joyeros · v2 «nada al azar»
   Una letra: Saira (la extendida cuadrada de su rótulo). Sin cursivas, sin versales.
   Su bronce medido sobre nácar. El chaflán del monograma en todo lo que se toca. */
@font-face{font-family:'Saira';src:url(../fonts/saira-var-latin.woff2) format('woff2');font-weight:200 500;font-stretch:100% 125%;font-display:swap}
:root{
  --nacar:#F2EDE6; --nacar-2:#EAE3D9; --terciopelo:#3A3129; --terciopelo-2:#2E2620;
  --bronce:#8C7A66; --bronce-7:#6A5A48; --bronce-3:#B8A58C; --tinta:#2B241D; --texto:#4A4037;
  --linea:rgb(140 122 102/.3); --pieza:#FAF7F8;
  --rolex:#127749;
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.6s;
  --ch:clamp(12px,2vw,26px);
  --lado:clamp(1.25rem,5vw,4.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--nacar);color:var(--texto);font:380 1.0625rem/1.7 'Saira',system-ui,sans-serif;font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:'lnum'}
::selection{background:var(--bronce);color:#fff}
main{overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.28em}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-weight:240;font-stretch:125%;color:var(--tinta);letter-spacing:-.005em;text-wrap:balance}
.wrap{max-width:84rem;margin:0 auto;padding:0 var(--lado)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chaflan{clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch))}
:focus-visible{outline:1px solid var(--tinta);outline-offset:4px}
.num{font-feature-settings:'tnum','lnum'}

/* acciones: caja normal, rectas con el chaflán del monograma */
.boton{--ch:8px;display:inline-flex;align-items:center;gap:.7rem;font:420 1rem/1 'Saira',sans-serif;font-stretch:110%;text-decoration:none;color:#fff;background:var(--tinta);padding:1.1rem 1.6rem 1.15rem;border:0;cursor:pointer;transition:background var(--dur) var(--ease)}
.boton:hover{background:var(--bronce-7)}
.boton::after{content:'';width:.9rem;height:1px;background:currentColor;transition:width var(--dur) var(--ease)}
.boton:hover::after{width:1.5rem}
.enlace{font-weight:420;text-decoration:underline;text-decoration-color:var(--bronce);color:var(--tinta)}
.enlace:hover{text-decoration-color:var(--tinta)}

/* franja de propuesta */
.franja{background:var(--tinta);color:var(--bronce-3);font-size:.8rem;text-align:center;padding:.45rem 1rem}
.franja a{color:var(--nacar)}

/* cabecera: el logo al centro */
.cab{position:sticky;top:0;z-index:40;background:rgb(242 237 230/.97);border-bottom:1px solid var(--linea)}
.cab .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:5.25rem;gap:1rem}
.cab nav{display:flex;gap:clamp(1rem,2.2vw,2.1rem);font-size:.97rem;font-weight:400;font-stretch:108%;white-space:nowrap}
.cab nav a{text-decoration:none;color:var(--tinta);padding:.35rem 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--dur) var(--ease)}
.cab nav a:hover,.cab nav a[aria-current]{background-size:100% 1px}
.cab .der{display:flex;justify-content:flex-end;align-items:center;gap:clamp(1rem,2vw,1.8rem)}
.cab .marca img{width:6.2rem}
.reloj-rolex{width:150px;height:70px;border:0;display:block;overflow:hidden;flex:none}
.bandeja-btn{display:flex;align-items:center;gap:.5rem;background:none;border:0;padding:.35rem 0;color:var(--tinta);cursor:pointer;font:400 .97rem/1 'Saira',sans-serif;font-stretch:108%;white-space:nowrap}
.bandeja-btn svg{flex:none}
.bandeja-btn .n{--ch:5px;display:inline-grid;place-items:center;min-width:1.55rem;height:1.55rem;padding:0 .3rem;background:var(--bronce-7);color:#fff;font-size:.8rem}
.bandeja-btn .n:empty{display:none}
.cab .menu-movil{display:none}
@media (max-width:1080px){
  .cab .wrap{grid-template-columns:auto 1fr auto}
  .cab nav.izq,.cab .der nav{display:none}
  .cab .marca{order:-1}
  .cab .marca img{width:5rem}
  .cab .der{gap:.8rem}
  .cab .menu-movil{display:flex;grid-column:1/-1;gap:1.2rem;border-top:1px solid var(--linea);overflow-x:auto;padding:.65rem 0;scrollbar-width:none;font-size:.92rem}
  .cab .menu-movil a{text-decoration:none;color:var(--tinta);flex:none}
}
@media (max-width:440px){.bandeja-btn .txt{display:none}}

/* portada: la pieza presentada */
.portada{position:relative;text-align:center;padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(4rem,8vw,6.5rem);background:radial-gradient(60% 55% at 50% 38%,#FBF8F4 0,rgb(251 248 244/0) 70%),var(--nacar)}
.talla-caja{width:min(70vw,29rem);margin:0 auto}
.talla{display:block;width:100%;height:auto;overflow:visible}
.talla .an{transform-box:view-box;transform-origin:50% 50%}
.peana{width:min(46vw,17rem);height:1px;margin:2.2rem auto 0;background:linear-gradient(90deg,transparent,var(--bronce),transparent)}
.portada h1{font-size:clamp(2.1rem,5.2vw,4.4rem);line-height:1.04;max-width:17ch;margin:2.2rem auto 0;font-weight:220}
.portada .bajada{max-width:34rem;margin:1.5rem auto 0;color:var(--texto)}
.portada .acciones{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 2rem;margin-top:2.2rem}

/* espacio oficial Rolex: su identidad, no la nuestra */
.rolex{background:#fff;color:#452C1E;font-family:Helvetica,Arial,sans-serif;font-stretch:normal;font-weight:400;border-top:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6}
.rolex .wrap{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.rolex h2{font:700 clamp(1.6rem,3vw,2.3rem)/1.15 Helvetica,Arial,sans-serif;font-stretch:normal;color:var(--rolex);letter-spacing:-.01em}
.rolex .intro{max-width:44rem;margin:.8rem 0 2.2rem;font-size:1rem;line-height:1.6}
.rolex .teselas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.rolex .tesela{text-decoration:none;color:inherit}
.rolex .tesela img{width:100%;height:auto}
.rolex .tesela b{display:block;margin-top:.9rem;font:700 1.05rem/1.3 Helvetica,Arial,sans-serif;color:#452C1E}
.rolex .tesela span{font-size:.9rem;color:var(--rolex);text-decoration:underline;text-underline-offset:3px}
.rolex .ancho img{width:100%;height:auto}
.rolex .nota{margin-top:1.6rem;font-size:.75rem;color:#6b6b6b}
@media (max-width:860px){.rolex .teselas{grid-template-columns:1fr}}

/* bloques */
.sec{padding:clamp(5rem,10vw,8.5rem) 0}
.titulo{font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.06;max-width:20ch}
.entrada{max-width:36rem;margin-top:1.3rem}

/* la bandeja: índice del catálogo con insertos de joyero */
.bandeja-sec .wrap > .entrada{margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.bandeja{--ch:clamp(18px,3vw,36px);background:radial-gradient(120% 80% at 30% 0,#4A3F35,var(--terciopelo) 55%,var(--terciopelo-2));padding:clamp(.9rem,2vw,1.6rem);box-shadow:0 40px 70px -40px rgb(43 36 29/.6)}
.bandeja .insertos{display:grid;grid-template-columns:1.05fr 1fr 1fr 1fr;grid-template-rows:auto auto;grid-template-areas:"colg anil pend comp" "colg pulse pulse gem";gap:clamp(.6rem,1.4vw,1rem)}
.inserto{--ch:clamp(8px,1.2vw,14px);position:relative;min-width:0;display:flex;flex-direction:column;text-decoration:none;background:var(--pieza);color:var(--tinta);box-shadow:inset 0 0 0 1px rgb(255 255 255/.6)}
.inserto .foto{flex:1;display:grid;place-items:center;overflow:hidden;min-height:0}
.inserto img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.inserto:hover img{transform:scale(1.05)}
.inserto .canto{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.75rem 1rem .85rem;border-top:1px solid rgb(140 122 102/.22);font-size:1rem;font-stretch:112%;font-weight:400}
.inserto .canto small{font-size:.85rem;color:var(--bronce-7);font-stretch:100%}
.i-colg{grid-area:colg}.i-colg .foto{aspect-ratio:3/4.4}
.i-anil{grid-area:anil}.i-pend{grid-area:pend}.i-comp{grid-area:comp}.i-gem{grid-area:gem}
.i-anil .foto,.i-pend .foto,.i-comp .foto,.i-gem .foto{aspect-ratio:1}
.i-pulse{grid-area:pulse}.i-pulse .foto{aspect-ratio:2.1/1}

.bandeja .pie-bandeja{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;padding:1.2rem .4rem .2rem;color:#E9DFD2}
.bandeja .pie-bandeja p{max-width:36rem}
.bandeja .boton{background:var(--nacar);color:var(--tinta)}
.bandeja .boton:hover{background:#fff}
@media (max-width:900px){.inserto .canto{flex-direction:column;gap:.1rem;padding:.6rem .75rem .7rem}.bandeja .insertos{grid-template-columns:1fr 1fr;grid-template-areas:"colg anil" "colg pend" "comp gem" "pulse pulse"}}

/* el interior, con su pie de foto */
.interior figure{margin:0}
.interior img{width:100%;height:auto;aspect-ratio:16/8.4;object-fit:cover}
.interior .bajo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start;padding-top:clamp(2rem,4vw,3rem)}
.interior figcaption{font-size:.95rem;color:var(--bronce-7);border-top:1px solid var(--linea);padding-top:1rem}
.interior figcaption q{color:var(--tinta);quotes:'«' '»'}
@media (max-width:860px){.interior .bajo{grid-template-columns:1fr}.interior img{aspect-ratio:4/3}}

/* el collar anudado: las fechas, en las mismas fracciones del ancho que las perlas marcadas */
.collar-sec{background:var(--nacar-2)}
.collar{position:relative;margin-top:clamp(2.5rem,5vw,4rem)}
.collar svg{display:block;width:100%;height:auto}
.collar ol{list-style:none;margin:0;padding:0 0 0 var(--m0);display:grid;grid-template-columns:var(--m1) var(--m2) 1fr}
.collar li{border-left:1px solid var(--bronce);padding:1.1rem 2rem 0 1.1rem}
.collar li b{display:block;font-weight:300;font-stretch:120%;font-size:1.3rem;color:var(--tinta);line-height:1.2;margin-bottom:.45rem}
.collar li small{display:block;margin-top:.5rem;font-size:.85rem;color:var(--bronce-7)}
@media (max-width:760px){
  /* en vertical: el hilo baja por la izquierda, un nudo entre perla y perla, y cada fecha junto a su perla */
  .collar svg{display:none}
  .collar ol{padding:0 0 0 2.6rem;grid-template-columns:1fr;gap:0;position:relative;
    background:radial-gradient(circle,#6A5A48 1.6px,transparent 2px) 1.05rem 0/.6rem 1.15rem repeat-y,linear-gradient(#8C7A66,#8C7A66) 1.35rem 0/1px 100% no-repeat}
  .collar li{position:relative;border:0;padding:0 0 2.2rem .4rem}
  .collar ol{padding-top:1.6rem;padding-bottom:1.6rem}
  .collar ol::before,.collar ol::after{content:'';position:absolute;left:calc(1.35rem - .55rem);width:1.1rem;height:1.25rem;background:linear-gradient(135deg,#D9C6A8,#8C7A66 55%,#B8A58C);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
  .collar ol::before{top:0}.collar ol::after{bottom:0}
  .collar li::before{content:'';position:absolute;left:-2.06rem;top:.1rem;width:1.5rem;height:1.5rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,#F7F1E9 25%,#E2D6C7 65%,#B9A690 100%)}
  .collar li.bronce::before{background:radial-gradient(circle at 35% 30%,#EBCDB7 0,#9C6B55 45%,#4E3127 100%)}
}

/* relojería con su reseña dentro */
.relojes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.relojes .marco{--ch:clamp(18px,2.6vw,32px);background:var(--fondo,var(--pieza))}
.relojes .marco img{width:100%;height:auto}
.relojes .marcas{margin-top:1.4rem;color:var(--tinta)}
.relojes blockquote{margin:2rem 0 0;padding:1rem 0 0;border-top:1px solid var(--linea);color:var(--texto);font-size:.98rem}
.relojes blockquote p::before{content:'«'}.relojes blockquote p::after{content:'»'}
.relojes cite{display:block;margin-top:.5rem;font-style:normal;font-size:.88rem;color:var(--bronce-7)}
.relojes .acciones{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;margin-top:2rem}
@media (max-width:860px){.relojes{grid-template-columns:1fr}}

/* la placa de la puerta */
.puerta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);background:var(--tinta);color:var(--bronce-3)}
.puerta img{width:100%;height:100%;object-fit:cover}
.puerta .lado{padding:clamp(3rem,7vw,6rem) var(--lado);display:flex;flex-direction:column;justify-content:center;gap:2rem}
.placa{--ch:14px;background:#141110;color:#EFE8DE;padding:1.6rem 1.8rem;box-shadow:inset 0 0 0 1px rgb(255 255 255/.12)}
.placa .nombre{font-size:1.5rem;font-stretch:125%;font-weight:260;letter-spacing:.02em;color:#fff}
.placa p{margin-top:.6rem;font-stretch:112%}
.puerta dl{margin:0;display:grid;gap:1rem;font-size:1rem}
.puerta dl div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem}
.puerta dt{color:var(--bronce-3)}
.puerta dd{margin:0;color:#F2EDE6}
.puerta dd small{display:block;color:var(--bronce-3);font-size:.85rem}
.puerta .boton{align-self:flex-start;background:var(--nacar);color:var(--tinta)}
.puerta .boton:hover{background:#fff}
@media (max-width:860px){.puerta{grid-template-columns:1fr}.puerta img{aspect-ratio:4/3;height:auto}}

/* pie */
.pie{background:#211C17;color:var(--bronce-3);font-size:.95rem;padding:4rem 0 2rem}
.pie .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.5rem}
.pie .logo-b{width:7rem;aspect-ratio:200/130;background:var(--nacar);-webkit-mask:url(../img/logo.png) left center/contain no-repeat;mask:url(../img/logo.png) left center/contain no-repeat}
.pie h2{font-size:1rem;font-weight:420;font-stretch:112%;color:var(--nacar);margin:0 0 .9rem}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.pie a{text-decoration:none}.pie a:hover{color:#fff}
.pie .legal{grid-column:1/-1;border-top:1px solid rgb(184 165 140/.2);padding-top:1.4rem;font-size:.82rem;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
@media (max-width:860px){.pie .wrap{grid-template-columns:1fr 1fr}}

/* ============ tienda ============ */
.migas{font-size:.9rem;color:var(--bronce-7);padding-top:1.8rem}
.migas a{text-decoration:none}.migas a:hover{text-decoration:underline}
.migas span{margin:0 .45rem;color:var(--bronce-3)}
.cab-tienda{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;padding:clamp(1.8rem,4vw,3rem) 0 1.4rem}
.cab-tienda h1{font-size:clamp(2.4rem,5vw,4.2rem);line-height:1}
.cab-tienda p{max-width:30rem}

.filtros{position:sticky;top:5.25rem;z-index:30;background:rgb(242 237 230/.97);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.filtros .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;padding-top:.8rem;padding-bottom:.8rem}
.filtros .grupo{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;align-items:center}
.filtros button{font:400 .98rem/1 'Saira',sans-serif;font-stretch:106%;background:none;border:0;padding:.5rem 0;color:var(--bronce-7);cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;background-image:linear-gradient(var(--tinta),var(--tinta));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size var(--dur) var(--ease),color var(--dur) var(--ease)}
.filtros button[aria-pressed=true]{color:var(--tinta);background-size:100% 1px}
.filtros button sup{font-size:.7rem;color:var(--bronce);font-feature-settings:'tnum'}
.muestra{width:.9rem;height:.9rem;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(43 36 29/.18)}
.m-oro-blanco{background:radial-gradient(circle at 35% 30%,#fff,#D9D9D6 55%,#A9A9A4)}
.m-oro-rosa{background:radial-gradient(circle at 35% 30%,#FBE3D6,#D9A08A 55%,#A9705A)}
.m-oro-amarillo{background:radial-gradient(circle at 35% 30%,#FFF1C2,#D8B25A 55%,#A9822E)}
.cuenta{font-size:.92rem;color:var(--bronce-7);margin:1.6rem 0 0}

.rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(2rem,4vw,3.2rem) clamp(1rem,2.2vw,1.8rem);padding:2rem 0 clamp(5rem,10vw,8rem)}
.ficha-min{position:relative;content-visibility:auto;contain-intrinsic-size:auto 27rem}
.ficha-min[hidden]{display:none}
.ficha-min .marco{--ch:16px;display:grid;place-items:center;background:var(--fondo,var(--pieza));aspect-ratio:4/5;overflow:hidden}
.ficha-min .marco img{width:100%;height:100%;object-fit:contain;transition:transform 1.4s var(--ease)}
.ficha-min:hover .marco img{transform:scale(1.045)}
.ficha-min a.nombre{display:block;margin-top:1rem;font-size:1.02rem;line-height:1.35;font-weight:400;color:var(--tinta);text-decoration:none}
.ficha-min a.nombre::after{content:'';position:absolute;inset:0}
.ficha-min .detalle{display:flex;justify-content:space-between;gap:.8rem;margin-top:.3rem;font-size:.86rem;color:var(--bronce-7)}
.ficha-min .poner{position:relative;z-index:2;margin-top:.7rem;display:inline-flex;align-items:center;gap:.4rem;font:400 .9rem/1 'Saira',sans-serif;background:none;border:0;color:var(--bronce-7);cursor:pointer;padding:.35rem 0}
.ficha-min .poner:hover{color:var(--tinta)}
.ficha-min .poner[aria-pressed=true]{color:var(--tinta)}
.ficha-min .poner .marca-b{--ch:3px;width:.75rem;height:.75rem;box-shadow:inset 0 0 0 1px currentColor;display:inline-grid;place-items:center}
.ficha-min .poner[aria-pressed=true] .marca-b{background:var(--bronce-7);box-shadow:none}
@media (max-width:1000px){.rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}.filtros{position:static}}

/* ficha de producto */
.producto{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start;padding:1.6rem 0 clamp(5rem,10vw,8rem)}
.producto .fotos{display:grid;gap:1rem;position:sticky;top:7rem}
.producto .principal{--ch:clamp(20px,3vw,38px);position:relative;background:var(--fondo,var(--pieza));aspect-ratio:1;overflow:hidden;cursor:zoom-in;touch-action:pan-y}
.producto .principal img{width:100%;height:100%;object-fit:contain}
.lupa{--ch:18%;position:absolute;width:42%;aspect-ratio:1;pointer-events:none;opacity:0;transition:opacity .25s var(--ease);background:linear-gradient(145deg,#B8A58C,#6A5A48 55%,#8C7A66);translate:-50% -50%}
.lupa i{--ch:17.4%;position:absolute;inset:3px;background-repeat:no-repeat;background-color:var(--fondo,var(--pieza));clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch))}
.producto .principal.mirando .lupa{opacity:1}
.producto .principal .ayuda{position:absolute;left:1.2rem;bottom:1rem;font-size:.82rem;color:var(--bronce-7)}
.producto .mas-fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.producto .mas-fotos button{--ch:10px;background:var(--fondo,var(--pieza));border:0;padding:0;aspect-ratio:1;cursor:pointer}
.producto .mas-fotos img{width:100%;height:100%;object-fit:contain}
.producto .info{padding-top:clamp(0rem,2vw,2rem)}
.producto .linea-cat{font-size:.95rem;color:var(--bronce-7)}
.producto h1{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.1;margin-top:.7rem;font-weight:240}
.producto .texto{margin-top:1.6rem;max-width:34rem}
.producto .texto p+p{margin-top:1rem}
.producto dl{margin:2.2rem 0 0;border-top:1px solid var(--linea)}
.producto dl div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--linea)}
.producto dt{color:var(--bronce-7)}
.producto dd{margin:0;color:var(--tinta)}
.producto .precio{margin-top:2rem;font-size:1.15rem;font-stretch:112%;font-weight:340;color:var(--tinta)}
.producto .precio small{display:block;font-size:.92rem;font-stretch:100%;color:var(--bronce-7);margin-top:.3rem}
.producto .acciones{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:2rem}
.producto .boton[aria-pressed=true]{background:var(--bronce-7)}
@media (max-width:860px){.producto{grid-template-columns:1fr}.producto .fotos{position:static}}
.relacionadas{border-top:1px solid var(--linea);padding-top:clamp(3rem,6vw,4.5rem)}
.relacionadas h2{font-size:clamp(1.6rem,3vw,2.3rem)}

/* el cajón de la bandeja */
dialog.cajon{margin:0 0 0 auto;height:100dvh;max-height:none;width:min(27rem,100vw);border:0;padding:0;background:var(--nacar);color:var(--texto)}
dialog.cajon::backdrop{background:rgb(43 36 29/.45)}
.cajon .dentro{display:flex;flex-direction:column;height:100%;padding:1.8rem clamp(1.25rem,4vw,2.2rem)}
.cajon header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--linea);padding-bottom:1.1rem}
.cajon h2{font-size:1.8rem}
.cajon .cerrar{font:400 .95rem/1 'Saira',sans-serif;background:none;border:0;cursor:pointer;color:var(--tinta);text-decoration:underline;text-underline-offset:.25em}
.cajon ol{list-style:none;margin:0;padding:.8rem 0;overflow:auto;flex:1}
.cajon li{display:grid;grid-template-columns:4.4rem minmax(0,1fr) auto;gap:1rem;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--linea)}
.cajon li .m{--ch:8px;background:var(--pieza);aspect-ratio:1}
.cajon li img{width:100%;height:100%;object-fit:contain}
.cajon li b{display:block;font-weight:400;color:var(--tinta);line-height:1.3}
.cajon li small{font-size:.82rem;color:var(--bronce-7)}
.cajon li button{font:400 .85rem/1 'Saira',sans-serif;background:none;border:0;color:var(--bronce-7);cursor:pointer;text-decoration:underline;text-underline-offset:.25em}
.cajon footer{border-top:1px solid var(--linea);padding-top:1.3rem;display:grid;gap:1rem}
.cajon footer .boton{justify-content:center}

/* 404 */
.perdida{text-align:center;padding:clamp(4rem,10vw,8rem) 0}
.perdida .talla-caja{width:min(50vw,14rem)}
.perdida h1{font-size:clamp(2rem,4vw,3rem);margin-top:2rem}
.perdida p{margin:1rem auto 2rem;max-width:30rem}

/* movimiento: una curva, una duración */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .revela{animation:sube linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
    @keyframes sube{from{opacity:0;transform:translateY(1.2rem)}to{opacity:1;transform:none}}
  }
}