/* Un toque de shine, glitter y neón (pedido de Santiago), sutil: las bebidas con un halo neón rosa y destellos que
   titilan alrededor, las tarjetas con un brillo que las cruza cada tanto. También agranda y baja las bebidas de las
   tarjetas destacadas (estaban chicas y muy arriba). */

/* tarjetas destacadas: bebida más grande y más abajo, el título acompaña */
.ca-dc { --sale: 58px; --bw: 54cqw; min-height: 480px; overflow: visible; }
.ca-dc-beb { right: -14px; }
@media (min-width: 900px) { .ca-dc { --sale: 74px; --bw: 54cqw; min-height: 500px; } }

/* neón: halo rosa detrás de cada bebida */
.ca-dc-beb::before { content: ''; position: absolute; left: 8%; right: 8%; top: 22%; bottom: 8%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255,31,154,.55), rgba(255,31,154,.18) 55%, transparent 75%); filter: blur(14px); animation: neon-late 2.9s ease-in-out infinite; }
.ca-dc-beb img, .ca-fila-img .ca-beb img { filter: drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 0 14px rgba(255,31,154,.38)) drop-shadow(0 18px 18px rgba(26,0,16,.35)); }
@keyframes neon-late { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }

/* glitter: destellos que titilan alrededor de la bebida */
.ca-dc-beb::after { content: ''; position: absolute; inset: -6% -10%; pointer-events: none; z-index: 2;
  background:
    radial-gradient(circle at 12% 30%, #fff 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 86% 22%, #FFD1EA 0 2px, transparent 3px),
    radial-gradient(circle at 92% 64%, #fff 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 8% 72%, #FF8FCB 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 70% 8%, #fff 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 30% 92%, #FFD1EA 0 1.5px, transparent 2.5px);
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px rgba(255,31,154,.9)); animation: glitter 2.2s steps(1) infinite; }
@keyframes glitter { 0% { opacity: 1; } 25% { opacity: .35; } 50% { opacity: .9; } 75% { opacity: .5; } }
.ca-dc:nth-child(2n) .ca-dc-beb::after { animation-delay: -1.1s; transform: scaleX(-1); }

/* destellos en cruz (✦) que aparecen y se van */
.ca-dc::before { content: '✦'; position: absolute; z-index: 4; right: 18%; top: calc(var(--sale) * -1 + 18px); font-size: 22px; color: #fff; pointer-events: none;
  text-shadow: 0 0 6px #fff, 0 0 14px var(--vivo), 0 0 24px var(--vivo); animation: chispa 3.4s ease-in-out infinite; }
.ca-dc:nth-child(3n+1)::before { right: 52%; top: calc(var(--sale) * -1 + 70px); font-size: 16px; animation-delay: -1.2s; }
.ca-dc:nth-child(3n+2)::before { right: 6%; top: 46%; animation-delay: -2.3s; }
@keyframes chispa { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 40% { opacity: 1; transform: scale(1) rotate(45deg); } 60% { opacity: .9; transform: scale(.85) rotate(60deg); } 80% { opacity: 0; transform: scale(.3) rotate(90deg); } }

/* shine: un brillo que cruza la tarjeta cada tanto */
.ca-dc-fondo::after { content: ''; position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.12) 52%, transparent 60%) 0 0 / 260% 100% no-repeat;
  mix-blend-mode: soft-light; animation: shine 6.5s cubic-bezier(.4, 0, .2, 1) infinite; }
.ca-dc:nth-child(2n) .ca-dc-fondo::after { animation-delay: -3.2s; }
@keyframes shine { 0%, 62% { background-position: 160% 0; } 100% { background-position: -60% 0; } }

/* neón fino en el borde de las tarjetas de la lista y en la barra de vidrio */
.ca-fila { box-shadow: 0 0 0 1px rgba(255,31,154,.18), 0 14px 26px -18px rgba(216,0,122,.55) !important; }
.nav-in, .barra-vidrio { box-shadow: inset 0 1.5px 1px rgba(255,255,255,.42), inset 0 -1px 1px rgba(255,255,255,.1), 0 0 0 1px rgba(255,120,190,.35), 0 0 22px -2px rgba(255,31,154,.55), 0 18px 40px -14px rgba(122,0,69,.7) !important; }

/* el sticker del precio con un poco de brillo */
.ca-dc .sticker { box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 0 18px rgba(255,31,154,.45), 0 16px 26px -12px rgba(0,0,0,.6); }

