/* Sondar: nova identidade visual (out/2026).
   Base: protótipo final do Paulo (artifact "Sondar Dark"), CSS copiado na íntegra.
   O que é só de produção (patrocinado, Em alta, temporada, evento, grupo) fica no fim. */
:root{
  color-scheme:dark;
  /* GrupsApp brand (production CSS): #522FCB primary, #3D1F9E dark, rgb(123,92,245) accent, #F1EDFF suave */
  --brand:#522FCB;--brand-hover:#6140E0;--brand-dark:#3D1F9E;--brand-hi:#7B5CF5;
  --brand-ink:#B6A6FF;        /* accent text/icons on dark */
  --brand-ink-2:#DDD6FF;      /* soft lilac text on brand-tinted surfaces (app band, chip-float) */
  --brand-suave:#F1EDFF;
  --on-brand:#FFFFFF;         /* text on --brand fills */
  --on-brand-2:#E3DCFF;       /* secondary text on --brand fills */
  --brand-wash:rgba(123,92,245,.14);--brand-line:rgba(123,92,245,.5);
  --brand-line-soft:rgba(182,166,255,.2);   /* app band border */
  --brand-glow:rgba(123,92,245,.42);        /* decorative radial glows */
  --shadow-brand:rgba(82,47,203,.6);        /* hover/selected lift shadow */
  --focus:var(--brand-ink);                 /* focus outline (2px) */
  --focus-glow:rgba(123,92,245,.22);        /* input focus halo */
  --band-1:#1E1258;--band-2:#120B33;--band-3:#0C0820;   /* app band gradient stops */
  --surface-brand:#17112F;                  /* selected tile on the band */
  --bg:#09080F;--bg-2:#0E0C17;--surface:#13111C;--surface-2:#1B1828;--surface-3:#252138;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);--line-3:rgba(255,255,255,.24);
  --fill-1:rgba(255,255,255,.04);--fill-2:rgba(255,255,255,.08);   /* translucent hover/track fills */
  --hl-inset:rgba(255,255,255,.18);          /* top highlight on primary buttons */
  --text:#F4F2FA;--text-2:#C2BDD1;--text-3:#9893AD;
  --text-disabled:#6F6B82;                   /* 3.65:1 surface, 3.89:1 bg */
  --scrim:rgba(9,8,15,.8);                   /* labels/buttons over posters */
  --glass:rgba(9,8,15,.88);                  /* sticky header + filter bar */
  --glass-surface:rgba(19,17,28,.9);         /* floating rail track, chip-float */
  --glass-strong:rgba(14,12,23,.96);         /* mobile app bar */
  --backdrop:rgba(5,4,10,.66);               /* dialog backdrop */
  --shadow:rgba(0,0,0,.8);                   /* drop shadows */
  --ok:#3DD68C;--ok-wash:rgba(61,214,140,.14);
  --danger:#FF8593;--danger-glow:rgba(255,133,147,.22);
  --partner-nu:#820AD1;                      /* partner brand (Nubank tag) only */
  --f-display:'Bricolage Grotesque','Arial Narrow',system-ui,sans-serif;
  --f-body:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'Geist Mono',ui-monospace,Menlo,Consolas,monospace;
  /* radius by role */
  --r-tag:6px;--r-control:12px;--r-thumb:12px;--r-card:16px;--r-panel:24px;--r-band:32px;--r-pill:999px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --wrap:1240px;--hh:72px;--top:env(safe-area-inset-top,0px);
  --gut:max(16px,env(safe-area-inset-left,0px));--gut-r:max(16px,env(safe-area-inset-right,0px));
}
@media (min-width:760px){:root{--gut:max(32px,env(safe-area-inset-left,0px));--gut-r:max(32px,env(safe-area-inset-right,0px))}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--sp,160px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,p,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:calc(var(--wrap) + var(--gut) + var(--gut-r));margin:0 auto;padding-left:var(--gut);padding-right:var(--gut-r)}
.mono{font-family:var(--f-mono)}
.ico{width:20px;height:20px;flex:none}
.ico-s{width:16px;height:16px;flex:none}
.skip{position:absolute;left:16px;top:-64px;z-index:100;background:var(--brand);color:var(--on-brand);padding:12px 16px;border-radius:var(--r-control)}
.skip:focus{top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r-control);font-weight:600;font-size:16px;transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s}
.btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:inset 0 1px 0 var(--hl-inset)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{border:1px solid var(--line-2);background:var(--fill-1)}
.btn-ghost:hover{border-color:var(--line-3);background:var(--surface-2)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}

/* ---------- header ---------- */
.top{position:sticky;top:var(--top);z-index:40;background:var(--glass);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:24px;height:var(--hh)}
.logo{display:flex;color:var(--on-brand);flex:none;border-radius:8px}
.logo svg{width:112px;height:32px}
.nav{display:flex;gap:4px}
.nav a{padding:8px 12px;border-radius:var(--r-control);font-size:14px;font-weight:500;color:var(--text-2);transition:color .2s,background .2s}
.nav a:hover{color:var(--text);background:var(--surface)}
.nav a[aria-current]{color:var(--text)}
.hsearch{position:relative;flex:1;max-width:360px;margin-left:auto}
.hsearch .ico-s{position:absolute;left:12px;top:50%;translate:0 -50%;color:var(--text-3);pointer-events:none}
.hsearch input{width:100%;height:40px;padding:0 12px 0 36px;border-radius:var(--r-control);border:1px solid var(--line-2);background:var(--surface);font-size:14px;transition:border-color .2s,box-shadow .2s}
.hsearch input::placeholder{color:var(--text-3)}
.hsearch input:hover{border-color:var(--line-3)}
.hsearch input:focus{outline:none;border-color:var(--brand-hi);box-shadow:0 0 0 4px var(--focus-glow)}
@media (max-width:759px){
  .top{position:relative;top:auto}
  .top .wrap{gap:12px;height:64px}
  .logo svg{width:96px;height:28px}
  .nav{margin-left:auto}
  .nav a{padding:8px}
  .hsearch,.top .get-app{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:32px 40px;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-72px 0 0;z-index:-1;background:radial-gradient(50% 80% at 85% 0%,var(--brand-glow),transparent 70%),radial-gradient(40% 60% at 0% 0%,var(--brand-wash),transparent 70%)}
.hero::after{content:"";position:absolute;inset:-72px 0 0;z-index:-1;opacity:.45;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(60% 70% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(60% 70% at 50% 0%,#000,transparent 75%)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--text-3)}
.crumbs a{border-radius:4px}
.crumbs a:hover{color:var(--text)}
.h1{margin-top:12px;font-family:var(--f-display);font-weight:700;font-variation-settings:"wdth" 80,"opsz" 96;font-size:64px;line-height:1;letter-spacing:-.035em;text-wrap:balance}
.h1 em{font-style:normal;color:var(--text-2)}
.lede{margin-top:12px;font-size:18px;color:var(--text-2)}
/* command bar */
/* load sequence */
@media (prefers-reduced-motion:no-preference){
  .seq{animation:rise .8s var(--ease) both;animation-delay:calc(var(--i,0) * 80ms + 80ms)}
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@media (max-width:759px){
  .hero{padding-block:16px 24px}
  .crumbs{display:none}
  .h1{font-size:40px;margin-top:0}
  .lede{font-size:16px}
  /* a contagem chega depois (JS) e, na mesma linha, fazia a frase ganhar uma linha e empurrar a página (CLS):
     no celular ela tem linha própria, reservada desde o início */
  .lede #count{display:block;min-height:1.4em;min-height:1lh}
  .lede #ledeSep{display:none}
  .lede #count[hidden]{display:none}
}

/* ---------- sticky bar ---------- */
.bar{position:sticky;top:calc(var(--top) + var(--hh));z-index:30;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-block:1px solid var(--line)}
.bar-row{display:flex;align-items:center;gap:12px;padding-block:12px}
.loc{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:var(--r-control);background:var(--surface-2);border:1px solid var(--line-2);font-weight:600;font-size:14px;white-space:nowrap;flex:none;max-width:240px;transition:border-color .2s,background .2s}
.loc span{overflow:hidden;text-overflow:ellipsis}
.loc:hover{border-color:var(--line-3);background:var(--surface-3)}
.loc .ico-s:first-child{color:var(--brand-ink)}
.rail{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.rail-track{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;flex:1;min-width:0;padding:2px}
.rail-track::-webkit-scrollbar{display:none}
/* arrow zones: solid fade to the bar colour, so no chip text ever shows under an arrow */
.rail-btn{position:absolute;top:0;bottom:0;z-index:2;width:88px;display:none;align-items:center;color:var(--text)}
.rail-btn.l{left:0;justify-content:flex-start;background:linear-gradient(270deg,transparent,var(--bg) 40%)}
.rail-btn.r{right:0;justify-content:flex-end;background:linear-gradient(90deg,transparent,var(--bg) 40%)}
.rail-btn span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);border:1px solid var(--line-2);transition:background .2s}
.rail-btn:hover span{background:var(--brand)}
.rail.fl .rail-btn.l,.rail.fr .rail-btn.r{display:flex}
.rail-track{scroll-padding-inline:88px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-2);font-size:14px;color:var(--text-2);white-space:nowrap;flex:none;transition:color .2s,border-color .2s,background .2s,transform .15s var(--ease)}
.chip:hover{color:var(--text);border-color:var(--line-3);background:var(--surface)}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.sep{width:1px;align-self:stretch;margin:8px 4px;background:var(--line-2);flex:none}
.filtros{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--r-control);border:1px solid var(--line-2);font-weight:600;font-size:14px;flex:none;transition:border-color .2s,background .2s}
.filtros:hover{border-color:var(--line-3);background:var(--surface-2)}
.filtros b{min-width:20px;height:20px;border-radius:var(--r-pill);background:var(--brand);color:var(--on-brand);font-size:12px;display:none;place-items:center;padding:0 4px}
.filtros b.on{display:inline-grid}
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-bottom:12px}
.tags:empty{display:none}
.tagx{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 4px 0 12px;border-radius:var(--r-pill);background:var(--brand-wash);border:1px solid var(--brand-line);font-size:12px;font-weight:500;color:var(--brand-suave)}
.tagx button{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--brand-ink)}
.tagx button:hover{background:var(--fill-2);color:var(--on-brand)}
.clear-all{font-size:12px;font-weight:600;color:var(--text-2);padding:8px;border-radius:8px;text-decoration:underline;text-underline-offset:4px}
.clear-all:hover{color:var(--on-brand)}
@media (max-width:759px){
  .bar{top:var(--top)}
  .bar-row{flex-wrap:wrap;gap:8px;padding-block:8px}
  .loc{flex:1;max-width:none;min-height:44px}
  .filtros{min-height:44px}
  .rail{order:3;flex-basis:100%;margin-right:calc(-1*var(--gut-r))}
  .chip{min-height:40px}
}
@media (max-width:599px), (max-width:759px) and (hover:none), (max-width:759px) and (pointer:coarse){
  .rail-btn{display:none!important}
  .rail.fr .rail-track{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
  .rail.fl.fr .rail-track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
  .rail.fl:not(.fr) .rail-track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
}

/* ---------- sections ---------- */
.band{padding-block:64px}
.kicker{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink)}
.h2{margin-top:8px;font-family:var(--f-display);font-weight:700;font-variation-settings:"wdth" 82;font-size:40px;line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.sub{margin-top:8px;color:var(--text-2);font-size:16px;max-width:64ch}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
@media (max-width:759px){.band{padding-block:48px}.h2{font-size:28px}.sub{font-size:14px}}

/* poster: 4:5 frame, image contained over a blurred copy of itself */
.poster{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2);isolation:isolate}
.poster .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(20px) brightness(.45) saturate(1.2);transform:scale(1.25);z-index:-1}
.poster .fg{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease)}

