/* ============================================================
   MoonBox — catálogo
   Paleta cálida sobre noche. Todo el color vive acá arriba.
   ============================================================ */
:root{
  --noche:#0B0A09;
  --superficie:#151210;
  --superficie-2:#1C1815;
  --linea:#2C2622;
  --linea-viva:#3B332C;
  --tan:#A67C52;
  --tan-bajo:#6B4F3A;
  --latte:#D9C3A5;
  --crema:#EDE5D9;
  --apagado:#8F8479;
  --verde:#7FA37A;

  --sombra:0 22px 48px -22px rgba(0,0,0,.94);
  --serif:"Cormorant Garamond",Didot,"Bodoni MT",Georgia,serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radio:5px;
  --alto-cabecera:66px;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--alto-cabecera) + 68px)}
body{
  background:var(--noche);color:var(--crema);font-family:var(--sans);
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.ceja{font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--tan)}

.salto{position:absolute;left:-9999px;top:0;background:var(--latte);color:var(--noche);
  padding:12px 18px;border-radius:0 0 var(--radio) 0;font-size:12px;font-weight:600;z-index:200}
.salto:focus{left:0}

/* ---------- cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:60;background:rgba(11,10,9,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.barra{display:flex;align-items:center;gap:20px;height:var(--alto-cabecera)}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.marca-luna{width:18px;height:18px;border-radius:50%;flex:none;
  background:var(--latte);box-shadow:inset -6px -2px 0 0 var(--noche)}
.marca-txt{display:flex;flex-direction:column;line-height:1}
.marca-txt b{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:.16em}
.marca-txt small{font-size:8px;letter-spacing:.36em;color:var(--tan);margin-top:5px}
/* logo de imagen, cuando existe public/img/marca/logo.* */
.marca-img{height:34px;width:auto;max-width:min(52vw,300px);object-fit:contain}
@media(max-width:420px){.marca-img{height:28px}}

.nav{display:flex;gap:22px;margin-left:auto;overflow:hidden}
.nav a{color:var(--apagado);text-decoration:none;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;white-space:nowrap;transition:color .2s}
.nav a:hover,.nav a:focus-visible{color:var(--latte)}

.cabecera-acciones{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.nav + .cabecera-acciones{margin-left:0}
.btn-buscar{width:36px;height:36px;border:1px solid var(--linea);border-radius:50%;
  display:grid;place-items:center;transition:border-color .2s,color .2s;color:var(--apagado)}
.btn-buscar:hover{border-color:var(--tan-bajo);color:var(--latte)}
.btn-buscar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.btn-dm{border:1px solid var(--tan-bajo);color:var(--latte);border-radius:999px;padding:9px 17px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.btn-dm:hover{background:var(--latte);border-color:var(--latte);color:var(--noche)}
@media(max-width:900px){.nav{display:none}}
@media(max-width:420px){.btn-dm{padding:9px 13px;letter-spacing:.1em}}

/* ---------- hero ---------- */
.hero{padding:78px 0 56px;border-bottom:1px solid var(--linea);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-190px;right:-120px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(166,124,82,.18),transparent 68%);pointer-events:none}
/* El logo de fondo, apagado, detrás del titular. */
.hero-marca{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(820px,92%);height:auto;max-height:78%;object-fit:contain;
  opacity:.11;pointer-events:none;user-select:none;z-index:0}
.hero .wrap{position:relative;z-index:1}
/* En pantallas angostas el hero es alto y angosto, así que manda el ancho:
   sin el tope de alto el logo se salía por los lados y quedaba cortado. */
@media(max-width:760px){.hero-marca{width:92%;max-height:46%;opacity:.10}}
.hero .ceja{margin-bottom:20px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,7vw,72px);
  line-height:1.03;letter-spacing:-.015em;max-width:16ch}
.hero h1 em{font-style:italic;color:var(--latte)}
.hero-txt{color:var(--apagado);max-width:54ch;margin-top:22px;font-size:15px}
.hero-marcas{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.hero-marcas span{border:1px solid var(--linea);border-radius:999px;padding:7px 15px;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--apagado)}
.hero-marcas b{color:var(--latte);font-weight:600}