@media (prefers-reduced-motion: reduce) {
  .ca-dc-beb::before, .ca-dc-beb::after, .ca-dc::before, .ca-dc-fondo::after { animation: none; }
  .ca-dc::before { opacity: 0; }
}

/* ───────── acabados metálicos y holográficos en distintos colores (inspo: flyers de @bresh con letras holo,
   satén lila, cromo y cielo con estrellas) ───────── */
:root {
  --glitter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='1' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 11 -8.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --estrellas: radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 72%, #fff, transparent), radial-gradient(1.8px 1.8px at 46% 34%, #ffd1ea, transparent), radial-gradient(1px 1px at 63% 12%, #fff, transparent), radial-gradient(1.4px 1.4px at 78% 58%, #cfe0ff, transparent), radial-gradient(1px 1px at 88% 26%, #fff, transparent), radial-gradient(1.6px 1.6px at 36% 90%, #fff, transparent), radial-gradient(1px 1px at 6% 52%, #ffd1ea, transparent), radial-gradient(1.2px 1.2px at 94% 84%, #fff, transparent);
  --holo-rosa: linear-gradient(125deg, #FFE1F0 0%, #F7B3DC 18%, #DCC8FF 36%, #FFE6F4 50%, #BFE3FF 66%, #FFC2E3 82%, #F9D6FF 100%);
  --holo-lila: linear-gradient(125deg, #E9DEFF 0%, #C6B6FF 20%, #FFD2EE 40%, #BCDcFF 58%, #E3D3FF 76%, #FFCFEA 100%);
  --cromo: linear-gradient(125deg, #F7F3F8 0%, #CFC9D8 18%, #FFFFFF 34%, #B7AFC4 50%, #F2EDF6 66%, #C9C0D3 82%, #FBF8FC 100%);
  --metal-fucsia: linear-gradient(125deg, #7A0042 0%, #E0157F 20%, #FF8CC8 36%, #D8007A 52%, #FF4FA6 70%, #8E0050 100%);
}
/* fondo de toda la app: cielo con estrellas, como el flyer de Punta del Este */
body { background: var(--estrellas), radial-gradient(120% 60% at 50% 0%, #1A0B24 0%, var(--noche) 60%); background-size: 340px 340px, 100% 100%; background-attachment: fixed; }

/* base común del acabado: glitter que titila + reflejo que se mueve con el puntero o el giroscopio */
.foil { position: relative; isolation: isolate; background-size: 220% 220%, auto; animation: foil-mueve 9s ease-in-out infinite alternate; }
.foil::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: var(--glitter), radial-gradient(70% 55% at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,.55), transparent 60%);
  background-size: 220px 220px, 100% 100%; mix-blend-mode: overlay; opacity: .9; animation: foil-glitter 1.8s steps(3) infinite; }
@keyframes foil-mueve { from { background-position: 0% 30%, 0 0; } to { background-position: 100% 70%, 0 0; } }
@keyframes foil-glitter { 0% { background-position: 0 0, 0 0; } 33% { background-position: 37px 61px, 0 0; } 66% { background-position: 83px 19px, 0 0; } }

/* las cinco tarjetas destacadas, cada una con su acabado */
.ca-dc.papel, .ca-dc.fucsia { background-image: none; }
.ca-dc:nth-child(5n+1) { background: var(--holo-rosa); }
.ca-dc:nth-child(5n+2) { background: var(--metal-fucsia); }
.ca-dc:nth-child(5n+3) { background: var(--cromo); }
.ca-dc:nth-child(5n+4) { background: var(--estrellas), linear-gradient(160deg, #1B1446 0%, #0D0A2A 55%, #2A0C3E 100%); background-size: 180px 180px, 100% 100%; }
.ca-dc:nth-child(5n+5) { background: var(--holo-lila); }
.ca-dc { background-size: 220% 220% !important; animation: foil-mueve 9s ease-in-out infinite alternate; }
.ca-dc:nth-child(5n+4) { background-size: 180px 180px, 100% 100% !important; animation: none; }
.ca-dc:nth-child(5n+1) { box-shadow: 0 0 0 1.5px rgba(255,255,255,.7), 0 9px 0 #C77AAE, 0 0 30px -6px rgba(220,160,255,.55), 0 34px 46px -18px rgba(0,0,0,.9) !important; }
.ca-dc:nth-child(5n+2) { box-shadow: 0 0 0 1.5px rgba(255,170,215,.6), 0 9px 0 #5A0030, 0 0 30px -6px rgba(255,31,154,.6), 0 34px 46px -18px rgba(0,0,0,.9) !important; }
.ca-dc:nth-child(5n+3) { box-shadow: 0 0 0 1.5px rgba(255,255,255,.8), 0 9px 0 #8D8599, 0 0 26px -8px rgba(255,255,255,.5), 0 34px 46px -18px rgba(0,0,0,.9) !important; }
.ca-dc:nth-child(5n+4) { box-shadow: 0 0 0 1.5px rgba(160,140,255,.45), 0 9px 0 #070518, 0 0 30px -6px rgba(120,100,255,.45), 0 34px 46px -18px rgba(0,0,0,.9) !important; }
.ca-dc:nth-child(5n+5) { box-shadow: 0 0 0 1.5px rgba(255,255,255,.7), 0 9px 0 #8F7FD0, 0 0 30px -6px rgba(180,160,255,.55), 0 34px 46px -18px rgba(0,0,0,.9) !important; }
/* glitter y reflejo encima del fondo de cada tarjeta */
.ca-dc-fondo::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--glitter), radial-gradient(80% 60% at 20% 0%, rgba(255,255,255,.5), transparent 60%); background-size: 220px 220px, 100% 100%;
  mix-blend-mode: overlay; animation: foil-glitter 1.8s steps(3) infinite; }
.ca-dc:nth-child(5n+4) .ca-dc-fondo::before { mix-blend-mode: screen; opacity: .55; }
/* texto: oscuro en los claros, blanco en el fucsia y en el de estrellas */
.ca-dc:nth-child(5n+4) .ca-dc-tit { color: #fff; text-shadow: 0 0 18px rgba(160,140,255,.6); }
.ca-dc:nth-child(5n+4) .ca-dc-tit span:nth-child(even) { color: #FFB8E0; }
.ca-dc:nth-child(5n+4) .ca-dc-fondo span { color: rgba(255,255,255,.07); }
.ca-dc:nth-child(5n+3) .ca-dc-fondo span { color: rgba(90,70,110,.12); }

/* accesos: holo rosa, el de la entrada en fucsia metálico */
.acc:not(.acc-demo):not(.acc-sonido):not(.acc-entrada) { background: var(--holo-rosa); background-size: 220% 220%; animation: foil-mueve 10s ease-in-out infinite alternate; }
.acc-entrada { background: var(--metal-fucsia) !important; background-size: 220% 220% !important; animation: foil-mueve 8s ease-in-out infinite alternate; }
.acc::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: var(--glitter); background-size: 220px 220px; mix-blend-mode: overlay; animation: foil-glitter 1.8s steps(3) infinite; }

/* insignias para reclamar: cromo holográfico */
.ins.lista { background: var(--holo-rosa); background-size: 220% 220%; animation: foil-mueve 9s ease-in-out infinite alternate; }
.ins.usada { background: var(--cromo); background-size: 220% 220%; }

@media (prefers-reduced-motion: reduce) {
  .foil, .foil::after, .ca-dc, .ca-dc-fondo::before, .acc, .acc::after, .ins.lista { animation: none !important; }
}

/* la bebida nunca pisa el título: el título arranca debajo de la bebida */
.ca-dc-tit { margin-top: calc(var(--bw) * 1.52 - var(--sale) - 4px) !important; }
.ca-dc { min-height: 0 !important; }

/* ───────── las tarjetas principales con las texturas reales de las letras BRESH de los flyers ─────────
   1 holográfico (Punta del Este), 2 rosa inflado con glitter (Ibiza), 3 satén lila (Carlos Paz),
   4 lentejuelas violetas (fondo de Ibiza), 5 cielo con estrellas (fondo de Punta del Este). */
.ca-dc { animation: tex-deriva 26s linear infinite !important; background-repeat: repeat !important; }
.ca-dc:nth-child(5n+1) { background: linear-gradient(180deg, rgba(255,255,255,0) 38%, rgba(255,246,251,.62) 70%, rgba(255,246,251,.78) 100%), url('../assets/texturas/holo.jpg') 0 0 / 380px 380px !important; }
.ca-dc:nth-child(5n+2) { background: linear-gradient(180deg, rgba(120,0,60,0) 40%, rgba(120,0,60,.45) 100%), url('../assets/texturas/inflado.jpg') 0 0 / 420px 420px !important; }
.ca-dc:nth-child(5n+3) { background: linear-gradient(180deg, rgba(255,255,255,0) 38%, rgba(255,246,251,.55) 72%, rgba(255,246,251,.7) 100%), url('../assets/texturas/satin.jpg') 0 0 / 380px 380px, #E4C8F2 !important; }
.ca-dc:nth-child(5n+4) { background: linear-gradient(180deg, rgba(20,6,40,0) 40%, rgba(20,6,40,.55) 100%), url('../assets/texturas/lentejuelas.jpg') 0 0 / 360px 360px, #3A1060 !important; }
.ca-dc:nth-child(5n+5) { background: var(--estrellas), radial-gradient(90% 70% at 30% 20%, #23305C, #0C1030 70%) !important; background-size: 180px 180px, 100% 100% !important; animation: none !important; }
@keyframes tex-deriva { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 0, 380px 380px, 0 0; } }
/* textos sobre cada textura */
.ca-dc:nth-child(5n+2) .ca-dc-tit, .ca-dc:nth-child(5n+4) .ca-dc-tit, .ca-dc:nth-child(5n+5) .ca-dc-tit { color: #fff !important; text-shadow: 0 2px 0 rgba(90,0,50,.55), 0 0 18px rgba(0,0,0,.35) !important; }
.ca-dc:nth-child(5n+2) .ca-dc-tit span:nth-child(even) { color: #FFE1F0 !important; }
.ca-dc:nth-child(5n+4) .ca-dc-tit span:nth-child(even), .ca-dc:nth-child(5n+5) .ca-dc-tit span:nth-child(even) { color: #FFB8E0 !important; }
.ca-dc:nth-child(5n+2) .ca-dc-desc, .ca-dc:nth-child(5n+4) .ca-dc-desc, .ca-dc:nth-child(5n+5) .ca-dc-desc,
.ca-dc:nth-child(5n+2) .ca-dc-barra, .ca-dc:nth-child(5n+4) .ca-dc-barra, .ca-dc:nth-child(5n+5) .ca-dc-barra,
.ca-dc:nth-child(5n+2) .ca-link, .ca-dc:nth-child(5n+4) .ca-link, .ca-dc:nth-child(5n+5) .ca-link { color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.ca-dc:nth-child(5n+2) .ca-dc-nota, .ca-dc:nth-child(5n+4) .ca-dc-nota, .ca-dc:nth-child(5n+5) .ca-dc-nota { color: #fff !important; }
.ca-dc:nth-child(5n+1) .ca-dc-desc, .ca-dc:nth-child(5n+3) .ca-dc-desc { color: rgba(26,10,18,.85) !important; }
.ca-dc .ca-dc-fondo span { color: rgba(255,255,255,.14) !important; mix-blend-mode: soft-light; }
@media (prefers-reduced-motion: reduce) { .ca-dc { animation: none !important; } }

/* 2 y 3 con la misma textura holográfica que la primera, en fucsia y en lila (pedido de Santiago) */
.ca-dc:nth-child(5n+2) { background: linear-gradient(180deg, rgba(255,255,255,0) 38%, rgba(255,246,251,.6) 70%, rgba(255,246,251,.78) 100%), url('../assets/texturas/holo-fucsia.jpg') 0 0 / 380px 380px !important; }
.ca-dc:nth-child(5n+3) { background: linear-gradient(180deg, rgba(255,255,255,0) 38%, rgba(250,246,255,.6) 70%, rgba(250,246,255,.78) 100%), url('../assets/texturas/holo-lila.jpg') 0 0 / 380px 380px !important; }
.ca-dc:nth-child(5n+2) .ca-dc-tit, .ca-dc:nth-child(5n+3) .ca-dc-tit { color: var(--tinta) !important; text-shadow: 0 1px 0 rgba(255,255,255,.6) !important; }
.ca-dc:nth-child(5n+2) .ca-dc-tit span:nth-child(even), .ca-dc:nth-child(5n+3) .ca-dc-tit span:nth-child(even) { color: var(--fucsia) !important; }
.ca-dc:nth-child(5n+2) .ca-dc-desc, .ca-dc:nth-child(5n+2) .ca-dc-barra, .ca-dc:nth-child(5n+2) .ca-link { color: rgba(26,10,18,.85) !important; text-shadow: none !important; }
.ca-dc:nth-child(5n+2) .ca-dc-nota { color: var(--fucsia) !important; }
.ca-dc:nth-child(5n+2) .ca-dc-et { background: var(--tinta) !important; color: var(--peluche) !important; }
.ca-dc:nth-child(5n+2) .ca-sumar { --b-fondo: var(--fucsia); --b-canto: var(--fucsia-oo); --b-txt: #fff; }