/* Tarjetas de acceso (reemplazan la barra de arriba): en la Carta se deslizan en fila, en el Club van en grilla */
.accesos { display: grid; gap: 12px; }
.accesos-carta { grid-auto-flow: column; grid-auto-columns: minmax(232px, 72%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px var(--lado) 14px; margin-inline: calc(var(--lado) * -1); scroll-padding-inline: var(--lado); }
.accesos-carta::-webkit-scrollbar { display: none; }
.accesos-club { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acc {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 84px; padding: 14px 16px;
  border-radius: 22px; text-align: left; scroll-snap-align: start; color: var(--tinta); isolation: isolate;
  background: radial-gradient(120% 90% at 15% 0%, #FFF3F9 0%, transparent 55%), linear-gradient(160deg, #FFE1EF 0%, #F9B3D5 60%, #F28CC0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 18px 30px -18px rgba(0,0,0,.75); transition: transform .55s var(--rebote);
}
.acc:active { transform: scale(.96); }
.acc-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; background: var(--tinta); color: var(--peluche); box-shadow: 0 6px 12px -6px rgba(0,0,0,.6); }
.acc-ico svg { width: 24px; height: 24px; }
.acc-t { display: grid; gap: 1px; min-width: 0; }
.acc-t small { font-family: var(--display); font-stretch: 115%; font-weight: 800; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fucsia); }
.acc-t b { font-family: var(--display); font-stretch: 118%; font-weight: 900; font-size: 1.04rem; line-height: 1.05; text-transform: uppercase; }
.acc-t em { font-style: normal; font-size: .78rem; color: rgba(26,10,18,.7); line-height: 1.3; }
/* tu entrada: un trocito de pulsera fucsia */
.acc-entrada { background: linear-gradient(160deg, #FF4FA6, var(--fucsia) 70%); color: #fff; }
.acc-entrada .acc-t small { color: #FFE1EF; } .acc-entrada .acc-t em { color: rgba(255,255,255,.85); }
.acc-entrada .acc-ico { background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.acc-pulsera { width: 34px; height: 14px; border-radius: 3px; rotate: -18deg; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 1px, transparent 1px 3px), #fff; box-shadow: 0 2px 0 rgba(0,0,0,.2); position: relative; }
.acc-pulsera::after { content: ''; position: absolute; right: -4px; top: -3px; width: 10px; height: 20px; border-radius: 3px; background: #FFE1EF; }
.acc-qr .acc-punto { position: absolute; top: 12px; right: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--vivo); box-shadow: 0 0 0 3px #fff; animation: latido-punto 1.6s var(--suave) infinite; }
.acc-nivel { grid-template-columns: minmax(0, 1fr) auto; }
.acc-nivel .acc-pul .pulsera { rotate: -6deg; }
.acc-demo, .acc-sonido { background: linear-gradient(180deg, rgba(42,18,32,.9), rgba(20,8,14,.95)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 30px -18px rgba(0,0,0,.75); }
.acc-demo .acc-t em, .acc-sonido .acc-t em { color: var(--t3); }
.acc-demo .acc-t small, .acc-sonido .acc-t small { color: var(--vivo); }
.acc-demo .acc-ico, .acc-sonido .acc-ico { background: rgba(255,255,255,.1); color: #fff; }
.acc-sonido .so-off { display: none; }
.acc-sonido[aria-pressed="false"] .so-on { display: none; }
.acc-sonido[aria-pressed="false"] .so-off { display: grid; }
@media (max-width: 380px) { .accesos-club { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) {
  .accesos-carta { grid-auto-flow: initial; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .accesos-club { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* En la carta: debajo del peluche, las tarjetas y para qué Bresh es la previa, con aire antes de los destacados */
.ca-arriba { display: grid; gap: 14px; padding-top: 22px; padding-bottom: 8px; background: var(--noche); }
.ca-arriba + .ca-dest.banda { margin-top: 0; background: var(--noche); }
.ca-arriba + .ca-dest .fiesta { top: 0; }
.ca-para { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 10px 10px 10px 16px; border-radius: 16px; text-align: left; font-size: .9rem; line-height: 1.3; color: var(--t2); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12); transition: transform .5s var(--rebote); }
.ca-para:active { transform: scale(.98); }
.ca-para b { color: #fff; font-weight: 800; }
.ca-para em { flex: none; font-style: normal; font-family: var(--display); font-stretch: 115%; font-weight: 900; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--fucsia); padding: 10px 12px; border-radius: 11px; box-shadow: 0 3px 0 var(--fucsia-oo); }

/* «Ver la carta» y la cabecera del peluche que queda arriba como barra al deslizar */
.ca-ver-caja { display: grid; place-items: center; padding: 6px var(--lado) 26px; background: var(--noche); }
.ca-ver-carta { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 28px 12px; border-radius: 999px; color: #fff;
  background: linear-gradient(180deg, rgba(255,92,175,.22), rgba(216,0,122,.14)); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.18), 0 14px 30px -16px rgba(255,31,154,.6); transition: transform .55s var(--rebote), box-shadow .3s; }
.ca-ver-carta span { font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; }
.ca-ver-carta .onda { width: 74px; height: 9px; transition: width .5s var(--rebote); }
.ca-ver-carta:hover .onda, .ca-ver-carta:focus-visible .onda { width: 110px; }
.ca-ver-carta:active { transform: scale(.95); }
/* el peluche a todo el ancho, sin bordes ni costura, que se funde en negro abajo */
.ca-cab { height: clamp(330px, 46svh, 470px) !important; border-radius: 0 !important; box-shadow: none !important; position: relative; }
.ca-cab .ca-cab-fondo { border-radius: 0 !important; }
.ca-cab::after { content: '' !important; left: 0 !important; right: 0 !important; bottom: -1px !important; top: auto !important; height: 46%; border: 0 !important; filter: none !important;
  background: linear-gradient(180deg, rgba(11,6,9,0) 0%, rgba(11,6,9,.55) 55%, var(--noche) 100%); z-index: 3 !important; opacity: 1 !important; pointer-events: none; }
@media (min-width: 900px) { .ca-cab { height: clamp(440px, 58svh, 580px) !important; } }

/* la barra de vidrio rosa que aparece arriba al bajar */
.barra-vidrio {
  position: fixed; z-index: 52; left: 50%; top: calc(10px + var(--seg-t)); width: min(calc(100vw - 28px), 380px); height: 54px; translate: -50% -140%;
  display: grid; place-items: center; border-radius: 999px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(240,40,140,.93) 0%, rgba(216,0,122,.94) 55%, rgba(178,0,100,.96) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,.42), inset 0 -1px 1px rgba(255,255,255,.1), inset 1px 0 1px rgba(255,255,255,.16), inset -1px 0 1px rgba(255,255,255,.16), 0 18px 40px -14px rgba(122,0,69,.7);
  transition: translate .7s var(--rebote), opacity .35s var(--suave);
}
.barra-vidrio.ver { translate: -50% 0; opacity: 1; pointer-events: auto; }
.barra-vidrio svg, .barra-vidrio img { width: 86px; height: auto; filter: drop-shadow(0 1px 4px rgba(122,0,69,.45)); }
.barra-vidrio::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(115deg, rgba(255,255,255,.75), rgba(255,255,255,0) 28%, rgba(255,255,255,0) 64%, rgba(255,255,255,.4) 86%, rgba(255,255,255,.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* el vaso-carrito: solo aparece cuando hay bebidas cargadas y va a la derecha, sin tapar títulos */
.ca-vaso:not(.lleno) { opacity: 0 !important; transform: translateY(26px) scale(.9) !important; pointer-events: none !important; }
.ca-vaso { left: auto !important; right: 14px !important; bottom: calc(66px + 12px + 14px + var(--seg-b)) !important; }
html.nav-min .ca-vaso { bottom: calc(56px + 12px + 14px + var(--seg-b)) !important; }

/* en la carta, debajo de los productos: las tres tarjetas enteras, una al lado de la otra */
.ca-accesos-b { padding-top: 6px !important; padding-bottom: 28px !important; background: transparent; }
.ca-accesos-b .accesos-carta { grid-auto-flow: initial; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding: 0; gap: 10px; }
.ca-accesos-b .acc { grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; gap: 8px; min-height: 0; padding: 14px 12px 14px; border-radius: 20px; }
.ca-accesos-b .acc-ico { width: 38px; height: 38px; border-radius: 13px; }
.ca-accesos-b .acc-ico svg { width: 20px; height: 20px; }
.ca-accesos-b .acc-t b { font-size: .84rem; line-height: 1.02; overflow-wrap: anywhere; }
.ca-accesos-b .acc-t small { font-size: .56rem; letter-spacing: .1em; }
.ca-accesos-b .acc-t em { font-size: .7rem; line-height: 1.25; }
.ca-accesos-b .acc-nivel { grid-template-columns: minmax(0, 1fr); }
.ca-accesos-b .acc-nivel::before { content: ''; display: block; width: 38px; height: 38px; border-radius: 13px; background: url('../assets/insignias/primera.webp') center / 34px no-repeat, var(--tinta); box-shadow: 0 6px 12px -6px rgba(0,0,0,.6); }
.ca-accesos-b .acc-punto { top: 10px; right: 10px; }
.ca-arriba { padding-bottom: 14px; }
@media (min-width: 900px) {
  .ca-accesos-b .acc { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 16px 18px; }
  .ca-accesos-b .acc-nivel { grid-template-columns: auto minmax(0, 1fr); }
  .ca-accesos-b .acc-t b { font-size: 1rem; }
  .ca-accesos-b .acc-t em { font-size: .8rem; }
}

/* ───────── arriba de la carta: los lásers salen del logo y pasan por detrás de todo ───────── */
.ca { position: relative; isolation: isolate; }
.ca-cielo { position: absolute !important; left: 0; right: 0; top: calc(-1 * (72px + var(--seg-t))); height: min(1200px, 150svh); inset-inline: 0; z-index: 0 !important; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, #000 0, #000 70%, transparent 100%); mask: linear-gradient(180deg, #000 0, #000 70%, transparent 100%); }
.ca-cielo .laser { top: calc(36px + var(--seg-t)) !important; height: 160% !important; width: 2px; opacity: .7; }
.ca-cielo .humo { inset: -10% -20% 10% !important; }
.ca-cielo-foco { position: absolute; left: 50%; top: calc(6px + var(--seg-t)); width: 260px; height: 120px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,31,154,.55), transparent 75%); filter: blur(8px); animation: neon-late 2.9s ease-in-out infinite; }
.ca-arriba, .ca-arriba + .ca-dest.banda, .ca-dest.banda { background: transparent !important; position: relative; z-index: 2; }
.ca-dest > .fiesta { display: none; }
.ca-ver-caja { background: transparent !important; position: relative; z-index: 2; }
/* «Para Bresh X · Cambiar»: una línea fina de vidrio, sin caja pesada, que deja ver los lásers */
.ca-arriba { display: grid; justify-items: center; padding-top: 14px !important; padding-bottom: 4px !important; }
.ca-para { width: auto !important; max-width: 100%; min-height: 40px !important; padding: 5px 5px 5px 16px !important; border-radius: 999px !important; gap: 10px !important;
  background: rgba(11,6,9,.32) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important; font-size: .82rem !important; }
.ca-para-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,.85); }
.ca-para em { padding: 8px 12px !important; border-radius: 999px !important; font-size: .64rem !important; box-shadow: none !important; }

/* ───────── regalo progresivo: el arranque ya hecho al principio ───────── */
.ca-hito.inicio { left: 0 !important; }
.ca-hito.inicio .ca-hito-img { background: var(--fucsia); box-shadow: 0 0 0 3px var(--tinta), 0 8px 0 var(--fucsia-oo), 0 0 22px rgba(216,0,122,.6); transform: rotate(-6deg); }
.ca-hito.inicio .ca-hito-img img { filter: none !important; }
.ca-hito.inicio .ca-hito-img::after { content: '✓'; position: absolute; right: -4px; top: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--fucsia); font-weight: 900; font-size: .78rem; box-shadow: 0 2px 0 var(--fucsia-oo); }
.ca-hito.inicio b { color: var(--fucsia); }

/* ───────── debajo: datos claros en filas ───────── */
.ca-chips { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 10px !important; margin-top: 6px; }
.ca-dato { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 16px; border-radius: 18px; background: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(216,0,122,.12), 0 10px 20px -16px rgba(122,0,69,.6); color: var(--tinta); }
.ca-dato-n { min-width: 64px; text-align: center; font-family: var(--display); font-stretch: 120%; font-weight: 900; font-size: 1.9rem; line-height: 1; color: var(--fucsia); letter-spacing: -.02em; }
.ca-dato-t { display: grid; gap: 2px; min-width: 0; }
.ca-dato-t b { font-weight: 800; font-size: .92rem; line-height: 1.2; }
.ca-dato-t small { font-size: .78rem; color: rgba(26,10,18,.65); }
.ca-dato-barra { display: block; height: 6px; margin-top: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--fucsia) calc(var(--p) * 100%), rgba(216,0,122,.14) 0); }
.ca-dato.ca-stock.poco .ca-dato-n { animation: ca-late 1.4s var(--suave) infinite; }
.ca-dato.ca-premio { background: var(--tinta); color: #fff; }
.ca-dato.ca-premio .ca-dato-t small { color: rgba(255,255,255,.75); }
@media (min-width: 900px) { .ca-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ca-dato.ca-gente { transform: none !important; padding: 12px 16px !important; border-radius: 18px !important; background: rgba(255,255,255,.62) !important; color: var(--tinta) !important; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(216,0,122,.12), 0 10px 20px -16px rgba(122,0,69,.6) !important; }
.ca-dato.ca-gente::before, .ca-dato.ca-gente::after { content: none !important; }
.ca-dato.ca-gente span { max-width: none !important; color: inherit !important; }
.ca-dato .ca-dato-n { color: var(--fucsia) !important; }
.ca-dato.ca-gente .ca-dato-t b { font-family: var(--texto) !important; font-stretch: normal !important; font-weight: 800 !important; font-size: .92rem !important; line-height: 1.2 !important; color: var(--tinta) !important; letter-spacing: 0 !important; }
.ca-hito.on b, .ca-hito.inicio b { margin-top: 9px; }

/* ───────── barra de arriba: logo y, en la carta, para qué Bresh son tus bebidas ───────── */
.barra-vidrio { display: flex !important; align-items: center; justify-content: center; gap: 10px; padding: 0 6px 0 16px; }
.bv-logo { display: grid; place-items: center; flex: none; transition: transform .6s var(--rebote); }
.bv-logo svg, .bv-logo img { width: 86px; height: auto; }
.bv-ev { display: none; min-width: 0; flex: 1; justify-content: flex-end; }
.barra-vidrio.con-evento { justify-content: space-between; }
.barra-vidrio.con-evento .bv-ev { display: flex; }
.barra-vidrio.con-evento .bv-logo svg, .barra-vidrio.con-evento .bv-logo img { width: 76px; }
.bv-ev-btn { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; height: 42px; padding: 0 4px 0 12px; border-radius: 999px; text-align: left; color: #fff;
  background: rgba(90,0,48,.32); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transition: transform .5s var(--rebote); }
.bv-ev-btn:active { transform: scale(.96); }
.bv-ev-t { display: grid; min-width: 0; line-height: 1.05; }
.bv-ev-t small { font-size: .56rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.bv-ev-t b { font-family: var(--display); font-stretch: 112%; font-weight: 900; font-size: .78rem; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-ev-btn em { flex: none; font-style: normal; font-family: var(--display); font-stretch: 115%; font-weight: 900; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px; border-radius: 999px; background: #fff; color: var(--fucsia); }
/* los lásers salen del logo, que en la carta queda a la izquierda de la barra */
.ca-cielo .laser { left: calc(50% - min(50vw - 14px, 190px) + 54px) !important; }
.ca-cielo-foco { left: calc(50% - min(50vw - 14px, 190px) + 54px) !important; }
/* sin la línea de «Para Bresh», los destacados suben */
.ca-dest.banda { margin-top: -6px; }
.ca-dest-scroll { padding-top: 70px !important; }
@media (min-width: 900px) { .ca-dest-scroll { padding-top: 92px !important; } }

/* los lásers quedan fijos saliendo del logo de la barra mientras deslizás (se ven detrás de lo transparente) */
.ca-cielo { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 100svh !important; z-index: 0 !important;
  -webkit-mask: linear-gradient(180deg, #000 0, #000 55%, transparent 100%) !important; mask: linear-gradient(180deg, #000 0, #000 55%, transparent 100%) !important; }
.ca-cielo .laser { top: calc(36px + var(--seg-t)) !important; height: 140% !important; }
.ca > :not(.ca-cielo) { position: relative; z-index: 2; }