/* MJ Parfums · la tienda
   Pensada para el móvil: no hay cabecera fija, la bolsa vive en el muelle
   de abajo, y la portada oscura es lo primero que se ve. */

/* ---------- portada ---------- */

.portada{padding:2.8rem 0 2.6rem;text-align:center}
@media(min-width:900px){.portada{padding:4.2rem 0 3.4rem}}
.portada-in{display:flex;flex-direction:column;align-items:center;gap:1rem}
.portada-lema{
  margin:0;font-size:.64rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.26em;color:var(--tinta3);text-indent:.26em;
}

/* El sitio de la marca: el logo si lo hay, y si no el nombre en Anton.
   Es el "hueco del logo" del que hablaba el dueño: en cuanto suba uno desde
   el panel aparece aquí sin tocar nada. */
.emblema{display:flex;flex-direction:column;align-items:center;gap:.55rem}
.emblema-logo{width:clamp(92px,25vw,148px);height:auto;object-fit:contain}
.emblema-conlogo .marca-titulo{
  font-size:clamp(1rem,4vw,1.5rem);letter-spacing:.12em;text-indent:.12em;color:var(--tinta2);
}

/* ---------- tira de confianza (bento) ----------
   Tres bloques en gris plomo claro con el icono en un chip rojo. Da aire de
   tienda seria antes de ver un precio, al estilo de las rejillas de Stripe. */
.tiras{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-top:.4rem}
@media(min-width:640px){.tiras{gap:1rem;margin-top:.8rem}}
.tira{
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem;border-radius:var(--r-sm);
  background:var(--gris);border:1px solid var(--panel-borde);
}
@media(min-width:640px){.tira{padding:1rem 1.15rem;border-radius:var(--r)}}
.tira-ic{
  flex:none;width:2.1rem;height:2.1rem;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--marca-suave);color:var(--marca);
}
.tira-ic svg{width:1.05rem;height:1.05rem}
.tira-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.tira-txt b{font-size:.82rem;font-weight:600;letter-spacing:-.01em}
.tira-txt small{font-size:.72rem;color:var(--tinta3)}
@media(max-width:559px){
  .tira{flex-direction:column;text-align:center;gap:.35rem;padding:.75rem .4rem}
  .tira-txt small{display:none}
  .tira-txt b{font-size:.73rem;line-height:1.15}
}

/* ---------- rótulo de sección ---------- */

.rotulo{padding:2.4rem 0 1.1rem}
@media(min-width:900px){.rotulo{padding:3.2rem 0 1.5rem}}
.rotulo-in{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.rotulo h2{margin:0;font-size:clamp(1.3rem,4.5vw,1.9rem);font-weight:600;
  letter-spacing:-.025em;line-height:1.1}
.rotulo-cuenta{font-size:.72rem;color:var(--tinta3);font-weight:500}

/* ---------- pestañas decants / sellados ----------
   Una pastilla partida en dos. El cliente toca y cambia al momento, sin bajar
   media pantalla para encontrar la otra mitad del catálogo. */

.pestanas{
  display:grid;grid-template-columns:1fr 1fr;gap:.25rem;
  margin-top:.9rem;padding:.25rem;border-radius:999px;
  background:var(--gris);border:1px solid var(--panel-borde);
}
@media(min-width:640px){.pestanas{max-width:23rem}}
.pestana{
  display:inline-flex;align-items:center;justify-content:center;gap:.42rem;
  padding:.62rem .7rem;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--tinta2);
  font-size:.85rem;font-weight:500;line-height:1;text-decoration:none;
  transition:background-color .18s var(--rapido),color .18s var(--rapido);
}
/* que el título no quede pegado al borde de arriba al saltar con el atajo */
.grupo{scroll-margin-top:.8rem}
.pestana[aria-selected="true"]{
  background:var(--marca);color:var(--marca-texto);
  box-shadow:0 4px 12px -6px var(--marca-brillo);
}
.pestana-n{
  font-size:.68rem;font-weight:600;padding:.1rem .38rem;border-radius:999px;
  background:rgba(17,17,16,.08);
}
.pestana[aria-selected="true"] .pestana-n{background:rgba(255,255,255,.24)}
.grupo.sin-rotulo{padding-top:1.2rem}
.grupo + .grupo .rotulo{padding-top:1.6rem}

