/* ══════════════════════════════════════════════════
   TAP — Little Colombia guest hub.
   The Cafecito Club is the headline; everything else
   is a supporting tile. Tricolour used in flag
   proportion: yellow leads, blue acts, red punctuates.
   ══════════════════════════════════════════════════ */

:root{
  --tap-accent: var(--blue);
  --tap-ease: cubic-bezier(.22,.9,.26,1);
  --tap-spring: cubic-bezier(.2,1.25,.3,1);
}

.tap-body{background:var(--paper);overscroll-behavior-y:none}

/* ── Stage ─────────────────────────────── */
.stage{position:relative;min-height:66svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:var(--paper-2)}
.stage__media{position:absolute;inset:0;
  transform:scale(1.14);animation:stage-settle 1.6s var(--tap-ease) forwards;will-change:transform}
@keyframes stage-settle{to{transform:scale(1)}}
.stage__img,.stage__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the film sits over the still and cross-fades in once it is actually playing,
   so a blocked autoplay (iOS Low Power Mode) simply leaves the photo in place */
.stage__vid{opacity:0;transition:opacity .9s var(--tap-ease);pointer-events:none}
.stage__vid.is-live{opacity:1}
.stage__scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(255,253,247,.5) 0%,rgba(255,253,247,0) 26%),
    linear-gradient(to top,var(--paper) 2%,rgba(255,253,247,.93) 22%,rgba(255,253,247,.36) 48%,rgba(255,253,247,0) 70%)}
.stage__ring{position:absolute;left:50%;top:46%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  border:1.5px solid var(--yellow);opacity:0;animation:ring 1.5s .12s var(--tap-ease) forwards;pointer-events:none}
@keyframes ring{0%{opacity:.6;transform:scale(.3)}70%{opacity:.1}100%{opacity:0;transform:scale(26)}}

.stage__in{position:relative;z-index:2;width:100%;
  padding:0 max(20px,env(safe-area-inset-left)) 24px max(20px,env(safe-area-inset-right));
  display:flex;flex-direction:column;align-items:center;text-align:center}
.stage__in::before{content:"";position:absolute;left:50%;top:-6%;z-index:-1;width:min(96%,420px);aspect-ratio:1/1.05;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(255,254,250,.95) 0%,rgba(255,253,247,.84) 38%,rgba(255,253,247,0) 72%)}

.brandmark{width:min(30vw,118px);aspect-ratio:1/1;margin-bottom:8px;
  clip-path:inset(0 0 100% 0);animation:wipe-down .95s .15s var(--tap-ease) forwards}
.brandmark__img{width:100%;height:100%;object-fit:contain;display:block}
@keyframes wipe-down{to{clip-path:inset(0 0 -2% 0)}}

.brandword{clip-path:inset(0 100% 0 0);animation:write .85s .7s var(--tap-ease) forwards}
@keyframes write{to{clip-path:inset(0 -2% 0 0)}}
.brandword__txt{display:block;font-family:var(--head);font-weight:800;
  font-size:clamp(28px,8.8vw,41px);line-height:.95;letter-spacing:-.035em;text-transform:lowercase;color:var(--ink)}
.tri{display:flex;gap:4px;justify-content:center;margin-top:9px}
.tri i{display:block;height:4px;border-radius:2px}
.tri i:nth-child(1){width:36px;background:var(--yellow)}
.tri i:nth-child(2){width:18px;background:var(--blue)}
.tri i:nth-child(3){width:18px;background:var(--red)}

.greet{margin:12px 0 11px;font-family:var(--head);font-weight:600;font-size:15px;letter-spacing:.01em;color:var(--ink-2);
  opacity:0;animation:rise .7s 1.1s var(--tap-ease) forwards}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;opacity:0;animation:rise .7s 1.25s var(--tap-ease) forwards}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--head);font-weight:600;font-size:12px;
  border:1px solid var(--line-2);border-radius:999px;padding:6px 13px;background:rgba(255,255,255,.75);
  backdrop-filter:blur(8px);color:var(--ink-2)}
.chip--table{background:var(--blue);border-color:var(--blue);color:#fff}
.chip--open::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--matcha);animation:pulse 2.2s infinite}
.chip--shut::before{background:var(--ink-3);animation:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(46,125,79,.45)}55%{box-shadow:0 0 0 7px rgba(46,125,79,0)}}

