/* Carta: la lista como una carta impresa sobre papel holográfico (las texturas de las letras BRESH de los flyers),
   con glitter y un brillo que la cruza; filas con la bebida, el nombre, el precio y el «+». Y la ficha con la bebida
   bien ubicada. Se carga después de carta.css y brillo.css. */

/* la barra de categorías queda debajo de la barra de vidrio de arriba */
.ca { --ca-tope: calc(72px + var(--seg-t)); }
.ca-cats { background: linear-gradient(180deg, rgba(11,6,9,.94), rgba(11,6,9,.86)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* una textura por categoría (y la misma en la ficha de cada bebida) */
.ca-grupo:nth-child(3n+1) .ca-filas, .ca-ficha-in.t-0, .ca-ficha-in.t-3 { --tex: url('../assets/texturas/holo.jpg'); }
.ca-grupo:nth-child(3n+2) .ca-filas, .ca-ficha-in.t-1, .ca-ficha-in.t-4 { --tex: url('../assets/texturas/holo-fucsia.jpg'); }
.ca-grupo:nth-child(3n) .ca-filas, .ca-ficha-in.t-2 { --tex: url('../assets/texturas/holo-lila.jpg'); }

/* ───────── la lista: una hoja holográfica por categoría ───────── */
.ca-lista .ca-grupo-tit { margin: 34px 0 0; }
.ca-lista .ca-filas {
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 0; margin-top: 16px; padding: 6px 0;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,250,253,.58), rgba(255,250,253,.66)), var(--tex, url('../assets/texturas/holo.jpg')) 0 0 / 420px 420px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1.5px rgba(255,255,255,.6), 0 0 0 1px rgba(255,31,154,.16), 0 6px 0 rgba(216,0,122,.28), 0 0 28px -8px rgba(255,31,154,.45), 0 24px 40px -22px rgba(122,0,69,.7);
  animation: hoja-deriva 40s linear infinite;
}
@keyframes hoja-deriva { to { background-position: 0 0, 420px 420px; } }
/* glitter que titila sobre toda la hoja */
.ca-lista .ca-filas::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--glitter); background-size: 220px 220px; mix-blend-mode: overlay; opacity: .9; animation: foil-glitter 1.8s steps(3) infinite; }
/* el brillo que cruza la hoja cada tanto */
.ca-lista .ca-filas::after { content: ''; position: absolute; inset: -10% -30%; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.75) 48%, rgba(255,255,255,.15) 53%, transparent 60%) 0 0 / 240% 100% no-repeat;
  mix-blend-mode: soft-light; animation: hoja-brillo 7.5s cubic-bezier(.4, 0, .2, 1) infinite; }
.ca-grupo:nth-child(2n) .ca-filas::after { animation-delay: -3.7s; }
@keyframes hoja-brillo { 0%, 58% { background-position: 150% 0; } 100% { background-position: -60% 0; } }

/* cada fila */
.ca-lista .ca-fila {
  position: relative; display: grid !important; grid-template-columns: 84px minmax(0, 1fr) 46px !important; grid-template-rows: none !important; align-items: center; gap: 14px;
  min-height: 112px; padding: 12px 16px 12px 10px !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; animation: none !important; overflow: visible !important;
  color: var(--tinta); transition: background .3s;
}
.ca-lista .ca-fila::after { content: none !important; }
.ca-lista .ca-fila + .ca-fila::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; border-top: 1.5px dashed rgba(122,0,69,.22); }
.ca-lista .ca-fila:active { background: rgba(255,255,255,.35) !important; }
.ca-lista .ca-fila:has(.ca-mas-n:not([hidden])) { background: linear-gradient(90deg, rgba(255,31,154,.16), transparent 70%) !important; }
.ca-lista .ca-fila.agotado { opacity: .55; filter: grayscale(.4); }