/* weekend ranking */
.rank{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px var(--gut-r) 4px 0;margin:-4px calc(-1*var(--gut-r)) -4px 0}
.rank::-webkit-scrollbar{display:none}
/* contain:paint keeps mobile Chrome from widening the layout viewport for the scroller contents */
.rank,.rail-track{contain:paint}
.rk{position:relative;flex:none;width:280px;scroll-snap-align:start;border-radius:var(--r-card);overflow:hidden;background:var(--surface);border:1px solid var(--line);text-align:left;display:flex;flex-direction:column;transition:transform .3s var(--ease),border-color .3s}
.rk:hover{transform:translateY(-4px);border-color:var(--brand-line)}
.rk:hover .fg{transform:scale(1.03)}
.rk .rtop{display:flex;align-items:baseline;gap:12px}
.rk .n{font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 75;font-size:32px;line-height:1;letter-spacing:-.03em;color:var(--brand-ink)}
.rk .bd{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.rk .when{font-family:var(--f-mono);font-size:12px;color:var(--brand-ink)}
.rk .rt{font-size:16px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.rk .why{font-size:14px;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rk .tg{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:8px}
.tg span{font-size:12px;padding:2px 8px;border-radius:var(--r-tag);background:var(--surface-3);color:var(--text-2)}
.tg span.top{background:var(--brand);color:var(--on-brand)}
.capture{flex:none;width:280px;scroll-snap-align:start;border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;background:radial-gradient(100% 70% at 0% 0%,var(--brand-glow),transparent 60%),var(--surface-2);border:1px solid var(--brand-line)}
.capture h3{font-family:var(--f-display);font-weight:700;font-size:28px;line-height:1.05;letter-spacing:-.02em}
.capture p{font-size:14px;color:var(--text-2)}
.capture form{display:flex;flex-direction:column;gap:8px}
.field{min-height:48px;padding:0 16px;border-radius:var(--r-control);border:1px solid var(--line-2);background:var(--bg);font-size:16px;width:100%;transition:border-color .2s,box-shadow .2s}
.field::placeholder{color:var(--text-3)}
.field:hover{border-color:var(--line-3)}
.field:focus{outline:none;border-color:var(--brand-hi);box-shadow:0 0 0 4px var(--focus-glow)}
.capture .msg{font-size:14px;color:var(--ok);min-height:20px}
.capture .msg.err{color:var(--danger)}
.scroll-btns{display:flex;gap:8px}
.icon-btn{width:40px;height:40px;border-radius:var(--r-control);display:grid;place-items:center;border:1px solid var(--line-2);color:var(--text-2);transition:color .2s,border-color .2s,background .2s}
.icon-btn:hover:not(:disabled){color:var(--on-brand);border-color:var(--line-3);background:var(--surface-2)}
.icon-btn:disabled{opacity:.35;cursor:default}
@media (max-width:759px){.scroll-btns{display:none}}

/* agenda */
.ag-count{font-size:14px;color:var(--text-2)}
.ag-count b{color:var(--text);font-weight:600}
#list{transition:opacity .2s}
#list.busy{opacity:.4;pointer-events:none}
.day{display:flex;align-items:baseline;gap:12px;padding:40px 0 16px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.day h3{font-family:var(--f-display);font-weight:700;font-variation-settings:"wdth" 82;font-size:28px;letter-spacing:-.02em;line-height:1}
.day span{font-family:var(--f-mono);font-size:14px;color:var(--text-3)}
.day i{margin-left:auto;font-style:normal;font-size:14px;color:var(--text-3)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start}
.card{position:relative;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;cursor:pointer;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);border-color:var(--line-3);box-shadow:0 24px 48px -24px var(--shadow-brand)}
.card:hover .fg{transform:scale(1.03)}
.card .share{position:absolute;right:8px;top:8px;width:40px;height:40px;border-radius:var(--r-control);display:grid;place-items:center;background:var(--scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line-2);color:var(--text);transition:background .2s}
.card .share:hover{background:var(--brand)}
.card .cat{position:absolute;left:8px;bottom:8px;font-size:12px;font-weight:600;padding:4px 8px;border-radius:var(--r-tag);background:var(--scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.body{padding:16px 16px 12px;display:flex;flex-direction:column;gap:8px}
.when{font-family:var(--f-mono);font-size:12px;color:var(--brand-ink)}
.card h4{font-size:16px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.venue{display:flex;gap:8px;font-size:14px;color:var(--text-2)}
.venue .ico-s{margin-top:2px;color:var(--text-3)}
.venue span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.card.open .venue span{-webkit-line-clamp:4}
.about{display:grid;grid-template-rows:0fr;padding:0 16px;transition:grid-template-rows .4s var(--ease)}
.about>div{overflow:hidden}
.card.open .about{grid-template-rows:1fr}
.about h5{font-size:12px;font-weight:600;color:var(--text);margin:8px 0 4px}
.about p{font-size:14px;line-height:1.6;color:var(--text-2)}
.about .src{margin-top:8px;font-size:12px;color:var(--text-3)}
.about .disc{margin-top:8px;font-size:12px;line-height:1.5;color:var(--text-3)}
.actions{display:flex;align-items:center;gap:8px;padding:12px 16px 16px;margin-top:auto}
.details{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 8px 0 0;font-size:14px;font-weight:500;color:var(--text-2);border-radius:8px}
.details:hover{color:var(--text)}
.details .ico-s{transition:transform .3s var(--ease)}
.card.open .details .ico-s{transform:rotate(180deg)}
.tickets{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 16px;border-radius:var(--r-control);background:var(--brand);color:var(--on-brand);font-weight:600;font-size:14px;line-height:1.1;transition:background .2s}
.tickets:hover{background:var(--brand-hover)}
.empty{padding:64px 24px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--r-panel);margin-top:32px}
.empty h3{font-family:var(--f-display);font-size:28px;font-weight:700;letter-spacing:-.02em}
.empty p{color:var(--text-2);margin:8px auto 24px;max-width:44ch}
.empty .row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
@media (prefers-reduced-motion:no-preference){
  .card.in{animation:rise .4s var(--ease) both;animation-delay:calc(min(var(--i,0),8) * 30ms)}
}
@media (max-width:1180px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){
  .grid{grid-template-columns:1fr;gap:12px}
  .card{display:grid;grid-template-columns:108px 1fr;grid-template-rows:auto 1fr;column-gap:0;align-items:start}
  .card:hover{transform:none}
  .card .poster{grid-row:1 / span 2;width:96px;height:120px;margin:12px 0 12px 12px;border-radius:var(--r-thumb);aspect-ratio:auto}
  .card .share{display:none}
  .card .cat{display:none}
  .body{padding:12px 12px 0;gap:4px}
  .card h4{font-size:16px;min-height:0}
  .venue{font-size:12px}
  .venue .ico-s{width:14px;height:14px;margin-top:1px}
  .actions{grid-column:2;grid-row:2;padding:8px 12px 12px;gap:16px;margin:0}
  .tickets{order:-1;margin-left:0;padding:0 12px 0 16px;font-size:14px}
  .about{grid-column:1 / -1;grid-row:3;padding:0 12px}
  .card.open .about{padding-bottom:12px}
  .day h3{font-size:24px}
  .day span{font-size:12px}
  .day{padding-top:32px}
}

/* app band: chaptered video (Apple feature pattern) + CSS phone + chips pinned to the scenes */
.app{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 600px;grid-template-areas:"copy stage" "steps stage" "cta stage";grid-template-rows:auto auto 1fr;column-gap:32px;padding:72px 64px 72px 72px;border-radius:var(--r-band);overflow:hidden;isolation:isolate;
  background:radial-gradient(55% 75% at 74% 50%,var(--brand-glow),transparent 70%),linear-gradient(160deg,var(--band-1),var(--band-2) 55%,var(--band-3));border:1px solid var(--brand-line-soft)}
.app::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--line-2) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(45% 65% at 74% 50%,#000,transparent);mask-image:radial-gradient(45% 65% at 74% 50%,#000,transparent)}
.app-copy{grid-area:copy;align-self:end}
.app .lg{width:112px;height:32px;color:var(--on-brand)}
.app h2{margin-top:24px;font-family:var(--f-display);font-weight:700;font-variation-settings:"wdth" 78;font-size:72px;line-height:.95;letter-spacing:-.04em}
.app-sub{margin-top:16px;font-size:18px;color:var(--brand-ink-2);max-width:34ch}
.steps{grid-area:steps;margin-top:32px;display:grid;gap:4px;max-width:440px;list-style:none;padding:0}
.step{position:relative;display:grid;grid-template-columns:36px 1fr;gap:12px;width:100%;text-align:left;padding:12px 16px 16px;border-radius:var(--r-card);color:var(--text-3);transition:background .3s,color .3s}
.step:hover{background:var(--fill-1);color:var(--text-2)}
.step .sn{font-family:var(--f-mono);font-size:12px;padding-top:4px}
.step b{display:block;font-size:18px;font-weight:600}
.step .st span{display:block;font-size:14px;margin-top:2px}
.step[aria-current="true"]{background:var(--fill-2);color:var(--on-brand)}
.step[aria-current="true"] .st span{color:var(--brand-ink-2)}
.step[aria-current="true"] .sn{color:var(--brand-ink)}
.bar-p{position:absolute;left:64px;right:16px;bottom:8px;height:2px;border-radius:2px;background:var(--fill-2);overflow:hidden;display:block}
.bar-p i{display:block;height:100%;background:var(--brand-ink);transform-origin:left;transform:scaleX(var(--p,0))}
.app-cta{grid-area:cta;align-self:start;margin-top:32px}
.app-cta .stores{margin-top:0}
.app-note{margin-top:12px;font-size:12px;color:var(--brand-ink-2)}
.stores{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.stores a{border-radius:8px;transition:transform .2s var(--ease)}
.stores a:hover{transform:translateY(-2px)}
.stores img{height:44px;width:auto;border-radius:8px}
.stage{grid-area:stage;position:relative;height:680px;display:grid;place-items:center;perspective:1400px}
.glow{position:absolute;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,var(--brand-glow),transparent 65%);filter:blur(24px)}
.tilt{position:relative;transform-style:preserve-3d;will-change:transform}
.phone{position:relative;width:272px;padding:10px;border-radius:52px;background:linear-gradient(150deg,#5b5670 0%,#24212f 18%,#121019 50%,#24212f 82%,#4a4560 100%);
  box-shadow:inset 0 0 0 1.5px var(--line-3),inset 0 0 0 4px #050408,0 60px 120px -40px var(--shadow),0 30px 80px -30px var(--shadow-brand)}
.phone::before{content:"";position:absolute;right:-3px;top:160px;width:3px;height:72px;border-radius:0 2px 2px 0;background:#4a4560}
.phone::after{content:"";position:absolute;left:-3px;top:128px;width:3px;height:44px;border-radius:2px 0 0 2px;background:#4a4560;box-shadow:0 60px 0 #4a4560}
.screen{position:relative;border-radius:42px;overflow:hidden;background:#fff}
.screen::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.22),transparent 28%);pointer-events:none}
.sbar{position:relative;height:32px;display:flex;align-items:center;justify-content:space-between;padding:4px 22px 0 30px;background:#fff;color:#111;font:600 12px/1 var(--f-body)}
.island{position:absolute;left:50%;top:8px;translate:-50% 0;width:80px;height:22px;border-radius:12px;background:#000}
.batt{position:relative;width:22px;height:10px;border-radius:3px;border:1.5px solid #111}
.batt::after{content:"";position:absolute;inset:1.5px;right:5px;border-radius:1px;background:#111}
.screen video{display:block;width:100%;aspect-ratio:480/1038;object-fit:cover;background:#fff}
.chip-float{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:var(--r-control);background:var(--glass-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line-2);box-shadow:0 16px 40px -12px var(--shadow);font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;opacity:.62;transform:translateZ(40px);transition:opacity .4s,transform .4s var(--ease),border-color .4s,box-shadow .4s}
.chip-float small{display:block;font-weight:400;color:var(--text-3)}
.chip-float .ci{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--brand-wash);color:var(--brand-ink)}
.chip-float.on{opacity:1;border-color:var(--brand-line);box-shadow:0 0 0 4px var(--focus-glow),0 16px 40px -12px var(--shadow);transform:translateZ(40px) scale(1.06)}
.cf1{top:72px;right:calc(100% - 32px)}.cf2{top:200px;left:calc(100% - 32px)}.cf3{top:340px;right:calc(100% - 32px)}.cf3 .ci{background:var(--ok-wash);color:var(--ok)}.cf4{top:476px;left:calc(100% - 32px)}
.vplay{position:absolute;right:16px;bottom:8px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--fill-2);border:1px solid var(--line-3);color:var(--on-brand);transition:background .2s}
.vplay:hover{background:var(--line-2)}
@media (max-width:1180px){.app{grid-template-columns:minmax(0,1fr) 520px;padding:56px 40px}.app h2{font-size:56px}}
@media (max-width:900px){
  .app{grid-template-columns:1fr;grid-template-areas:"copy" "stage" "steps" "cta";grid-template-rows:none;padding:40px 20px 32px;row-gap:0}
  .app h2{font-size:48px}.app-sub{font-size:16px}
  .stage{height:auto;padding:32px 0 8px}
  .phone{width:216px;padding:8px;border-radius:42px}
  .screen{border-radius:34px}
  .sbar{height:26px;font-size:10px;padding:2px 16px 0 24px}
  .island{width:64px;height:18px;top:6px}
  .batt{width:18px;height:8px}
  .chip-float{display:none}
  .glow{width:300px;height:300px}
  .vplay{right:0;bottom:8px}
  .steps{margin-top:16px}
}
@keyframes float{50%{transform:translateY(-8px)}}

/* SEO links */
.seo{display:grid;grid-template-columns:2fr 1fr;gap:48px}
.seo h2{font-size:18px;font-weight:600;margin-bottom:16px}
.seo ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 24px}
.seo .cities ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.seo a{display:flex;justify-content:space-between;gap:8px;padding:8px 0;font-size:14px;color:var(--text-2);border-bottom:1px solid var(--line);transition:color .2s}
.seo a:hover{color:var(--on-brand)}
.seo a span{font-family:var(--f-mono);font-size:12px;color:var(--text-3)}
@media (max-width:900px){.seo{grid-template-columns:1fr;gap:40px}.seo ul{grid-template-columns:repeat(2,minmax(0,1fr))}}

.foot{border-top:1px solid var(--line);margin-top:24px;padding-block:32px calc(32px + env(safe-area-inset-bottom,0px))}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.foot svg.lg{width:96px;height:28px;color:var(--text-3)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;color:var(--text-2)}
.foot nav a{border-radius:4px}
.foot nav a:hover{color:var(--on-brand)}
.foot .copy{margin-left:auto;font-size:12px;color:var(--text-3)}
.foot .proto{flex-basis:100%;font-size:12px;color:var(--text-3);border-top:1px solid var(--line);padding-top:16px}
@media (max-width:759px){.foot .copy{margin-left:0;flex-basis:100%}}

/* floating */
.totop{position:fixed;right:var(--gut-r);bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:35;width:48px;height:48px;border-radius:var(--r-control);display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line-2);box-shadow:0 12px 32px -8px var(--shadow);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s var(--ease),visibility .3s,background .2s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--brand)}
.appbar{display:none}
@media (max-width:759px){
  .appbar{position:fixed;left:0;right:0;bottom:0;z-index:34;display:flex;align-items:center;gap:12px;padding:8px var(--gut-r) calc(8px + env(safe-area-inset-bottom,0px)) var(--gut);background:var(--glass-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line-2);transition:transform .3s var(--ease)}
  .appbar.away,body:has(dialog[open]) .appbar{transform:translateY(110%)}
  .appbar.off{display:none}
  .appbar .mark{width:24px;height:32px;color:var(--on-brand);flex:none}
  .appbar span{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.25}
  .appbar small{display:block;font-size:12px;font-weight:400;color:var(--text-3)}
  .appbar .x{width:40px;height:40px;border:0}
  body{padding-bottom:64px}
  body.no-appbar{padding-bottom:0}
  .totop{display:none}
}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:60;translate:-50% 0;padding:12px 16px;border-radius:var(--r-control);background:var(--surface-3);border:1px solid var(--line-2);font-size:14px;box-shadow:0 16px 40px -8px var(--shadow);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:none}
@media (max-width:759px){.toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}

/* ---------- dialogs ---------- */
dialog{padding:0;border:1px solid var(--line-2);border-radius:var(--r-panel);background:var(--bg-2);color:var(--text);width:calc(100vw - 32px);max-width:520px;max-height:calc(100dvh - 48px);box-shadow:0 40px 96px -24px var(--shadow);overflow:hidden}
dialog[open]{display:flex;flex-direction:column}
dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
dialog.pop::backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
@media (prefers-reduced-motion:no-preference){dialog[open]{animation:dlg .3s var(--ease)}}
@keyframes dlg{from{opacity:0;transform:translateY(12px) scale(.98)}}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);flex:none}
.dlg-head h3{font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:-.02em}
.dlg-body{overflow-y:auto;overscroll-behavior:contain;flex:1}
.x{width:40px;height:40px;border-radius:var(--r-control);display:grid;place-items:center;color:var(--text-2);border:1px solid var(--line);flex:none}
.x:hover{color:var(--on-brand);background:var(--surface-2)}
.handle{display:none}
.dlg-sec{padding:20px}
.dlg-sec+.dlg-sec{border-top:1px solid var(--line)}
.dlg-sec h4{font-size:14px;font-weight:600;margin-bottom:12px}
.wrapchips{display:flex;flex-wrap:wrap;gap:8px}
.dlg-foot{display:flex;gap:12px;padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--bg-2);flex:none}
.dlg-foot .btn{flex:1}
.dlg-foot .btn-primary{flex:2}
/* calendar */
.cal[hidden]{display:none}
.cal{margin-top:16px;padding:16px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line)}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-nav b{font-size:16px;font-weight:600}
.cal-w,.cal-g{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px;text-align:center}
.cal-w span{font-size:12px;color:var(--text-3);padding-bottom:4px}
.cal-g>*{position:relative;height:40px;display:grid;place-items:center;font-size:14px;font-variant-numeric:tabular-nums}
.cal-g button{border-radius:var(--r-control)}
.cal-g button:hover:not(:disabled){background:var(--surface-3)}
.cal-g button:disabled{color:var(--text-3);opacity:.45;cursor:default}
.cal-g .today{color:var(--brand-ink);font-weight:600}
.cal-g .rg{background:var(--brand-wash);border-radius:0}
.cal-g .rg.rs{border-radius:var(--r-control) 0 0 var(--r-control)}
.cal-g .rg.re{border-radius:0 var(--r-control) var(--r-control) 0}
.cal-g .rg.rs.re{border-radius:var(--r-control)}
.cal-g .sel{background:var(--brand)!important;color:var(--on-brand);font-weight:600}
.cal-g .dot::after{content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--brand-ink)}
.cal-g .sel.dot::after{background:var(--on-brand)}
.cal-sel{margin-top:12px;font-size:14px;color:var(--text-2);text-align:center}
/* location combobox */
#dlgLocal{max-width:440px}
.lc-head{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--line);flex:none}
.lc-in{position:relative;flex:1}
.lc-in .ico-s{position:absolute;left:12px;top:50%;translate:0 -50%;color:var(--text-3);pointer-events:none}
.lc-in input{width:100%;min-height:44px;padding:0 12px 0 36px;border-radius:var(--r-control);border:1px solid var(--line-2);background:var(--surface);font-size:16px}
.lc-in input::placeholder{color:var(--text-3)}
.lc-in input:focus{outline:none;border-color:var(--brand-hi);box-shadow:0 0 0 4px var(--focus-glow)}
.lc-list{padding:8px;overflow-y:auto;overscroll-behavior:contain;max-height:min(440px,calc(100dvh - 200px))}
.lc-g{font-size:12px;font-weight:600;color:var(--text-3);padding:12px 12px 4px}
.opt{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:var(--r-control);cursor:pointer;font-size:14px}
.opt .ico-s{color:var(--text-3)}
.opt .nm{flex:1;min-width:0}
.opt .nm small{display:block;font-size:12px;color:var(--text-3)}
.opt .ct{font-family:var(--f-mono);font-size:12px;color:var(--text-3)}
.opt.act{background:var(--surface-2)}
.opt[aria-selected="true"] .nm{color:var(--brand-ink);font-weight:600}
.opt mark{background:none;color:var(--text);font-weight:700}
.lc-back{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:var(--r-control);font-size:14px;font-weight:600;color:var(--text-2);width:100%}
.lc-back:hover{background:var(--surface)}
.lc-none{padding:24px 12px;text-align:center;font-size:14px;color:var(--text-2)}
.kbd{display:flex;gap:16px;padding:8px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3);flex:none}
.kbd kbd{font-family:var(--f-mono);font-size:10px;padding:2px 4px;border-radius:4px;border:1px solid var(--line-2);margin-right:4px}
#dlgQuando{max-width:400px}
@media (min-width:760px){#dlgQuando{max-width:600px}#qBody{display:grid;grid-template-columns:176px 1fr;gap:20px;align-items:start}#qDates{flex-direction:column;align-items:stretch}#qDates .chip{justify-content:flex-start}#qCal{margin-top:0}}
/* lead */
#dlgLead{max-width:440px}
.lead{position:relative;padding:32px 24px 24px;overflow-y:auto;background:radial-gradient(100% 50% at 50% 0%,var(--brand-wash),transparent 70%),var(--bg-2)}
.lead .x{position:absolute;right:12px;top:12px}
.lead svg.lg{width:96px;height:28px;color:var(--on-brand)}
.lead h3{margin-top:20px;font-family:var(--f-display);font-weight:600;font-size:24px;line-height:1.2;letter-spacing:-.015em}
.lead-ev{display:flex;align-items:center;gap:12px;margin-top:16px;padding:8px 12px 8px 8px;border-radius:var(--r-control);background:var(--surface);border:1px solid var(--line)}
.lead-ev .poster{width:48px;height:60px;border-radius:8px;flex:none;aspect-ratio:auto}
.lead-ev span{font-size:14px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lead .s{margin-top:8px;color:var(--text-2);font-size:14px}
.lead .s strong{color:var(--text)}
.lead form{margin-top:24px;display:flex;flex-direction:column;gap:8px}
.lead label{font-size:12px;font-weight:600;color:var(--text-2);margin-top:4px}
.tel{display:flex;gap:8px}
.tel select{flex:none;width:104px;min-height:48px;border-radius:var(--r-control);border:1px solid var(--line-2);background:var(--bg);padding:0 8px;font-size:14px}
.tel select:focus{outline:none;border-color:var(--brand-hi);box-shadow:0 0 0 4px var(--focus-glow)}
.lead .err{min-height:20px;font-size:14px;color:var(--danger)}
.lead .skipbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:14px;color:var(--text-2);border-radius:8px}
.lead .skipbtn:hover{color:var(--on-brand)}
.lead .legal{font-size:12px;color:var(--text-3);text-align:center}
.hp{position:absolute;left:-9999px}
.ok-ic{width:56px;height:56px;border-radius:var(--r-card);display:grid;place-items:center;background:var(--ok-wash);color:var(--ok);border:1px solid var(--ok-wash)}
.lead .stores{margin-top:20px}
.lead .stores img{height:40px}
/* mobile sheets */
@media (max-width:759px){
  dialog.sheet{margin:auto 0 0;width:100vw;max-width:100vw;border-radius:var(--r-panel) var(--r-panel) 0 0;border-bottom:0;max-height:92dvh}
  dialog.sheet .handle{display:block;flex:none;padding:12px 0 4px;cursor:grab;touch-action:none}
  dialog.sheet .handle::before{content:"";display:block;width:40px;height:4px;border-radius:4px;margin:0 auto;background:var(--line-3)}
  #dlgLocal{height:92dvh}
  .lc-list{max-height:none;flex:1}
  .kbd{display:none}
  @media (prefers-reduced-motion:no-preference){dialog.sheet[open]{animation:sheet .35s var(--ease)}}
}
@keyframes sheet{from{transform:translateY(48px);opacity:0}}

/* ===== round 5 ===== */
/* chips rail: focus ring room + masked edges, arrows over a fully transparent zone */
.rail-track{padding:6px 4px;margin:-6px -4px}
.rail-btn{width:44px;background:none!important}
@media (min-width:760px), (min-width:600px) and (hover:hover) and (pointer:fine){
  .rail{margin-right:0}
  .rail.fr .rail-track{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 128px),transparent calc(100% - 56px));mask-image:linear-gradient(90deg,#000 calc(100% - 128px),transparent calc(100% - 56px))}
  .rail.fl .rail-track{-webkit-mask-image:linear-gradient(90deg,transparent 56px,#000 128px);mask-image:linear-gradient(90deg,transparent 56px,#000 128px)}
  .rail.fl.fr .rail-track{-webkit-mask-image:linear-gradient(90deg,transparent 56px,#000 128px,#000 calc(100% - 128px),transparent calc(100% - 56px));mask-image:linear-gradient(90deg,transparent 56px,#000 128px,#000 calc(100% - 128px),transparent calc(100% - 56px))}
}
.rank{padding:6px var(--gut-r) 6px 6px;margin:-6px calc(-1*var(--gut-r)) -6px -6px;align-items:flex-start}
/* touch targets */
.nav a{min-height:44px;display:inline-flex;align-items:center}
.logo{min-height:44px;align-items:center}
.seo a{padding:12px 0;align-items:baseline}
.foot nav a{min-height:44px;display:inline-flex;align-items:center}
.clear-all{min-height:44px}
.tagx button{position:relative}
.tagx button::after{content:"";position:absolute;inset:-10px}
@media (max-width:759px){
  .rail-track{margin:-6px 0 -6px -4px}
  .chip{min-height:44px}
  .appbar .btn-sm{min-height:44px}
  .appbar .x{width:44px;height:44px}
  .top{padding-top:env(safe-area-inset-top,0px)}
  dialog.pop::backdrop{background:var(--backdrop);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
}
/* cards */
.tickets{min-width:148px;justify-content:space-between}
.tickets>span{white-space:nowrap}
.nu{display:inline-block;margin-left:8px;padding:2px 6px;border-radius:var(--r-tag);background:var(--partner-nu);color:var(--on-brand);font:600 10px/1.4 var(--f-body);vertical-align:1px;white-space:nowrap}
.card.sel{border-color:var(--brand-line);box-shadow:0 0 0 1px var(--brand-line)}
.card.open h4{-webkit-line-clamp:unset;display:block;overflow:visible;min-height:0}
@media (min-width:600px){.grid .card .about{display:none}}
@media (max-width:599px){
  .card{grid-template-columns:136px 1fr}
  .card .poster{width:120px;height:75px;margin:12px 0 0 16px;grid-row:1 / span 2;align-self:start}
  .actions{gap:8px}
  .details{padding:0 4px}
  .tickets{min-width:0;padding:0 12px}
}
.more-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:32px;padding:20px 24px;border:1px solid var(--line-2);border-radius:var(--r-card);background:var(--surface)}
.more-row p{color:var(--text-2);font-size:14px}
/* inline detail panel (desktop) */
.dp{grid-column:1 / -1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.dp.on{grid-template-rows:1fr}
.dp-clip{overflow:hidden;min-height:0;padding-top:10px}
.dp-box{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;padding:24px;border-radius:var(--r-panel);background:var(--surface-2);border:1px solid var(--brand-line);box-shadow:0 32px 64px -32px var(--shadow-brand)}
.dp-caret{position:absolute;top:-9px;left:var(--cx,50%);width:16px;height:16px;translate:-50% 0;rotate:45deg;background:var(--surface-2);border-left:1px solid var(--brand-line);border-top:1px solid var(--brand-line)}
.dp-media .poster{border-radius:var(--r-card)}
.dp-info{display:flex;flex-direction:column;gap:8px;min-width:0;padding-right:48px}
.dp-info h3{font-family:var(--f-display);font-weight:700;font-variation-settings:"wdth" 85;font-size:28px;line-height:1.15;letter-spacing:-.02em}
.dp-info .venue span{display:block;-webkit-line-clamp:unset}
.dp-info h5{margin-top:8px;font-size:12px;font-weight:600}
.dp-info .xt{font-size:14px;line-height:1.6;color:var(--text-2)}
.dp-info .src{font-size:12px;color:var(--text-3)}
.dp-act{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}
.dp-act .tickets{margin-left:0}
.dp-x{position:absolute;top:16px;right:16px}
@media (max-width:1020px){.dp-box{gap:24px}.dp-info h3{font-size:24px}}
/* ranking cards */
.rk{display:flex;flex-direction:column}
.rk-main{display:flex;flex-direction:column;flex:1;width:100%;text-align:left;border-radius:inherit}
.rk-main:focus-visible{outline-offset:-2px}
.rk .why{min-height:42px}
.rk .tg{margin-top:0;min-height:48px;align-content:flex-start}
.rk.open .rt,.rk.open .why{-webkit-line-clamp:unset;display:block;min-height:0}
.rk-more{display:none;padding:0 16px 16px}
.rk.open .rk-more{display:block}
.rk-more .tickets{margin-left:0;width:100%}
.rk .goto{font-size:12px;color:var(--brand-ink);margin-top:4px}
/* lead */
.lead .ferr{font-size:12px;color:var(--danger)}
.lead .ferr:empty{display:none}
.field[aria-invalid="true"]{border-color:var(--danger)}
.field[aria-invalid="true"]:focus{box-shadow:0 0 0 4px var(--danger-glow)}
.lead .go-site{margin-top:20px;width:100%}
.lead-ev .poster{width:72px;height:45px}

/* ===== round 6 ===== */
body.dp-open .totop{display:none}
.rail-track::after{content:"";flex:0 0 72px}
.chip{transition:color .2s,border-color .2s,background .2s,transform .15s var(--ease),opacity .2s}
.chip.ghost{opacity:0}
@media (max-width:759px){.rail-track::after{flex-basis:32px}}
/* ranking: equal heights, badges on the poster, ring above the poster */
.rank{align-items:stretch}
.rk-main{flex:1}
.rk .bd{flex:1}
.rk .tg{margin-top:auto;min-height:0;padding-top:12px}
.poster .nu-p{position:absolute;left:8px;bottom:8px;margin:0}
.poster .ag-p{position:absolute;right:8px;top:8px;font-size:12px;font-weight:600;padding:4px 8px;border-radius:var(--r-tag);background:var(--scrim);color:var(--brand-ink)}
.rk-main:focus-visible{outline:none}
.rk:has(.rk-main:focus-visible){outline:2px solid var(--brand-ink);outline-offset:2px}
/* site buttons: one width per context */
.tickets{width:172px;min-width:0}
@media (max-width:599px){.tickets{width:auto}}
.more-row .btn{min-height:44px}
/* panel stacks when narrow */
.dp{container-type:inline-size}
@container (max-width:860px){
  .dp-box{grid-template-columns:1fr;gap:20px}
  .dp-media .poster{max-height:360px;aspect-ratio:16/10}
  .dp-info{padding-right:0}
}
/* app band: chips outside the screen, quiet at rest, lit when active */
.chip-float{opacity:1;background:var(--bg-2);border-color:var(--fill-2);color:var(--text-2);transform:translateZ(40px)}
.chip-float .ci{background:var(--fill-2);color:var(--text-3)}
.chip-float small{color:var(--text-3)}
.chip-float.on{color:var(--on-brand);background:var(--surface-brand)}
.chip-float.on .ci{background:var(--brand-wash);color:var(--brand-ink)}
.chip-float.on small{color:var(--brand-ink-2)}
.cf1{top:96px;right:calc(100% - 8px);left:auto}.cf2{top:224px;left:calc(100% - 8px);right:auto}.cf3{top:360px;right:calc(100% - 8px);left:auto}.cf4{top:488px;left:calc(100% - 8px);right:auto}
@media (max-width:1180px){.chip-float small{display:none}}
.sbar::after{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .25s}
.sbar.dim::after{opacity:.54}
.steps-row{grid-area:steps}
.steps-row .steps{grid-area:auto}
.vplay-m,.step-cap{display:none}
@media (max-width:900px){
  .stage .vplay{display:none}
  .steps-row{display:flex;align-items:center;gap:8px;margin-top:8px}
  .steps{flex:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin:0;padding:4px;border-radius:var(--r-card);background:var(--fill-1)}
  .step{grid-template-columns:1fr;gap:2px;padding:8px 4px 14px;text-align:center;min-height:56px;border-radius:12px}
  .step .sn{padding:0}
  .step b{font-size:12px;line-height:1.25}
  .step .st span{display:none}
  .bar-p{left:8px;right:8px;bottom:6px}
  .vplay-m{display:grid;position:static;flex:none}
  .step-cap{display:block;grid-area:cap;margin-top:12px;font-size:14px;color:var(--brand-ink-2);text-align:center;min-height:20px}
  .app{grid-template-areas:"copy" "stage" "steps" "cap" "cta"}
}

/* ===== round 7 ===== */
.tickets{flex:none}
.tickets.opt small{display:block}
.when{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:4px}
.when .nu{margin-left:0}
.lead-ev span{-webkit-line-clamp:3}
@media (min-width:760px) and (max-width:1180px){
}
@media (max-width:599px){
  .card{grid-template-columns:136px minmax(0,1fr)}
  .card .body,.card .actions{min-width:0}
  .actions{flex-wrap:wrap}
  .tickets.opt small,.tickets[data-choose] small{display:block}
      /* compact rows: Detalhes becomes a 44px chevron (label kept for screen readers) */
  .actions{gap:4px}
  .details{width:44px;justify-content:center;padding:0}
  .details span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:374px){
  .card{grid-template-columns:112px minmax(0,1fr)}
  .card .poster{width:96px;height:60px}
}
@container (max-width:860px){
  .dp-info{order:1}
  .dp-media{order:2}
  .dp-media .poster{max-height:220px;aspect-ratio:auto;height:220px}
}
.rank{scroll-padding-inline:6px}
.rk .rk-more{display:none;flex-direction:column;gap:8px}
.rk.open .rk-more{display:flex}
.tickets.opt{width:auto;min-width:172px}
.tickets.opt small{max-width:none}

/* ===== round 8 ===== */
.card.sel,.card.sel:hover{transform:none}
.lc-list,.dlg-body,.lead{scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
.lc-list::-webkit-scrollbar,.dlg-body::-webkit-scrollbar{width:8px}
.lc-list::-webkit-scrollbar-thumb,.dlg-body::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:8px}
@media (min-width:600px) and (max-width:759px){
  dialog.pop.sheet{margin:auto;width:calc(100vw - 32px);max-width:440px;height:auto;max-height:calc(100dvh - 48px);border-radius:var(--r-panel);border-bottom:1px solid var(--line-2)}
  dialog.pop.sheet .handle{display:none}
  #dlgLocal .lc-list{max-height:min(440px,calc(100dvh - 200px))}
}
.rank.fr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 96px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 96px),transparent)}
.rank.fl.fr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 96px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 96px),transparent)}
.rank.fl:not(.fr){-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
.tickets[data-choose] .ico-s{display:none}
.tickets[data-choose]{justify-content:center;text-align:center}
.app-step-name{font-weight:600;color:var(--on-brand)}
@media (max-width:480px){
  .step b{display:none}
  .step{min-height:48px;padding:10px 4px 14px}
  .step .sn{font-size:14px}
}
@media (max-width:360px){
  .nav{display:none}
  .appbar .mark,.appbar small{display:none}
  .appbar{gap:8px}
  .appbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card .tickets>.ico-s{display:none}
  .card .tickets{padding:0 12px}
  .card .actions{flex-wrap:nowrap}
  .details{width:40px}
  .tel select{width:88px}
}

/* ===== round 9 ===== */
/* 1. close: root cause (measured): the panel is a grid item, so the grid row-gap on both sides of its row stays
   while its track shrinks to 0 (a track cannot go negative, so a negative margin cannot cancel it); removing it
   then drops the extra 20px gap at once. Row spacing now comes from card margins (row-gap 0), and the panel's own
   spacing lives inside its clipped, height-animated box, so close is one continuous motion and removal changes nothing. */
.grid{--gap:20px;row-gap:0;margin-bottom:calc(-1 * var(--gap))}
.grid>.card{margin-bottom:var(--gap)}
.dp{opacity:0;transition:grid-template-rows .42s var(--ease),opacity .3s ease}
.dp.on{opacity:1}
.dp-clip{padding-top:0}
.dp-box{margin-top:10px;margin-bottom:var(--gap)}
.about{transition:grid-template-rows .4s var(--ease),padding-bottom .4s var(--ease)}
.card.open.closing .about{grid-template-rows:0fr;padding-bottom:0}
/* 3. Instagram */
.ig{width:44px;height:44px;border-radius:var(--r-control);display:grid;place-items:center;color:var(--text-2);flex:none;transition:color .2s,background .2s}
.ig:hover{color:var(--on-brand);background:var(--surface-2)}
.ig svg{width:20px;height:20px}
.top .ig{margin-left:-8px}
@media (max-width:759px){.top .ig{margin-left:auto}.nav+.ig{margin-left:0}}
.foot .ig{margin-left:-12px}
/* 4. calendar scrubber rail (>=1180) */
.cal-rail{position:fixed;right:max(8px,env(safe-area-inset-right,0px));top:calc(var(--top) + 72px + var(--barh,64px) + 24px);z-index:25;width:72px;display:none;flex-direction:column;align-items:stretch;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
@media (min-width:1180px){
  .cal-rail{display:flex}
  body.rail-in .cal-rail{opacity:1;visibility:visible}
  #agenda>.wrap{padding-right:calc(var(--gut-r) + max(0px, 96px - max(0px, (100vw - 1304px) / 2) - 32px))}
}
.cal-rail .mo{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink);padding:0 0 6px 8px}
.cr-track{position:relative;display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:var(--r-card);background:var(--glass-surface);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);touch-action:none;cursor:grab}
.cr-track:active{cursor:grabbing}
.cr-pill{position:absolute;left:4px;right:4px;top:0;height:28px;border-radius:8px;background:var(--brand);box-shadow:0 6px 16px -6px var(--shadow-brand);transition:transform .25s var(--ease);pointer-events:none}
.cr-day{position:relative;z-index:1;height:28px;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 6px;white-space:nowrap;border-radius:8px;font-family:var(--f-mono);font-size:10px;color:var(--text-2);text-align:left}
.cr-day b{font-weight:500;font-size:12px;color:var(--text)}
.cr-day i{width:4px;border-radius:2px;background:var(--brand-ink);align-self:center;height:calc(4px + var(--n,0) * 1px);max-height:18px}
.cr-day:disabled{color:var(--text-3);opacity:.45;cursor:default}
.cr-day:disabled b{color:var(--text-3)}
.cr-day:disabled i{display:none}
.cr-day:hover:not(:disabled):not([aria-current="true"]){background:var(--surface-3)}
.cr-day[aria-current="true"],.cr-day[aria-current="true"] b{color:var(--on-brand)}
.cr-day[aria-current="true"] i{background:var(--on-brand)}
.cr-bub{position:absolute;right:calc(100% + 8px);top:0;white-space:nowrap;padding:8px 12px;border-radius:var(--r-control);background:var(--surface-3);border:1px solid var(--line-2);font-size:14px;font-weight:600;box-shadow:0 12px 32px -8px var(--shadow);opacity:0;transform:translateY(-50%);pointer-events:none;transition:opacity .15s}
.cal-rail.drag .cr-bub,.scrub.drag .cr-bub{opacity:1}
/* scrub handle (<1180): Photos-style thumb in the right gutter */
.scrub{position:fixed;right:0;top:calc(var(--top) + var(--sh,64px) + 8px);bottom:calc(16px + env(safe-area-inset-bottom,0px));width:44px;z-index:26;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;touch-action:none;pointer-events:none}
@media (min-width:1180px){.scrub{display:none}}
.scrub-th{position:absolute;right:4px;top:0;width:28px;height:48px;border-radius:14px 4px 4px 14px;background:var(--surface-3);border:1px solid var(--line-3);box-shadow:0 8px 20px -6px var(--shadow);display:grid;place-items:center;color:var(--brand-ink);cursor:grab}
.scrub-th svg{width:14px;height:14px}
.scrub .cr-bub{right:40px;top:24px}
/* mobile: sticky day header shows the current day */
@media (max-width:759px){
  .day{position:sticky;top:calc(var(--top) + var(--barh,112px));z-index:6;background:var(--bg);padding:12px 0;margin-top:20px;margin-bottom:12px}
}
@media (max-width:599px){.grid{--gap:12px}}
@media (prefers-reduced-motion:reduce){.cr-pill{transition:none}}