/* ---------- rejilla ----------
   Igual que en Tisha: cada perfume es una tarjeta blanca con sombra, la foto
   arriba dentro de la tarjeta, y abajo el precio junto al botón de agregar.
   Antes las fotos flotaban sueltas sobre el fondo y la página se veía plana. */

.rejilla{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem .8rem}
@media(min-width:640px){.rejilla{grid-template-columns:repeat(3,1fr);gap:1.4rem 1.1rem}}
@media(min-width:1000px){.rejilla{grid-template-columns:repeat(4,1fr);gap:1.6rem 1.3rem}}

.ficha{
  display:flex;flex-direction:column;height:100%;
  background:var(--panel);
  border:1px solid var(--panel-borde);
  border-radius:var(--r);
  box-shadow:var(--sombra);
  overflow:hidden;
  transition:box-shadow .2s var(--suave),transform .2s var(--suave);
  /* El navegador se salta el dibujado de las tarjetas que no se ven. Con 27
     perfumes en una sola pantalla larga es lo que mantiene el scroll suelto
     en un teléfono de gama baja. */
  content-visibility:auto;
  contain-intrinsic-size:auto 330px;
}
.ficha:hover{box-shadow:var(--sombra-alta);transform:translateY(-2px)}

.ficha-foto{
  position:relative;aspect-ratio:4/5;
  /* --tinte lo pone cada perfume desde PHP, con el color de su acorde
     principal. La mezcla va muy baja: tiñe, no pinta. */
  background:
    radial-gradient(80% 70% at 50% 8%, color-mix(in srgb, var(--tinte,#A89C90) 20%, transparent) 0%, transparent 70%),
    linear-gradient(180deg,#FBFAF8 0%,#F1EEEA 100%);
  display:flex;align-items:center;justify-content:center;
}
@supports not (background:color-mix(in srgb,red 10%,transparent)){
  .ficha-foto{background:linear-gradient(180deg,#FBFAF8 0%,#F1EEEA 100%)}
}
.ficha-foto img{
  width:100%;height:100%;object-fit:cover;
  /* la foto no se toca ni se guarda con un toque largo */
  pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
/* Agotado: en gris, apagado y SIN enlace. Se distingue de un vistazo y no se
   puede abrir, para que nadie entre a una ficha que no puede comprar. */
.ficha.agotada{background:var(--gris);box-shadow:none}
.ficha.agotada:hover{box-shadow:none;transform:none}
.ficha.agotada .ficha-foto{background:#E8E8EB;cursor:default}
.ficha.agotada .ficha-foto img{filter:grayscale(1) contrast(.93);opacity:.5}
.ficha.agotada .ficha-nom,
.ficha.agotada .ficha-marca{color:var(--tinta3)}

/* el sello de novedad, arriba a la izquierda de la foto */
.sello-nuevo{
  position:absolute;top:.5rem;left:.5rem;z-index:2;
  display:inline-flex;align-items:center;gap:.32rem;
  padding:.24rem .55rem .24rem .45rem;border-radius:999px;
  background:rgba(17,17,16,.86);color:#fff;
  font-size:.6rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.sello-nuevo::before{content:'';width:.34rem;height:.34rem;border-radius:999px;background:#7BD69B}

.ficha-cuerpo{padding:.75rem .7rem .8rem;display:flex;flex-direction:column;flex:1}
.ficha-nom{
  margin:0;font-size:.88rem;font-weight:600;line-height:1.3;letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media(min-width:900px){.ficha-nom{font-size:.95rem}}
.ficha-marca{margin:.15rem 0 0;font-size:.7rem;color:var(--tinta3);letter-spacing:.06em;text-transform:uppercase}

/* el pie de la tarjeta: precio y botón, siempre abajo del todo, así todos
   quedan a la misma altura en una fila */
.ficha-pie{
  margin-top:auto;padding-top:.7rem;
  display:flex;align-items:center;justify-content:space-between;gap:.4rem;
}
.ficha-precio{margin:0;font-size:.88rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.ficha-antes{font-weight:400;font-size:.78rem;color:var(--tinta3);text-decoration:line-through;
  display:block;line-height:1.1}
/* Agotado se dice solo aquí, en el renglón del precio. El recuadro negro
   sobre la foto se quitó: la tarjeta ya se ve apagada y en gris. */
.ficha-sin{font-size:.68rem;font-weight:600;color:var(--tinta3);
  letter-spacing:.12em;text-transform:uppercase}

.agregar{
  display:inline-flex;align-items:center;gap:.22rem;
  padding:.48rem .72rem .48rem .54rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--marca);color:var(--marca-texto);
  font-size:.76rem;font-weight:500;line-height:1;white-space:nowrap;
  box-shadow:0 4px 12px -5px var(--marca-brillo);
  transition:background-color .18s var(--rapido),transform .18s var(--suave);
}
.agregar:hover{background:var(--marca-hover)}
.agregar:active{transform:scale(.96)}
.agregar svg{width:.85rem;height:.85rem}
.agregar-t{display:inline}
/* confirma un instante al agregar, ya que la bolsa no se abre sola */
.agregar.hecho{background:var(--verde)}

.hueco{padding:3.5rem 1.4rem;text-align:center;color:var(--tinta2);
  border:1px dashed var(--linea);border-radius:var(--r)}

/* ---------- ficha de perfume ---------- */

.migas{padding:.9rem 0 0;font-size:.74rem;color:var(--tinta3)}
.migas a:hover{color:var(--tinta)}

/* En el celular la foto se achica a propósito: lo que hay que ver primero es
   cuánto cuesta cada medida y qué notas tiene, no el frasco a pantalla
   completa. En escritorio sí ocupa su columna entera. */
.perfume{display:grid;gap:1.1rem;padding:.8rem 0 2.5rem}
@media(min-width:900px){
  .perfume{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3.5rem;padding:1.6rem 0 5rem;align-items:start}
  .perfume-foto{width:auto;max-width:none;margin-inline:0}
}
.perfume-foto{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;
  width:min(58%,14rem);margin-inline:auto;
  background:
    radial-gradient(76% 64% at 50% 6%, color-mix(in srgb, var(--tinte,#A89C90) 20%, transparent) 0%, transparent 70%),
    linear-gradient(180deg,#FBFAF8 0%,#F1EEEA 100%);
  display:flex;align-items:center;justify-content:center;position:relative}
.perfume-foto img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;
  pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* la mini borrosa detrás: se pinta al instante (viene en el HTML) y la foto
   nítida entra encima, así al abrir el perfume no se ve el fondo un segundo */
.perfume-foto.con-mini::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:var(--mini) center/cover no-repeat;
  filter:blur(16px);transform:scale(1.12);
}
@media(min-width:900px){.perfume-foto{position:sticky;top:1.5rem}}

.perfume-marca{margin:0;font-size:.76rem;color:var(--tinta3);letter-spacing:.14em;text-transform:uppercase}
.perfume h1{margin:.25rem 0 0;font-size:clamp(1.35rem,5.2vw,2.2rem);
  font-weight:600;letter-spacing:-.028em;line-height:1.12}
.perfume-precio{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  margin:.7rem 0 0;padding-bottom:.9rem;border-bottom:1px solid var(--linea)}
.precio-hoy{font-size:1.35rem;font-weight:600;letter-spacing:-.02em}
.precio-antes{font-size:1rem;color:var(--tinta3);text-decoration:line-through}
.perfume-texto{margin:1.1rem 0 0;color:var(--tinta2);font-size:.95rem}

.bloque{margin-top:1.1rem}
.bloque h2{margin:0 0 .65rem;font-size:.66rem;text-transform:uppercase;letter-spacing:.22em;
  color:var(--tinta3);font-weight:500}

.medidas{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:.55rem}
.medida{display:flex;flex-direction:column;align-items:center;gap:.12rem;
  padding:.62rem .5rem;border:1px solid var(--panel-borde);border-radius:var(--r-sm);
  background:#fff;cursor:pointer;
  transition:border-color .18s var(--rapido),background-color .18s var(--rapido)}
.medida:hover{border-color:rgba(17,17,16,.24)}
.medida-ml{font-size:.9rem;font-weight:600}
.medida-bs{font-size:.8rem;color:var(--tinta2)}
.medida[aria-pressed="true"]{background:var(--marca);border-color:var(--marca)}
.medida[aria-pressed="true"] .medida-ml,
.medida[aria-pressed="true"] .medida-bs{color:var(--marca-texto)}

.compra{display:flex;gap:.55rem;margin-top:1rem}
.compra .b{flex:1}

/* ---------- acordes y notas ----------
   Cada nota se reconoce sola por su color y su dibujito: los cítricos en
   amarillo, las maderas en marrón, lo marino en azul. Es lo que hace que la
   ficha se lea de un vistazo en vez de ser un párrafo. */

.acordes{display:flex;flex-direction:column;gap:.45rem}
.acorde{display:grid;grid-template-columns:6.6rem 1fr;gap:.7rem;align-items:center}
.acorde-n{font-size:.72rem;color:var(--tinta2);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acorde-barra{display:block;height:.5rem;border-radius:999px;background:rgba(17,17,16,.07);overflow:hidden}
.acorde-barra i{display:block;height:100%;border-radius:999px}

.notas{display:flex;flex-wrap:wrap;gap:.5rem}
.nota{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem .8rem .4rem .45rem;border-radius:999px;
  background:#fff;border:1px solid var(--panel-borde);
}
.nota-ic{width:1.6rem;height:1.6rem;flex:none;border-radius:999px;
  display:flex;align-items:center;justify-content:center}
.nota-ic svg{width:.95rem;height:.95rem}
.nota-n{font-size:.82rem;line-height:1.2}

/* ---------- bolsa ---------- */

.velo{position:fixed;inset:0;background:rgba(17,17,16,.42);z-index:60}
.velo[hidden]{display:none}

.cajon{
  position:fixed;top:0;right:0;bottom:0;z-index:70;
  width:100%;max-width:26rem;
  background:#fff;display:flex;flex-direction:column;
  box-shadow:-30px 0 60px -30px rgba(17,17,16,.4);
}
.cajon[hidden]{display:none}
.cajon-cab{display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.3rem;border-bottom:1px solid var(--linea)}
.cajon-cab h2{margin:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;font-weight:500}
.cajon-x{background:none;border:0;padding:.35rem;cursor:pointer;color:var(--tinta3);border-radius:999px}
.cajon-x:hover{color:var(--tinta);background:#F4F2EF}
.cajon-lista{
  flex:1;overflow-y:auto;padding:1rem 1.3rem;display:flex;flex-direction:column;gap:1rem;
  /* sin esto, al llegar al final de la lista el dedo seguía arrastrando la
     página de detrás y se veían los perfumes moviéndose bajo la bolsa */
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.cajon-pie{border-top:1px solid var(--linea);padding:1.1rem 1.3rem 1.5rem;background:#FCFBFA}

.renglon{display:flex;gap:.85rem;padding-bottom:1rem;border-bottom:1px solid var(--linea)}
.renglon:last-child{border-bottom:0;padding-bottom:0}
.renglon-foto{width:3.2rem;height:4rem;flex:none;border-radius:var(--r-sm);overflow:hidden;background:#F4F2EF}
.renglon-foto img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.renglon-cuerpo{flex:1;min-width:0}
.renglon-n{margin:0;font-size:.85rem;font-weight:600;line-height:1.3}
.renglon-m{margin:.15rem 0 0;font-size:.75rem;color:var(--tinta3)}
.renglon-pie{display:flex;align-items:center;justify-content:space-between;margin-top:.6rem;gap:.6rem}
.renglon-bs{font-size:.85rem;font-weight:600}

/* quitar en rojo, agregar en verde: se distinguen sin leer */
.contador{display:flex;align-items:center;gap:.15rem}
.contador button{
  width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--panel-borde);border-radius:999px;background:#fff;cursor:pointer;
  font-size:1rem;line-height:1;font-weight:500;
  transition:background-color .16s var(--rapido),border-color .16s var(--rapido),color .16s var(--rapido);
}
.contador .menos{color:var(--rojo)}
.contador .menos:hover{background:var(--rojo-suave);border-color:rgba(192,57,43,.35)}
.contador .mas{color:var(--verde)}
.contador .mas:hover{background:var(--verde-suave);border-color:rgba(47,125,79,.35)}
.contador span{min-width:1.4rem;text-align:center;font-size:.82rem;font-weight:600}
.renglon-x{background:none;border:0;cursor:pointer;color:var(--tinta3);padding:.1rem;font-size:1.05rem;line-height:1}
.renglon-x:hover{color:var(--rojo)}

.cupon-fila{display:flex;gap:.5rem;margin-bottom:.8rem}
.cupon-fila .campo{text-transform:uppercase;letter-spacing:.08em;font-size:.82rem}
.cuenta{display:flex;justify-content:space-between;font-size:.85rem;color:var(--tinta2);margin-bottom:.4rem}
.cuenta-total{font-size:1.15rem;font-weight:600;color:var(--tinta);
  padding-top:.7rem;margin-top:.3rem;border-top:1px solid var(--linea)}
.cuenta-baja{color:var(--verde)}
.cajon-vacio{margin:auto;text-align:center;color:var(--tinta3);display:flex;flex-direction:column;align-items:center;gap:.7rem}
.aviso-cupon{font-size:.8rem;margin:0 0 .7rem;padding:.55rem .75rem;border-radius:var(--r-sm)}
.aviso-cupon.bien{background:var(--verde-suave);color:var(--verde)}
.aviso-cupon.mal{background:var(--rojo-suave);color:var(--rojo)}

/* ---------- pie ---------- */

.pie{padding:2.5rem 0 7rem;margin-top:3rem;border-top:1px solid var(--linea)}
@media(min-width:900px){.pie{padding:3rem 0 6rem}}
.pie-in{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.pie-marca{display:flex;flex-direction:column;align-items:center;gap:.45rem}
.pie .marca-nombre{font-size:.8rem;color:var(--tinta2)}
/* de donde es la tienda, debajo del nombre: TARIJA - BOLIVIA */
.pie-lugar{margin:0;font-size:.6rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.26em;text-indent:.26em;color:var(--tinta3)}

/* Las redes, cada una con SU color. Antes eran tres trazos finos en gris que
   no se distinguian entre si; ahora se reconocen de lejos sin leer nada. */
.redes{display:flex;gap:.7rem}
.redes .red{
  width:2.7rem;height:2.7rem;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:999px;color:#fff;
  transition:transform .2s var(--suave),box-shadow .2s var(--rapido);
}
.redes .red svg{width:1.15rem;height:1.15rem}
.redes .red:hover{transform:translateY(-3px)}
.red-wa{background:linear-gradient(150deg,#5BF07A 0%,#25D366 45%,#12A150 100%);
  box-shadow:0 6px 16px -7px rgba(37,211,102,.9)}
.red-wa:hover{box-shadow:0 11px 22px -8px rgba(37,211,102,.95)}
/* el degradado real de Instagram: arranca amarillo abajo a la izquierda */
.red-ig{background:radial-gradient(circle at 28% 108%,
    #FDE17D 0%,#FD9C42 18%,#F5533D 38%,#E8397E 58%,#B735A6 76%,#6C4DD8 100%);
  box-shadow:0 6px 16px -7px rgba(214,36,159,.85)}
.red-ig:hover{box-shadow:0 11px 22px -8px rgba(214,36,159,.9)}
.red-tt{background:linear-gradient(150deg,#2B2E38 0%,#16181F 100%);
  box-shadow:0 6px 16px -7px rgba(0,0,0,.6)}
.red-tt:hover{box-shadow:0 11px 22px -8px rgba(0,0,0,.65)}
/* el desdoble cian/rosa con el que se reconoce TikTok */
.red-tt svg{filter:drop-shadow(1.1px 0 0 #25F4EE) drop-shadow(-1.1px 0 0 #FE2C55)}
.pie-legal{margin:0;font-size:.72rem;color:var(--tinta3)}
.pie-llave{color:#D7D2CB;padding:.3rem;transition:color .18s var(--rapido)}
.pie-llave:hover{color:var(--tinta3)}

/* ---------- el muelle de abajo ---------- */

.muelle{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;
  /* sólido y sin blur en móvil: en un gama baja el backdrop-filter sobre una
     barra fija tira los fps al hacer scroll. El blur se reserva a escritorio. */
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom);
}
@media(min-width:900px){
  /* en pantalla grande deja de ser una barra y pasa a ser una pastilla suelta */
  .muelle{
    left:50%;right:auto;bottom:1.5rem;transform:translateX(-50%);
    border:1px solid var(--panel-borde);border-radius:999px;
    box-shadow:0 12px 34px -14px rgba(17,17,16,.3);
    padding:.25rem;gap:.15rem;
    background:rgba(255,255,255,.82);
    backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  }
}
.muelle a,.muelle button{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;
  padding:.55rem .3rem .5rem;background:none;border:0;cursor:pointer;
  font-size:.63rem;font-weight:500;color:var(--tinta3);position:relative;
  transition:color .16s var(--rapido);
}
@media(min-width:900px){
  .muelle a,.muelle button{flex:0 0 auto;flex-direction:row;gap:.45rem;
    padding:.6rem 1.3rem;border-radius:999px;font-size:.82rem}
  .muelle .activo{background:var(--marca);color:var(--marca-texto)}
}
.muelle .activo{color:var(--tinta)}
.muelle-n{
  position:absolute;top:.28rem;left:50%;margin-left:.35rem;
  min-width:1.05rem;height:1.05rem;padding:0 .26rem;border-radius:999px;
  background:var(--marca);color:var(--marca-texto);font-size:.6rem;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
}
@media(min-width:900px){.muelle-n{position:static;margin:0}}

/* ---------- la franja roja del pedido ----------
   Sale sola en cuanto hay algo en la bolsa y lleva el total acumulado a la
   vista. Agregar ya no abre la bolsa: interrumpía la compra. */

.barra-bolsa{
  position:fixed;left:0;right:0;z-index:55;
  bottom:calc(3.6rem + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  width:min(100% - 1.6rem,34rem);margin-inline:auto;
  padding:.72rem .8rem .72rem 1rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--marca);color:var(--marca-texto);
  font-size:.88rem;font-weight:600;line-height:1;
  box-shadow:0 10px 26px -10px var(--marca-brillo);
}
.barra-bolsa:active{transform:scale(.99)}
.barra-lado{display:inline-flex;align-items:center;gap:.5rem}
.barra-ver{
  padding:.32rem .72rem;border-radius:999px;
  background:rgba(255,255,255,.22);font-size:.78rem;font-weight:600;
}
@media(min-width:900px){
  .barra-bolsa{bottom:5.6rem;width:min(100% - 3rem,29rem)}
}

/* sitio para lo que va fijo abajo, que si no tapa el final de la página */
.ficha-main{padding-bottom:5.5rem}
body.con-barra .ficha-main{padding-bottom:9rem}
body.con-barra .pie{padding-bottom:10rem}

/* ---------- las notas, plegadas ----------
   <details> nativo: se abre solo si el cliente quiere el detalle, y no cuesta
   ni una línea de JavaScript. */

.plegable{margin-top:1.2rem;border-top:1px solid var(--linea);padding-top:.6rem}
.plegable summary{
  display:flex;align-items:center;gap:.55rem;cursor:pointer;list-style:none;
  padding:.6rem .3rem;border-radius:var(--r-sm);
  font-size:.8rem;font-weight:500;color:var(--tinta2);
  transition:color .16s var(--rapido),background-color .16s var(--rapido);
}
.plegable summary::-webkit-details-marker{display:none}
.plegable summary:hover{color:var(--tinta);background:var(--gris)}
.plegable summary svg{width:.95rem;height:.95rem}
.plegable summary::after{
  content:'';margin-left:auto;width:.46rem;height:.46rem;
  border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:translateY(-.12rem) rotate(45deg);
  transition:transform .18s var(--rapido);
}
.plegable[open] summary::after{transform:translateY(.06rem) rotate(-135deg)}
.plegable-in{padding-top:.1rem}

/* ---------- barras de desplazamiento ---------- */

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(17,17,16,.14);border-radius:999px;border:3px solid #fff}
::-webkit-scrollbar-thumb:hover{background:rgba(17,17,16,.24)}