/* ---------- filtros ---------- */
.filtros{position:sticky;top:var(--alto-cabecera);z-index:50;background:rgba(11,10,9,.95);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.buscador{display:flex;align-items:center;gap:10px;padding:13px 0 0}
.buscador svg{width:17px;height:17px;fill:none;stroke:var(--apagado);stroke-width:1.6;stroke-linecap:round;flex:none}
.buscador input{flex:1;background:transparent;border:0;color:var(--crema);font-size:15px;padding:4px 0;outline:0}
.buscador input::placeholder{color:var(--apagado)}
.buscador button{color:var(--apagado);font-size:22px;line-height:1;padding:0 4px}
.buscador button:hover{color:var(--latte)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:14px 0;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--linea);color:var(--apagado);border-radius:999px;
  padding:9px 17px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  transition:background .18s,border-color .18s,color .18s;white-space:nowrap}
.chip:hover{border-color:var(--tan-bajo);color:var(--latte)}
.chip[aria-selected="true"]{background:var(--latte);border-color:var(--latte);color:var(--noche);font-weight:600}
.chip:focus-visible,.card:focus-visible,.chip:focus-visible{outline:2px solid var(--tan);outline-offset:2px}

/* ---------- secciones ---------- */
.seccion{padding:52px 0 4px}
/* Subsección de grupo dentro de una categoría: mismo bloque, jerarquía menor. */
.seccion.sub{padding:34px 0 4px}
.seccion.sub .seccion-cab h2{font-size:23px}
/* Encabezado de categoría cuando además hay secciones por grupo debajo. */
.cat-cab{padding:52px 0 0}
.cat-cab h2{font-family:var(--serif);font-weight:400;font-size:31px}
.cat-cab .seccion-desc{margin-top:8px}
/* Los destacados llevan un filete para separarlos del catálogo completo. */
.seccion.destacada{padding-bottom:16px;border-bottom:1px solid var(--linea)}
.seccion.destacada .seccion-cab h2{color:var(--latte)}
.seccion-cab{display:flex;align-items:baseline;gap:16px;margin-bottom:8px}
.seccion-cab h2{font-family:var(--serif);font-weight:400;font-size:31px}
.seccion-cab .conteo{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--apagado);white-space:nowrap}
.seccion-cab .raya{flex:1;height:1px;background:var(--linea)}
.seccion-desc{color:var(--apagado);font-size:13px;margin-bottom:24px;max-width:60ch}