/* la bebida: grande, sale apenas por arriba de la fila, con halo neón */
.ca-lista .ca-fila-img { position: relative; display: flex !important; align-items: flex-end; justify-content: center; height: 108px !important; margin: -14px 0 -4px !important; align-self: end; }
.ca-lista .ca-fila-img::before { content: ''; position: absolute; left: 6%; right: 6%; top: 16%; bottom: 6%; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,170,215,.5) 50%, transparent 78%); filter: blur(5px); }
.ca-lista .ca-fila-img::after { content: none; }
.ca-lista .ca-fila-img .ca-beb { position: relative; left: auto; bottom: auto; translate: none; rotate: 0deg; width: auto !important; height: 100% !important; display: flex; align-items: flex-end; justify-content: center; transition: transform .6s var(--rebote); }
.ca-lista .ca-fila-img .ca-beb img { height: 100% !important; width: auto !important; max-width: 100%; object-fit: contain; filter: drop-shadow(0 0 1px rgba(255,255,255,.8)) drop-shadow(0 0 10px rgba(255,31,154,.3)) drop-shadow(0 10px 8px rgba(26,0,16,.28)) !important; }
@media (hover: hover) { .ca-lista .ca-fila:hover .ca-fila-img .ca-beb { transform: translateY(-5px) rotate(-4deg) scale(1.05); } }