/* ===== round 10 ===== */
.tickets .ico-s{color:var(--on-brand);opacity:1}
/* 600-759: Filtros, Quando and Local are centred dialogs sized to the content box (100% of the ICB, not 100vw) */
@media (min-width:600px) and (max-width:759px){
  dialog.sheet,dialog.pop.sheet{margin:auto;width:calc(100% - 32px);max-width:520px;height:auto;max-height:calc(100dvh - 48px);border-radius:var(--r-panel);border-bottom:1px solid var(--line-2)}
  dialog.sheet .handle{display:none}
  #dlgLocal{height:auto}
  #dlgLocal .lc-list{max-height:min(440px,calc(100dvh - 200px))}
}
@media (max-width:599px){dialog.sheet{width:100%;max-width:100%}}
@media (min-width:600px) and (max-width:759px) and (hover:hover) and (pointer:fine){.scroll-btns{display:flex}}
/* chapters: numbers only wherever the app band is stacked */
@media (max-width:900px){
  .step b{display:none}
  .step{min-height:48px;padding:10px 4px 14px}
  .step .sn{font-size:14px}
}
@media (max-width:360px){
  .details{width:44px}
  .card .tickets{padding:0 10px}
}
/* ranking poster tags stacked bottom-left, clear of the poster's own date art */
.poster .p-tags{position:absolute;left:8px;bottom:8px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.poster .p-tags .nu-p,.poster .p-tags .ag-p{position:static;margin:0}
/* sticky day header hides the selected card's 1px ring beside it */
@media (max-width:759px){.day{box-shadow:-4px 0 0 var(--bg),4px 0 0 var(--bg)}}
/* rail: hidden with fewer than 2 days that have events */
body.one-day .cal-rail,body.one-day .scrub{display:none!important}
body:not(.rail-in) .cal-rail{opacity:0!important;visibility:hidden!important}
/* handle: 600-1179 reserves a gutter so it never covers content; <600 it only shows while scrolling/dragging */
@media (min-width:600px) and (max-width:1179px){
  body:not(.one-day) #agenda>.wrap{padding-right:calc(var(--gut-r) + 40px)}
  body.rail-in .scrub{opacity:1;visibility:visible;pointer-events:auto}
}
body.rail-in .scrub.on{opacity:1;visibility:visible;pointer-events:auto}
@media (max-width:759px){body:not(.no-appbar) .scrub{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
.scrub-th{right:0;width:44px;background:none;border:0;box-shadow:none;display:block;padding:0}
.scrub-th::before{content:"";position:absolute;right:4px;top:0;width:34px;height:48px;border-radius:14px 4px 4px 14px;background:var(--surface-3);border:1px solid var(--line-3);box-shadow:0 8px 20px -6px var(--shadow)}
.scrub-th .grip{position:absolute;right:4px;top:0;width:34px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.scrub-th .grip b{font:600 12px/1 var(--f-mono);color:var(--text)}
.scrub-th .grip i{display:flex;gap:3px}
.scrub-th .grip i::before,.scrub-th .grip i::after{content:"";width:2px;height:10px;border-radius:1px;background:var(--brand-ink)}
.scrub.tap .cr-bub{opacity:1}
.scrub .cr-bub{right:48px}

/* ===== round 11 ===== */
/* 600-759 dialogs size to their content (fit-content, not auto: a modal dialog is inset 0, so auto stretches it) */
@media (min-width:600px) and (max-width:759px){
  dialog.sheet,dialog.pop.sheet,#dlgLocal{height:fit-content;max-height:calc(100% - 48px)}
  dialog .dlg-body,#dlgLocal .lc-list{flex:0 1 auto}
}
/* the handle no longer needs a reserved gutter at any width: grid width is the same for every city */
@media (min-width:600px) and (max-width:1179px){ body:not(.one-day) #agenda>.wrap{padding-right:var(--gut-r)} }
/* slim handle: a 6px bar inside the page gutter; the 44px strip only catches drags (taps pass through) */
.scrub{width:44px}
.scrub-th::before{right:4px;width:6px;height:48px;border-radius:3px;background:var(--brand-ink);border:0;box-shadow:0 0 0 1px var(--scrim)}
.scrub-th .grip{display:none}
.scrub.drag .scrub-th::before,.scrub.tap .scrub-th::before{background:var(--on-brand)}
/* ranking tags live in the card body, under the date */
.rk .rtags{display:flex;flex-wrap:wrap;gap:4px;margin-top:-2px}
.rk .rtags .nu,.rk .rtags .ag-p{margin:0;position:static}
.rk .rtags .ag-p{font-size:12px;font-weight:600;padding:2px 6px;border-radius:var(--r-tag);background:var(--surface-3);color:var(--brand-ink);line-height:1.4}
.rk .rtags .nu{font-size:12px;padding:2px 6px}
/* app band at <=900: steps row and pause centred like the caption */
@media (max-width:900px){.steps-row{justify-content:center;width:100%;max-width:560px;margin-inline:auto}}
/* 901-1180: the stage is too narrow for the side chips (they clipped at the band edge); the chapter list carries them */
@media (min-width:901px) and (max-width:1180px){.chip-float{display:none}}
/* back-to-top stays out of the agenda grid and the app band */
body.rail-in .totop,body.app-in .totop{opacity:0;visibility:hidden}

/* ===== round 12 ===== */
/* 5. >=1180: every band shares a 96px gutter, so the list, filter bar and app band keep the same edges and the rail
   sits in the gutter, anchored to the content's right edge (16px away) instead of the viewport edge */
@media (min-width:1180px){
  :root{--gut:max(96px,env(safe-area-inset-left,0px));--gut-r:max(96px,env(safe-area-inset-right,0px))}
  #agenda>.wrap{padding-right:var(--gut-r)}
  .cal-rail{right:max(8px, calc((100% - 1240px) / 2 - 88px))}
}
/* 2. back-to-top: after 2 viewports at every width; sits under the rail column on desktop; hidden while a panel is open */
body.rail-in .totop,body.app-in .totop{opacity:1;visibility:visible}
.totop:not(.show),body.dp-open .totop,.totop.foot-near{opacity:0!important;visibility:hidden!important}
@media (min-width:1180px){.totop{right:max(20px, calc((100% - 1240px) / 2 - 76px))}}
@media (max-width:759px){
  .totop{display:grid;left:var(--gut);right:auto;width:44px;height:44px;bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  body.no-appbar .totop{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}
/* 3. re-expanding after a reversed collapse starts slowly (no first-frame jump) */
.card.reopen .about,.card.reopen h4,.card.reopen .venue span{transition-timing-function:cubic-bezier(.45,0,.55,1)!important;transition-duration:.7s!important}
/* 4. the scrub starts only on the bar and the 8px beside it; the rest of the edge scrolls the page */
.scrub{width:22px;pointer-events:none!important}
.scrub-th{width:22px;touch-action:none;pointer-events:auto}
.scrub .cr-bub{right:28px}
/* 6. 901-1000: app band columns rebalanced */
@media (min-width:901px) and (max-width:1000px){.app{grid-template-columns:minmax(0,1fr) 340px;column-gap:24px;padding:56px 32px 56px 40px}.app h2{font-size:48px}}
/* 7. nav hidden at <=375 */

/* nits */
.rk .rtags{min-height:22px}
/* narrower cards with the 96px gutter: the Ver site button shrinks with the card instead of overflowing it */
@media (min-width:600px){.card .actions{min-width:0}.card .actions .tickets{width:auto;flex:1 1 auto;max-width:172px;min-width:0}.card .actions .tickets>span{min-width:0;overflow:hidden}}
.lc-head{padding:12px 20px 12px 12px}


/* ===== round 13 ===== */
/* 1. back-to-top: floating only from 1180 (under the rail); 760-1179 in the sticky bar; <=759 inside the app bar */
@media (min-width:760px) and (max-width:1179px){.totop{display:none!important}}
/* <=759: hidden while the app bar carries Topo; if the user closed the bar, the floating button comes back */
@media (max-width:759px){body:not(.no-appbar) .totop{display:none!important}}
.bar-top{display:none;flex:none}
@media (min-width:760px) and (max-width:1179px){.bar-top.show{display:grid}}
.ab-top{display:none;width:44px;height:44px;border-radius:var(--r-control);place-items:center;color:var(--text-2);flex:none}
.ab-top.show{display:grid}
.ab-top:hover{color:var(--on-brand);background:var(--surface-2)}
/* the app bar keeps its one-line height when Topo appears: the logo mark gives up its place, text ellipsizes */
.appbar:has(.ab-top.show) .mark{display:none}
.appbar span,.appbar small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 3. a ghosted chip is gone for pointer and keyboard too */
.chip.ghost{opacity:0;visibility:hidden;pointer-events:none}
/* 5. expanded card at <=360: time + venue beside the poster, title at full width below at 16px */
@media (max-width:360px){
  .card h4{font-size:16px}
  .card .body{display:contents}
  .card .when{grid-column:2;grid-row:1;padding:12px 12px 0;align-self:start}
  .card .venue{grid-column:2;grid-row:2;padding:4px 12px 0;align-self:start}
  .card h4{grid-column:1 / -1;grid-row:3;padding:12px 16px 0;margin:0;min-height:0}
  .card .actions{grid-column:1 / -1;grid-row:4;padding:8px 16px 12px}
  .card .about{grid-row:5}
}
/* 7. ranking titles always start at the top of the body */
.rk .bd{justify-content:flex-start}

/* ===== round 14 ===== */
/* titles that only differ by a trailing "(…)" keep that suffix visible on its own line */
h4.has-sfx,.rk .rt.has-sfx{display:block;-webkit-line-clamp:unset;overflow:visible;min-height:0}
.has-sfx .tt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.has-sfx .sfx{display:block;font-weight:500;color:var(--text-2)}
.card.open h4.has-sfx .tt{-webkit-line-clamp:unset}
/* infinite list */
.skel-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:4px}
.skel-row[hidden],.list-end[hidden]{display:none}
.skel{border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);overflow:hidden;padding-bottom:16px}
.skel i{display:block;background:var(--surface-2);border-radius:6px;margin:12px 16px 0;height:12px}
.skel i:first-child{margin:0;border-radius:0;height:auto;aspect-ratio:16/10}
.skel i:nth-child(3){width:70%}.skel i:nth-child(4){width:45%}
@media (prefers-reduced-motion:no-preference){.skel i{background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-3) 50%,var(--surface-2) 100%);background-size:200% 100%;animation:shim 1.1s linear infinite}}
@keyframes shim{to{background-position:-200% 0}}
@media (max-width:1180px){.skel-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.skel-row{grid-template-columns:repeat(2,minmax(0,1fr))}.skel:nth-child(3){display:none}}
@media (max-width:599px){.skel-row{grid-template-columns:1fr;gap:12px}.skel:nth-child(3){display:block}
  .skel{display:grid;grid-template-columns:136px 1fr;padding:12px 0}.skel i:first-child{grid-row:1 / span 4;width:120px;height:75px;aspect-ratio:auto;margin:0 0 0 16px;border-radius:var(--r-thumb)}.skel i{margin:4px 12px 0}}
.list-end{display:flex;align-items:center;gap:16px;margin-top:40px;font-size:14px;color:var(--text-3)}
.list-end::before,.list-end::after{content:"";flex:1;height:1px;background:var(--line)}
#sent{height:1px}
/* day rail and handle: always shown while the agenda is in view, like a scrollbar */
@media (max-width:1179px){body.rail-in .scrub{opacity:1;visibility:visible}}
.scrub{pointer-events:none!important}
.scrub-th{pointer-events:auto}
.scrub-th::before{display:none}
.scrub-th .grip{display:flex;position:absolute;right:1px;top:6px;width:14px;height:36px;border-radius:7px;background:var(--brand);align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg)}
.scrub-th .grip b{font:600 10px/1 var(--f-mono);color:var(--on-brand)}
.scrub-th .grip i{display:none}
.scrub::after{content:"";position:absolute;right:7px;top:24px;bottom:24px;width:2px;border-radius:1px;background:var(--line-2)}
.sc-ticks{position:absolute;inset:0;pointer-events:none;z-index:0}
.scrub-th{z-index:1}
.sc-ticks i{position:absolute;right:4px;width:8px;height:2px;border-radius:1px;background:var(--brand-ink);opacity:.8}

/* ===== round 15 ===== */
/* 1. each day is its own section: a sticky header only sticks inside its day and the next one pushes it out */
.dsec{position:relative}
/* 12. cards in a row share one action baseline */
@media (min-width:600px){.grid{align-items:stretch}.grid>.card .actions{margin-top:auto}}
/* 13 + 10. <=759 the list leaves a 32px gutter for the day scrubber; the thumb is a 20px pill, hit area 44x48 */
@media (max-width:759px){body:not(.r15) #agenda>.wrap{padding-right:calc(var(--gut-r) + 16px)}}
.scrub{width:44px}
.scrub-th{width:44px;right:0}
.scrub-th .grip{right:4px;width:20px;height:36px;border-radius:10px}
.scrub-th .grip b{font-size:12px}
.scrub::after{right:13px}
.sc-ticks i{right:10px}
.scrub .cr-bub{right:48px}
.scrub-th:focus-visible{outline:none}
.scrub-th:focus-visible .grip{outline:2px solid var(--brand-ink);outline-offset:2px}
/* 5. first-time hint lives in the sticky day header, not over a card */
.day .dhint{margin-left:auto;flex:1;min-width:0;font-size:12px;font-style:normal;color:var(--brand-ink);text-align:right;line-height:1.3}
.day>span{white-space:nowrap}
.day:has(.dhint) i{display:none}
/* 4. <=759 with the app bar closed: a 40px solid button bottom-right, hidden while it would cover a control */
@media (max-width:759px){
  body.no-appbar .totop{left:auto;right:16px;width:40px;height:40px;bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--surface-3);border:1px solid var(--line-3)}
  body.no-appbar .scrub{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
.totop.covers{opacity:0!important;visibility:hidden!important;transition:none}

/* ===== round 16 ===== */
.hero{padding-block:24px 32px}
.msearch{display:none}
.msearch svg{width:20px;height:20px}
@media (max-width:759px){
  .hero{padding-block:16px 24px}
  .msearch{display:grid;margin-left:auto}
  .top .ig:not(.msearch){margin-left:0}
  .top .wrap{position:relative}
  .top.searching .hsearch{display:block;position:absolute;left:var(--gut);right:calc(var(--gut-r) + 52px);top:10px;max-width:none;margin:0}
  .top.searching .hsearch input{height:44px;font-size:16px}
  .top.searching .logo,.top.searching .nav{visibility:hidden}
  .top.searching .ig:not(.msearch){display:none}
}

/* ===== round 17 ===== */
/* H1: the city is a button that opens the location picker */
.h1 .gr{color:var(--brand-ink)}
.h1{text-wrap:pretty}
/* filter bar: in flow at the start of the agenda; pinned under the header once the hero title has scrolled away */
/* thin app strip inside the agenda (not an event) */
.astrip{grid-column:1 / -1;display:flex;align-items:center;gap:16px;min-height:64px;max-height:72px;padding:10px 16px;margin-bottom:var(--gap);border-radius:var(--r-card);background:var(--surface);border:1px solid var(--brand-line)}
.astrip .mark{width:22px;height:30px;color:var(--on-brand);flex:none}
.astrip p{flex:1;min-width:0;font-size:14px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.astrip p b{color:var(--text);font-weight:600}
.astrip p small{font-size:14px}
.astrip p small::before{content:" · "}
.nav a[hidden]{display:none}
.ev-hero .astrip{margin-bottom:0}
.sc-ticks i.m{width:14px;opacity:1}
.sc-ticks i span{position:absolute;right:calc(100% + 4px);top:50%;transform:translateY(-50%);font:600 9px/1 var(--f-mono);color:var(--text-3);letter-spacing:.02em}
.sc-ticks i.w{width:5px;opacity:.4}
.sc-ticks i.m span{color:var(--text-2)}
/* faixa chegando embaixo do detalhe aberto (desktop): entra depois que o painel começa a abrir */
@media (prefers-reduced-motion:no-preference){
  .astrip.chega{animation:astrip-chega .5s var(--ease) .2s both}
  @keyframes astrip-chega{from{opacity:0;transform:translateY(-12px)}}
}
.as-stores{display:flex;gap:8px;flex:none}
.as-stores a{border-radius:6px}
.as-stores img{height:32px;width:auto;border-radius:6px}
.as-go{display:none}
@media (max-width:599px){
  .astrip{max-height:64px;padding:8px 12px;gap:12px}
  .as-stores{display:none}
  .as-go{display:inline-flex;flex:none;min-height:44px}
  .astrip p{line-height:1.3}
  .astrip p b,.astrip p small{display:block;overflow:hidden;text-overflow:ellipsis}
  .astrip p small{font-size:12px;color:var(--text-3)}
  .astrip p small::before{content:none}
}
/* mobile polish */
.day:has(.dhint){flex-wrap:wrap}
.day .dhint{flex-basis:100%;margin-left:0;text-align:left;order:3;flex:none;width:100%}
@media (max-width:759px){#qTop::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}}
.appbar .ab-full,.appbar .ab-short{font-weight:inherit}
.appbar .ab-short{display:none}
@media (max-width:360px){.appbar .ab-full{display:none}.appbar .ab-short{display:inline}}
@media (max-width:599px){.about{padding:0 16px}}
@media (max-width:759px){.loc{min-width:0}.loc span{min-width:0}}
@media (max-width:599px){.grid{grid-template-columns:minmax(0,1fr)}.dsec{min-width:0}}


/* ===== round 18 ===== */
/* 1. nav only where it fits on one line with >=16px spare next to the search icon (measured: one line from 440, 24px spare at 460) */
@media (max-width:459px){.nav{display:none}}
/* 2 + 6. mobile action row: Ver site flexes, Detalhes chevron stays 44x44 on the same row */
@media (max-width:599px){
  .card .actions{flex-wrap:nowrap;gap:4px}
  .card .tickets{flex:0 1 auto;min-width:0;min-height:44px;padding:0 12px}
  .card .tickets>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .card .details{width:44px!important;min-width:44px;flex:none}
}
/* 3 + 5. the slot keeps no height while the bar is pinned (scroll is compensated in JS) */
html{overflow-anchor:none}
/* 8. mobile back-to-top 44x44 */
@media (max-width:759px){body.no-appbar .totop{width:44px;height:44px}}
/* 9 + 10. short copy below 400 */
@media (max-width:399px){.astrip p small{display:none}.appbar small{display:none}}
/* 12. skeletons match the card layout at every width */
@media (max-width:599px){.skel:nth-child(3){display:grid}}
/* 13. curation cards: fixed blocks, fixed gap, tags at the bottom */
.rk .rt{min-height:3.9em;-webkit-line-clamp:3}
.rk .why{min-height:2.9em}
.rk .tg{margin-top:12px;padding-top:0;min-height:62px;align-content:flex-start}
/* 15. bar nearly opaque */
.bar{background:var(--glass-strong)}

/* ===== round 19 (color audit) ===== */
:focus-visible{outline-color:var(--focus)}
.btn-primary:active,.tickets:active{background:var(--brand-dark);transform:scale(.98)}
.btn-primary,.skip,.filtros b{color:var(--on-brand)}
/* one disabled treatment: --text-disabled, no opacity */
.cal-g button:disabled,.cr-day:disabled,.cr-day:disabled b{color:var(--text-disabled);opacity:1}
.icon-btn:disabled{color:var(--text-disabled);border-color:var(--line);opacity:1}
/* hover is neutral, selected keeps the brand line */
.rk:hover{border-color:var(--line-3)}
/* "Destaque" is a tonal tag, not a button */
.tg span.top{background:var(--brand-wash);color:var(--brand-suave);box-shadow:inset 0 0 0 1px var(--brand-line)}
/* selection (chips, rail day, calendar day) is tonal; solid purple is for actions only */
.chip[aria-pressed="true"]{background:var(--brand-wash);border-color:var(--brand-line);color:var(--brand-ink)}
.chip[aria-pressed="true"]:hover{color:var(--brand-suave);border-color:var(--brand-hi)}
.cal-g .sel{background:var(--brand-wash)!important;color:var(--brand-ink);box-shadow:inset 0 0 0 1px var(--brand-line)}
.cal-g .sel.dot::after{background:var(--brand-ink)}
.cr-pill{background:var(--brand-wash);box-shadow:inset 0 0 0 1px var(--brand-line)}
.cr-day[aria-current="true"],.cr-day[aria-current="true"] b{color:var(--brand-ink)}
.cr-day[aria-current="true"] i{background:var(--brand-ink)}
/* near-misses */
.tickets:hover{background:var(--brand-hover)}
.app .step .sn,.app .step,.app-note{color:var(--text-2)}
.app .step[aria-current="true"] .sn{color:var(--brand-ink)}
.app .step .st span{color:var(--brand-ink-2)}
/* location picker: the selected option also gets a check */
.opt .ck{margin-left:auto;color:var(--brand-ink);display:none}
.opt[aria-selected="true"] .ck{display:block}
.opt[aria-selected="true"] .ct{margin-left:0}
/* 4. HOLD alternatives, off by default */
#list .card .tickets,.dp-act .tickets{background:var(--brand-wash);color:var(--brand-suave);box-shadow:inset 0 0 0 1px var(--brand-line)}
#list .card .tickets:hover,.dp-act .tickets:hover{background:var(--brand-line)}
#list .card .tickets .ico-s,.dp-act .tickets .ico-s{color:currentColor}
/* 5. curation cards: description right under the title, leftover space above the tags */
.rk .rt{min-height:0}
.rk .why{min-height:0;margin-top:4px}
.rk .tg{margin-top:auto;padding-top:12px;min-height:0}

/* ===== round 20 ===== */
/* hero: title, lede and the weekend strip in one block */
.hero{padding-block:24px 24px}
@media (max-width:759px){.hero{padding-block:16px 16px}}
#agenda{padding-top:24px!important}
/* weekend strip, in the "Hoje a noite" mini-card format */
.tonight{margin-top:24px}
.tonight-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.tonight-h h2{font-size:14px;font-weight:600;color:var(--text)}
.tonight-h h2 span{color:var(--text-3);font-weight:400}
.tonight .scroll-btns .icon-btn{width:32px;height:32px}
#rank{gap:12px;align-items:stretch}
.mini{flex:none;width:calc((100% - 42px) / 4);scroll-snap-align:start;display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:start;padding:8px 12px 8px 8px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);text-align:left;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.mini:hover{border-color:var(--line-3);background:var(--surface-2);transform:translateY(-2px)}
.mini .poster{width:96px;height:60px;border-radius:8px;aspect-ratio:auto}
.mini>span{padding-top:2px;min-width:0}
.mini .t,.mini .h,.mini .p{display:block}
.mini .t{font-family:var(--f-mono);font-size:12px;color:var(--brand-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .t b{font-weight:600;color:var(--text);margin-right:6px}
.mini .h{font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini .p{font-size:12px;color:var(--text-3);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px}
.mini .h.has-sfx{display:block}.mini .has-sfx .tt{-webkit-line-clamp:1}
.mini.nl{width:344px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:8px 12px;background:var(--brand-wash);border-color:var(--brand-line)}
.mini.nl:hover{transform:none;background:var(--brand-wash);border-color:var(--brand-line)}
.nl form{display:flex;gap:8px;align-items:center}
.nl .field{min-height:36px;height:36px;padding:0 12px;font-size:14px;flex:1;width:auto;min-width:0}
.nl .field[aria-invalid="true"]{border-color:var(--danger)}
.nl .btn{min-height:36px;padding:0 12px;flex:none;font-size:14px}
.nl .msg{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:16px}
.nl .msg.err{color:var(--danger)}
.nl .msg.ok{color:var(--ok)}
.nl>*{min-width:0}
.nl form{align-self:stretch}
.nl .field{width:0}
.nl-open,.nl .nl-ic{display:none}
@media (max-width:759px){.nl .field{font-size:16px}}
/* too narrow for field + button: a "Quero receber" button opens the form in place */
@media (max-width:399px){
  .nl:not(.exp) form{display:none}
  .nl:not(.exp) .nl-open{display:inline-flex;align-self:flex-start}
  .nl .nl-full{display:none}
  .nl .nl-ic{display:inline-flex}
  .nl form .btn{width:36px;padding:0;justify-content:center}
}
@media (min-width:760px) and (max-width:1179px){.mini{width:calc((100% - 30px) / 3)}}
@media (max-width:759px){.mini{width:256px}.mini.nl{width:min(344px, calc(100vw - 48px))}}
@media (max-width:599px){.tonight .scroll-btns{display:none}}
/* filter bar: in flow under the hero, docks under the header and slims down; height + margin stay constant (no jump) */
.flow{position:relative}
.bar{position:sticky;top:calc(var(--top) + var(--hh));background:transparent;border-block:1px solid transparent;--dk:16px;transition:background .2s var(--ease),border-color .2s var(--ease),margin-bottom .2s var(--ease),-webkit-backdrop-filter .2s,backdrop-filter .2s;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (max-width:759px){.bar{top:var(--top);--dk:20px}}
.bar .bar-row{transition:padding .2s var(--ease)}
.bar .loc,.bar .filtros{transition:border-color .2s,background .2s,min-height .2s var(--ease)}
.bar .chip{transition:color .2s,border-color .2s,background .2s,transform .15s var(--ease),min-height .2s var(--ease)}
.bar .bar-top{transition:color .2s,border-color .2s,background .2s,width .2s var(--ease),height .2s var(--ease)}
.bar.docked{background:var(--bg);border-top-color:transparent;border-bottom-color:var(--line);margin-bottom:var(--dk)}
.bar.docked .bar-row{padding-block:6px}
.bar.docked .loc,.bar.docked .filtros{min-height:36px}
.bar.docked .chip{min-height:32px}
.bar.docked .bar-top{width:36px;height:36px}
@media (max-width:759px){
  .bar.docked .bar-row{padding-block:4px}
  .bar.docked .loc,.bar.docked .filtros{min-height:40px}
  .bar.docked .chip{min-height:36px}
}
/* agenda: earlier days load on demand above the first rendered day */
.prev-days{display:flex;margin:8px auto 0;min-height:40px}
.prev-days[hidden]{display:none}
/* rail at scale: month labels, relative density, the track scrolls itself */
.cr-track{max-height:calc(100vh - var(--top) - 72px - var(--barh,64px) - 72px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.cr-track::-webkit-scrollbar{display:none}
.cr-mo{position:sticky;top:-4px;z-index:2;display:block;height:20px;box-sizing:border-box;background:var(--glass-surface);font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink);padding:6px 6px 2px}
.cr-grp{display:flex;flex-direction:column;gap:2px}
.cr-day i{height:calc(3px + var(--n,0) * 15px);max-height:18px}
.cal-rail{position:fixed}
.cal-rail>.cr-bub{top:0}
/* ===== round 21 ===== */
@media (max-width:759px){
  .bar{--dk:8px}
  .chip,.bar.docked .chip{min-height:44px}
  .bar.docked .loc,.bar.docked .filtros{min-height:44px}
}
@media (max-width:399px){.nl .field,.nl .btn{min-height:44px;height:44px}.nl form .btn{width:44px}}
/* ===== round 23 ===== */
/* count + active filters: one compact row under the bar's controls (also while docked) */
/* the list starts 16px under the bar, so landing it 16px under the docked bar always docks the bar */
#agenda{padding-top:16px!important}
#list .dsec:first-child .day{padding-top:0;margin-top:0}
/* CTA without a sub-label: the button hugs "Ver site" / "Ver evento" */
.tickets,.card .actions .tickets{width:auto;min-width:120px;max-width:none;min-height:44px}
@media (min-width:600px){.card .actions .tickets{flex:none}}
@media (max-width:599px){.card .tickets{min-width:0}}
/* ===== round 25: lead pop-up ===== */
#dlgLead{max-width:440px;box-shadow:0 32px 80px -24px rgba(0,0,0,.6)}
#dlgLead .lead{padding:28px 24px 24px}
#dlgLead .lead h3{margin-top:0;padding-right:48px;font-size:24px}
#dlgLead .lead .s{margin-top:6px}
#dlgLead .lead-ev{margin-top:16px;padding:8px}
#dlgLead .lead-ev .poster{width:64px;height:40px}
#dlgLead .lead-ev span{-webkit-line-clamp:2;font-size:14px;line-height:1.3}
#dlgLead .lead-ev small{display:block;margin-top:2px;font-family:var(--f-mono);font-size:12px;color:var(--brand-ink)}
#dlgLead form{margin-top:20px;gap:16px}
.lead .fld{display:flex;flex-direction:column;gap:6px}
.lead .fld label{margin-top:0}
.lead .ferr{margin:0}
.tel select{width:96px}
.lead-act{display:flex;flex-wrap:wrap-reverse;gap:8px;margin-top:4px}
.lead-act .btn{flex:1 1 calc(50% - 4px);min-width:max-content;min-height:48px;padding:0 16px;border-radius:var(--r-control)}
.lead-sec{background:var(--brand-wash);border:1px solid var(--brand-line);color:var(--brand-ink)}
.lead-sec:hover{background:var(--brand-line);color:var(--brand-suave)}
.lead-go .spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.lead-go.loading .spin{display:inline-block}
.lead-go.loading{cursor:progress}
@keyframes spin{to{transform:rotate(360deg)}}
#dlgLead .legal{margin-top:-4px;text-align:left;line-height:1.4}
#dlgLead .legal a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
#dlgLead .ok-ic{width:48px;height:48px}
#dlgLead .go-site{margin-top:20px;width:100%;border-radius:var(--r-control)}
#dlgLead .ok-ic+h3{margin-top:16px}
@media (max-width:759px){
  #dlgLead .lead{padding:8px 20px calc(20px + env(safe-area-inset-bottom,0px))}
  #dlgLead .lead .x{top:0}
}
@media (max-width:599px){#dlgLead{margin:auto 0 0;width:100%;max-width:100%;border-radius:var(--r-panel) var(--r-panel) 0 0;border-bottom:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
</style>

/* ===== produção (out/2026): o que o protótipo não tinha ===== */
[hidden]:not([hidden=until-found i]){display:none!important}
html{background:var(--bg)}
/* título do card é link (crawler e abrir em outra aba); o clique simples abre os detalhes */
.card h4 a{color:inherit;text-decoration:none}
.card h4 a:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px;border-radius:4px}
.card .ttl::after{content:none}
/* "Em alta" na régua de chips: temas do lugar */
.rail-lbl{display:inline-flex;align-items:center;flex:none;padding:0 4px 0 2px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink);white-space:nowrap}
/* patrocinado */
.cat.pat,.ph-tag{background:var(--brand)!important;color:var(--on-brand)}
.card.promo{border-color:var(--brand-line)}
.card.promo .actions{justify-content:flex-end}
.promo-hero{display:flex;gap:16px;margin-top:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px;contain:paint}
.promo-hero::-webkit-scrollbar{display:none}
.ph{flex:1 0 min(560px,100%);scroll-snap-align:start;display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:center;padding:12px 20px 12px 12px;border-radius:var(--r-card);background:radial-gradient(90% 120% at 0% 0%,var(--brand-glow),transparent 60%),var(--surface-2);border:1px solid var(--brand-line);transition:transform .3s var(--ease),border-color .3s}
.ph:hover{transform:translateY(-2px);border-color:var(--brand-hi)}
.ph .poster{border-radius:var(--r-thumb)}
.ph-b{display:flex;flex-direction:column;gap:6px;min-width:0}
.ph-tag{align-self:flex-start;font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-tag)}
.ph b{font-family:var(--f-display);font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ph small{font-family:var(--f-mono);font-size:12px;color:var(--brand-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-go{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--brand-ink)}
@media (max-width:599px){.ph{grid-template-columns:112px 1fr;gap:12px;padding:10px 14px 10px 10px}.ph b{font-size:17px}.ph .poster{aspect-ratio:4/5}}
/* evento aberto por link */
.h1.ev{font-size:48px;line-height:1.05}
@media (max-width:759px){.h1.ev{font-size:30px}}
.ev-hero{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.ev-box{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.ev-box .dp-info{padding-right:0}
.ev-box .dp-info .xt{white-space:pre-line}
.ev-note{padding:20px 24px;border-radius:var(--r-card);background:var(--surface);border:1px dashed var(--line-3)}
.ev-note h2{font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:-.02em}
.ev-note p{margin-top:6px;color:var(--text-2);font-size:14px}
.ev-more{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink);cursor:pointer}
@media (max-width:860px){.ev-box{grid-template-columns:1fr;gap:20px}.ev-box .dp-media .poster{max-height:360px}}
@media (max-width:599px){.ev-box{padding:16px}}
/* descrição com quebras de linha do scraper */
.about p,.dp-info .xt{white-space:pre-line}
/* grupo curado: só a lista */
body.grupo .bar,body.grupo .cal-rail,body.grupo .scrub{display:none!important}
/* cidades do estado nos links de SEO */
.seo-all{grid-column:1 / -1}
.seo-all button{padding:12px 0;font-size:14px;font-weight:600;color:var(--brand-ink);text-decoration:underline;text-underline-offset:4px}
.seo a span:empty{display:none}
/* busca do lead: erro geral */
#errLead:empty{display:none}
.opt.wait{cursor:default}
.lead .stores img{height:40px;width:auto}
/* ranking: a miniatura acompanha a altura do texto (com 60px fixos e presa no topo, sobrava espaço
   embaixo dela; logos quadrados, comuns nos destaques reais, pareciam fora do lugar) */
.mini{align-items:stretch}
.mini .poster{height:auto;min-height:60px;align-self:stretch}
/* card aberto no celular: as mesmas informações do painel do desktop (imagem grande, categoria, compartilhar) */
.about .ab-img .poster{border-radius:var(--r-thumb);margin:12px 0 4px}
.about .ab-img:empty{display:none}
.about .ab-act{display:flex;gap:8px;margin-top:12px}
.about .ab-act .btn{min-height:44px}
.card .about .ab-img .poster{width:100%;height:auto;aspect-ratio:16/10;margin:12px 0 4px;grid-row:auto;align-self:auto;border-radius:var(--r-thumb)}
/* ranking no desktop: termina na borda do conteúdo, com 4 cards inteiros (o 5º só pelas setas).
   Vazar até a borda da tela fica bom no celular, onde a ponta do próximo card avisa que rola;
   no desktop parecia card quebrado. */
@media (min-width:760px){
  .rank{margin-right:-6px;padding-right:6px}
  /* larguras pela gap real (12px): o último card visível fecha na mesma linha do botão Filtros */
  .mini{width:calc((100% - 24px) / 3)}
}
@media (min-width:1180px){.mini{width:calc((100% - 36px) / 4)}}
/* pop-up do "Baixar o app" (desktop): a própria faixa do app dentro de um diálogo sem moldura */
#dlgApp{width:calc(100vw - 48px);max-width:var(--wrap);max-height:calc(100dvh - 32px);background:none;border:0;border-radius:var(--r-band);box-shadow:0 40px 96px -24px var(--shadow);overflow:visible}
#dlgApp[open]{display:block}
#dlgApp .dlg-app-slot{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;border-radius:var(--r-band);scrollbar-width:none}
#dlgApp .dlg-app-slot::-webkit-scrollbar{display:none}
.dlg-app-x{position:absolute;top:16px;right:16px;z-index:5;background:var(--glass-surface);border-color:var(--line-2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* telas baixas: a faixa encolhe a altura do palco para caber sem rolar */
@media (min-width:901px) and (max-height:880px){#dlgApp .app{padding-top:48px;padding-bottom:48px}#dlgApp .stage{height:600px}}
@media (min-width:901px) and (max-height:800px){
  #dlgApp .app{padding-top:36px;padding-bottom:36px}
  #dlgApp .app h2{font-size:56px}
  #dlgApp .steps{margin-top:20px}
  #dlgApp .app-cta{margin-top:20px}
  #dlgApp .stage{height:540px}
  #dlgApp .tilt{scale:.88}
}
@media (min-width:901px) and (max-height:740px){
  #dlgApp .app{padding-top:28px;padding-bottom:28px}
  #dlgApp .app h2{font-size:48px;margin-top:16px}
  #dlgApp .stage{height:500px}
  #dlgApp .tilt{scale:.8}
}

/* "Ver mais momentos": depois das páginas automáticas, para o rodapé ficar alcançável */
.more{display:flex;margin:32px auto 0;min-height:44px;padding-inline:24px}
.more[hidden]{display:none}
.aviso{margin:12px 0 0;font-size:12px;line-height:1.4;color:var(--text-3)}

/* Página de evento: a og-sondar põe .ev-boot no body e o sondar.js tira ao desenhar a caixa do
   topo. Até lá o que fica abaixo dela não aparece, para não pular quando ela entra (CLS).
   Se o JS falhar, tudo aparece sozinho em 4 s. */
.ev-boot #flow,.ev-boot #app,.ev-boot .foot{visibility:hidden;animation:evBoot 0s 4s forwards!important} /* !important: o reduced-motion zera animation e o plano B sumiria */
@keyframes evBoot{to{visibility:visible}}

/* CLS (04/11/2026). Medido no Rio, celular: a barra crescia 44 px quando os chips entravam, a lista ia de 0 a
   3.900 px empurrando o "Baixe o app" e o "Fim de semana" entrava no topo empurrando a agenda.
   - #quick: altura de uma linha de chips (36 + 12 de respiro; 44 + 12 no celular) antes do JS desenhar;
   - #list.boot: a tela toda reservada até a 1a página de eventos chegar (o sondar.js tira a classe);
   - .mini-sk: esqueleto do ranking, que a og-sondar põe quando a cidade tem "Fim de semana". */
#quick{min-height:48px}
#list.boot{min-height:100vh}
.mini-sk{height:137px;padding:0;background:var(--surface-2)}
@media (max-width:759px){#quick{min-height:56px}}
/* os cards do "Fim de semana" mudavam de altura (153 a 176 px) até a fonte chegar e mexiam na agenda */
#rank .mini{min-height:137px}