.cue{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:2;width:22px;height:30px;
  opacity:0;animation:rise .7s 1.45s var(--tap-ease) forwards}
.cue span{display:block;width:1px;height:26px;margin:0 auto;background:var(--line-2);transform-origin:top;
  animation:cuedrop 1.9s 2s infinite var(--tap-ease)}
@keyframes cuedrop{0%{transform:scaleY(0)}45%{transform:scaleY(1)}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.acts{padding:18px 0 calc(34px + env(safe-area-inset-bottom));max-width:620px}

/* ══ THE CLUB CARD ══ */
.club{
  position:relative;display:block;overflow:hidden;text-decoration:none;
  border:1.5px solid var(--ink);border-radius:20px;background:var(--card);
  box-shadow:0 14px 34px rgba(20,20,20,.12);
  margin-bottom:14px;min-height:252px;
  opacity:0;transform:translateY(22px);animation:act-in .78s 1.3s var(--tap-spring) forwards;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--tap-ease),box-shadow .18s var(--tap-ease);
}
.club:active{transform:scale(.982)}
@media (hover:hover) and (pointer:fine){
  .club:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(20,20,20,.18)}
  .club:hover .club__media{transform:scale(1.06)}
  .club:hover .club__cta i{transform:translateX(5px)}
}
.club__media{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s var(--tap-ease)}
.club__veil{position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(255,255,255,.975) 42%,rgba(255,255,255,.86) 62%,rgba(255,255,255,.4) 100%)}
.club__tri{position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(to right,var(--yellow) 0 50%,var(--blue) 50% 75%,var(--red) 75% 100%)}
.club__in{position:relative;z-index:2;display:block;padding:22px 20px 20px}

.club__eyebrow{display:block;font-family:var(--head);font-weight:700;font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--blue);margin-bottom:9px}
.club__h{display:block;font-family:var(--head);font-weight:800;font-size:clamp(28px,8.4vw,36px);
  line-height:1.02;letter-spacing:-.035em;color:var(--ink);text-transform:lowercase}
.club__h sup{font-size:.5em;top:-.55em;position:relative;letter-spacing:0}
.club__h em{font-style:normal;color:var(--red)}

/* bean progress strip */
.beans{display:flex;gap:5px;margin:16px 0 12px;align-items:center;flex-wrap:nowrap}
.beans i{display:block;flex:1 1 0;min-width:0;height:9px;border-radius:5px;background:rgba(20,20,20,.13);
  transform:scaleX(.35);transform-origin:left;opacity:.5;
  animation:bean-in .5s var(--tap-spring) forwards}
.beans i.on{background:var(--blue)}
.beans i.free{background:var(--yellow);box-shadow:0 0 0 1.5px rgba(20,20,20,.18) inset}
@keyframes bean-in{to{transform:scaleX(1);opacity:1}}

.club__status{display:block;font-size:13.5px;line-height:1.4;color:var(--ink-2);margin-bottom:16px}
.club__status b{color:var(--ink);font-family:var(--head);font-weight:800}
.club__cta{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;
  font-family:var(--head);font-weight:700;font-size:14.5px;border-radius:999px;padding:13px 22px}
.club__cta i{font-style:normal;transition:transform .25s var(--tap-ease)}

.club__badge{position:absolute;top:16px;right:16px;z-index:2;width:62px;height:62px;border-radius:50%;
  background:var(--yellow);border:1.5px solid var(--ink);display:grid;place-items:center;text-align:center;
  transform:rotate(9deg);box-shadow:0 6px 16px rgba(20,20,20,.16)}
.club__badge b{display:block;font-family:var(--head);font-weight:800;font-size:19px;line-height:1;color:var(--ink);letter-spacing:-.04em}
.club__badge b sup{font-size:.5em;top:-.5em;position:relative}
.club__badge span{display:block;font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin-top:1px}