/* el texto */
.ca-lista .ca-fila-t { display: grid; gap: 3px; justify-items: start; align-content: center; min-width: 0; }
.ca-lista .ca-fila-nom { font-size: 1.05rem; line-height: .98; min-height: 0; padding: 0; color: var(--tinta); text-wrap: balance; }
.ca-lista .ca-fila-desc { font-size: .78rem; line-height: 1.32; color: rgba(26,10,18,.74); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ca-lista .ca-fila-pre { display: flex; align-items: baseline; gap: 0 9px; margin-top: 3px; }
.ca-lista .ca-fila-pre b { font-size: 1.3rem; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.ca-lista .ca-fila-pre s { font-size: .8rem; }
.ca-lista .ca-fila-et { position: static !important; height: 22px; font-size: .56rem; margin-top: 2px; }
.ca-lista .ca-fila-et + .ca-fila-et { margin-left: 4px; }

/* el + como una gota de vidrio fucsia */
.ca-lista .ca-mas { position: relative !important; top: auto !important; right: auto !important; width: 46px; height: 46px; justify-self: end;
  background: linear-gradient(180deg, #FF4FA6, var(--fucsia)); box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 3px 0 var(--fucsia-oo), 0 0 16px rgba(255,31,154,.5); }
.ca-lista .ca-mas svg { width: 22px; height: 22px; }
.ca-lista .ca-mas-n { top: -6px; right: -6px; }

/* compu: la vitrina con la bebida grande a la izquierda y la carta en lista a la derecha */
@media (min-width: 900px) {
  .ca-lista .ca-filas { grid-template-columns: minmax(0, 1fr) !important; }
  .ca-lista .ca-fila { grid-template-columns: 100px minmax(0, 1fr) 50px !important; min-height: 124px; padding: 14px 22px 14px 14px !important; }
  .ca-lista .ca-fila-img { height: 122px !important; }
  .ca-lista .ca-fila-nom { font-size: 1.15rem; }
  .ca-vitrina { top: calc(var(--ca-tope) + 70px) !important; }
}
@media (max-width: 360px) { .ca-lista .ca-fila { grid-template-columns: 70px minmax(0, 1fr) 44px !important; gap: 10px; } .ca-lista .ca-fila-img { height: 96px !important; } }

/* ───────── la ficha: bebida centrada con aire, sticker que no la pisa, fondo holográfico ───────── */
.ca-ficha-in .ca-ficha-arriba { display: flex !important; align-items: center !important; justify-content: center !important; background: var(--tex, url('../assets/texturas/holo.jpg')) 0 0 / 420px 420px !important; animation: hoja-deriva-1 30s linear infinite !important; padding: calc(var(--seg-t) + 76px) 24px 46px !important; }
@keyframes hoja-deriva-1 { to { background-position: 420px 420px; } }
.ca-ficha-in .ca-ficha-arriba::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--glitter); background-size: 220px 220px; mix-blend-mode: overlay; animation: foil-glitter 1.8s steps(3) infinite; }
.ca-ficha-in .ca-ficha-beb { height: min(100%, 44svh) !important; aspect-ratio: auto; display: flex !important; align-items: center; justify-content: center; }
.ca-ficha-in .ca-ficha-beb .ca-beb { height: 100% !important; display: flex; align-items: center; justify-content: center; }
.ca-ficha-in .ca-ficha-beb img { height: 100% !important; width: auto !important; max-width: 100%; object-fit: contain; filter: drop-shadow(0 0 1px rgba(255,255,255,.8)) drop-shadow(0 0 22px rgba(255,31,154,.35)) drop-shadow(0 28px 22px rgba(26,0,16,.35)) !important; }
.ca-ficha-in .ca-ficha-st { right: auto !important; left: 16px; bottom: auto !important; top: calc(var(--seg-t) + 16px); --s-tam: 96px !important; }
@media (min-width: 900px) {
  .ca-ficha-in .ca-ficha-arriba { padding: 56px 40px !important; }
  .ca-ficha-in .ca-ficha-beb { height: min(82%, 520px) !important; }
  .ca-ficha-in .ca-ficha-st { top: 22px; left: 22px; }
}

/* ───────── la cuenta del precio anticipado: números holográficos grandes ───────── */
.ca-cuenta-panel { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 14px; padding: 22px 18px 20px; border-radius: 28px; color: #fff;
  background: var(--estrellas), radial-gradient(120% 90% at 20% 0%, #2A1446 0%, #12081F 60%, #0B0609 100%); background-size: 200px 200px, 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(201,184,255,.25), 0 0 34px -6px rgba(255,31,154,.5), 0 26px 40px -20px rgba(0,0,0,.85); }
.ca-cuenta-panel::after { content: ''; position: absolute; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(40% 30% at 80% 10%, rgba(255,31,154,.35), transparent 70%), radial-gradient(40% 30% at 10% 90%, rgba(150,120,255,.25), transparent 70%); animation: humo 18s ease-in-out infinite alternate; }
.ca-cuenta-et { font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--peluche); }
.ca-cuenta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cc-caja { position: relative; display: grid; justify-items: center; gap: 2px; padding: 12px 4px 10px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 20px -12px rgba(0,0,0,.8); }
.cc-caja b { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(34px, 11vw, 64px); line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: url('../assets/texturas/holo.jpg') 0 0 / 220px 220px; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.35)) drop-shadow(0 0 14px rgba(255,31,154,.55)); animation: cc-holo 12s linear infinite; }
@keyframes cc-holo { to { background-position: 220px 110px; } }
.cc-caja span { font-family: var(--display); font-stretch: 115%; font-weight: 800; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.cc-caja b.tic { animation: cc-holo 12s linear infinite, cc-tic .5s var(--rebote); }
@keyframes cc-tic { 0% { transform: translateY(-10px) scale(1.08); opacity: .5; } 100% { transform: none; opacity: 1; } }
.cc-caja.seg::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--vivo); box-shadow: 0 0 8px var(--vivo); animation: cc-barra 1s linear infinite; transform-origin: left; }
@keyframes cc-barra { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ca-cuenta-txt { font-size: .88rem; line-height: 1.45; color: rgba(255,255,255,.85); max-width: 42ch; }
@media (min-width: 900px) { .cc-caja b { font-size: 60px; } }

@media (prefers-reduced-motion: reduce) {
  .ca-lista .ca-filas, .ca-lista .ca-filas::before, .ca-lista .ca-filas::after, .ca-ficha-in .ca-ficha-arriba, .ca-ficha-in .ca-ficha-arriba::after, .cc-caja b, .cc-caja.seg::after, .ca-cuenta-panel::after { animation: none !important; }
}