.grilla{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.grilla.ancha{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
@media(max-width:560px){.grilla{grid-template-columns:repeat(2,1fr);gap:13px}.grilla.ancha{grid-template-columns:1fr}}

/* ---------- tarjeta ---------- */
.card{display:block;width:100%;text-align:left;text-decoration:none;color:inherit;
  background:var(--superficie);
  border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s,box-shadow .28s}
.card:hover,.card:focus-visible{transform:translateY(-6px);border-color:var(--tan-bajo);box-shadow:var(--sombra)}
.lienzo{position:relative;aspect-ratio:1;overflow:hidden;background:var(--superficie-2);
  display:flex;align-items:center;justify-content:center}
.lienzo.ancho{aspect-ratio:16/10}
.lienzo img{width:100%;height:100%}
.lienzo img.cover{object-fit:cover}
.lienzo img.contain{object-fit:contain;padding:12px}
.card:hover .lienzo img.cover{transform:scale(1.03)}
.lienzo img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}

/* marcador cuando el producto todavía no tiene foto */
.sinfoto{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;text-align:center;padding:18px;
  background:linear-gradient(150deg,var(--fondo-a,#241E19),var(--fondo-b,#12100E))}
.sinfoto b{font-family:var(--serif);font-size:30px;color:rgba(255,255,255,.86);line-height:1}
.sinfoto span{font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.42)}

.sello{position:absolute;top:10px;left:10px;z-index:3;font-size:8.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;padding:5px 9px;border-radius:2px}
.sello.claro{background:var(--latte);color:var(--noche)}
.sello.verde{background:var(--verde);color:#0B0A09}
.sello.borde{background:rgba(11,10,9,.78);color:var(--latte);border:1px solid var(--tan-bajo)}
.sello.apagado{background:rgba(11,10,9,.82);color:var(--apagado);border:1px solid var(--linea)}
.codigo{position:absolute;bottom:10px;left:10px;z-index:3;font-size:8.5px;letter-spacing:.14em;
  font-weight:600;padding:5px 8px;border-radius:2px;background:rgba(11,10,9,.72);color:var(--apagado)}
.mas-fotos{position:absolute;bottom:10px;right:10px;z-index:3;font-size:9px;letter-spacing:.1em;
  padding:4px 8px;border-radius:999px;background:rgba(11,10,9,.72);color:var(--latte)}

.datos{padding:15px 15px 17px}
.datos .grupo{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--tan);
  margin-bottom:7px;min-height:12px}
.datos .titulo{font-family:var(--serif);font-size:19px;line-height:1.2;margin-bottom:3px}
.datos .variante{font-size:11.5px;color:var(--apagado);line-height:1.4;margin-bottom:11px;min-height:16px}
.linea-precio{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.precio{font-size:15px;font-weight:600}
.precio.consulta{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--latte);font-weight:500}
.entrega{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--apagado);text-align:right}
.ref-imagen{font-size:9px;color:var(--apagado);margin-top:7px}

.vacio{padding:48px 0;text-align:center;color:var(--apagado);font-size:14px}

/* ---------- burbujas de integrantes ---------- */
.integrantes{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;
  padding:4px 2px 22px;margin-top:-6px}
.integrantes::-webkit-scrollbar{display:none}
.burbuja{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;width:72px}
.burbuja .cara{width:62px;height:62px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:var(--superficie-2);
  border:1px solid var(--linea);transition:border-color .2s,transform .2s;
  box-shadow:0 0 0 0 rgba(217,195,165,0)}
.burbuja img{width:100%;height:100%;object-fit:cover}
.burbuja .iniciales{font-family:var(--serif);font-size:20px;color:var(--latte)}
.burbuja .icono{width:22px;height:22px;fill:none;stroke:var(--latte);stroke-width:1.4}
.burbuja .nombre{font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--apagado);text-align:center;line-height:1.25;transition:color .2s}
.burbuja:hover .cara{border-color:var(--tan-bajo);transform:translateY(-2px)}
.burbuja:hover .nombre{color:var(--latte)}
.burbuja.activa .cara{border-color:var(--latte);box-shadow:0 0 0 3px rgba(217,195,165,.18)}
.burbuja.activa .nombre{color:var(--latte);font-weight:600}
.burbuja:focus-visible{outline:2px solid var(--tan);outline-offset:3px;border-radius:8px}
@media(max-width:560px){.integrantes{gap:12px}.burbuja{width:64px}
  .burbuja .cara{width:54px;height:54px}}

/* ---------- carrusel de destacados ---------- */
.carrusel-caja{position:relative}
.carrusel{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding:2px 2px 8px}
.carrusel::-webkit-scrollbar{display:none}
.carrusel > .card{flex:0 0 clamp(212px,23vw,264px);scroll-snap-align:start}
/* En celular se asoma la siguiente: es lo que avisa que hay más al lado. */
@media(max-width:560px){.carrusel{gap:13px}.carrusel > .card{flex:0 0 68vw}}

.flecha{position:absolute;top:38%;z-index:5;width:42px;height:42px;border-radius:50%;
  background:rgba(11,10,9,.86);border:1px solid var(--linea);color:var(--latte);
  font-size:22px;line-height:1;display:grid;place-items:center;
  backdrop-filter:blur(6px);transition:border-color .2s,opacity .2s}
.flecha:hover{border-color:var(--latte)}
.flecha:disabled{opacity:.25;cursor:default}
.flecha:disabled:hover{border-color:var(--linea)}
.flecha.izq{left:-14px}
.flecha.der{right:-14px}
/* Sin mouse el gesto es deslizar, así que las flechas estorban. */
@media(hover:none),(pointer:coarse){.flecha{display:none}}

/* ---------- grilla recortada ---------- */
.seccion:not(.mostrando-todo) .grilla .card.extra{display:none}
.ver-todos{display:block;margin:26px auto 0;border:1px solid var(--linea-viva);
  color:var(--latte);border-radius:999px;padding:12px 26px;font-size:11px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transition:background .2s,border-color .2s,color .2s}
.ver-todos:hover{background:var(--latte);border-color:var(--latte);color:var(--noche)}

/* ---------- catálogo vacío ---------- */
.vacio-total{text-align:center;padding:90px 0 40px;max-width:52ch;margin:0 auto}
.vacio-luna{display:block;width:54px;height:54px;border-radius:50%;margin:0 auto 26px;
  background:var(--latte);box-shadow:inset -17px -6px 0 0 var(--noche),0 0 60px rgba(217,195,165,.2)}
.vacio-logo{width:min(340px,72vw);height:auto;margin:0 auto 30px}
.vacio-total h2{font-family:var(--serif);font-weight:400;font-size:32px;margin-bottom:12px}
.vacio-total p{color:var(--apagado);font-size:14.5px}
.vacio-acciones{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.vacio-acciones .accion{width:auto;padding:15px 26px}

/* ---------- ficha (modal) ---------- */
.capa{position:fixed;inset:0;z-index:100;background:rgba(5,4,4,.86);backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;padding:20px}
.capa[hidden]{display:none}
.ficha{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);
  max-width:900px;width:100%;max-height:88vh;overflow:auto;display:grid;
  grid-template-columns:1fr 1fr;box-shadow:var(--sombra)}
@media(max-width:720px){.ficha{grid-template-columns:1fr}}
.cerrar{position:fixed;top:22px;right:22px;z-index:110;width:40px;height:40px;border-radius:50%;
  background:var(--superficie);border:1px solid var(--linea);font-size:20px;line-height:1}
.cerrar:hover{border-color:var(--tan)}

.galeria{background:var(--superficie-2);position:relative}
.galeria .lienzo{aspect-ratio:1;position:relative}
.miniaturas{display:flex;gap:7px;padding:10px;overflow-x:auto;scrollbar-width:none}
.miniaturas::-webkit-scrollbar{display:none}
.miniaturas button{width:52px;height:52px;flex:none;border:1px solid var(--linea);border-radius:3px;
  overflow:hidden;opacity:.55;transition:opacity .2s,border-color .2s}
.miniaturas button[aria-current="true"]{opacity:1;border-color:var(--latte)}
.miniaturas img{width:100%;height:100%;object-fit:cover}

.cuerpo{padding:30px 28px}
.cuerpo .grupo{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--tan);margin-bottom:8px}
.cuerpo h3{font-family:var(--serif);font-weight:400;font-size:29px;line-height:1.14;margin-bottom:5px}
.cuerpo .variante{font-size:13px;color:var(--apagado);margin-bottom:18px}
.etiquetas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.etiquetas span{border:1px solid var(--linea);border-radius:999px;padding:5px 11px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--apagado)}
.descripcion{font-size:13.5px;color:var(--apagado);line-height:1.65;margin-bottom:20px}
.tabla div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--linea);font-size:12.5px}
.tabla dt{color:var(--apagado);letter-spacing:.07em;text-transform:uppercase;font-size:10px;flex:none}
.tabla dd{text-align:right}
.precio-grande{font-family:var(--serif);font-size:34px;margin:22px 0 2px}
.precio-grande.consulta{font-size:20px;letter-spacing:.02em}
.nota-precio{font-size:11.5px;color:var(--apagado);line-height:1.55;margin-bottom:18px}