/* ══ supporting tiles ══ */
.act-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.act{position:relative;display:flex;align-items:flex-end;overflow:hidden;text-decoration:none;width:100%;padding:0;text-align:left;
  border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 8px 24px rgba(20,20,20,.07);
  min-height:138px;opacity:0;transform:translateY(20px);animation:act-in .72s var(--tap-spring) forwards;
  -webkit-tap-highlight-color:transparent;transition:transform .18s var(--tap-ease),box-shadow .18s var(--tap-ease)}
.act[data-i="1"]{animation-delay:1.42s}
.act[data-i="2"]{animation-delay:1.49s}
.act[data-i="3"]{animation-delay:1.56s}
.act[data-i="4"]{animation-delay:1.63s}
@keyframes act-in{to{opacity:1;transform:none}}
.act:active{transform:scale(.976)}
@media (hover:hover) and (pointer:fine){
  .act:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(20,20,20,.13)}
  .act:hover .act__media{transform:scale(1.07)}
}
.act::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;z-index:3}
.act[data-i="1"]::after{background:var(--yellow)}
.act[data-i="2"]::after{background:var(--blue)}
.act[data-i="3"]::after{background:var(--red)}
.act[data-i="4"]::after{background:var(--ink)}

.act__media{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s var(--tap-ease);z-index:0}
.act__media--flat{background:linear-gradient(145deg,var(--paper-2),var(--paper-3))}
.act__veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(255,255,255,.97) 32%,rgba(255,255,255,.76) 68%,rgba(255,255,255,.22) 100%)}
.act__txt{position:relative;z-index:2;display:block;padding:16px 15px 15px}
.act__k{display:block;font-family:var(--head);font-weight:600;font-size:10.5px;letter-spacing:.2em;color:var(--blue);margin-bottom:5px}
.act__h{display:block;font-family:var(--head);font-weight:800;font-size:21px;line-height:1.04;letter-spacing:-.03em;color:var(--ink)}
.act__s{display:block;font-style:normal;font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.35}
.act__stars{position:absolute;top:14px;right:14px;z-index:2;font-size:13px;letter-spacing:1px;color:var(--yellow);
  text-shadow:0 1px 2px rgba(0,0,0,.2)}
.act__wave{position:absolute;top:15px;right:15px;z-index:2;display:flex;align-items:flex-end;gap:3px;height:16px}
.act__wave i{display:block;width:3px;border-radius:2px;background:var(--blue);opacity:.75;animation:wave 1.3s infinite var(--tap-ease)}
.act__wave i:nth-child(1){height:6px;animation-delay:0s}
.act__wave i:nth-child(2){height:11px;animation-delay:.14s}
.act__wave i:nth-child(3){height:16px;animation-delay:.28s}
@keyframes wave{0%,100%{transform:scaleY(.45);opacity:.45}50%{transform:scaleY(1);opacity:.95}}

.tapfoot{margin-top:22px;text-align:center;font-size:12.5px;color:var(--ink-3);line-height:1.8;
  opacity:0;animation:rise .7s 1.75s var(--tap-ease) forwards}
.tapfoot b{display:block;font-family:var(--head);font-weight:700;font-size:13px;color:var(--ink-2)}
.tapfoot a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-2)}

/* ── Sheets ────────────────────────────── */
.sh-h{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.sh-h h2{margin:0;font-family:var(--head);font-weight:800;font-size:22px;letter-spacing:-.03em;text-transform:lowercase}
.sh-sub{margin:0 0 16px;font-size:13.5px;color:var(--ink-3)}
.sh-note{margin-top:14px;font-size:11.5px;color:var(--ink-3);text-align:center;line-height:1.5}

.bill-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line)}
.bill-row span:first-child{flex:1}
.bill-row em{font-style:normal;color:var(--ink-3);font-size:12.5px;display:block}
.bill-tot{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 4px;
  font-family:var(--head);font-weight:800;font-size:17px;letter-spacing:-.02em}
.bill-tot b{font-size:27px}
.bill-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.bill-acts .btn{width:100%}