.acciones{display:flex;flex-direction:column;gap:9px}
.accion{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;
  border-radius:3px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.accion.principal{background:var(--latte);color:var(--noche)}
.accion.principal:hover{background:#fff}
.accion.suave{border:1px solid var(--linea-viva);color:var(--latte)}
.accion.suave:hover{border-color:var(--latte)}
.pista{font-size:11px;color:var(--apagado);text-align:center;margin-top:12px;line-height:1.5}
.pista b{color:var(--latte);letter-spacing:.08em}

/* ---------- contacto ---------- */
.contacto{border-top:1px solid var(--linea);margin-top:70px;padding:64px 0}
.contacto-caja{display:flex;gap:40px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.contacto-caja h2{font-family:var(--serif);font-weight:400;font-size:34px;margin:14px 0 10px}
.contacto-txt{color:var(--apagado);font-size:14px;max-width:46ch}
.contacto-btns{display:flex;gap:10px;flex-wrap:wrap}
.contacto-btns .accion{width:auto;padding:15px 26px}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--linea);padding:48px 0 64px}
.pie-grid{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
.pie-col h4{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--tan);margin-bottom:14px}
.pie-col li{font-size:12.5px;color:var(--apagado);list-style:none;margin-bottom:8px;max-width:36ch}
.aviso{margin-top:36px;padding:17px 19px;border:1px dashed var(--tan-bajo);border-radius:4px;
  font-size:11.5px;color:var(--apagado);line-height:1.65}
.aviso b{color:var(--latte)}
.firma{margin-top:26px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--apagado)}
.aviso-imagen-pie{margin-top:10px;font-size:11px;color:var(--apagado)}

/* ---------- avisito de copiado ---------- */
.aviso-copia{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:200;
  background:var(--latte);color:var(--noche);padding:11px 20px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.aviso-copia.visible{opacity:1;transform:translate(-50%,0)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}}


/* ============================================================
   Página de un producto (public/p/<slug>.html)
   ============================================================ */
.volver{display:inline-flex;align-items:center;gap:8px;margin:26px 0 4px;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--apagado);
  text-decoration:none;transition:color .2s}
.volver::before{content:"←";font-size:14px}
.volver:hover{color:var(--latte)}

.producto{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;
  padding:22px 0 60px}
@media(max-width:820px){.producto{grid-template-columns:1fr;gap:28px}}

.producto-fotos{position:sticky;top:calc(var(--alto-cabecera) + 24px)}
@media(max-width:820px){.producto-fotos{position:static}}
.foto-principal .lienzo{aspect-ratio:1;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--superficie);cursor:zoom-in}
/* El zoom lo aplica el script sobre la imagen; el recorte lo hace el lienzo. */
.foto-principal img{transition:transform .18s ease-out;will-change:transform}
.foto-principal img.contain{padding:18px}

.zoom-pista{margin:11px 0 0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--apagado);text-align:center}
.aviso-imagen{margin:11px 0 0;font-size:11px;color:var(--apagado);line-height:1.5;text-align:center}

.producto-fotos .miniaturas{gap:10px;padding:14px 0 0;flex-wrap:wrap}
.producto-fotos .miniaturas button{width:74px;height:74px;border-radius:var(--radio);
  background:var(--superficie);opacity:.7}
.producto-fotos .miniaturas button:hover{opacity:1;border-color:var(--tan-bajo)}
.producto-fotos .miniaturas button[aria-current="true"]{opacity:1;border-color:var(--latte)}
.producto-fotos .miniaturas img{object-fit:contain;padding:5px}

.producto-datos .grupo{font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tan);margin-bottom:9px}
.producto-datos h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,44px);
  line-height:1.1;margin-bottom:7px}
.producto-datos .variante{font-size:14px;color:var(--apagado);margin-bottom:20px}
.sello.suelto{position:static;display:inline-block;margin-bottom:16px}
.producto-datos .descripcion{font-size:14.5px}
.producto-datos .tabla div{padding:13px 0}
/* Qué trae, lista de canciones y aviso de versión */
.incluye{margin-bottom:22px}
.incluye h2{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tan);margin-bottom:11px}
.incluye ul{list-style:none}
.incluye li{position:relative;padding-left:17px;font-size:13.5px;color:var(--crema);
  line-height:1.5;margin-bottom:7px}
.incluye li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--tan)}

.aviso-version{margin:16px 0 0;padding:12px 14px;border:1px dashed var(--tan-bajo);
  border-radius:4px;font-size:12px;color:var(--apagado);line-height:1.55}
.aviso-version b{color:var(--latte)}

.tracklist{border:1px solid var(--linea);border-radius:3px;margin-top:18px}
.tracklist summary{padding:12px 14px;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tan);cursor:pointer}
.tracklist summary:hover{color:var(--latte)}
.tracklist ol{padding:0 16px 14px 34px;margin:0}
.tracklist li{font-size:13px;color:var(--apagado);line-height:1.6;padding:3px 0}
.tracklist li::marker{color:var(--tan-bajo);font-size:11px}

.producto-datos .acciones{max-width:420px}
.producto-datos .pista{max-width:420px;text-align:left}

/* Lámina de contenido: la imagen larga del proveedor con todo lo que trae la
   caja. Va a lo ancho de la ficha y con scroll propio, para que se vea grande
   sin estirar la página. */
.lamina{margin:52px auto 0;max-width:780px}
.lamina h2{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tan);margin-bottom:12px;font-weight:600}
.lamina-marco{
  max-height:min(76vh,720px);overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--superficie);scrollbar-width:thin;
  scrollbar-color:var(--linea-viva) transparent;
}
.lamina-marco::-webkit-scrollbar{width:9px}
.lamina-marco::-webkit-scrollbar-track{background:transparent}
.lamina-marco::-webkit-scrollbar-thumb{
  background:var(--linea-viva);border-radius:9px;
  border:2px solid var(--superficie)}
.lamina-marco::-webkit-scrollbar-thumb:hover{background:var(--tan-bajo)}
.lamina-marco img{display:block;width:100%;height:auto}
.lamina-pie{margin-top:9px;font-size:11.5px;color:var(--apagado)}
.lamina-pie a{color:var(--tan);text-decoration:none;border-bottom:1px solid var(--tan-bajo)}
.lamina-pie a:hover{color:var(--latte)}

@media (max-width:700px){
  .lamina{margin-top:38px}
  .lamina-marco{max-height:70vh}
}