.wifi-box{border:1.5px dashed var(--line-2);border-radius:14px;padding:16px;text-align:center;background:var(--paper-2)}
.wifi-l{font-family:var(--head);font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--ink-3);display:block}
.wifi-v{display:block;font-size:21px;font-weight:700;margin:3px 0 12px;word-break:break-all;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.wifi-qr{display:block;margin:16px auto 0;width:168px;height:168px;image-rendering:pixelated;
  border:8px solid #fff;border-radius:12px;box-shadow:var(--shadow);background:#fff}

.rev-opts{display:flex;flex-direction:column;gap:10px}
.rev-g{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:14px;border:1.5px solid var(--ink);
  background:var(--ink);color:#fff;text-decoration:none;font-family:var(--head);font-weight:700;font-size:15px}
.rev-p{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:14px;border:1.5px solid var(--line-2);
  background:transparent;text-decoration:none;font-family:var(--head);font-weight:700;font-size:15px;color:var(--ink)}
.rev-g small,.rev-p small{display:block;font-family:var(--body);font-size:12px;opacity:.75;font-weight:400;margin-top:2px}
.rev-ico{flex:0 0 26px;font-size:19px;text-align:center}

/* ── Motion opt-out ────────────────────── */
@media (prefers-reduced-motion:reduce){
  .stage__img,.brandmark,.brandword,.greet,.chips,.act,.club,.tapfoot,.cue,.beans i{
    animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
  .stage__ring,.cue span,.act__wave i,.chip--open::before{animation:none!important}
  .stage__ring{display:none}
  .act,.club{transition:none}
}

@media (min-width:760px){
  .stage{min-height:60svh;border-radius:0 0 28px 28px}
  .acts{padding-top:24px}
}


/* ── pixel arcade: the one dark, loud thing on the page ── */
.arcade{position:relative;display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px 14px 14px 18px;
  border-radius:20px;overflow:hidden;text-decoration:none;isolation:isolate;
  background:linear-gradient(145deg,#1C1A17 0%,#2A2620 60%,#3A332A 100%);
  box-shadow:0 14px 32px rgba(20,20,20,.28);
  opacity:0;transform:translateY(16px);
  animation:act-in .85s .8s var(--tap-ease) forwards;   /* NB: --tap-ease exists here, --tap-slow does not */
  -webkit-tap-highlight-color:transparent;
  transition:transform .22s var(--tap-ease),box-shadow .22s var(--tap-ease)}
.arcade:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .arcade:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(20,20,20,.36)}
  .arcade:hover .arcade__art img{transform:scale(1.06) rotate(-1deg)}
}
/* a slow sweep of light so it catches the eye mid-scroll */
.arcade::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;z-index:2;
  background:linear-gradient(to bottom,var(--yellow) 0 50%,var(--blue) 50% 75%,var(--red) 75% 100%)}
.arcade__glow{position:absolute;inset:-40% -60%;z-index:0;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,201,60,.16) 40deg,transparent 110deg);
  animation:arc-sweep 7s linear infinite}
@keyframes arc-sweep{to{transform:rotate(360deg)}}

.arcade__art{position:relative;z-index:1;flex:0 0 92px;height:74px;border-radius:14px;overflow:hidden;
  box-shadow:0 5px 14px rgba(0,0,0,.34),inset 0 0 0 1.5px rgba(255,255,255,.18)}
.arcade__art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--tap-ease)}
.arcade__b{position:relative;z-index:1;flex:1;min-width:0}
.arcade__k{display:block;font-family:var(--head);font-weight:700;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:4px}
.arcade__h{display:block;font-family:var(--head);font-weight:800;font-size:20px;letter-spacing:-.025em;color:#fff;line-height:1.1}
.arcade__s{display:block;font-style:normal;font-size:11.5px;color:rgba(255,255,255,.68);
  margin-top:5px;line-height:1.4}
.arcade__cta{display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:.14em;
  color:#3B2A00;background:linear-gradient(180deg,#FFD873,var(--yellow));
  border-radius:999px;padding:8px 15px;box-shadow:0 3px 0 #C99A10;
  animation:arc-nudge 2.6s ease-in-out infinite}
.arcade__cta i{font-style:normal;font-size:8px}
@keyframes arc-nudge{0%,88%,100%{transform:translateY(0)}92%{transform:translateY(-3px)}96%{transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .arcade{animation:none;opacity:1;transform:none}
  .arcade__glow,.arcade__cta{animation:none}
}

/* two quick taps in one spot = browser zoom; this disables only that gesture */
.act,.club,.chip,.arcade{touch-action:manipulation}