:root{
  --bg:#081018;
  --bg2:#111823;
  --text:#f8f7f2;
  --muted:rgba(248,247,242,.68);
  --line:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.075);
  --glass2:rgba(255,255,255,.105);
  --shadow:0 24px 80px rgba(0,0,0,.45);
  --radius:28px;
  --rainbow:linear-gradient(120deg,#ff245d,#ff8a1c,#ffe600,#33e36f,#23c7ff,#7e56ff,#ff4bd8);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,36,93,.18), transparent 26%),
    radial-gradient(circle at 92% 8%, rgba(35,199,255,.18), transparent 26%),
    radial-gradient(circle at 70% 85%, rgba(255,75,216,.13), transparent 30%),
    linear-gradient(145deg,#06090d 0%,#09131f 48%,#140918 100%);
  overflow-x:hidden;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.3;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:1px 6px;
  mix-blend-mode:overlay;
}

button,input{font:inherit}
button{cursor:pointer}
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.cl-app{padding:18px 14px 96px}
.cl-shell{max-width:1180px;margin:0 auto}

.cl-hero{
  position:relative;
  min-height:470px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:34px;
  padding:28px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.25)),
    url("./assets/header-fundo.webp") center/cover;
  box-shadow:var(--shadow);
}

.cl-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,36,93,.22), transparent 28%),
    radial-gradient(circle at 80% 60%, rgba(35,199,255,.20), transparent 34%),
    linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.72));
  pointer-events:none;
}

.cl-hero > *{position:relative;z-index:1}
.cl-hero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.cl-brand{display:flex;align-items:center;gap:12px}
.cl-brand__mark{
  width:44px;height:44px;border-radius:15px;
  display:grid;place-items:center;
  font-family:Georgia,serif;
  font-size:34px;line-height:1;
  color:#fff;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 24px rgba(255,255,255,.10);
}
.cl-brand__name{display:block;font-size:24px;letter-spacing:-.04em}
.cl-brand__name strong{font-weight:900}
.cl-brand__tagline{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#ff5e64;
}

.cl-route-btn{
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  border-radius:999px;
  padding:10px 12px 10px 16px;
  display:flex;align-items:center;gap:10px;
}
.cl-route-btn strong{
  width:26px;height:26px;border-radius:999px;
  display:grid;place-items:center;
  color:#111;background:#fff;
}

.cl-hero__content{max-width:760px;margin-top:70px}
.cl-eyebrow{
  margin:0 0 10px;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:11px;
  color:rgba(255,255,255,.72);
}
.cl-hero h1{
  margin:0;
  font-family:"Archivo Black",Inter,sans-serif;
  font-size:clamp(46px,10vw,104px);
  line-height:.9;
  letter-spacing:-.075em;
  text-transform:uppercase;
}
.cl-hero h1:after{
  content:"";
  display:block;
  width:180px;height:4px;
  margin-top:22px;
  border-radius:999px;
  background:var(--rainbow);
  box-shadow:0 0 18px rgba(255,75,216,.4);
}
.cl-hero__text{
  max-width:680px;
  margin:20px 0 0;
  color:rgba(255,255,255,.82);
  font-size:18px;
  line-height:1.55;
}
.cl-hero__badges{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:24px;
}
.cl-hero__badges span{
  padding:9px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);
  font-size:13px;
}

.cl-holo-sticker{
  position:absolute;
  top:92px;right:34px;
  width:112px;height:112px;border-radius:999px;
  display:grid;place-items:center;
  color:#040404;
  background:
    radial-gradient(circle at 20% 20%,#fff 0 8%,transparent 24%),
    conic-gradient(from 20deg,#ff3d67,#ffd84d,#4eff91,#35d7ff,#9f7bff,#ff73dc,#ff3d67);
  box-shadow:0 16px 60px rgba(255,255,255,.18), inset 0 0 24px rgba(255,255,255,.72);
  transform:rotate(8deg);
}
.cl-holo-sticker span{
  font-family:Georgia,serif;
  font-size:76px;line-height:1;
}

.cl-controls{
  margin-top:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  border-radius:30px;
  padding:16px;
  backdrop-filter:blur(22px);
  box-shadow:var(--shadow);
}

.cl-search-wrap{position:relative}
.cl-search{
  width:100%;
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  color:#fff;
  background:rgba(0,0,0,.28);
  padding:18px 48px 18px 18px;
  outline:none;
}
.cl-search:focus{
  border-color:rgba(35,199,255,.68);
  box-shadow:0 0 0 4px rgba(35,199,255,.12);
}
.cl-search::placeholder{color:rgba(255,255,255,.48)}
.cl-clear-search{
  position:absolute;
  right:10px;top:50%;
  transform:translateY(-50%);
  border:0;background:transparent;color:#fff;
  width:36px;height:36px;border-radius:999px;
  font-size:28px;line-height:1;
}

.cl-filter-label{
  margin:16px 0 8px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.56);
}
.cl-chip-row,.cl-quick-row{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:none;
}
.cl-chip-row::-webkit-scrollbar,.cl-quick-row::-webkit-scrollbar{display:none}

.cl-chip,.cl-adult-toggle{
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  background:rgba(0,0,0,.27);
  border-radius:999px;
  padding:10px 13px;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  backdrop-filter:blur(16px);
  transition:.2s ease;
}
.cl-chip:hover,.cl-chip.is-active{
  border-color:rgba(255,255,255,.48);
  box-shadow:0 0 18px rgba(255,75,216,.22);
  background:rgba(255,255,255,.12);
}
.cl-chip.is-past{opacity:.45;filter:grayscale(1)}
.cl-chip.is-today{box-shadow:0 0 18px rgba(255,230,0,.24)}
.cl-chip.has-live:before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:#33e36f;
  box-shadow:0 0 14px #33e36f;
  animation:livePulse 1.2s infinite;
}
.cl-adult-toggle input{accent-color:#ff245d}
.cl-adult-toggle{margin-left:auto}

.cl-results-bar{
  margin:16px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  color:var(--muted);
}
.cl-results-bar strong{display:block;color:#fff}
.cl-results-bar button{
  border:1px solid rgba(255,255,255,.16);
  color:#fff;background:rgba(255,255,255,.06);
  border-radius:999px;
  padding:10px 13px;
}

.cl-events-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.cl-event-card{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.055));
  backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.30);
  transition:transform .2s ease, opacity .2s ease, filter .2s ease;
}
.cl-event-card:hover{transform:translateY(-3px)}
.cl-event-card__media{
  height:156px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 30%,var(--tag-color-a, #ff245d),transparent 36%),
    radial-gradient(circle at 82% 62%,var(--tag-color-b, #23c7ff),transparent 36%),
    linear-gradient(135deg,#171821,#090b10);
}
.cl-event-card__media:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.42));
}
.cl-event-card__image{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:.86;
}
.cl-event-card__body{padding:16px}
.cl-event-time{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px;
}
.cl-event-time strong{
  font-size:22px;
  letter-spacing:-.04em;
}
.cl-status-badge{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:999px;
  padding:7px 9px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
}
.cl-event-card h3{
  margin:0 0 10px;
  font-size:20px;
  line-height:1.08;
  letter-spacing:-.035em;
}
.cl-event-card p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
  font-size:14px;
}
.cl-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.cl-tag{
  display:inline-flex;align-items:center;
  border-radius:999px;
  padding:7px 9px;
  font-size:12px;font-weight:700;
  color:#fff;
  background:rgba(255,255,255,.075);
  border:1px solid color-mix(in srgb, var(--tag-color-a,#fff) 55%, transparent);
  box-shadow:0 0 16px color-mix(in srgb, var(--tag-color-a,#fff) 18%, transparent);
}
.cl-card-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-top:16px;
}
.cl-card-actions a,.cl-card-actions button{
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  background:rgba(0,0,0,.22);
  text-decoration:none;
  border-radius:14px;
  padding:10px 8px;
  text-align:center;
  font-size:13px;
  font-weight:700;
}
.cl-card-actions button.is-saved{
  background:var(--rainbow);
  color:#090909;
}

.cl-event-card.is-live{
  border-color:rgba(35,199,255,.70);
  box-shadow:0 0 24px rgba(35,199,255,.20),0 18px 50px rgba(0,0,0,.34);
}
.cl-event-card.is-live .cl-status-badge{
  background:rgba(51,227,111,.16);
  border-color:rgba(51,227,111,.55);
  animation:livePulse 1.2s infinite;
}
.cl-event-card.is-24h{
  border-color:rgba(120,255,190,.38);
  box-shadow:0 0 22px rgba(120,255,190,.14),0 18px 50px rgba(0,0,0,.34);
}
.cl-event-card.is-24h .cl-status-badge{
  background:rgba(120,255,190,.12);
  border-color:rgba(120,255,190,.36);
  animation:none;
}
.cl-event-card.is-past{
  opacity:.46;
  filter:grayscale(1);
}
.cl-event-card.is-past .cl-card-actions{display:none}

@keyframes livePulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.62;transform:scale(.96)}
}

.cl-route-panel{
  margin:16px 0;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  border-radius:28px;
  padding:16px;
  backdrop-filter:blur(18px);
}
.cl-route-panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.cl-route-panel__head h2{margin:0}
.cl-route-panel button{
  border:1px solid rgba(255,255,255,.16);
  color:#fff;background:rgba(0,0,0,.24);
  border-radius:999px;padding:10px 13px;
}
.cl-route-list{display:grid;gap:10px;margin-top:12px}
.cl-route-item{
  display:flex;justify-content:space-between;gap:12px;
  padding:12px;border-radius:16px;
  background:rgba(255,255,255,.07);
}
.cl-route-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

.cl-bottom-nav{
  position:fixed;
  left:50%;bottom:12px;
  transform:translateX(-50%);
  width:min(560px,calc(100% - 24px));
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  z-index:20;
  padding:8px;
  border-radius:24px;
  background:rgba(8,10,14,.72);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(22px);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.cl-bottom-nav button{
  min-width:0;
  border:0;
  color:#fff;
  background:rgba(255,255,255,.07);
  border-radius:18px;
  padding:9px 6px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-weight:800;
}
.cl-bottom-nav span{
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.cl-empty{
  grid-column:1/-1;
  padding:28px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:28px;
  background:rgba(255,255,255,.07);
  color:var(--muted);
  text-align:center;
}

@media (max-width:980px){
  .cl-events-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .cl-app{padding:10px 10px 92px}
  .cl-hero{min-height:560px;padding:20px;border-radius:28px}
  .cl-hero__top{align-items:flex-start}
  .cl-brand__name{font-size:21px}
  .cl-brand__tagline{font-size:8px}
  .cl-route-btn span{display:none}
  .cl-hero__content{margin-top:110px}
  .cl-holo-sticker{width:88px;height:88px;right:18px;top:84px}
  .cl-holo-sticker span{font-size:58px}
  .cl-controls{border-radius:24px;padding:12px}
  .cl-adult-toggle{margin-left:0}
  .cl-results-bar{align-items:flex-start;flex-direction:column}
  .cl-events-grid{grid-template-columns:1fr}
  .cl-event-card__media{height:185px}
}


/* ===== Ajustes v2: data por cor, busca rainbow, grupos por data e painel lateral ===== */

.cl-search-wrap{
  margin-bottom:14px;
  padding:2px;
  border-radius:24px;
  background:linear-gradient(120deg,#ff245d,#ff8a1c,#ffe600,#33e36f,#23c7ff,#7e56ff,#ff4bd8,#ff245d);
  background-size:260% 260%;
  animation:rainbowFlow 4.8s linear infinite;
  box-shadow:0 0 22px rgba(255,75,216,.22),0 0 38px rgba(35,199,255,.14);
}
.cl-search-wrap:focus-within{
  box-shadow:0 0 22px rgba(255,75,216,.42),0 0 54px rgba(35,199,255,.28);
}
.cl-search{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(5,8,12,.88);
  box-shadow:inset 0 0 24px rgba(255,255,255,.04);
}
.cl-clear-search{right:12px}

.cl-quick-row{
  margin-top:14px;
  margin-bottom:10px;
}

.cl-hero h1:after{
  background:linear-gradient(90deg,#ff245d,#ff8a1c,#ffe600,#33e36f,#23c7ff,#7e56ff,#ff4bd8,#ff245d);
  background-size:260% 100%;
  animation:rainbowFlow 2.8s linear infinite;
}

@keyframes rainbowFlow{
  0%{background-position:0% 50%}
  100%{background-position:260% 50%}
}

.cl-chip[disabled]{
  opacity:.32;
  filter:grayscale(1);
  cursor:not-allowed;
  pointer-events:none;
}

.cl-date-section{
  grid-column:1/-1;
  margin:10px 0 2px;
  padding:18px 18px;
  border-radius:26px;
  border:1px solid color-mix(in srgb, var(--day-color,#fff) 46%, transparent);
  background:
    linear-gradient(90deg,color-mix(in srgb, var(--day-color,#fff) 22%, transparent),rgba(255,255,255,.04)),
    rgba(255,255,255,.055);
  box-shadow:0 0 26px color-mix(in srgb, var(--day-color,#fff) 16%, transparent);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.cl-date-section h2{
  margin:0;
  font-family:"Archivo Black",Inter,sans-serif;
  font-size:clamp(26px,5vw,48px);
  line-height:.9;
  letter-spacing:-.055em;
  text-transform:uppercase;
}
.cl-date-section p{
  margin:6px 0 0;
  color:rgba(255,255,255,.72);
}
.cl-date-section__pill{
  flex:0 0 auto;
  border-radius:999px;
  padding:10px 12px;
  color:#111;
  font-weight:900;
  background:var(--day-color,#fff);
  box-shadow:0 0 20px color-mix(in srgb, var(--day-color,#fff) 40%, transparent);
}

.cl-chip[data-date]{
  border-color:color-mix(in srgb, var(--day-color,#fff) 38%, transparent);
  box-shadow:0 0 16px color-mix(in srgb, var(--day-color,#fff) 12%, transparent);
}
.cl-chip[data-date].is-active{
  background:linear-gradient(135deg,color-mix(in srgb, var(--day-color,#fff) 32%, transparent),rgba(255,255,255,.10));
  border-color:color-mix(in srgb, var(--day-color,#fff) 70%, transparent);
}

.cl-event-card{
  border-color:color-mix(in srgb, var(--day-color,#fff) 35%, rgba(255,255,255,.10));
}
.cl-event-card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--day-color,#fff) 22%, transparent),
             inset 0 0 34px color-mix(in srgb, var(--day-color,#fff) 8%, transparent);
  z-index:1;
}
.cl-event-card > *{position:relative;z-index:2}
.cl-event-card__date{
  position:absolute;
  left:12px;
  top:12px;
  z-index:3;
  border-radius:999px;
  padding:7px 9px;
  color:#111;
  background:var(--day-color,#fff);
  font-weight:900;
  font-size:12px;
  box-shadow:0 0 20px color-mix(in srgb, var(--day-color,#fff) 42%, transparent);
}

.cl-card-actions{
  grid-template-columns:repeat(4,1fr);
}
.cl-card-actions .is-disabled,
.cl-card-actions button[disabled]{
  opacity:.38;
  filter:grayscale(1);
  cursor:not-allowed;
}

.cl-route-panel{
  position:fixed;
  top:0;
  right:0;
  width:min(440px,92vw);
  height:100dvh;
  margin:0;
  z-index:50;
  border-radius:28px 0 0 28px;
  border-right:0;
  padding:22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,36,93,.22), transparent 36%),
    radial-gradient(circle at 100% 28%, rgba(35,199,255,.18), transparent 34%),
    rgba(8,12,18,.86);
  box-shadow:-30px 0 90px rgba(0,0,0,.52);
  overflow-y:auto;
  transform:translateX(0);
  animation:routeIn .22s ease both;
}
.cl-route-panel[hidden]{display:none!important}
.cl-app:has(.cl-route-panel:not([hidden])):before{
  content:"";
  position:fixed;
  inset:0;
  z-index:45;
  background:rgba(0,0,0,.52);
  backdrop-filter:blur(8px);
}
@keyframes routeIn{
  from{transform:translateX(100%)}
  to{transform:translateX(0)}
}

@media (max-width:700px){
  .cl-date-section{
    align-items:flex-start;
    flex-direction:column;
    border-radius:22px;
  }
  .cl-date-section__pill{font-size:13px}
  .cl-card-actions{
    grid-template-columns:repeat(2,1fr);
  }
}


/* ===== Ajustes v3: Domingo rainbow, logo real, icons SVG, salvos e +18 HOT ===== */

.cl-brand__logo{
  width:118px;
  max-height:48px;
  object-fit:contain;
  display:block;
}
.cl-brand__mark{
  flex:0 0 auto;
}

.cl-rainbow-word{
  display:inline-block;
  background:linear-gradient(90deg,#ff245d,#ff8a1c,#ffe600,#33e36f,#23c7ff,#7e56ff,#ff4bd8,#ff245d);
  background-size:260% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.16);
  filter:drop-shadow(0 0 14px rgba(255,75,216,.22));
  animation:rainbowFlow 2.4s linear infinite;
}

.cl-instagram-link{
  padding:9px 13px;
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(120deg,rgba(255,36,93,.16),rgba(35,199,255,.12));
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(14px);
  font-size:13px;
  box-shadow:0 0 18px rgba(255,75,216,.16);
}
.cl-instagram-link:hover{
  border-color:rgba(255,255,255,.45);
}

.cl-holo-sticker{
  background:conic-gradient(from 0deg,#ff245d,#ff8a1c,#ffe600,#33e36f,#23c7ff,#7e56ff,#ff4bd8,#ff245d);
  background-size:160% 160%;
  animation:stickerRainbow 3.2s linear infinite;
  color:#fff;
}
.cl-holo-sticker:before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:999px;
  background:radial-gradient(circle at 25% 18%,rgba(255,255,255,.85),transparent 18%),
             linear-gradient(135deg,rgba(255,255,255,.45),rgba(255,255,255,.05));
  mix-blend-mode:screen;
}
.cl-sticker-asterisk{
  position:relative;
  width:60px;
  height:60px;
  fill:none;
  stroke:#fff;
  stroke-width:12;
  stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.55));
  z-index:2;
}
@keyframes stickerRainbow{
  0%{filter:hue-rotate(0deg) saturate(1.2)}
  100%{filter:hue-rotate(360deg) saturate(1.2)}
}

/* Vibes em 2 linhas, com rolagem horizontal se precisar */
#cl-tag-filters{
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(2,auto);
  grid-auto-columns:max-content;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 0 10px;
}

/* Domingo da Parada: rainbow total */
.cl-chip[data-date="07/06"],
.cl-event-card[data-date="07/06"],
.cl-date-section[data-date="07/06"]{
  --day-color:#ffffff;
}
.cl-chip[data-date="07/06"]{
  background:linear-gradient(120deg,rgba(255,36,93,.20),rgba(255,230,0,.14),rgba(35,199,255,.18),rgba(255,75,216,.18));
  border-color:rgba(255,255,255,.32);
  box-shadow:0 0 18px rgba(255,75,216,.22),0 0 24px rgba(35,199,255,.16);
}
.cl-event-card[data-date="07/06"],
.cl-date-section[data-date="07/06"]{
  border-color:rgba(255,255,255,.36);
  background:
    linear-gradient(135deg,rgba(255,36,93,.16),rgba(255,138,28,.10),rgba(255,230,0,.09),rgba(51,227,111,.10),rgba(35,199,255,.12),rgba(126,86,255,.14),rgba(255,75,216,.14)),
    rgba(255,255,255,.06);
  box-shadow:0 0 24px rgba(255,75,216,.18),0 0 42px rgba(35,199,255,.12),0 18px 50px rgba(0,0,0,.34);
}
.cl-event-card[data-date="07/06"]:before{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),
             inset 0 0 34px rgba(255,75,216,.08);
}
.cl-event-card[data-date="07/06"] .cl-event-card__date,
.cl-date-section[data-date="07/06"] .cl-date-section__pill{
  color:#08090c;
  background:linear-gradient(90deg,#ff245d,#ff8a1c,#ffe600,#33e36f,#23c7ff,#7e56ff,#ff4bd8);
  background-size:220% 100%;
  animation:rainbowFlow 2.8s linear infinite;
}

/* Estado demo para testar visual */
.cl-event-card.is-demo-live{
  outline:2px solid rgba(51,227,111,.7);
}
.cl-event-card.is-demo-past{
  outline:2px solid rgba(255,255,255,.25);
}

/* Adult toggle vermelho quando ativo */
.cl-adult-toggle{
  transition:.22s ease;
}
.cl-adult-toggle:has(input:checked){
  background:linear-gradient(135deg,rgba(255,36,93,.92),rgba(255,90,40,.78));
  border-color:rgba(255,255,255,.28);
  box-shadow:0 0 20px rgba(255,36,93,.36),0 0 40px rgba(255,90,40,.20);
}

/* Badges HOT em cards adultos */
.cl-hot-badge{
  position:absolute;
  top:12px;
  right:12px;
  z-index:4;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:linear-gradient(135deg,#ff245d,#ff8a1c);
  box-shadow:0 0 18px rgba(255,36,93,.45);
  border:1px solid rgba(255,255,255,.34);
}

.cl-btn-icon,
.cl-nav-icon,
.cl-action-icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
}
#cl-clear-filters,
#cl-close-route{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
#cl-clear-filters .cl-btn-icon{
  color:#fff;
  opacity:.9;
}
#cl-close-route .cl-btn-icon{
  width:20px;
  height:20px;
}

.cl-route-remove{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0!important;
  border-radius:999px!important;
  background:rgba(255,36,93,.14)!important;
  border:1px solid rgba(255,36,93,.35)!important;
  color:#ff596f!important;
}
.cl-route-remove svg{
  width:18px;
  height:18px;
}
.cl-route-remove svg path{
  fill:currentColor;
}

.cl-card-actions button[data-share]{
  display:flex;
  align-items:center;
  justify-content:center;
}
.cl-card-actions button[data-share] svg{
  width:17px;
  height:17px;
}
.cl-card-actions button[data-share] path{
  fill:#fff;
}

.cl-bottom-nav{
  grid-template-columns:repeat(6,1fr);
}
.cl-bottom-nav button{
  color:#fff;
}
.cl-bottom-nav .cl-nav-icon{
  width:18px;
  height:18px;
}

@media (max-width:700px){
  .cl-brand__logo{
    width:96px;
    max-height:42px;
  }
  .cl-bottom-nav{
    gap:5px;
    padding:7px;
  }
  .cl-bottom-nav button{
    padding:8px 3px;
  }
  .cl-bottom-nav span{
    font-size:9px;
  }
}


/* ===== Ajustes v4: salvos lateral, SVGs finais, card salvo, limpeza ativa ===== */

.cl-route-btn{
  gap:9px;
}
.cl-route-btn .cl-asterisk-svg{
  width:18px;
  height:18px;
  color:#fff;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.35));
}
.cl-instagram-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.cl-instagram-icon{
  width:18px;
  height:18px;
  color:#fff;
}
.cl-sticker-asterisk{
  width:62px;
  height:62px;
  color:#fff;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.65));
}
.cl-sticker-asterisk path{
  fill:currentColor;
  stroke:none;
}

.cl-rainbow-word{
  line-height:1.08;
  padding:0 .08em .06em .035em;
  margin:0 -.04em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  background-size:320% 100%;
  background-position:0 52%;
  overflow:visible;
}

/* Limpar filtros desabilitado/acionado */
#cl-clear-filters:disabled{
  opacity:.36;
  filter:grayscale(1);
  cursor:not-allowed;
}
#cl-clear-filters.is-clearing{
  animation:clearBurst .42s ease both;
}
@keyframes clearBurst{
  0%{transform:scale(1);box-shadow:0 0 0 rgba(255,255,255,0)}
  45%{transform:scale(1.06);box-shadow:0 0 22px rgba(255,75,216,.42),0 0 36px rgba(35,199,255,.22)}
  100%{transform:scale(1);box-shadow:0 0 0 rgba(255,255,255,0)}
}

/* Card salvo */
.cl-event-card.is-saved-card{
  border-color:rgba(255,230,0,.72)!important;
  box-shadow:0 0 26px rgba(255,230,0,.20),0 0 48px rgba(255,75,216,.12),0 18px 50px rgba(0,0,0,.34);
}
.cl-event-card.is-saved-card:before{
  box-shadow:inset 0 0 0 1px rgba(255,230,0,.36),
             inset 0 0 34px rgba(255,230,0,.10);
}
.cl-event-card.is-saved-card .cl-card-actions button.is-saved{
  background:linear-gradient(135deg,#ffe600,#ff8a1c);
  color:#08090c;
  box-shadow:0 0 18px rgba(255,230,0,.24);
}

/* Relógio antes do horário */
.cl-event-hour{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.cl-clock-icon{
  width:18px;
  height:18px;
  color:currentColor;
  opacity:.92;
}
.cl-clock-icon path{
  fill:currentColor;
}

/* HOT badge com SVG branco */
.cl-hot-badge svg{
  width:20px;
  height:20px;
}
.cl-hot-badge svg path{
  fill:#fff;
}

/* Bottom nav final sem Geral */
.cl-bottom-nav{
  grid-template-columns:repeat(5,1fr);
}
.cl-bottom-nav button.is-active{
  background:linear-gradient(135deg,rgba(255,36,93,.28),rgba(35,199,255,.18));
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 0 18px rgba(255,75,216,.20);
}
.cl-bottom-nav button.is-tap{
  animation:navTap .28s ease both;
}
@keyframes navTap{
  0%{transform:scale(1)}
  55%{transform:scale(.92)}
  100%{transform:scale(1)}
}

@media (max-width:700px){
  .cl-sticker-asterisk{
    width:48px;
    height:48px;
  }
}


/* ===== Ajustes v5: hero pills, painel com overlay, bottom nav scroll, hover refinado ===== */

/* Mostrar +18 não conta para habilitar limpar filtros */
#cl-clear-filters:disabled{
  opacity:.34;
}

/* Hero pills normalizados */
.cl-hero__badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
  align-items:center;
}
.cl-hero__badges .cl-hero-pill,
.cl-hero__badges .cl-instagram-link{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 15px;
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.105);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 28px rgba(0,0,0,.18);
  font-size:14px;
  font-weight:700;
}
.cl-hero__badges .cl-instagram-link{
  background:linear-gradient(120deg,rgba(255,36,93,.22),rgba(35,199,255,.16));
}
.cl-instagram-icon{
  width:19px;
  height:19px;
  color:#fff;
  flex:0 0 auto;
}

/* Sticker com centro holográfico no meio */
.cl-holo-sticker{
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.88) 0 7%,rgba(255,255,255,.32) 8% 16%,transparent 28%),
    conic-gradient(from 0deg at 50% 50%,#ff245d,#ff8a1c,#ffe600,#33e36f,#23c7ff,#7e56ff,#ff4bd8,#ff245d);
  animation:stickerRainbowSoft 8s linear infinite;
}
.cl-holo-sticker:before{
  inset:0;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.38),transparent 42%),
    linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.04));
}
@keyframes stickerRainbowSoft{
  0%{filter:hue-rotate(0deg) saturate(1.12)}
  100%{filter:hue-rotate(360deg) saturate(1.12)}
}

/* Rainbow mais soft */
.cl-rainbow-word,
.cl-hero h1:after,
.cl-search-wrap{
  animation-duration:7.5s;
}
.cl-hero h1:after{
  animation-duration:6.5s;
}

/* Painel lateral com overlay clicável e animação de saída */
.cl-route-overlay{
  position:fixed;
  inset:0;
  z-index:45;
  background:rgba(0,0,0,.50);
  backdrop-filter:blur(8px);
  cursor:none;
  opacity:0;
  transition:opacity .26s ease;
}
.cl-route-overlay.is-visible{
  opacity:1;
}
.cl-route-overlay:after{
  content:"×";
  position:fixed;
  pointer-events:none;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#ff596f;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,89,111,.38);
  box-shadow:0 0 18px rgba(255,89,111,.24);
  left:var(--mx, 50%);
  top:var(--my, 50%);
  transform:translate(-50%,-50%);
  font-size:28px;
  line-height:1;
}
.cl-route-panel{
  transform:translateX(110%);
  opacity:0;
  transition:transform .28s cubic-bezier(.2,.75,.2,1), opacity .22s ease;
  animation:none!important;
}
.cl-route-panel.is-open{
  transform:translateX(0);
  opacity:1;
}
.cl-route-panel.is-closing{
  transform:translateX(110%);
  opacity:0;
}
.cl-app:has(.cl-route-panel:not([hidden])):before{
  display:none!important;
}
.cl-route-panel__head h2{
  display:flex;
  align-items:center;
  gap:9px;
}
.cl-panel-title-icon{
  width:25px;
  height:25px;
  color:#fff;
}
.cl-route-actions button,
#cl-close-route{
  transition:.2s ease;
}
.cl-route-actions button:hover,
#cl-close-route:hover,
.cl-route-remove:hover{
  transform:translateY(-2px);
  box-shadow:0 0 18px rgba(255,75,216,.18),0 0 30px rgba(35,199,255,.12);
}
.cl-route-actions .cl-btn-icon{
  width:18px;
  height:18px;
  color:#fff;
}

/* Card actions hover */
.cl-card-actions a,
.cl-card-actions button{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.cl-card-actions a:hover,
.cl-card-actions button:not([disabled]):hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.38);
  box-shadow:0 0 18px rgba(255,75,216,.16),0 0 26px rgba(35,199,255,.10);
  background:rgba(255,255,255,.12);
}

/* Salvo rainbow */
.cl-event-card.is-saved-card{
  border-color:rgba(255,255,255,.58)!important;
  box-shadow:0 0 28px rgba(255,75,216,.20),0 0 46px rgba(35,199,255,.16),0 18px 50px rgba(0,0,0,.34);
}
.cl-event-card.is-saved-card:before{
  background:linear-gradient(120deg,rgba(255,36,93,.10),rgba(255,230,0,.07),rgba(35,199,255,.10),rgba(255,75,216,.10));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),
             inset 0 0 38px rgba(255,75,216,.09);
}
.cl-event-card.is-saved-card .cl-card-actions button.is-saved{
  background:linear-gradient(90deg,#ff245d,#ff8a1c,#ffe600,#33e36f,#23c7ff,#7e56ff,#ff4bd8,#ff245d);
  background-size:240% 100%;
  animation:rainbowFlow 6.5s linear infinite;
  color:#08090c;
}
.cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover{
  font-size:0;
}
.cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover:after{
  content:"Remover";
  font-size:13px;
}

/* Barra inferior aparece só após scroll */
.cl-bottom-nav{
  transform:translateX(-50%) translateY(120%);
  opacity:0;
  pointer-events:none;
  transition:transform .32s cubic-bezier(.2,.75,.2,1), opacity .24s ease;
}
.cl-bottom-nav.is-visible{
  transform:translateX(-50%) translateY(0);
  opacity:1;
  pointer-events:auto;
}
.cl-bottom-nav button{
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cl-bottom-nav button:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.14);
  box-shadow:0 0 18px rgba(255,75,216,.16);
}

/* Botões de rota mais bonitos */
.cl-route-actions button{
  display:inline-flex;
  align-items:center;
  gap:8px;
}


/* ===== Ajustes v6: cursor X, ordenação passados, calendário, painel salvo refinado ===== */

/* Cursor X externo só aparece quando o mouse está na área fora do painel */
.cl-route-overlay{
  cursor:default;
}
.cl-route-overlay:after{
  content:"×";
  position:fixed;
  pointer-events:none;
  left:var(--mx, -999px);
  top:var(--my, -999px);
  transform:translate(-50%,-50%);
  width:auto;
  height:auto;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:none;
  color:#fff;
  font-size:36px;
  font-weight:300;
  line-height:1;
  opacity:0;
  transition:opacity .12s ease;
  text-shadow:0 0 12px rgba(255,255,255,.38),0 0 18px rgba(255,75,216,.20);
}
.cl-route-overlay.is-visible.is-hovering:after{
  opacity:1;
}

/* Painel: título e itens salvos */
.cl-route-panel__head h2{
  font-size:26px;
  letter-spacing:-.04em;
}
.cl-panel-title-icon{
  width:32px;
  height:32px;
}
.cl-route-item{
  position:relative;
  overflow:hidden;
  transition:transform .22s ease, opacity .22s ease, max-height .26s ease, margin .26s ease, padding .26s ease;
  max-height:140px;
}
.cl-route-item.is-removing{
  opacity:0;
  transform:translateX(26px) scale(.98);
  max-height:0;
  padding-top:0;
  padding-bottom:0;
  margin-top:-10px;
  margin-bottom:-10px;
}
.cl-route-item__time{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:900;
  font-size:13px;
  margin-bottom:4px;
}
.cl-route-item__time .date-color{
  color:var(--route-day-color,#fff);
  text-shadow:0 0 14px color-mix(in srgb, var(--route-day-color,#fff) 42%, transparent);
}
.cl-route-item__title{
  color:#fff;
  font-weight:900;
  line-height:1.16;
  letter-spacing:-.02em;
}
.cl-route-item small{
  color:rgba(255,255,255,.62);
}

/* Card encerrado fica frio, sem hover */
.cl-event-card.is-past{
  cursor:default;
}
.cl-event-card.is-past:hover{
  transform:none!important;
}
.cl-event-card.is-past .cl-card-actions a,
.cl-event-card.is-past .cl-card-actions button{
  pointer-events:none;
}

/* Sticker clicável */
.cl-holo-sticker{
  text-decoration:none;
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.cl-holo-sticker:hover{
  transform:rotate(8deg) translateY(-4px) scale(1.045);
  box-shadow:0 22px 70px rgba(255,255,255,.22), inset 0 0 30px rgba(255,255,255,.76),0 0 28px rgba(255,75,216,.22);
}
.cl-sticker-asterisk{
  color:#050505!important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.42));
}

/* Salvo hover: remove rainbow quando vira Remover */
.cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover{
  background:rgba(0,0,0,.22);
  color:#fff;
  animation:none;
}

/* Botão em breve/avise-me */
.cl-card-actions button[data-calendar]{
  font-size:13px;
}
.cl-card-actions button[data-calendar]:hover{
  font-size:0;
}
.cl-card-actions button[data-calendar]:hover:after{
  content:"Avise-me";
  font-size:13px;
}

/* Tooltips nativos ajudam, mas visualmente marcamos tags adultas bloqueadas */
.cl-chip[data-tag="x"]:disabled,
.cl-chip[data-tag="cruising"]:disabled,
.cl-chip[data-tag="sauna"]:disabled{
  pointer-events:auto;
  cursor:help;
}

/* Botões salvos no painel */
.cl-route-actions button:hover{
  border-color:rgba(255,255,255,.38);
}

/* Ajuste fino da palavra PARADA */
.cl-rainbow-word{
  padding-right:.13em;
  padding-left:.06em;
  margin-right:-.02em;
}


/* ===== Ajustes v7: badge em breve, pin local, cursor externo e passados no fim absoluto ===== */

/* Cursor real some somente no overlay externo */
.cl-route-overlay.is-visible.is-hovering{
  cursor:none;
}

/* Badge "Em breve" correto no canto superior do card vira Avise-me no hover */
.cl-status-badge[data-status="upcoming"]{
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.cl-status-badge[data-status="upcoming"]:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.16);
  box-shadow:0 0 16px rgba(255,75,216,.18),0 0 24px rgba(35,199,255,.12);
  font-size:0;
}
.cl-status-badge[data-status="upcoming"]:hover:after{
  content:"Avise-me";
  font-size:11px;
}

/* Botão Site volta a ser normal/desabilitado */
.cl-card-actions .is-disabled{
  opacity:.38;
  filter:grayscale(1);
  cursor:not-allowed;
}

/* Local com pin */
.cl-event-venue{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:2px!important;
}
.cl-pin-icon{
  width:15px;
  height:15px;
  color:rgba(255,255,255,.72);
  flex:0 0 auto;
}
.cl-pin-icon path{
  fill:currentColor;
}

/* Separador de encerrados quando existirem cards passados */
.cl-past-section{
  grid-column:1/-1;
  margin:22px 0 2px;
  padding:16px 18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.62);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.cl-past-section h2{
  margin:0;
  font-size:18px;
  letter-spacing:-.03em;
}
.cl-past-section span{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
}


/* ===== Ajustes v8: chips centralizados, links locais, avise-me e live dot ===== */

/* Chips/filtros com conteúdo centralizado e largura proporcional */
.cl-chip{
  justify-content:center;
  text-align:center;
  width:max-content;
  max-width:100%;
}
#cl-tag-filters .cl-chip{
  min-width:auto;
  padding-left:15px;
  padding-right:15px;
}
#cl-tag-filters .cl-chip[data-tag="x"]{
  min-width:74px;
  padding-left:14px;
  padding-right:14px;
}
#cl-tag-filters .cl-chip[data-tag="tribal"]{
  min-width:128px;
}
#cl-tag-filters .cl-chip[data-tag="cruising"],
#cl-tag-filters .cl-chip[data-tag="eletronico"]{
  min-width:142px;
}

/* Ponto verde do filtro "Rolando agora" igual ao card */
.cl-live-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:#33e36f;
  box-shadow:0 0 10px #33e36f,0 0 18px rgba(51,227,111,.45);
  display:inline-block;
  flex:0 0 auto;
  animation:livePulse 1.2s infinite;
}

/* Botão Hoje desabilitado */
.cl-chip--quick[disabled]{
  opacity:.34;
  filter:grayscale(1);
  cursor:not-allowed;
  pointer-events:none;
}

/* Avise-me badge alinhado e sem quebra torta */
.cl-status-badge[data-status="upcoming"]{
  min-width:84px;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
}
.cl-status-badge[data-status="upcoming"]:hover{
  min-width:84px;
  padding-left:10px;
  padding-right:10px;
  line-height:1;
}
.cl-status-badge[data-status="upcoming"]:hover:after{
  content:"AVISE-ME";
  font-size:11px;
  line-height:1;
  white-space:nowrap;
}

/* Hover dos chips mais regular */
.cl-chip:hover:not([disabled]){
  transform:translateY(-1px);
}

/* Pequeno ajuste visual para chip X */
.cl-tag:has(+ .nope){}

/* Garantir que links externos abram com aparência consistente */
.cl-card-actions a[href*="dedalosbar"],
.cl-card-actions a[href*="tnwbrazil"]{
  border-color:rgba(255,255,255,.26);
}


/* ===== Ajustes v9: chips vibes compactos, avise-me fixo, route colorido ===== */

/* Vibes: remove buracos grandes e deixa cada botão no tamanho do conteúdo */
#cl-tag-filters{
  grid-auto-columns:auto;
  column-gap:10px;
  row-gap:10px;
  align-items:center;
}
#cl-tag-filters .cl-chip{
  min-width:0!important;
  width:auto!important;
  justify-self:start;
  padding-left:14px;
  padding-right:14px;
  white-space:nowrap;
}
#cl-tag-filters .cl-chip[data-tag="x"]{
  width:74px!important;
  min-width:74px!important;
}

/* Avise-me ocupa exatamente o mesmo espaço visual do Em breve */
.cl-status-badge[data-status="upcoming"]{
  width:92px;
  min-width:92px;
  max-width:92px;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}
.cl-status-badge[data-status="upcoming"]:hover{
  width:92px;
  min-width:92px;
  max-width:92px;
  padding-left:9px;
  padding-right:9px;
}
.cl-status-badge[data-status="upcoming"]:hover:after{
  content:"AVISE-ME";
  display:inline-block;
  width:100%;
  text-align:center;
  font-size:10px;
  letter-spacing:.055em;
}

/* Locais salvos: borda fina e data/horário na cor do dia */
.cl-route-item{
  border:1px solid color-mix(in srgb, var(--route-day-color,#fff) 42%, transparent);
  box-shadow:inset 0 0 20px color-mix(in srgb, var(--route-day-color,#fff) 6%, transparent);
}
.cl-route-item__time{
  color:var(--route-day-color,#fff);
  text-shadow:0 0 14px color-mix(in srgb, var(--route-day-color,#fff) 45%, transparent);
}
.cl-route-item__time span{
  color:inherit;
}
.cl-route-item__time .date-color{
  color:inherit;
}


/* ===== Ajustes v10: chips Vibes e destaque da Parada ===== */

#cl-tag-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
}

#cl-tag-filters .cl-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 16px;
  white-space:nowrap;
  line-height:1;
  box-sizing:border-box;
}

#cl-tag-filters .cl-chip[data-tag="x"]{
  min-width:88px !important;
  width:88px !important;
  padding-left:16px !important;
  padding-right:16px !important;
}

#cl-tag-filters .cl-chip[data-tag="eletronico"]{
  min-width:142px !important;
}

#cl-tag-filters .cl-chip[data-tag="open_bar"]{
  min-width:134px !important;
}

#cl-tag-filters .cl-chip[data-tag="day_party"]{
  min-width:126px !important;
}

#cl-tag-filters .cl-chip[data-tag="cruising"]{
  min-width:132px !important;
}

#cl-tag-filters .cl-chip[data-tag="sauna"]{
  min-width:114px !important;
}

#cl-tag-filters .cl-chip[data-tag="tribal"]{
  min-width:112px !important;
}

#cl-tag-filters .cl-chip .cl-tag-emoji{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Destaque principal: 30º Parada */
.cl-event-card.is-featured-parada{
  position:relative;
  border-color:rgba(255,255,255,.42) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 22px rgba(255,75,216,.12),
    0 0 34px rgba(35,199,255,.08),
    0 18px 50px rgba(0,0,0,.34);
}

.cl-event-card.is-featured-parada::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1.4px;
  background:linear-gradient(
    90deg,
    #ff245d,
    #ff8a1c,
    #ffe600,
    #33e36f,
    #23c7ff,
    #7e56ff,
    #ff4bd8,
    #ff245d
  );
  background-size:240% 100%;
  animation:rainbowFlow 7.4s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

.cl-event-card.is-featured-parada .cl-card-title{
  text-shadow:0 0 18px rgba(255,255,255,.08);
}


/* ===== Ajustes v11: imagens reais do Com Local ===== */

.cl-brand__logo{
  width:150px;
  max-height:58px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.28));
}

.cl-brand__name,
.cl-brand__tagline{
  display:none;
}

.cl-hero{
  background:
    linear-gradient(90deg,rgba(0,0,0,.80),rgba(0,0,0,.25)),
    url("./assets/header-fundo.webp") center/cover!important;
}

@media (max-width:700px){
  .cl-brand__logo{
    width:128px;
    max-height:52px;
  }
}


/* ===== Ajustes v12: logo maior no header ===== */

.cl-brand__logo{
  width:230px!important;
  max-height:86px!important;
}

@media (max-width:700px){
  .cl-brand__logo{
    width:180px!important;
    max-height:72px!important;
  }
}

@media (max-width:420px){
  .cl-brand__logo{
    width:158px!important;
    max-height:64px!important;
  }
}


/* ===== Ajustes v13: mobile refinado, chips 2 linhas, botões e animações de cards ===== */

/* Animação dos cards ao aparecer/sumir */
.cl-event-card,
.cl-date-section,
.cl-past-section{
  will-change: transform, opacity;
}
.cl-event-card.is-entering,
.cl-date-section.is-entering,
.cl-past-section.is-entering{
  animation:cardIn .34s cubic-bezier(.2,.75,.2,1) both;
}
.cl-event-card.is-leaving,
.cl-date-section.is-leaving,
.cl-past-section.is-leaving{
  animation:cardOut .22s ease both;
}
@keyframes cardIn{
  from{opacity:0; transform:translateY(14px) scale(.985)}
  to{opacity:1; transform:translateY(0) scale(1)}
}
@keyframes cardOut{
  from{opacity:1; transform:translateY(0) scale(1)}
  to{opacity:0; transform:translateY(10px) scale(.985)}
}

/* Botão salvo com contraste melhor */
.cl-event-card.is-saved-card .cl-card-actions button.is-saved{
  color:#fff!important;
  text-shadow:0 1px 6px rgba(0,0,0,.34);
}

/* Layout mobile */
@media (max-width:700px){

  /* Mostrar +18 quebra para linha própria abaixo de Hoje/Rolando/Salvos */
  .cl-quick-row{
    display:grid;
    grid-template-columns:max-content max-content max-content;
    gap:10px;
    align-items:center;
    overflow-x:auto;
    padding-bottom:8px;
  }
  .cl-quick-row .cl-adult-toggle{
    grid-column:1 / -1;
    width:max-content;
    margin-top:2px;
    margin-left:0;
    justify-self:start;
  }

  /* Vibes em exatamente 2 linhas com scroll horizontal */
  #cl-tag-filters{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-rows:repeat(2, auto)!important;
    grid-auto-columns:max-content!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    column-gap:10px!important;
    row-gap:10px!important;
    padding:2px 0 10px!important;
    scrollbar-width:none;
  }
  #cl-tag-filters::-webkit-scrollbar{display:none}
  #cl-tag-filters .cl-chip{
    justify-self:start;
  }

  /* Cabeçalho da data: badge não quebra para baixo */
  .cl-date-section{
    display:grid!important;
    grid-template-columns:1fr auto;
    align-items:center!important;
    flex-direction:initial!important;
    gap:12px;
  }
  .cl-date-section > div{
    min-width:0;
  }
  .cl-date-section h2{
    font-size:28px;
    line-height:.92;
  }
  .cl-date-section p{
    font-size:13px;
    line-height:1.25;
  }
  .cl-date-section__pill{
    align-self:center;
    justify-self:end;
    white-space:nowrap;
    font-size:13px;
    padding:9px 11px;
  }

  /* Mobile: Salvo fica Salvo, não vira Remover */
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover{
    font-size:13px!important;
    background:linear-gradient(90deg,#ff245d,#ff8a1c,#ffe600,#33e36f,#23c7ff,#7e56ff,#ff4bd8,#ff245d)!important;
    background-size:240% 100%!important;
    animation:rainbowFlow 6.5s linear infinite!important;
    color:#fff!important;
  }
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover:after{
    content:none!important;
  }

  /* Mobile: status futuro já aparece como AVISE-ME */
  .cl-status-badge[data-status="upcoming"]{
    font-size:0!important;
    width:92px;
    min-width:92px;
    max-width:92px;
  }
  .cl-status-badge[data-status="upcoming"]:after{
    content:"AVISE-ME";
    font-size:10px;
    line-height:1;
    letter-spacing:.055em;
  }

  /* Mobile: limpar filtros fica acima, no canto direito da seção */
  .cl-results-bar{
    display:grid!important;
    grid-template-columns:1fr auto;
    align-items:start!important;
    gap:8px 12px;
    margin-top:12px;
  }
  .cl-results-bar button{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    white-space:nowrap;
  }
  .cl-results-bar > div{
    grid-column:1 / -1;
    grid-row:2;
  }
}

/* Desktop/tablet com mouse: mantém hover de AVISE-ME e REMOVER apenas onde faz sentido */
@media (hover:hover) and (pointer:fine){
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover{
    font-size:0;
  }
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover:after{
    content:"Remover";
    font-size:13px;
  }
}


/* ===== Ajustes v14: Safari cache-bust, Instagram CTA, bottom nav nova, animação seletiva ===== */

/* Instagram hero mais chamativo, sem segunda bolha */
.cl-hero__badges .cl-instagram-link{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(120deg,rgba(131,58,180,.36),rgba(225,48,108,.34),rgba(253,29,29,.22));
  border-color:rgba(225,48,108,.58);
  box-shadow:0 0 18px rgba(225,48,108,.34),0 0 34px rgba(131,58,180,.22),inset 0 1px 0 rgba(255,255,255,.18);
  animation:instaGlow 3.8s ease-in-out infinite;
}
.cl-hero__badges .cl-instagram-link span{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
}
.cl-hero__badges .cl-instagram-link:before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:linear-gradient(90deg,#833ab4,#c13584,#e1306c,#fd1d1d,#f77737,#833ab4);
  background-size:260% 100%;
  opacity:.22;
  animation:rainbowFlow 6s linear infinite;
  z-index:-1;
}
.cl-hero__badges .cl-instagram-link:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.46);
}
@keyframes instaGlow{
  0%,100%{box-shadow:0 0 16px rgba(225,48,108,.26),0 0 30px rgba(131,58,180,.16),inset 0 1px 0 rgba(255,255,255,.16)}
  50%{box-shadow:0 0 24px rgba(225,48,108,.44),0 0 46px rgba(131,58,180,.30),inset 0 1px 0 rgba(255,255,255,.22)}
}

/* Barra inferior nova */
.cl-bottom-nav{
  grid-template-columns:repeat(5,1fr)!important;
}
.cl-bottom-nav button[data-nav-filter="instagram"].is-active,
.cl-bottom-nav button[data-nav-filter="instagram"]:hover{
  background:linear-gradient(135deg,rgba(131,58,180,.30),rgba(225,48,108,.24));
}
.cl-bottom-nav button[data-nav-filter="clear"]:disabled{
  opacity:.34;
  filter:grayscale(1);
  cursor:not-allowed;
}
.cl-bottom-nav button[data-nav-filter="contact"]:hover{
  background:linear-gradient(135deg,rgba(35,199,255,.22),rgba(255,255,255,.10));
}

/* Remove piscada geral ao salvar: animação só em mudanças de filtros/lista */
.cl-events-grid.no-grid-animation .cl-event-card,
.cl-events-grid.no-grid-animation .cl-date-section,
.cl-events-grid.no-grid-animation .cl-past-section{
  animation:none!important;
}

/* Remoção individual quando estiver em salvos */
.cl-event-card.is-removing-card{
  animation:cardOut .22s ease both!important;
}

/* Ajustes mobile preservados */
@media (max-width:700px){
  .cl-bottom-nav span{
    font-size:8.5px;
  }
  .cl-bottom-nav .cl-nav-icon{
    width:17px;
    height:17px;
  }
}


/* ===== Ajustes v15: sem refresh periódico, ordem nav, coração salvo e destaque do card ===== */

/* Coração nos botões e badges */
.cl-heart-icon{
  width:17px;
  height:17px;
  flex:0 0 auto;
}
.cl-heart-icon path{
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linejoin:round;
}
.is-saved .cl-heart-icon path,
.cl-saved-badge .cl-heart-icon path,
.cl-bottom-nav .is-active .cl-heart-icon path{
  fill:currentColor;
  stroke:currentColor;
}

/* Botão Salvar/Salvo com ícone */
.cl-card-actions button[data-save]{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

/* Badge de salvo no card */
.cl-saved-badge{
  position:absolute;
  z-index:4;
  right:12px;
  top:12px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff2d72,#8b5cff);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 0 18px rgba(255,45,114,.38),0 0 26px rgba(139,92,255,.22);
}
.cl-event-card.has-hot.has-saved .cl-saved-badge{
  top:54px;
}

/* Card salvo mais evidente, sem ficar berrando */
.cl-event-card.is-saved-card{
  border-color:rgba(255,75,216,.82)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07)) padding-box,
    linear-gradient(135deg,#ff2d72,#8b5cff,#23c7ff) border-box;
  box-shadow:0 0 26px rgba(255,45,114,.24),0 0 48px rgba(139,92,255,.18),0 18px 50px rgba(0,0,0,.34)!important;
}
.cl-event-card.is-saved-card:before{
  background:linear-gradient(120deg,rgba(255,45,114,.14),rgba(139,92,255,.10),rgba(35,199,255,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),
             inset 0 0 42px rgba(255,45,114,.12)!important;
}
.cl-event-card.is-saved-card .cl-event-card__body{
  background:linear-gradient(180deg,rgba(255,45,114,.035),rgba(139,92,255,.045));
}

/* Botão salvo mais legível */
.cl-event-card.is-saved-card .cl-card-actions button.is-saved{
  background:linear-gradient(135deg,#ff2d72,#8b5cff)!important;
  color:#fff!important;
  animation:none!important;
  box-shadow:0 0 18px rgba(255,45,114,.28),0 0 26px rgba(139,92,255,.16);
}

/* Hover do remover só desktop */
@media (hover:hover) and (pointer:fine){
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover{
    background:rgba(0,0,0,.22)!important;
    color:#fff!important;
    animation:none!important;
  }
}

/* Barra inferior: ordem nova e botões equilibrados */
.cl-bottom-nav{
  grid-template-columns:repeat(5,1fr)!important;
}
.cl-bottom-nav button[data-nav-filter="clear"].is-active,
.cl-bottom-nav button[data-nav-filter="clear"]:hover{
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(35,199,255,.16));
}
.cl-bottom-nav button[data-nav-filter="saved"].is-active,
.cl-bottom-nav button[data-nav-filter="saved"]:hover{
  background:linear-gradient(135deg,rgba(255,45,114,.24),rgba(139,92,255,.18));
}
.cl-bottom-nav button[data-nav-filter="instagram"].is-active,
.cl-bottom-nav button[data-nav-filter="instagram"]:hover{
  background:linear-gradient(135deg,rgba(131,58,180,.30),rgba(225,48,108,.24));
}

/* Não animar grid quando só salvar/desalvar fora do filtro salvos */
.cl-events-grid.no-grid-animation .cl-event-card,
.cl-events-grid.no-grid-animation .cl-date-section,
.cl-events-grid.no-grid-animation .cl-past-section{
  animation:none!important;
}
.cl-event-card.is-removing-card{
  animation:cardOut .22s ease both!important;
}

@media (max-width:700px){
  .cl-heart-icon{
    width:16px;
    height:16px;
  }
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover{
    background:linear-gradient(135deg,#ff2d72,#8b5cff)!important;
    color:#fff!important;
  }
}


/* ===== Ajustes v16: ícones nav e SEO/favicon ===== */

.cl-bottom-nav .cl-nav-icon{
  color:#fff;
}
.cl-bottom-nav .cl-nav-icon path{
  stroke:currentColor;
}
.cl-bottom-nav button[data-nav-filter="clear"] .cl-nav-icon path{
  fill:none;
  stroke:currentColor;
}
.cl-bottom-nav button[data-nav-filter="contact"] .cl-nav-icon path{
  fill:none;
  stroke:currentColor;
}
.cl-bottom-nav button[data-nav-filter="contact"]:hover{
  background:linear-gradient(135deg,rgba(35,199,255,.24),rgba(255,255,255,.10));
}


/* ===== Ajustes v18: badge HOT + salvo, hover EM BREVE e ações mobile ===== */

/* Quando o card é HOT e também está salvo:
   mantém o coração visível no canto e empurra o foguinho para a esquerda */
.cl-event-card.has-hot.has-saved .cl-saved-badge{
  top:12px !important;
  right:12px !important;
  z-index:6 !important;
}
.cl-event-card.has-hot.has-saved .cl-hot-badge{
  right:56px !important;
  top:12px !important;
  z-index:5 !important;
}

/* Botão EM BREVE / AVISE-ME:
   mantém o mesmo tamanho e só troca o texto no hover do desktop */
.cl-status-badge[data-status="upcoming"]{
  position:relative;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:96px;
  min-width:96px;
  max-width:96px;
  height:34px;
  overflow:hidden;
  white-space:nowrap;
  vertical-align:middle;
}
@media (hover:hover) and (pointer:fine){
  .cl-status-badge[data-status="upcoming"]{
    transition:background .18s ease, border-color .18s ease, color .18s ease;
  }
  .cl-status-badge[data-status="upcoming"]:hover{
    font-size:0 !important;
    transform:none !important;
    filter:none !important;
    box-shadow:none !important;
    text-shadow:none !important;
    background:inherit !important;
  }
  .cl-status-badge[data-status="upcoming"]:hover::after{
    content:"AVISE-ME";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:10px;
    line-height:1;
    letter-spacing:.055em;
    color:currentColor;
    background:transparent;
  }
}

/* Mobile: deixa os 4 botões do card lado a lado */
@media (max-width:700px){
  .cl-card-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 46px !important;
    gap:8px !important;
    align-items:stretch !important;
  }
  .cl-card-actions > *{
    min-width:0;
    max-width:none;
  }
  .cl-card-actions button,
  .cl-card-actions a{
    padding:10px 8px !important;
    font-size:11.5px !important;
  }
  .cl-card-actions > :last-child{
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    padding-inline:0 !important;
    justify-content:center !important;
  }
  .cl-card-actions > :last-child span{
    display:none !important;
  }
}


/* ===== Ajustes v19: badge EM BREVE estável, coração sobre HOT e link +18 ===== */

/* HOT + Salvo: o coração fica por cima, exatamente no canto; o foguinho fica atrás */
.cl-event-card.has-hot.has-saved .cl-saved-badge{
  top:12px !important;
  right:12px !important;
  z-index:20 !important;
  opacity:1 !important;
  transform:none !important;
}
.cl-event-card.has-hot.has-saved .cl-hot-badge{
  top:12px !important;
  right:12px !important;
  z-index:10 !important;
  opacity:.28 !important;
  filter:saturate(.8) blur(.1px);
}

/* Garante que a badge de salvo não fique escondida por nenhum overlay do card */
.cl-saved-badge{
  z-index:20 !important;
  pointer-events:none;
}
.cl-hot-badge{
  z-index:10 !important;
}

/* EM BREVE / AVISE-ME sem gradiente fantasma e sem vazar para cards vizinhos */
.cl-status-badge[data-status="upcoming"]{
  isolation:isolate;
  contain:paint;
  overflow:hidden !important;
  width:96px !important;
  min-width:96px !important;
  max-width:96px !important;
  height:34px !important;
  padding:0 10px !important;
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.20) !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  backdrop-filter:blur(10px);
}
.cl-status-badge[data-status="upcoming"]::before{
  display:none !important;
  content:none !important;
}
@media (hover:hover) and (pointer:fine){
  .cl-status-badge[data-status="upcoming"]:hover{
    color:transparent !important;
    font-size:0 !important;
    background:rgba(255,255,255,.13) !important;
    border-color:rgba(255,255,255,.28) !important;
    box-shadow:none !important;
    transform:none !important;
    filter:none !important;
  }
  .cl-status-badge[data-status="upcoming"]:hover::after{
    content:"AVISE-ME";
    position:absolute;
    inset:0;
    z-index:2;
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    font-size:10px;
    line-height:1;
    letter-spacing:.055em;
    color:#fff !important;
    background:transparent !important;
    box-shadow:none !important;
    text-shadow:none !important;
    transform:none !important;
  }
}


/* ===== Ajustes v20: estados desabilitados, hover sem subida, cards contidos e imagens por evento ===== */

/* Desabilitados reais nos quick buttons/bottom nav */
.cl-chip:disabled,
.cl-bottom-nav button:disabled{
  opacity:.34!important;
  filter:grayscale(1)!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
}

/* Remove a "subidinha" global em botões/chips para não cortar no container */
.cl-chip:hover:not([disabled]),
.cl-card-actions a:hover,
.cl-card-actions button:not([disabled]):hover,
.cl-bottom-nav button:hover,
.cl-route-actions button:hover,
#cl-close-route:hover,
.cl-route-remove:hover{
  transform:none!important;
}

/* Restringe qualquer efeito visual ao card e remove glow que vazava nos vizinhos */
.cl-event-card{
  overflow:hidden!important;
  contain:paint;
}
.cl-event-card__body,
.cl-event-card__media{
  overflow:hidden;
}
.cl-card-actions a:hover,
.cl-card-actions button:not([disabled]):hover{
  box-shadow:none!important;
  filter:none!important;
  background:rgba(255,255,255,.12);
}

/* Badge da data no cabeçalho do dia: centro vertical também no desktop */
.cl-date-section{
  align-items:center!important;
}
.cl-date-section__pill{
  align-self:center!important;
}

/* Botão compartilhar: um respiro quase imperceptível a mais */
.cl-card-actions > :last-child{
  min-width:52px;
}

/* Mobile mantém 4 botões em linha, com compartilhar um pouco maior */
@media (max-width:700px){
  .cl-card-actions{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 52px!important;
  }
  .cl-card-actions > :last-child{
    width:52px!important;
    min-width:52px!important;
    max-width:52px!important;
  }
}

/* Suporte visual a imagens reais dos eventos */
.cl-event-card__image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/* ===== Ajustes v21: hero limpo, sticker spin, tabs por data e imagens por casa ===== */
.cl-hero__badges .cl-hero-pill:not(.cl-instagram-link){
  min-height:auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  color:rgba(255,255,255,.76)!important;
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  cursor:default;
}
.cl-hero__badges .cl-instagram-link{
  background:rgba(0,0,0,.24)!important;
  border-color:rgba(225,48,108,.58)!important;
  box-shadow:0 0 18px rgba(225,48,108,.32),0 0 38px rgba(131,58,180,.22),inset 0 1px 0 rgba(255,255,255,.16)!important;
}
.cl-holo-sticker{
  transform:translate(-8px,8px);
  transform-origin:center center;
}
.cl-holo-sticker:hover{
  animation:stickerSpinHover .72s cubic-bezier(.18,.88,.22,1.15) both;
}
.cl-holo-sticker:active{
  animation:stickerClickPop .28s cubic-bezier(.18,.88,.22,1.15) both;
}
@keyframes stickerSpinHover{
  0%{transform:translate(-8px,8px) rotate(0) scale(1)}
  55%{transform:translate(-8px,8px) rotate(380deg) scale(1.08)}
  100%{transform:translate(-8px,8px) rotate(360deg) scale(1.03)}
}
@keyframes stickerClickPop{
  0%{transform:translate(-8px,8px) scale(1.03)}
  55%{transform:translate(-8px,8px) scale(.88)}
  100%{transform:translate(-8px,8px) scale(1.08)}
}
.cl-results-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.cl-toggle-days{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:999px;
  padding:10px 13px;
  font-weight:900;
  cursor:pointer;
}
.cl-toggle-days:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32)}
.cl-toggle-days svg{width:17px;height:17px;flex:0 0 auto}
.cl-toggle-days svg path{fill:currentColor;stroke:currentColor}
.cl-date-section{
  cursor:pointer;
  user-select:none;
  position:relative;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.cl-date-section:hover{
  border-color:color-mix(in srgb,var(--day-color,#fff) 68%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--day-color,#fff) 28%,transparent),rgba(255,255,255,.06)),rgba(255,255,255,.065);
}
.cl-date-section__right{display:flex;align-items:center;gap:10px}
.cl-date-section__chevron{
  width:30px;height:30px;border-radius:999px;display:grid;place-items:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:#fff;
  transition:transform .22s ease,background .18s ease;
}
.cl-date-section__chevron svg{width:18px;height:18px}.cl-date-section__chevron svg path{fill:currentColor}
.cl-date-section.is-open .cl-date-section__chevron{transform:rotate(180deg);background:color-mix(in srgb,var(--day-color,#fff) 28%,rgba(255,255,255,.10))}
.cl-date-content{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:16px;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-8px);
  transition:max-height .46s cubic-bezier(.2,.75,.2,1),opacity .24s ease,transform .3s ease;
}
.cl-date-content.is-open{max-height:9999px;opacity:1;transform:translateY(0);padding-bottom:8px}
.cl-date-content .cl-event-card{height:100%}
.cl-event-card.is-saved-card .cl-tag{
  background:rgba(255,255,255,.08)!important;
  border-color:color-mix(in srgb,var(--tag-color-a,#fff) 46%,rgba(255,255,255,.18))!important;
  box-shadow:none!important;
}
.cl-event-card.is-main-pride,.cl-event-card.is-featured-parada{
  border-color:transparent!important;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.065)) padding-box,linear-gradient(90deg,#ff245d,#ff8a1c,#ffe600,#33e36f,#23c7ff,#7e56ff,#ff4bd8,#ff245d) border-box!important;
  background-size:auto,260% 100%!important;
  animation:mainPrideBorder 5.8s linear infinite!important;
  box-shadow:0 0 30px rgba(255,75,216,.26),0 0 52px rgba(35,199,255,.18),0 18px 50px rgba(0,0,0,.34)!important;
}
.cl-event-card.is-main-pride.is-saved-card,.cl-event-card.is-featured-parada.is-saved-card{
  box-shadow:0 0 34px rgba(255,75,216,.36),0 0 62px rgba(35,199,255,.26),0 0 80px rgba(255,230,0,.10),0 18px 50px rgba(0,0,0,.34)!important;
}
.cl-event-card.is-main-pride.is-saved-card:after,.cl-event-card.is-featured-parada.is-saved-card:after{
  content:"MASTER";position:absolute;left:12px;top:54px;z-index:7;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:1000;letter-spacing:.12em;color:#08090c;
  background:linear-gradient(90deg,#ff245d,#ff8a1c,#ffe600,#33e36f,#23c7ff,#7e56ff,#ff4bd8);background-size:240% 100%;animation:rainbowFlow 6s linear infinite;
}
@keyframes mainPrideBorder{0%{background-position:0 0,0% 50%}100%{background-position:0 0,260% 50%}}
@media (max-width:700px){.cl-results-actions{justify-content:flex-end}.cl-toggle-days{padding:9px 11px;font-size:12px}.cl-date-section__right{gap:8px}.cl-date-section__chevron{width:28px;height:28px}}


/* ===== Ajustes v22: tabs fechadas por padrão, grid até 3 colunas, memória e imagem sem ícone quebrado ===== */

/* Grid geral limitado a 3 cards por linha */
.cl-events-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:start;
}
.cl-date-content{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
@media (max-width:1100px){
  .cl-events-grid,
  .cl-date-content{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width:700px){
  .cl-events-grid,
  .cl-date-content{
    grid-template-columns:1fr!important;
  }
}

/* Botões do rodapé do card mais estáveis e harmoniosos */
.cl-card-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 54px!important;
  gap:9px!important;
  align-items:stretch!important;
}
.cl-card-actions a,
.cl-card-actions button{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  white-space:nowrap!important;
  border-radius:15px!important;
}
.cl-card-actions > :last-child{
  width:54px!important;
  min-width:54px!important;
  max-width:54px!important;
  padding-inline:0!important;
}
.cl-card-actions > :last-child span{
  display:none!important;
}

/* Imagem inexistente: fica invisível até carregar; se der erro, remove sem mostrar ícone quebrado */
.cl-event-card__image{
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease;
}
.cl-event-card__image.is-loaded{
  opacity:1;
  visibility:visible;
}

/* Chevron simples e centralizado */
.cl-date-section__chevron{
  width:30px!important;
  height:30px!important;
  padding:0!important;
}
.cl-date-section__chevron svg{
  width:18px!important;
  height:18px!important;
  display:block;
}
.cl-date-section__chevron svg path{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.4!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* Date tabs: recolher/expandir suave sem auto-expand */
.cl-date-section{
  cursor:pointer;
}
.cl-date-content{
  transition:max-height .42s cubic-bezier(.2,.75,.2,1), opacity .22s ease, transform .26s ease, padding .24s ease!important;
}
.cl-date-content:not(.is-open){
  padding-top:0!important;
  padding-bottom:0!important;
}

/* Botão expandir/recolher */
.cl-toggle-days{
  min-height:40px;
}
.cl-toggle-days svg{
  width:18px!important;
  height:18px!important;
}
.cl-toggle-days svg path{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

@media (max-width:700px){
  .cl-card-actions{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 54px!important;
    gap:8px!important;
  }
  .cl-card-actions a,
  .cl-card-actions button{
    font-size:11px!important;
    padding:10px 7px!important;
  }
}


/* ===== Ajustes v23: tabs fechadas, vibe cinza salvo, hover neon e remover sem coração ===== */

/* Garante que tags/vibes dentro de card salvo fiquem com fundo neutro/cinza */
.cl-event-card.is-saved-card .cl-tag,
.cl-event-card.is-saved-card .cl-tags .cl-tag{
  background:rgba(35,37,52,.72)!important;
  background-image:none!important;
  border-color:color-mix(in srgb, var(--tag-color-a,#fff) 42%, rgba(255,255,255,.22))!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(10px);
}

/* Hover neon nas tags/vibes, sem scale e sem parecer clicável */
.cl-tag{
  cursor:default;
  transition:border-color .18s ease, box-shadow .22s ease, background .18s ease;
}
.cl-tag:hover{
  transform:none!important;
  border-color:var(--tag-color-a,#fff)!important;
  box-shadow:
    0 0 10px color-mix(in srgb, var(--tag-color-a,#fff) 50%, transparent),
    0 0 20px color-mix(in srgb, var(--tag-color-b,#fff) 28%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--tag-color-a,#fff) 10%, transparent)!important;
  animation:tagNeonPulse 1.2s ease-in-out infinite alternate;
}
@keyframes tagNeonPulse{
  from{
    box-shadow:
      0 0 8px color-mix(in srgb, var(--tag-color-a,#fff) 38%, transparent),
      0 0 16px color-mix(in srgb, var(--tag-color-b,#fff) 22%, transparent),
      inset 0 0 10px color-mix(in srgb, var(--tag-color-a,#fff) 8%, transparent);
  }
  to{
    box-shadow:
      0 0 14px color-mix(in srgb, var(--tag-color-a,#fff) 62%, transparent),
      0 0 28px color-mix(in srgb, var(--tag-color-b,#fff) 36%, transparent),
      inset 0 0 16px color-mix(in srgb, var(--tag-color-a,#fff) 13%, transparent);
  }
}

/* Desktop: quando Salvo vira Remover no hover, remove o ícone de coração e deixa só o texto */
@media (hover:hover) and (pointer:fine){
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover{
    gap:0!important;
  }
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover .cl-heart-icon,
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover svg{
    display:none!important;
  }
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover span{
    display:none!important;
  }
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover:after{
    content:"Remover";
    font-size:13px;
    font-weight:900;
  }
}


/* ===== Ajustes v24: tabs realmente fechadas na entrada ===== */

/* Mantém conteúdo fechado visualmente quando a data não tem .is-open */
.cl-date-content:not(.is-open){
  max-height:0!important;
  opacity:0!important;
  transform:translateY(-8px)!important;
  overflow:hidden!important;
  padding-top:0!important;
  padding-bottom:0!important;
}


/* ===== Ajustes v25: tab premium slide, rainbow seamless, master card e hover das vibes salvo ===== */

/* Abre/recolhe como drawer premium, sem fade piscando */
.cl-date-content{
  display:grid!important;
  grid-column:1/-1;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px;
  overflow:hidden!important;
  max-height:0;
  opacity:1!important;
  transform:none!important;
  padding-top:0!important;
  padding-bottom:0!important;
  transition:
    max-height .58s cubic-bezier(.18,.86,.22,1),
    padding .34s ease!important;
}
.cl-date-content.is-open{
  max-height:var(--content-height, 4000px)!important;
  padding-top:14px!important;
  padding-bottom:12px!important;
}
.cl-date-content .cl-event-card{
  opacity:0;
  transform:translateY(-18px);
  transition:
    opacity .34s ease,
    transform .48s cubic-bezier(.18,.86,.22,1);
  transition-delay:calc(min(var(--i, 0), 8) * 34ms);
}
.cl-date-content.is-open .cl-event-card{
  opacity:1;
  transform:translateY(0);
}
.cl-date-content.is-closing .cl-event-card{
  opacity:0;
  transform:translateY(-12px);
  transition-delay:0ms;
}

/* Evita fade global da grid em abre/recolhe de tab */
.cl-events-grid.no-grid-animation .cl-date-content .cl-event-card{
  animation:none!important;
}

/* Rainbow sem reset perceptível: sequência duplicada + loop linear */
:root{
  --cl-rainbow-loop: #ff245d 0%,#ff8a1c 7.14%,#ffe600 14.28%,#33e36f 21.42%,#23c7ff 28.56%,#7e56ff 35.7%,#ff4bd8 42.84%,#ff245d 50%,#ff8a1c 57.14%,#ffe600 64.28%,#33e36f 71.42%,#23c7ff 78.56%,#7e56ff 85.7%,#ff4bd8 92.84%,#ff245d 100%;
}
@keyframes rainbowFlowSeamless{
  from{background-position:0% 50%}
  to{background-position:100% 50%}
}
.cl-rainbow-word,
.cl-hero h1:after,
.cl-rainbow-line,
.cl-date-section[data-date="07/06"] .cl-date-section__pill,
.cl-event-card.is-main-pride .cl-event-card__date,
.cl-event-card.is-featured-parada .cl-event-card__date{
  background-image:linear-gradient(90deg,var(--cl-rainbow-loop))!important;
  background-size:200% 100%!important;
  animation:rainbowFlowSeamless 9s linear infinite!important;
}

/* Evento master: só a borda rainbow quando normal; interior permanece como card comum */
.cl-event-card.is-main-pride,
.cl-event-card.is-featured-parada{
  border-color:transparent!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045)) padding-box,
    linear-gradient(90deg,var(--cl-rainbow-loop)) border-box!important;
  background-size:auto,200% 100%!important;
  animation:mainPrideBorderSeamless 9s linear infinite!important;
  box-shadow:0 0 20px rgba(255,75,216,.16),0 0 32px rgba(35,199,255,.10),0 18px 50px rgba(0,0,0,.34)!important;
}
.cl-event-card.is-main-pride:before,
.cl-event-card.is-featured-parada:before{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)!important;
}
@keyframes mainPrideBorderSeamless{
  from{background-position:0 0,0% 50%}
  to{background-position:0 0,100% 50%}
}

/* Master salvo: premium, mas ainda com moldura/borda como protagonista */
.cl-event-card.is-main-pride.is-saved-card,
.cl-event-card.is-featured-parada.is-saved-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.075)) padding-box,
    linear-gradient(90deg,var(--cl-rainbow-loop)) border-box!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 0 32px rgba(255,75,216,.30),
    0 0 58px rgba(35,199,255,.22),
    0 0 78px rgba(255,230,0,.10),
    0 18px 50px rgba(0,0,0,.34)!important;
}
.cl-event-card.is-main-pride.is-saved-card:after,
.cl-event-card.is-featured-parada.is-saved-card:after{
  content:"MASTER";
  position:absolute;
  left:12px;
  top:54px;
  z-index:7;
  border-radius:999px;
  padding:7px 10px;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.12em;
  color:#08090c;
  background:linear-gradient(90deg,var(--cl-rainbow-loop));
  background-size:200% 100%;
  animation:rainbowFlowSeamless 9s linear infinite;
}

/* Vibes em card salvo mantêm fundo cinza, mas o hover neon volta a funcionar */
.cl-event-card.is-saved-card .cl-tag{
  background:rgba(35,37,52,.74)!important;
  background-image:none!important;
  border-color:color-mix(in srgb, var(--tag-color-a,#fff) 42%, rgba(255,255,255,.22))!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.cl-event-card.is-saved-card .cl-tag:hover,
.cl-tag:hover{
  transform:none!important;
  border-color:var(--tag-color-a,#fff)!important;
  box-shadow:
    0 0 10px color-mix(in srgb, var(--tag-color-a,#fff) 55%, transparent),
    0 0 22px color-mix(in srgb, var(--tag-color-b,#fff) 32%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--tag-color-a,#fff) 12%, transparent)!important;
  animation:tagNeonPulse 1.2s ease-in-out infinite alternate!important;
}
@keyframes tagNeonPulse{
  from{
    box-shadow:
      0 0 8px color-mix(in srgb, var(--tag-color-a,#fff) 38%, transparent),
      0 0 16px color-mix(in srgb, var(--tag-color-b,#fff) 22%, transparent),
      inset 0 0 10px color-mix(in srgb, var(--tag-color-a,#fff) 8%, transparent);
  }
  to{
    box-shadow:
      0 0 14px color-mix(in srgb, var(--tag-color-a,#fff) 62%, transparent),
      0 0 28px color-mix(in srgb, var(--tag-color-b,#fff) 36%, transparent),
      inset 0 0 16px color-mix(in srgb, var(--tag-color-a,#fff) 13%, transparent);
  }
}

/* Hover do Salvo: só texto Remover, sem coração */
@media (hover:hover) and (pointer:fine){
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover{
    gap:0!important;
  }
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover .cl-heart-icon,
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover svg,
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover span{
    display:none!important;
  }
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover:after{
    content:"Remover";
    font-size:13px;
    font-weight:900;
  }
}

@media (max-width:1100px){
  .cl-date-content{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:700px){
  .cl-date-content{grid-template-columns:1fr!important}
}

.cl-date-card-wrap{min-width:0}
.cl-date-card-wrap .cl-event-card{height:100%}
.cl-date-content .cl-date-card-wrap{
  opacity:0;
  transform:translateY(-18px);
  transition:opacity .34s ease,transform .48s cubic-bezier(.18,.86,.22,1);
  transition-delay:calc(min(var(--i,0),8) * 34ms);
}
.cl-date-content.is-open .cl-date-card-wrap{
  opacity:1;
  transform:translateY(0);
}
.cl-date-content.is-closing .cl-date-card-wrap{
  opacity:0;
  transform:translateY(-12px);
  transition-delay:0ms;
}

.cl-date-content .cl-event-card{
  opacity:1!important;
  transform:none!important;
  transition:box-shadow .18s ease,border-color .18s ease,background .18s ease!important;
}


/* ===== Ajustes v27: hover AVISE-ME, master Parada, rainbow seamless e rodapé premium ===== */

/* Mata definitivamente pseudo/gradiente fantasma no EM BREVE/AVISE-ME */
.cl-status-badge[data-status="upcoming"],
.cl-status-badge[data-status="upcoming"]:hover{
  position:relative!important;
  isolation:isolate!important;
  contain:layout paint!important;
  overflow:hidden!important;
  width:96px!important;
  min-width:96px!important;
  max-width:96px!important;
  height:34px!important;
  padding:0 10px!important;
  transform:none!important;
  filter:none!important;
  box-shadow:none!important;
  text-shadow:none!important;
  background:rgba(255,255,255,.105)!important;
  background-image:none!important;
  border-color:rgba(255,255,255,.22)!important;
  outline:none!important;
}
.cl-status-badge[data-status="upcoming"]::before,
.cl-status-badge[data-status="upcoming"]:hover::before{
  display:none!important;
  content:none!important;
  opacity:0!important;
  background:none!important;
  box-shadow:none!important;
}
@media (hover:hover) and (pointer:fine){
  .cl-status-badge[data-status="upcoming"]:hover{
    color:transparent!important;
    font-size:0!important;
  }
  .cl-status-badge[data-status="upcoming"]:hover::after{
    content:"AVISE-ME";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:10px;
    line-height:1;
    letter-spacing:.055em;
    font-weight:900;
    color:#fff!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    transform:none!important;
  }
}

/* Rainbow mais calmo, largo e loopável */
:root{
  --cl-rainbow-soft-loop:
    #ff245d 0%,
    #ff245d 6.25%,
    #ff8a1c 12.5%,
    #ffe600 18.75%,
    #33e36f 25%,
    #23c7ff 31.25%,
    #7e56ff 37.5%,
    #ff4bd8 43.75%,
    #ff245d 50%,
    #ff245d 56.25%,
    #ff8a1c 62.5%,
    #ffe600 68.75%,
    #33e36f 75%,
    #23c7ff 81.25%,
    #7e56ff 87.5%,
    #ff4bd8 93.75%,
    #ff245d 100%;
}
@keyframes clRainbowCalm{
  from{background-position:0% 50%}
  to{background-position:100% 50%}
}
.cl-rainbow-word,
.cl-rainbow-line,
.cl-date-section[data-date="07/06"] .cl-date-section__pill,
.cl-event-card.is-main-pride .cl-event-card__date,
.cl-event-card.is-featured-parada .cl-event-card__date{
  background-image:linear-gradient(90deg,var(--cl-rainbow-soft-loop))!important;
  background-size:200% 100%!important;
  animation:clRainbowCalm 18s linear infinite!important;
}

/* Evento master: interior igual aos outros cards, só a moldura/borda rainbow */
.cl-event-card.is-main-pride,
.cl-event-card.is-featured-parada{
  border:1.7px solid transparent!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.102),rgba(255,255,255,.046)) padding-box,
    linear-gradient(90deg,var(--cl-rainbow-soft-loop)) border-box!important;
  background-size:auto,200% 100%!important;
  animation:clMasterBorderCalm 18s linear infinite!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 22px rgba(255,75,216,.12),
    0 0 34px rgba(35,199,255,.08),
    0 18px 50px rgba(0,0,0,.34)!important;
}
.cl-event-card.is-main-pride::before,
.cl-event-card.is-featured-parada::before{
  background:linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,.022))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)!important;
}
.cl-event-card.is-main-pride .cl-event-card__body,
.cl-event-card.is-featured-parada .cl-event-card__body{
  background:transparent!important;
}
@keyframes clMasterBorderCalm{
  from{background-position:0 0,0% 50%}
  to{background-position:0 0,100% 50%}
}

/* Master salvo: premium sem círculo estranho, sem overlay gigante */
.cl-event-card.is-main-pride.is-saved-card,
.cl-event-card.is-featured-parada.is-saved-card{
  border:2px solid transparent!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.058)) padding-box,
    linear-gradient(90deg,var(--cl-rainbow-soft-loop)) border-box!important;
  background-size:auto,200% 100%!important;
  animation:clMasterBorderCalm 18s linear infinite!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 0 32px rgba(255,75,216,.22),
    0 0 52px rgba(35,199,255,.16),
    0 18px 50px rgba(0,0,0,.34)!important;
}
.cl-event-card.is-main-pride.is-saved-card::after,
.cl-event-card.is-featured-parada.is-saved-card::after{
  content:"MASTER";
  position:absolute;
  left:12px;
  top:54px;
  z-index:7;
  border-radius:999px;
  padding:7px 10px;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.12em;
  color:#08090c;
  background:linear-gradient(90deg,var(--cl-rainbow-soft-loop));
  background-size:200% 100%;
  animation:clRainbowCalm 18s linear infinite;
  width:auto!important;
  height:auto!important;
  inset:auto auto auto auto;
  transform:none!important;
  opacity:1!important;
  box-shadow:0 0 18px rgba(255,255,255,.18)!important;
}

/* Garante que nenhum círculo decorativo antigo continue aparecendo no master salvo */
.cl-event-card.is-featured-parada.is-saved-card > .cl-master-orb,
.cl-event-card.is-main-pride.is-saved-card > .cl-master-orb{
  display:none!important;
}

/* Rodapé premium */
.cl-site-footer{
  position:relative;
  max-width:1120px;
  margin:64px auto 104px;
  padding:34px 24px 28px;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 18% 0%,rgba(255,75,216,.13),transparent 34%),
    radial-gradient(circle at 78% 18%,rgba(35,199,255,.10),transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  box-shadow:0 24px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
  color:rgba(255,255,255,.68);
  animation:clFooterIn .85s cubic-bezier(.18,.86,.22,1) both;
  overflow:hidden;
}
.cl-site-footer:before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  transform:translateX(-100%);
  animation:clFooterSheen 7s ease-in-out infinite;
}
@keyframes clFooterIn{
  from{opacity:0;transform:translateY(26px);filter:blur(8px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes clFooterSheen{
  0%,55%{transform:translateX(-120%);opacity:0}
  70%{opacity:1}
  100%{transform:translateX(120%);opacity:0}
}
.cl-footer-notice{
  max-width:900px;
  margin:0 auto;
  text-align:left;
}
.cl-footer-notice h2{
  margin:0 0 12px;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
.cl-footer-notice p{
  margin:9px 0;
  font-size:12px;
  line-height:1.65;
  color:rgba(255,255,255,.54);
}
.cl-footer-notice a{
  color:rgba(255,255,255,.82);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22);
}
.cl-footer-notice a:hover{
  color:#fff;
  border-bottom-color:#ff4bd8;
}
.cl-footer-divider{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:center;
  max-width:520px;
  margin:30px auto 22px;
}
.cl-footer-divider span{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.cl-footer-divider strong{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#090a0f;
  background:linear-gradient(135deg,#ff245d,#ff8a1c,#ffe600,#33e36f,#23c7ff,#7e56ff,#ff4bd8);
  background-size:200% 200%;
  animation:clRainbowCalm 18s linear infinite;
  box-shadow:0 0 28px rgba(255,75,216,.22);
  font-size:26px;
  line-height:1;
}
.cl-footer-brand{
  text-align:center;
}
.cl-footer-domain{
  display:inline-block;
  font-size:22px;
  font-weight:1000;
  letter-spacing:-.03em;
  color:#fff;
  text-decoration:none;
}
.cl-footer-domain:hover{
  text-shadow:0 0 18px rgba(255,75,216,.28),0 0 24px rgba(35,199,255,.22);
}
.cl-footer-brand p{
  margin:6px 0 6px;
  font-size:11px;
  letter-spacing:.18em;
  font-weight:800;
  background:linear-gradient(90deg,var(--cl-rainbow-soft-loop));
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:clRainbowCalm 18s linear infinite;
}
.cl-footer-brand small{
  font-size:11px;
  color:rgba(255,255,255,.44);
}
.cl-footer-credit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px;
  font-size:11px;
  color:rgba(255,255,255,.46);
}
.cl-footer-credit a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  border-radius:999px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  color:#fff;
  text-decoration:none;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.cl-footer-credit a:hover{
  border-color:rgba(255,75,216,.38);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 22px rgba(255,75,216,.16);
}
.cl-footer-credit img{
  height:24px;
  width:auto;
  display:block;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.08));
}
.cl-footer-credit strong{
  font-size:12px;
  letter-spacing:.01em;
}
@media (max-width:700px){
  .cl-site-footer{
    margin:42px 14px 98px;
    padding:28px 18px 24px;
    border-radius:28px;
  }
  .cl-footer-notice p{
    font-size:11.5px;
  }
  .cl-footer-domain{
    font-size:20px;
  }
  .cl-footer-credit{
    flex-direction:column;
  }
}


/* ===== Ajustes v28: master só moldura, rainbow refinado, cards alinhados, footer polido ===== */

/* Cards com altura/estrutura consistente: botões sempre no rodapé */
.cl-date-content .cl-date-card-wrap{
  display:flex;
  min-width:0;
}
.cl-event-card{
  display:flex!important;
  flex-direction:column!important;
  min-height:100%;
  transition:transform .22s cubic-bezier(.18,.86,.22,1), box-shadow .22s ease, border-color .22s ease, background .22s ease!important;
}
.cl-event-card__body{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
}
.cl-card-actions{
  margin-top:auto!important;
  padding-top:18px!important;
}

/* Hover suave no card, sem deslocar layout */
@media (hover:hover) and (pointer:fine){
  .cl-event-card:not(.is-past):hover{
    transform:scale(1.012)!important;
    border-color:rgba(255,255,255,.30)!important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08),
      0 0 26px rgba(255,75,216,.13),
      0 0 42px rgba(35,199,255,.10),
      0 20px 56px rgba(0,0,0,.40)!important;
  }
}

/* Novo rainbow soft, mais lento e com bandas largas */
:root{
  --cl-rainbow-lux:
    #ff3b74 0%,
    #ff3b74 10%,
    #ff8a2a 18%,
    #ffe15c 28%,
    #41e58a 40%,
    #35d7ff 52%,
    #7b68ff 64%,
    #d85dff 76%,
    #ff3b74 90%,
    #ff3b74 100%;
}
@keyframes clRainbowLuxury{
  from{background-position:0% 50%}
  to{background-position:200% 50%}
}

/* Data 07/06: liquid glass mais calmo, texto branco */
.cl-date-section[data-date="07/06"] .cl-date-section__pill,
.cl-event-card[data-date="07/06"] .cl-event-card__date{
  color:#fff!important;
  background:
    linear-gradient(90deg,var(--cl-rainbow-lux),var(--cl-rainbow-lux))!important;
  background-size:300% 100%!important;
  animation:clRainbowLuxury 28s linear infinite!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 0 18px rgba(255,75,216,.18),
    0 0 28px rgba(35,199,255,.12)!important;
  backdrop-filter:blur(16px) saturate(1.2);
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}

/* Palavra/linha rainbow mais suaves também */
.cl-rainbow-word,
.cl-rainbow-line{
  background-image:linear-gradient(90deg,var(--cl-rainbow-lux),var(--cl-rainbow-lux))!important;
  background-size:300% 100%!important;
  animation:clRainbowLuxury 30s linear infinite!important;
}

/* Master da Parada: interior normal; SOMENTE moldura externa rainbow */
.cl-event-card.is-main-pride,
.cl-event-card.is-featured-parada{
  position:relative!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.102),rgba(255,255,255,.046)) padding-box!important;
  background-size:auto!important;
  animation:none!important;
  box-shadow:0 18px 50px rgba(0,0,0,.34)!important;
}
.cl-event-card.is-main-pride::before,
.cl-event-card.is-featured-parada::before{
  content:""!important;
  position:absolute!important;
  inset:-2px!important;
  padding:2px!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  z-index:0!important;
  background:linear-gradient(90deg,var(--cl-rainbow-lux),var(--cl-rainbow-lux))!important;
  background-size:300% 100%!important;
  animation:clRainbowLuxury 28s linear infinite!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask-composite:exclude!important;
  box-shadow:none!important;
}
.cl-event-card.is-main-pride > *,
.cl-event-card.is-featured-parada > *{
  position:relative;
  z-index:1;
}
.cl-event-card.is-main-pride .cl-event-card__body,
.cl-event-card.is-featured-parada .cl-event-card__body{
  background:transparent!important;
}
.cl-event-card.is-main-pride.is-saved-card,
.cl-event-card.is-featured-parada.is-saved-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.058)) padding-box!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 26px rgba(255,75,216,.18),
    0 0 46px rgba(35,199,255,.14),
    0 18px 50px rgba(0,0,0,.34)!important;
}
.cl-event-card.is-main-pride.is-saved-card::after,
.cl-event-card.is-featured-parada.is-saved-card::after{
  content:"MASTER";
  position:absolute;
  left:12px;
  top:54px;
  z-index:7;
  width:auto!important;
  height:auto!important;
  inset:auto auto auto auto!important;
  transform:none!important;
  opacity:1!important;
  border-radius:999px;
  padding:7px 10px;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.12em;
  color:#fff;
  background:rgba(12,14,22,.72)!important;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 18px rgba(255,75,216,.16)!important;
  text-shadow:none!important;
}

/* Chevron com hover: setinha balança no sentido da ação */
@media (hover:hover) and (pointer:fine){
  .cl-date-section:hover .cl-date-section__chevron svg{
    animation:clChevronDown .82s cubic-bezier(.18,.86,.22,1) infinite;
  }
  .cl-date-section.is-open:hover .cl-date-section__chevron svg{
    animation:clChevronUp .82s cubic-bezier(.18,.86,.22,1) infinite;
  }
}
@keyframes clChevronDown{
  0%,100%{transform:translateY(0)}
  45%{transform:translateY(4px)}
}
@keyframes clChevronUp{
  0%,100%{transform:translateY(0)}
  45%{transform:translateY(-4px)}
}

/* Footer: notice separado, divisor com SVG correto, domínio com pesos corretos */
.cl-site-footer{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0 24px 30px!important;
  overflow:visible!important;
}
.cl-site-footer:before{display:none!important}
.cl-footer-notice{
  max-width:920px;
  margin:0 auto 34px;
  padding:24px 24px 22px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 8% 0%,rgba(255,75,216,.10),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.026));
  box-shadow:0 18px 56px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08);
}
.cl-footer-notice h2{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px!important;
  letter-spacing:.14em!important;
  margin-bottom:14px!important;
}
.cl-footer-divider{
  max-width:540px!important;
  margin:22px auto 22px!important;
}
.cl-footer-divider img{
  width:42px;
  height:42px;
  object-fit:contain;
  display:block;
  padding:9px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--cl-rainbow-lux));
  background-size:300% 100%;
  animation:clRainbowLuxury 28s linear infinite;
  box-shadow:0 0 28px rgba(255,75,216,.18);
}
.cl-footer-divider strong{display:none!important}
.cl-footer-domain{
  font-size:26px!important;
  font-weight:400!important;
  letter-spacing:-.045em!important;
}
.cl-footer-domain strong{
  font-weight:900!important;
}
.cl-domain-com,
.cl-domain-online{
  font-weight:400!important;
}
.cl-footer-credit{
  margin-top:30px!important;
  flex-direction:column!important;
  gap:10px!important;
}
.cl-footer-credit > span{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:rgba(255,255,255,.38);
}
.cl-footer-credit a{
  padding:12px 16px!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.045)!important;
  animation:clMarioLogoIn .9s cubic-bezier(.18,.86,.22,1) both;
}
.cl-footer-credit img{
  height:52px!important;
  max-width:210px!important;
}
.cl-footer-credit strong{display:none!important}
@keyframes clMarioLogoIn{
  from{opacity:0;transform:translateY(12px) scale(.96);filter:blur(6px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.cl-footer-credit a:hover{
  transform:scale(1.025)!important;
  border-color:rgba(255,75,216,.32)!important;
  box-shadow:0 0 28px rgba(255,75,216,.16),0 0 40px rgba(35,199,255,.08)!important;
}
@media (max-width:700px){
  .cl-footer-notice{
    padding:20px 18px 18px;
    border-radius:24px;
  }
  .cl-footer-domain{
    font-size:23px!important;
  }
  .cl-footer-credit img{
    height:44px!important;
  }
}


/* ===== Ajustes v29: Parada estática, hover sem corte e rodapé refinado ===== */

/* Permite o scale do hover respirar sem cortar nas bordas dos cards/linhas */
.cl-events-grid{
  overflow:visible!important;
  padding-inline:2px;
}
.cl-date-content.is-open{
  overflow:visible!important;
}
.cl-date-card-wrap{
  overflow:visible!important;
}
.cl-event-card{
  transform-origin:center center;
}
@media (hover:hover) and (pointer:fine){
  .cl-event-card:not(.is-past):hover{
    position:relative!important;
    z-index:12!important;
    transform:scale(1.014)!important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.10),
      0 0 28px rgba(255,75,216,.14),
      0 0 46px rgba(35,199,255,.11),
      0 22px 62px rgba(0,0,0,.42)!important;
  }
}

/* 30ª Parada: card estático em gradiente glass, sem animação e sem pseudo retangular */
.cl-event-card.is-main-pride,
.cl-event-card.is-featured-parada{
  position:relative!important;
  border:1px solid rgba(255,255,255,.20)!important;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.18), transparent 22%),
    radial-gradient(circle at 78% 18%, rgba(35,199,255,.22), transparent 34%),
    radial-gradient(circle at 18% 86%, rgba(255,75,216,.18), transparent 34%),
    linear-gradient(135deg, rgba(27,31,43,.96), rgba(17,22,34,.94) 48%, rgba(28,38,52,.96))!important;
  background-size:100% 100%!important;
  animation:none!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 24px rgba(255,255,255,.06),
    0 18px 50px rgba(0,0,0,.36)!important;
}
.cl-event-card.is-main-pride::before,
.cl-event-card.is-featured-parada::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  padding:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  z-index:0!important;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025))!important;
  -webkit-mask:none!important;
  mask:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04)!important;
}
.cl-event-card.is-main-pride::after,
.cl-event-card.is-featured-parada::after{
  display:none!important;
  content:none!important;
}
.cl-event-card.is-main-pride > *,
.cl-event-card.is-featured-parada > *{
  position:relative;
  z-index:1;
}
.cl-event-card.is-main-pride .cl-event-card__body,
.cl-event-card.is-featured-parada .cl-event-card__body{
  background:transparent!important;
}

/* 30ª Parada salva: outro gradiente estático, sem badge/retângulo estranho */
.cl-event-card.is-main-pride.is-saved-card,
.cl-event-card.is-featured-parada.is-saved-card{
  border-color:rgba(255,255,255,.34)!important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,236,116,.22), transparent 24%),
    radial-gradient(circle at 82% 22%, rgba(255,75,216,.24), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(35,199,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(38,35,52,.97), rgba(24,31,46,.96) 48%, rgba(46,26,54,.97))!important;
  animation:none!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14),
    0 0 30px rgba(255,75,216,.20),
    0 0 48px rgba(35,199,255,.12),
    0 20px 56px rgba(0,0,0,.40)!important;
}
.cl-event-card.is-main-pride.is-saved-card::after,
.cl-event-card.is-featured-parada.is-saved-card::after{
  display:none!important;
  content:none!important;
}

/* Rodapé: aviso com tab vertical lateral e brilho glossy */
.cl-footer-notice{
  position:relative;
  overflow:hidden!important;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:22px;
  padding:26px 26px 24px 70px!important;
}
.cl-footer-notice:before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(105deg,transparent 0%,transparent 38%,rgba(255,255,255,.10) 48%,transparent 58%,transparent 100%);
  transform:translateX(-120%);
  animation:clNoticeSheen 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes clNoticeSheen{
  0%,52%{transform:translateX(-120%);opacity:0}
  63%{opacity:1}
  100%{transform:translateX(120%);opacity:0}
}
.cl-footer-notice h2{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
  transform-origin:center;
  white-space:nowrap;
  margin:0!important;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
  font-size:10px!important;
  letter-spacing:.16em!important;
  color:rgba(255,255,255,.76)!important;
}
.cl-footer-notice p{
  grid-column:2;
}

/* Divisor: asterisco SVG com conic/radial central estilo sticker e rotação lenta */
.cl-footer-divider img{
  width:46px!important;
  height:46px!important;
  padding:10px!important;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.92) 0 9%, transparent 10%),
    conic-gradient(from 0deg at 50% 50%, #ff245d, #ff8a1c, #ffe600, #33e36f, #23c7ff, #7e56ff, #ff4bd8, #ff245d)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -8px 18px rgba(0,0,0,.10),
    0 0 28px rgba(255,75,216,.20),
    0 0 44px rgba(35,199,255,.10)!important;
  animation:clAsteriskSpin 18s linear infinite, clMarioLogoIn .9s cubic-bezier(.18,.86,.22,1) both!important;
}
@keyframes clAsteriskSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* Mário Rick: sem bolha/contorno, só SVG maior com hover skew/glow */
.cl-footer-credit{
  margin-top:30px!important;
  margin-bottom:18px!important;
}
.cl-footer-credit a{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  transition:transform .36s cubic-bezier(.18,.86,.22,1), filter .28s ease!important;
}
.cl-footer-credit img{
  height:68px!important;
  max-width:260px!important;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.08))!important;
}
.cl-footer-credit a:hover{
  transform:skewX(-5deg) translateY(-2px) scale(1.045)!important;
  filter:drop-shadow(0 0 20px rgba(255,75,216,.24)) drop-shadow(0 0 30px rgba(35,199,255,.12))!important;
}

/* Legal no fim de tudo */
.cl-footer-legal{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  margin-top:18px;
  color:rgba(255,255,255,.40);
}
.cl-footer-legal small{
  font-size:11px;
  line-height:1.4;
}

/* Remove qualquer small antigo dentro da marca, se restar */
.cl-footer-brand > small{
  display:none!important;
}

@media (max-width:700px){
  .cl-footer-notice{
    display:block;
    padding:58px 18px 20px!important;
  }
  .cl-footer-notice h2{
    top:18px;
    left:18px;
    transform:none;
  }
  .cl-footer-notice p{
    grid-column:auto;
  }
  .cl-footer-credit img{
    height:56px!important;
  }
}


/* ===== Ajustes v30: aviso premium, card Parada discreto, hover sem fantasma ===== */

/* Remove definitivamente o gradiente/ghost de hover dos badges de status */
.cl-status-badge,
.cl-status-badge *,
.cl-status-badge::before,
.cl-status-badge::after{
  box-shadow:none!important;
  filter:none!important;
}
.cl-status-badge[data-status="upcoming"],
.cl-status-badge[data-status="upcoming"]:hover{
  background:rgba(255,255,255,.105)!important;
  background-image:none!important;
  transform:none!important;
  box-shadow:none!important;
  filter:none!important;
  text-shadow:none!important;
  backdrop-filter:blur(10px) saturate(1.1);
}
.cl-status-badge[data-status="upcoming"]::before{
  display:none!important;
  content:none!important;
  background:none!important;
  opacity:0!important;
}
@media (hover:hover) and (pointer:fine){
  .cl-status-badge[data-status="upcoming"]:hover{
    color:transparent!important;
    font-size:0!important;
  }
  .cl-status-badge[data-status="upcoming"]:hover::after{
    content:var(--cl-remind-label, "AVISE-ME")!important;
    position:absolute!important;
    inset:0!important;
    display:grid!important;
    place-items:center!important;
    color:#fff!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.055em!important;
    background:transparent!important;
  }
}

/* 30ª Parada: volta ao card normal; só o título recebe rainbow glow discreto */
.cl-event-card.is-main-pride,
.cl-event-card.is-featured-parada{
  border:1px solid rgba(255,255,255,.16)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.102),rgba(255,255,255,.046)) padding-box!important;
  background-size:auto!important;
  animation:none!important;
  box-shadow:0 18px 50px rgba(0,0,0,.34)!important;
}
.cl-event-card.is-main-pride::before,
.cl-event-card.is-featured-parada::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  z-index:0!important;
  background:linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,.022))!important;
  -webkit-mask:none!important;
  mask:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.cl-event-card.is-main-pride::after,
.cl-event-card.is-featured-parada::after{
  display:none!important;
  content:none!important;
}
.cl-event-card.is-main-pride .cl-event-card__body,
.cl-event-card.is-featured-parada .cl-event-card__body{
  background:transparent!important;
}
.cl-event-card.is-main-pride .cl-event-title,
.cl-event-card.is-featured-parada .cl-event-title,
.cl-event-card.is-main-pride h3,
.cl-event-card.is-featured-parada h3{
  background:linear-gradient(90deg,
    #ff3b74 0%,
    #ff7a2f 14%,
    #ffd84d 28%,
    #45e48a 42%,
    #30d4ff 56%,
    #8b70ff 70%,
    #e261ff 84%,
    #ff3b74 100%
  )!important;
  background-size:260% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  animation:clParadaTitleFlow 28s linear infinite!important;
  text-shadow:0 0 18px rgba(255,255,255,.08);
}
@keyframes clParadaTitleFlow{
  0%{background-position:0% 50%}
  100%{background-position:260% 50%}
}
/* Salvo reage como os outros salvos, sem layout especial que pese */
.cl-event-card.is-main-pride.is-saved-card,
.cl-event-card.is-featured-parada.is-saved-card{
  border-color:rgba(255,75,216,.72)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07)) padding-box,
    linear-gradient(135deg,#ff2d72,#8b5cff,#23c7ff) border-box!important;
  box-shadow:0 0 26px rgba(255,45,114,.24),0 0 48px rgba(139,92,255,.18),0 18px 50px rgba(0,0,0,.34)!important;
}

/* Aviso importante: novo conceito, horizontal, legível e premium */
.cl-footer-notice{
  position:relative!important;
  display:block!important;
  max-width:980px!important;
  margin:0 auto 58px!important;
  padding:28px 32px 28px!important;
  border-radius:30px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  background:
    radial-gradient(circle at 7% 0%,rgba(255,75,216,.12),transparent 32%),
    radial-gradient(circle at 94% 12%,rgba(35,199,255,.10),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.028))!important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.09)!important;
  overflow:hidden!important;
}
.cl-footer-notice:before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,transparent 40%,rgba(255,255,255,.11) 50%,transparent 61%,transparent 100%);
  transform:translateX(-120%);
  animation:clNoticeSheenV30 8.5s ease-in-out infinite;
}
@keyframes clNoticeSheenV30{
  0%,56%{transform:translateX(-120%);opacity:0}
  67%{opacity:1}
  100%{transform:translateX(120%);opacity:0}
}
.cl-footer-notice-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 0 16px;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.075);
  color:rgba(255,255,255,.88);
  font-size:11px;
  font-weight:1000;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.cl-footer-notice h2{
  display:none!important;
}
.cl-footer-notice p{
  max-width:900px;
  margin:10px 0!important;
  font-size:12.2px!important;
  line-height:1.72!important;
  color:rgba(255,255,255,.56)!important;
}
.cl-footer-notice a{
  color:rgba(255,255,255,.86)!important;
  text-decoration:none!important;
  border-bottom:1px solid rgba(255,255,255,.22)!important;
}
.cl-footer-notice a:hover{
  color:#fff!important;
  border-bottom-color:#ff4bd8!important;
}

/* Espaçamentos do rodapé */
.cl-footer-divider{
  margin:42px auto 26px!important;
}
.cl-footer-brand{
  margin-bottom:46px!important;
}
.cl-footer-credit{
  margin-top:58px!important;
  margin-bottom:54px!important;
}
.cl-footer-legal{
  margin-top:58px!important;
}

/* Mário Rick: hover só gira/bounce levemente e volta suave */
.cl-footer-credit a{
  transform-origin:center center;
  transition:transform .48s cubic-bezier(.16,.9,.2,1), filter .35s ease!important;
}
.cl-footer-credit a:hover{
  transform:rotate(-3.5deg) translateY(-3px) scale(1.035)!important;
  filter:drop-shadow(0 0 18px rgba(255,75,216,.22)) drop-shadow(0 0 26px rgba(35,199,255,.10))!important;
}
.cl-footer-credit a:not(:hover){
  transform:rotate(0deg) translateY(0) scale(1)!important;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.07))!important;
}

/* Asterisco divisor com respiro */
.cl-footer-divider img{
  animation:clAsteriskSpin 22s linear infinite, clMarioLogoIn .9s cubic-bezier(.18,.86,.22,1) both!important;
}

/* Corrige o fim do rodapé */
.cl-footer-legal small{
  display:block;
  text-align:center;
}
@media (max-width:700px){
  .cl-footer-notice{
    padding:24px 20px 22px!important;
    border-radius:26px!important;
  }
  .cl-footer-notice-kicker{
    font-size:10px;
    letter-spacing:.13em;
  }
  .cl-footer-credit{
    margin-top:46px!important;
    margin-bottom:44px!important;
  }
}


/* ===== Ajustes v31: logo Com Local no divisor, animações de entrada do rodapé e hover Mário Rick ===== */

/* Rodapé com animação de entrada por etapas quando aparece */
.cl-site-footer{
  animation:clFooterSoftReveal .9s cubic-bezier(.18,.86,.22,1) both!important;
}
.cl-footer-notice,
.cl-footer-divider,
.cl-footer-brand,
.cl-footer-credit,
.cl-footer-legal{
  opacity:0;
  transform:translateY(22px);
  animation:clFooterItemIn .82s cubic-bezier(.18,.86,.22,1) both;
}
.cl-footer-notice{animation-delay:.05s}
.cl-footer-divider{animation-delay:.16s}
.cl-footer-brand{animation-delay:.26s}
.cl-footer-credit{animation-delay:.36s}
.cl-footer-legal{animation-delay:.46s}

@keyframes clFooterSoftReveal{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes clFooterItemIn{
  0%{opacity:0;transform:translateY(26px) scale(.985);filter:blur(8px)}
  72%{opacity:1;transform:translateY(-2px) scale(1.004);filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

/* Divisor com logotipo Com Local no lugar do asterisco */
.cl-footer-divider--logo img{
  width:58px!important;
  height:58px!important;
  padding:0!important;
  border-radius:18px!important;
  object-fit:cover!important;
  background:transparent!important;
  box-shadow:
    0 0 26px rgba(255,255,255,.10),
    0 0 34px rgba(255,75,216,.12),
    0 0 42px rgba(35,199,255,.08)!important;
  animation:clFooterLogoPopIn .9s cubic-bezier(.18,.86,.22,1) both!important;
}
@keyframes clFooterLogoPopIn{
  from{opacity:0;transform:translateY(12px) rotate(-8deg) scale(.78);filter:blur(8px)}
  70%{opacity:1;transform:translateY(-2px) rotate(2deg) scale(1.05);filter:blur(0)}
  to{opacity:1;transform:translateY(0) rotate(0) scale(1);filter:blur(0)}
}

/* Título Aviso importante centralizado + emoji pulsante */
.cl-footer-notice-kicker{
  display:flex!important;
  width:max-content;
  margin:0 auto 18px!important;
  justify-content:center!important;
  text-align:center!important;
}
.cl-footer-notice-kicker span[aria-hidden="true"]{
  display:inline-block;
  transform-origin:center;
  animation:clWarningPulse 1.9s cubic-bezier(.18,.86,.22,1) infinite;
}
@keyframes clWarningPulse{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,216,77,0))}
  42%{transform:scale(1.16);filter:drop-shadow(0 0 7px rgba(255,216,77,.32))}
  68%{transform:scale(.98)}
}

/* Hover do logo Mário Rick: sem glow atrás, rotação/bounce premium e retorno suave */
.cl-footer-credit a{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  filter:none!important;
  transform-origin:50% 55%;
  transition:
    transform .62s cubic-bezier(.16,.96,.22,1),
    filter .42s ease!important;
}
.cl-footer-credit a img{
  filter:none!important;
  transition:transform .62s cubic-bezier(.16,.96,.22,1), filter .42s ease!important;
}
.cl-footer-credit a:hover{
  box-shadow:none!important;
  filter:none!important;
  transform:rotate(-3deg) translateY(-2px) scale(1.028)!important;
}
.cl-footer-credit a:hover img{
  filter:none!important;
  animation:clMarioSoftWobble .72s cubic-bezier(.16,.96,.22,1) both;
}
.cl-footer-credit a:not(:hover){
  transform:rotate(0) translateY(0) scale(1)!important;
}
@keyframes clMarioSoftWobble{
  0%{transform:rotate(0deg) translateY(0) scale(1)}
  36%{transform:rotate(-3.5deg) translateY(-2px) scale(1.035)}
  68%{transform:rotate(1.4deg) translateY(-1px) scale(1.022)}
  100%{transform:rotate(-1.5deg) translateY(-2px) scale(1.028)}
}

/* Ajuste fino de espaçamento final */
.cl-footer-brand{
  margin-bottom:54px!important;
}
.cl-footer-credit{
  margin-top:64px!important;
  margin-bottom:64px!important;
}
.cl-footer-legal{
  margin-top:64px!important;
}

@media (max-width:700px){
  .cl-footer-divider--logo img{
    width:52px!important;
    height:52px!important;
    border-radius:16px!important;
  }
  .cl-footer-notice-kicker{
    width:100%;
  }
}


/* ===== Ajustes v32: divisor Com Local sem sombra escura e hover refinado ===== */

/* Remove a "placa" escura/contorno atrás do logo do divisor */
.cl-footer-divider--logo img{
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:
    drop-shadow(0 0 12px rgba(5, 8, 18, .74))
    drop-shadow(0 0 26px rgba(10, 14, 30, .50))!important;
  object-fit:contain!important;
  width:58px!important;
  height:58px!important;
  animation:clFooterLogoCleanIn .82s cubic-bezier(.16,.96,.22,1) both!important;
  transform-origin:center center;
  transition:
    transform .54s cubic-bezier(.16,.96,.22,1),
    filter .42s ease!important;
}

/* Glow escuro, sem halo branco/sem sombra quadrada */
.cl-footer-divider--logo{
  isolation:isolate;
}
.cl-footer-divider--logo:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:92px;
  height:92px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  pointer-events:none;
  background:
    radial-gradient(circle, rgba(6,8,18,.62) 0%, rgba(8,10,24,.34) 38%, transparent 72%);
  filter:blur(12px);
  z-index:-1;
}

/* Animação de entrada limpa */
@keyframes clFooterLogoCleanIn{
  0%{opacity:0;transform:translateY(12px) scale(.82) rotate(-5deg);filter:blur(7px)}
  68%{opacity:1;transform:translateY(-2px) scale(1.045) rotate(1.5deg);filter:drop-shadow(0 0 12px rgba(5,8,18,.74))}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0deg);filter:drop-shadow(0 0 12px rgba(5,8,18,.74)) drop-shadow(0 0 26px rgba(10,14,30,.50))}
}

/* Hover: animação charmosa, sem subir e sem glow branco */
@media (hover:hover) and (pointer:fine){
  .cl-footer-divider--logo img:hover{
    animation:clFooterLogoHoverSpin .78s cubic-bezier(.16,.96,.22,1) both!important;
    filter:
      drop-shadow(0 0 14px rgba(4, 6, 16, .88))
      drop-shadow(0 0 32px rgba(10, 14, 30, .66))
      drop-shadow(0 0 22px rgba(255,75,216,.10))!important;
  }
}
@keyframes clFooterLogoHoverSpin{
  0%{transform:rotate(0deg) scale(1)}
  42%{transform:rotate(-10deg) scale(1.055)}
  74%{transform:rotate(5deg) scale(1.035)}
  100%{transform:rotate(0deg) scale(1.02)}
}

/* Garante que regras antigas do divisor não voltem a criar círculo/sombra */
.cl-footer-divider--logo img,
.cl-footer-divider--logo img:hover{
  -webkit-mask:none!important;
  mask:none!important;
}


/* ===== Ajustes v33: mobile results bar, cards largura fixa, footer logo sem replay e domínio maior ===== */

@media (max-width:700px){
  .cl-results-bar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    margin-top:14px!important;
  }
  .cl-results-bar > div{
    order:1!important;
    width:100%!important;
    min-width:0!important;
  }
  .cl-results-bar > div strong,
  .cl-results-bar > div span,
  .cl-results-bar > div small{
    display:block;
    line-height:1.28;
  }
  .cl-results-actions{
    order:2!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    align-items:stretch!important;
  }
  .cl-results-actions > button,
  .cl-results-actions .cl-toggle-days{
    width:100%!important;
    min-width:0!important;
    justify-content:center!important;
    white-space:nowrap!important;
  }
}

@media (max-width:700px){
  .cl-date-content,
  .cl-events-grid{
    width:100%!important;
    grid-template-columns:1fr!important;
    justify-items:stretch!important;
    align-items:stretch!important;
  }
  .cl-date-card-wrap,
  .cl-event-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .cl-event-card{
    align-self:stretch!important;
  }
  .cl-event-card__body,
  .cl-event-card__media{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}

.cl-footer-divider--logo img{
  animation:clFooterLogoCleanIn .82s cubic-bezier(.16,.96,.22,1) both!important;
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .cl-footer-divider--logo img:hover{
    animation:none!important;
    transform:rotate(-4deg) scale(1.045)!important;
    transition:transform .46s cubic-bezier(.16,.96,.22,1), filter .32s ease!important;
  }
  .cl-footer-divider--logo img:not(:hover){
    transform:rotate(0deg) scale(1)!important;
    transition:transform .62s cubic-bezier(.16,.96,.22,1), filter .32s ease!important;
  }
}

.cl-footer-domain{
  font-size:30px!important;
  letter-spacing:.018em!important;
  line-height:1!important;
}
.cl-footer-brand p{
  letter-spacing:.205em!important;
  margin-top:10px!important;
}
@media (max-width:700px){
  .cl-footer-domain{
    font-size:26px!important;
    letter-spacing:.012em!important;
  }
  .cl-footer-brand p{
    letter-spacing:.16em!important;
  }
}


/* ===== Ajustes v34: mobile refinado, AVISE-ME alinhado, divisor sem piscar e novas cores ===== */

/* Mobile: centraliza contagem/filtros e mantém botões lado a lado */
@media (max-width:700px){
  .cl-results-bar{
    align-items:center!important;
    text-align:center!important;
  }
  .cl-results-bar > div{
    text-align:center!important;
  }
  .cl-results-actions{
    display:flex!important;
    flex-direction:row!important;
    justify-content:center!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
  }
  .cl-results-actions > button,
  .cl-results-actions .cl-toggle-days{
    flex:1 1 0!important;
    min-width:0!important;
    max-width:calc(50% - 5px)!important;
    width:auto!important;
    padding-inline:10px!important;
    font-size:11px!important;
  }
  .cl-results-actions svg{
    width:16px!important;
    height:16px!important;
  }
}

/* Mobile: corrige AVISE-ME/EM BREVE muito para a direita */
@media (max-width:700px){
  .cl-event-card__status,
  .cl-status-badge,
  .cl-status-badge[data-status="upcoming"]{
    right:auto!important;
    margin-left:auto!important;
    align-self:flex-start!important;
  }
  .cl-event-card__meta,
  .cl-event-card__header,
  .cl-event-card__top{
    min-width:0!important;
  }
  .cl-status-badge[data-status="upcoming"]{
    width:94px!important;
    min-width:94px!important;
    max-width:94px!important;
    padding-inline:8px!important;
    justify-content:center!important;
    text-align:center!important;
  }
}

/* Divisor: remove qualquer animação no estado normal para não piscar ao sair do hover */
.cl-footer-divider--logo img{
  animation:none!important;
  opacity:1!important;
  transform:rotate(0deg) scale(1)!important;
  transition:transform .52s cubic-bezier(.16,.96,.22,1), filter .32s ease!important;
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .cl-footer-divider--logo img:hover{
    animation:none!important;
    transform:rotate(-4deg) scale(1.045)!important;
  }
  .cl-footer-divider--logo img:not(:hover){
    animation:none!important;
    opacity:1!important;
    transform:rotate(0deg) scale(1)!important;
  }
}

/* Cores finais das datas pedidas */
.cl-date-section[data-date="04/06"]{--day-color:#ff8a1c!important;}
.cl-date-section[data-date="05/06"]{--day-color:#ffe15c!important;}
.cl-date-section[data-date="06/06"]{--day-color:#ff3b3b!important;}

.cl-event-card[data-date="04/06"]{--day-color:#ff8a1c!important;}
.cl-event-card[data-date="05/06"]{--day-color:#ffe15c!important;}
.cl-event-card[data-date="06/06"]{--day-color:#ff3b3b!important;}

.cl-date-section[data-date="04/06"] .cl-date-section__pill,
.cl-event-card[data-date="04/06"] .cl-event-card__date{
  background:#ff8a1c!important;
  color:#0b0b0f!important;
}
.cl-date-section[data-date="05/06"] .cl-date-section__pill,
.cl-event-card[data-date="05/06"] .cl-event-card__date{
  background:#ffe15c!important;
  color:#0b0b0f!important;
}
.cl-date-section[data-date="06/06"] .cl-date-section__pill,
.cl-event-card[data-date="06/06"] .cl-event-card__date{
  background:#ff3b3b!important;
  color:#fff!important;
}

/* Mantém 07/06 especial sem ser afetado pelas cores sólidas */
.cl-date-section[data-date="07/06"] .cl-date-section__pill,
.cl-event-card[data-date="07/06"] .cl-event-card__date{
  color:#fff!important;
}


/* ===== Ajustes v35: imagens padrão por venue/casa ===== */

/* Garante que imagens vindas de assets/venues carreguem limpas e preencham o card */
.cl-event-card__image{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}


/* ===== Ajustes v35.1: fallback de event image para venue image ===== */
.cl-event-card__image{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}


/* ===== Ajustes v35.3: venue primeiro, evento substitui se existir ===== */
.cl-event-card__image{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}


/* ===== Ajustes v35.6: ghost do EM BREVE, grid 2 colunas e novas venues ===== */

/* 1) Corrige definitivamente o "fantasma" retangular no hover do EM BREVE/AVISE-ME.
   A causa era conflito de pseudo-elementos/efeitos globais de hover. Aqui o badge fica
   isolado, sem ::before/::after decorativo e sem qualquer glow que possa vazar. */
.cl-event-card .cl-status-badge,
.cl-event-card .cl-status-badge[data-status="upcoming"]{
  contain:paint!important;
  isolation:isolate!important;
  overflow:hidden!important;
  position:relative!important;
  z-index:8!important;
  transform:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.12)!important;
  background-image:none!important;
}
.cl-event-card .cl-status-badge::before,
.cl-event-card .cl-status-badge::after,
.cl-event-card .cl-status-badge[data-status="upcoming"]::before,
.cl-event-card .cl-status-badge[data-status="upcoming"]::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
  width:0!important;
  height:0!important;
  inset:auto!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}
.cl-event-card .cl-status-badge[data-status="upcoming"]:hover{
  contain:paint!important;
  isolation:isolate!important;
  overflow:hidden!important;
  transform:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 0 0 1px rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.145)!important;
  background-image:none!important;
  color:#fff!important;
}
@media (hover:hover) and (pointer:fine){
  .cl-event-card .cl-status-badge[data-status="upcoming"]:hover{
    font-size:0!important;
  }
  .cl-event-card .cl-status-badge[data-status="upcoming"]:hover span{
    display:none!important;
  }
  .cl-event-card .cl-status-badge[data-status="upcoming"]:hover::after{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    content:var(--cl-remind-label, "AVISE-ME")!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    place-items:center!important;
    color:#fff!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.055em!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    transform:none!important;
  }
}

/* 2) Corrige a largura/organização em resolução intermediária.
   A grid fica com trilhas iguais e os cards ocupam 100% da coluna, sem masonry/buracos. */
@media (min-width:701px) and (max-width:1100px){
  .cl-events-grid,
  .cl-date-content{
    display:grid!important;
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
    gap:18px!important;
    justify-items:stretch!important;
    align-items:stretch!important;
  }
  .cl-date-card-wrap{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
  }
  .cl-event-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:100%!important;
    align-self:stretch!important;
    box-sizing:border-box!important;
  }
  .cl-event-card__body{
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .cl-card-actions{
    margin-top:auto!important;
  }
}

/* Em desktop completo também reforça trilhas iguais */
@media (min-width:1101px){
  .cl-events-grid,
  .cl-date-content{
    grid-template-columns:repeat(3, minmax(0, 1fr))!important;
    justify-items:stretch!important;
    align-items:stretch!important;
  }
  .cl-date-card-wrap,
  .cl-event-card{
    width:100%!important;
    max-width:100%!important;
  }
}


/* ===== v35.8: carregamento robusto de imagens event -> venue ===== */
.cl-event-card__image{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
  background:transparent!important;
}


/* ===== v35.10: mobile mostra AVISE-ME sem depender de hover ===== */

/* No mobile não existe hover real; o botão ficava vazio porque a troca de texto era feita só no :hover.
   Agora, em telas touch/mobile, o status upcoming exibe AVISE-ME diretamente. */
@media (max-width:700px), (hover:none), (pointer:coarse){
  .cl-event-card .cl-status-badge[data-status="upcoming"],
  .cl-event-card .cl-status-badge.is-upcoming,
  .cl-event-card .cl-status-badge.status-upcoming{
    font-size:0!important;
    color:transparent!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:94px!important;
    min-width:94px!important;
    max-width:94px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 10px!important;
    overflow:hidden!important;
    text-align:center!important;
    background:rgba(255,255,255,.145)!important;
    border:1px solid rgba(255,255,255,.20)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 0 0 1px rgba(255,255,255,.06)!important;
  }

  .cl-event-card .cl-status-badge[data-status="upcoming"] span,
  .cl-event-card .cl-status-badge.is-upcoming span,
  .cl-event-card .cl-status-badge.status-upcoming span{
    display:none!important;
  }

  .cl-event-card .cl-status-badge[data-status="upcoming"]::before,
  .cl-event-card .cl-status-badge.is-upcoming::before,
  .cl-event-card .cl-status-badge.status-upcoming::before{
    display:none!important;
    content:none!important;
  }

  .cl-event-card .cl-status-badge[data-status="upcoming"]::after,
  .cl-event-card .cl-status-badge.is-upcoming::after,
  .cl-event-card .cl-status-badge.status-upcoming::after{
    content:var(--cl-remind-label, "AVISE-ME")!important;
    display:grid!important;
    place-items:center!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:1!important;
    visibility:visible!important;
    color:#fff!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.055em!important;
    background:transparent!important;
    transform:none!important;
    filter:none!important;
    box-shadow:none!important;
  }
}

/* Desktop mantém a lógica original: EM BREVE, e no hover troca para AVISE-ME. */
@media (hover:hover) and (pointer:fine) and (min-width:701px){
  .cl-event-card .cl-status-badge[data-status="upcoming"]{
    color:#fff!important;
    font-size:10px!important;
  }
}


/* ===== v35.11 · Arquivo da Agenda sem tabs retráteis =====
   Eventos encerrados agora aparecem direto no arquivo, sem cabeçalhos de data clicáveis.
   Isso evita conflito de data-tab com as abas ativas que têm a mesma data_label. */
.cl-past-section.is-archive-flat{
  margin-top: clamp(28px, 5vw, 72px) !important;
  border-color: rgba(255,255,255,.13) !important;
  background:
    linear-gradient(135deg, rgba(180,180,190,.075), rgba(90,80,105,.105)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  color: rgba(235,238,245,.72) !important;
}

.cl-past-section.is-archive-flat h2{
  color: rgba(235,238,245,.70) !important;
}

.cl-past-section.is-archive-flat span{
  color: rgba(235,238,245,.58) !important;
}

.cl-past-archive-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  width:100% !important;
  margin-top: 18px !important;
}

.cl-past-archive-item{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  display:flex !important;
}

.cl-past-archive-grid .cl-event-card{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:100% !important;
  opacity:.48 !important;
  filter: grayscale(1) saturate(.12) brightness(.82) !important;
  border-color: rgba(190,196,205,.20) !important;
  background:
    linear-gradient(135deg, rgba(100,105,115,.16), rgba(55,58,70,.20)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 10px 28px rgba(0,0,0,.20) !important;
  transform:none !important;
  cursor: default !important;
  pointer-events: none !important;
}

.cl-past-archive-grid .cl-event-card:hover{
  transform:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 10px 28px rgba(0,0,0,.20) !important;
}

.cl-past-archive-grid .cl-event-card__date,
.cl-past-archive-grid .cl-date-section__pill,
.cl-past-archive-grid .cl-status-badge{
  background: rgba(180,185,195,.16) !important;
  color: rgba(235,238,245,.70) !important;
  border-color: rgba(210,215,225,.16) !important;
  box-shadow: none !important;
}

.cl-past-archive-grid .cl-event-card__image{
  filter: grayscale(1) saturate(.05) contrast(.88) brightness(.66) !important;
}

.cl-past-archive-grid .cl-tag{
  background: rgba(150,155,165,.13) !important;
  color: rgba(235,238,245,.62) !important;
  border-color: rgba(215,220,230,.13) !important;
  box-shadow:none !important;
}

.cl-past-archive-grid .cl-card-actions a,
.cl-past-archive-grid .cl-card-actions button{
  background: rgba(130,135,145,.10) !important;
  color: rgba(235,238,245,.45) !important;
  border-color: rgba(215,220,230,.11) !important;
  box-shadow:none !important;
}

@media (min-width:701px) and (max-width:1100px){
  .cl-past-archive-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width:700px){
  .cl-past-archive-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .cl-past-section.is-archive-flat{
    margin-top: 36px !important;
  }
}


/* ===== v35.12: Arquivo da Agenda corrigido, sem tabs e com cards em grade normal ===== */

/* O arquivo precisa ocupar a largura total da grade principal. 
   Isso evita o bug em que os cards ficavam estreitos dentro de uma coluna. */
.cl-past-section.is-archive-flat,
.cl-past-archive-grid{
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.cl-past-section.is-archive-flat{
  margin-top: clamp(30px, 5vw, 76px) !important;
  border-color: rgba(190,196,205,.16) !important;
  background:
    linear-gradient(135deg, rgba(145,150,160,.075), rgba(78,76,90,.115)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
  color: rgba(235,238,245,.68) !important;
}

/* Se alguma tab de data antiga vazar para dentro do arquivo, ela some. */
.cl-past-archive-grid .cl-date-section,
.cl-past-archive-grid .cl-date-header,
.cl-past-archive-grid .cl-date-toggle{
  display: none !important;
}

/* Grade igual ao grid normal de eventos */
.cl-past-archive-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  margin-top: 18px !important;
  overflow: visible !important;
}

.cl-past-archive-item{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  display:block !important;
  box-sizing:border-box !important;
}

/* Cards do arquivo: mesma largura/estrutura de antes, apenas desativados visualmente */
.cl-past-archive-grid .cl-event-card{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  box-sizing:border-box !important;
  opacity:.56 !important;
  filter: grayscale(1) saturate(.08) brightness(.78) !important;
  border-color: rgba(190,196,205,.20) !important;
  background:
    linear-gradient(180deg, rgba(120,124,134,.15), rgba(45,48,58,.18)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 10px 28px rgba(0,0,0,.20) !important;
  transform:none !important;
  cursor: default !important;
  pointer-events: none !important;
}

.cl-past-archive-grid .cl-event-card:hover{
  transform:none !important;
}

.cl-past-archive-grid .cl-event-card__media{
  width:100% !important;
  flex:0 0 auto !important;
}

.cl-past-archive-grid .cl-event-card__body{
  width:100% !important;
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  box-sizing:border-box !important;
}

.cl-past-archive-grid .cl-card-actions{
  margin-top:auto !important;
}

/* Cinza/desativado em data, status, tags e botões do arquivo */
.cl-past-archive-grid .cl-event-card__date,
.cl-past-archive-grid .cl-status-badge{
  background: rgba(175,180,190,.16) !important;
  color: rgba(235,238,245,.64) !important;
  border-color: rgba(210,215,225,.14) !important;
  box-shadow: none !important;
}

.cl-past-archive-grid .cl-event-card__image{
  filter: grayscale(1) saturate(.04) contrast(.88) brightness(.66) !important;
}

.cl-past-archive-grid .cl-tag{
  background: rgba(150,155,165,.12) !important;
  color: rgba(235,238,245,.58) !important;
  border-color: rgba(215,220,230,.12) !important;
  box-shadow:none !important;
}

.cl-past-archive-grid .cl-card-actions a,
.cl-past-archive-grid .cl-card-actions button{
  background: rgba(130,135,145,.10) !important;
  color: rgba(235,238,245,.42) !important;
  border-color: rgba(215,220,230,.10) !important;
  box-shadow:none !important;
}

@media (min-width:701px) and (max-width:1100px){
  .cl-past-archive-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width:700px){
  .cl-past-archive-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}


/* ===== v35.13: Locais salvos sem eventos encerrados + swipe para remover ===== */

.cl-route-list{
  gap:12px !important;
}

.cl-route-swipe{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  max-height:150px;
  transition:max-height .26s ease, opacity .24s ease, transform .24s ease, margin .26s ease;
  touch-action:pan-y;
}

.cl-route-swipe.is-removing{
  opacity:0;
  transform:translateX(-34px) scale(.985);
  max-height:0;
  margin-top:-12px;
  margin-bottom:-12px;
  pointer-events:none;
}

.cl-route-swipe .cl-route-delete-bg{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:20px;
  border-radius:18px;
  background:
    linear-gradient(90deg, rgba(255,55,95,0), rgba(255,55,95,.78));
  color:#fff;
  font-weight:1000;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:11px;
  opacity:.92;
  pointer-events:none;
}

.cl-route-swipe .cl-route-item{
  position:relative;
  z-index:2;
  transform:translateX(var(--swipe-x,0px));
  transition:transform .24s cubic-bezier(.18,.86,.22,1), background .18s ease, border-color .18s ease;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--route-day-color,#fff) 16%, transparent), transparent 40%),
    rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.cl-route-swipe.is-swiping .cl-route-item{
  transition:none;
}

.cl-route-item__content{
  min-width:0;
}

.cl-route-item__time{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-weight:950;
  font-size:12px;
  line-height:1.1;
  margin-bottom:5px;
}

.cl-route-item__time .date-color{
  color:var(--route-day-color,#fff);
  text-shadow:0 0 14px color-mix(in srgb, var(--route-day-color,#fff) 42%, transparent);
}

.cl-route-item__title{
  display:block;
  color:#fff;
  font-weight:950;
  line-height:1.16;
  letter-spacing:-.025em;
  margin-bottom:3px;
}

.cl-route-remove{
  flex:0 0 auto;
}

@media (hover:hover) and (pointer:fine){
  .cl-route-swipe .cl-route-item:hover{
    border-color:rgba(255,255,255,.18);
    background:
      radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--route-day-color,#fff) 22%, transparent), transparent 44%),
      rgba(255,255,255,.095);
  }
}


/* ===== v35.14: correção visual do swipe/remover em Locais Salvos ===== */

/* O fundo REMOVER não deve aparecer quando o item está parado.
   Ele só aparece enquanto a pessoa está arrastando o card para a esquerda. */
.cl-route-swipe .cl-route-delete-bg{
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateX(18px) !important;
  transition:opacity .16s ease, visibility .16s ease, transform .2s cubic-bezier(.18,.86,.22,1) !important;
}

.cl-route-swipe.is-swiping .cl-route-delete-bg{
  opacity:.96 !important;
  visibility:visible !important;
  transform:translateX(0) !important;
}

/* A camada do card salvo precisa ser mais sólida para não deixar o REMOVER vazar por transparência. */
.cl-route-swipe .cl-route-item{
  z-index:3 !important;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--route-day-color,#fff) 18%, transparent), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.115), rgba(255,255,255,.065)) !important;
  backdrop-filter:blur(14px) saturate(1.18) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.18) !important;
}

/* Botão X fica acima do card, limpo e sem misturar com o texto do fundo. */
.cl-route-swipe .cl-route-remove{
  position:relative !important;
  z-index:5 !important;
  display:grid !important;
  place-items:center !important;
  min-width:38px !important;
  width:38px !important;
  height:38px !important;
  padding:0 !important;
  border-radius:999px !important;
  background:rgba(10,12,18,.46) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.cl-route-swipe .cl-route-remove svg{
  width:17px !important;
  height:17px !important;
  opacity:.94 !important;
}

/* Enquanto arrasta, o X vai junto com o card e o texto REMOVER aparece por trás, sem sobreposição inicial. */
.cl-route-swipe.is-swiping .cl-route-remove{
  background:rgba(10,12,18,.38) !important;
}


/* ===== v35.15: trava scroll do fundo com Locais Salvos aberto + limpar salvos sequencial ===== */

/* Quando o painel lateral está aberto, a página de trás não pode rolar no iPhone. */
html.cl-route-open-lock,
body.cl-route-open-lock{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

/* A área sobreposta captura o toque; só o painel lateral deve rolar. */
#cl-route-overlay{
  overscroll-behavior:none!important;
  touch-action:none!important;
}

#cl-route-panel{
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
}

/* Evita que uma área vazia dentro do painel transfira scroll para o fundo. */
#cl-route-panel,
#cl-route-panel *{
  -webkit-tap-highlight-color:transparent;
}

/* Animação premium para limpar todos os salvos: cada item desliza para a esquerda em sequência. */
.cl-route-swipe.is-clearing-out{
  opacity:0!important;
  transform:translateX(-42px) scale(.985)!important;
  max-height:0!important;
  margin-top:-12px!important;
  margin-bottom:-12px!important;
  pointer-events:none!important;
}

.cl-route-swipe.is-clearing-out .cl-route-item{
  transform:translateX(-118px)!important;
  transition:transform .34s cubic-bezier(.18,.86,.22,1), opacity .28s ease!important;
}

#cl-clear-route.is-clearing{
  opacity:.62;
  pointer-events:none;
  filter:grayscale(.25);
}


/* ===== v35.17: estabilidade do painel Locais Salvos no iPhone ===== */

/* Com a aba lateral aberta, o documento de trás não rola e não muda de posição. */
html.cl-route-open-lock,
body.cl-route-open-lock{
  overflow:hidden!important;
  overscroll-behavior:none!important;
  background:#07111d!important;
}

/* O overlay fica escuro/estável. Evita o "flash branco" do backdrop no iOS/Safari. */
.cl-route-overlay,
#cl-route-overlay{
  background:rgba(3,5,12,.74)!important;
  -webkit-backdrop-filter:blur(14px) brightness(.55) saturate(.92)!important;
  backdrop-filter:blur(14px) brightness(.55) saturate(.92)!important;
  overscroll-behavior:none!important;
  touch-action:none!important;
}

/* O painel é a única área rolável quando está aberto. */
.cl-route-panel,
#cl-route-panel{
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
}

/* Garante que remover/limpar salvos não dispare repaint/scroll no grid por trás. */
.cl-route-overlay.is-visible ~ *{
  overscroll-behavior:none!important;
}


/* ===== v35.18: correção definitiva do "fantasma" retangular nos cards ===== */

/*
  O fantasma vinha de composição visual entre backdrop-filter/hover/pseudo-elementos
  dos badges/botões com o grid. Em alguns browsers isso criava uma camada retangular
  por trás dos cards vizinhos. A solução aqui é isolar o card e deixar os hovers
  dos botões/badges sem blur/glow externo.
*/

.cl-events-grid,
.cl-date-content,
.cl-date-card-wrap{
  isolation:isolate!important;
}

.cl-event-card{
  isolation:isolate!important;
  contain:layout paint!important;
  overflow:hidden!important;
  transform:translateZ(0)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}

@media (hover:hover) and (pointer:fine){
  .cl-event-card:hover{
    transform:translateZ(0) scale(1.006)!important;
    filter:none!important;
  }
}

/* O corpo do card não pode criar camada/pseudo que vaze para outro card */
.cl-event-card__body,
.cl-event-time,
.cl-card-actions{
  isolation:isolate!important;
  contain:paint!important;
}

.cl-event-card__body::before,
.cl-event-card__body::after,
.cl-event-time::before,
.cl-event-time::after,
.cl-card-actions::before,
.cl-card-actions::after{
  display:none!important;
  content:none!important;
}

/* Badge EM BREVE/AVISE-ME sem backdrop-filter. Isso elimina o retângulo fantasma. */
.cl-status-badge,
.cl-status-badge[data-status="upcoming"]{
  isolation:isolate!important;
  contain:paint!important;
  overflow:hidden!important;
  transform:translateZ(0)!important;
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:rgba(86,94,108,.72)!important;
  background-image:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(255,255,255,.06)!important;
  text-shadow:none!important;
}

.cl-status-badge::before,
.cl-status-badge[data-status="upcoming"]::before{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}

@media (hover:hover) and (pointer:fine){
  .cl-status-badge[data-status="upcoming"]:hover{
    color:transparent!important;
    font-size:0!important;
    transform:translateZ(0)!important;
    filter:none!important;
    -webkit-filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:rgba(100,108,124,.78)!important;
    background-image:none!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(255,255,255,.08)!important;
  }

  .cl-status-badge[data-status="upcoming"]:hover::after{
    content:var(--cl-remind-label, "AVISE-ME")!important;
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    height:100%!important;
    opacity:1!important;
    visibility:visible!important;
    color:#fff!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    -webkit-filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transform:none!important;
  }
}

/* Botões do card: hover interno, sem blur/glow externo nem camadas compostas. */
.cl-card-actions a,
.cl-card-actions button{
  isolation:isolate!important;
  contain:paint!important;
  overflow:hidden!important;
  transform:translateZ(0)!important;
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}

.cl-card-actions a::before,
.cl-card-actions a::after,
.cl-card-actions button::before,
.cl-card-actions button::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
}

.cl-card-actions a:hover,
.cl-card-actions button:not([disabled]):hover{
  transform:translateZ(0)!important;
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:rgba(255,255,255,.115)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(255,255,255,.055)!important;
}

/* Card salvo pode continuar destacado, mas sem projetar retângulo/glow nos vizinhos */
.cl-event-card.is-saved-card{
  box-shadow:0 0 0 1px rgba(255,75,216,.38), 0 16px 42px rgba(0,0,0,.30)!important;
}
.cl-event-card.is-saved-card:before{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 28px rgba(255,75,216,.08)!important;
}


/* ===== v35.19: remove totalmente hover/efeito do EM BREVE/AVISE-ME ===== */

/*
  Correção direta: o fantasma aparecia apenas no hover do botão EM BREVE/AVISE-ME.
  Então removemos qualquer mudança visual no hover desse badge no desktop.
  O botão não gera ::after, não troca texto, não cria glow, não usa blur e não anima.
*/

.cl-status-badge[data-status="upcoming"]{
  position:relative!important;
  isolation:auto!important;
  contain:none!important;
  overflow:hidden!important;
  width:96px!important;
  min-width:96px!important;
  max-width:96px!important;
  height:34px!important;
  padding:0 10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  background:rgba(96,104,118,.76)!important;
  background-image:none!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
  text-shadow:none!important;
}

.cl-status-badge[data-status="upcoming"]::before,
.cl-status-badge[data-status="upcoming"]::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
  width:0!important;
  height:0!important;
  position:static!important;
  inset:auto!important;
  background:none!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}

@media (hover:hover) and (pointer:fine){
  .cl-status-badge[data-status="upcoming"]:hover,
  .cl-status-badge[data-status="upcoming"]:focus,
  .cl-status-badge[data-status="upcoming"]:focus-visible,
  .cl-status-badge[data-status="upcoming"]:active{
    color:#fff!important;
    font-size:10px!important;
    line-height:1!important;
    background:rgba(96,104,118,.76)!important;
    background-image:none!important;
    border-color:rgba(255,255,255,.20)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;
    filter:none!important;
    -webkit-filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
    text-shadow:none!important;
  }

  .cl-status-badge[data-status="upcoming"]:hover::before,
  .cl-status-badge[data-status="upcoming"]:hover::after,
  .cl-status-badge[data-status="upcoming"]:focus::before,
  .cl-status-badge[data-status="upcoming"]:focus::after,
  .cl-status-badge[data-status="upcoming"]:active::before,
  .cl-status-badge[data-status="upcoming"]:active::after{
    display:none!important;
    content:none!important;
    opacity:0!important;
    visibility:hidden!important;
  }
}

/* Mantém o comportamento mobile: no touch aparece AVISE-ME sem depender de hover. */
@media (max-width:700px), (hover:none), (pointer:coarse){
  .cl-status-badge[data-status="upcoming"]{
    font-size:0!important;
    color:transparent!important;
  }
  .cl-status-badge[data-status="upcoming"]::after{
    content:var(--cl-remind-label, "AVISE-ME")!important;
    display:grid!important;
    place-items:center!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:1!important;
    visibility:visible!important;
    color:#fff!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.055em!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    transform:none!important;
  }
}


/* ===== v35.22: corrige hover do Salvo/Remover e bordas cortadas dos botões ===== */

/* Área de ações com respiro para não cortar a borda inferior dos botões */
.cl-event-card__body{
  padding-bottom:20px!important;
}

.cl-card-actions{
  contain:none!important;
  overflow:visible!important;
  padding-bottom:3px!important;
  margin-bottom:0!important;
  align-items:stretch!important;
}

.cl-card-actions a,
.cl-card-actions button{
  position:relative!important;
  overflow:hidden!important;
  min-height:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  line-height:1!important;
  padding-top:10px!important;
  padding-bottom:10px!important;
  box-sizing:border-box!important;
}

/* Evita que o botão do status fique "colado" e pareça cortado no canto direito */
.cl-event-time{
  overflow:visible!important;
  padding-right:3px!important;
}

.cl-status-badge{
  flex:0 0 auto!important;
  margin-right:2px!important;
  box-sizing:border-box!important;
}

/* Salvo volta a ter o comportamento correto:
   normal = Salvo rainbow; hover desktop = Remover visível */
.cl-event-card.is-saved-card .cl-card-actions button.is-saved{
  position:relative!important;
  overflow:hidden!important;
  background:linear-gradient(90deg,#ff245d,#ff8a1c,#ffe600,#33e36f,#23c7ff,#7e56ff,#ff4bd8,#ff245d)!important;
  background-size:240% 100%!important;
  animation:rainbowFlow 6.5s linear infinite!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.28)!important;
  box-shadow:0 0 18px rgba(255,75,216,.18)!important;
}

.cl-event-card.is-saved-card .cl-card-actions button.is-saved span,
.cl-event-card.is-saved-card .cl-card-actions button.is-saved svg{
  opacity:1!important;
  visibility:visible!important;
}

@media (hover:hover) and (pointer:fine){
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover{
    font-size:13px!important;
    color:#fff!important;
    background:rgba(255,255,255,.12)!important;
    background-image:none!important;
    animation:none!important;
    border-color:rgba(255,255,255,.22)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
  }

  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover span,
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover svg{
    opacity:0!important;
    visibility:hidden!important;
  }

  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover::after{
    content:"Remover"!important;
    display:grid!important;
    place-items:center!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:1!important;
    visibility:visible!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:900!important;
    line-height:1!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    transform:none!important;
  }
}

/* No mobile/touch não existe hover real: mantém Salvo visível. */
@media (hover:none), (pointer:coarse){
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved span,
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved svg{
    opacity:1!important;
    visibility:visible!important;
  }
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved::after{
    display:none!important;
    content:none!important;
  }
}


/* ===== v35.23: restaura a cor original do botão SALVO ===== */

/*
  Correção pontual: o botão Salvo não deve ficar rainbow.
  Mantém o estilo rosa/magenta com texto branco, como estava antes.
  O hover de desktop continua mostrando "Remover", mas sem alterar a estrutura do restante do card.
*/

.cl-event-card.is-saved-card .cl-card-actions button.is-saved,
.cl-card-actions button.is-saved{
  background:linear-gradient(135deg,#ff245d 0%, #e83ed1 58%, #7e56ff 100%)!important;
  background-size:100% 100%!important;
  animation:none!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.22)!important;
  box-shadow:
    0 0 18px rgba(255,75,216,.20),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
}

.cl-event-card.is-saved-card .cl-card-actions button.is-saved span,
.cl-card-actions button.is-saved span,
.cl-event-card.is-saved-card .cl-card-actions button.is-saved svg,
.cl-card-actions button.is-saved svg{
  color:#fff!important;
  fill:currentColor!important;
  opacity:1!important;
  visibility:visible!important;
}

@media (hover:hover) and (pointer:fine){
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover{
    color:#fff!important;
    background:rgba(255,255,255,.115)!important;
    background-image:none!important;
    background-size:100% 100%!important;
    animation:none!important;
    border-color:rgba(255,255,255,.22)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
  }

  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover span,
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover svg{
    opacity:0!important;
    visibility:hidden!important;
  }

  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover::after{
    content:"Remover"!important;
    display:grid!important;
    place-items:center!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:1!important;
    visibility:visible!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:900!important;
    line-height:1!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    transform:none!important;
  }
}

@media (hover:none), (pointer:coarse){
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved::after{
    display:none!important;
    content:none!important;
  }
}


/* ===== v35.24: badge de salvo clicável + AGORA no card live + label Acontecendo agora ===== */

/* Badge coração clicável no canto superior: hover vira contorno e click remove com microanimação. */
.cl-saved-badge{
  appearance:none!important;
  -webkit-appearance:none!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  border:1px solid rgba(255,255,255,.25)!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  transform-origin:center!important;
  transition:transform .18s cubic-bezier(.18,.86,.22,1), box-shadow .18s ease, background .18s ease!important;
}

.cl-saved-badge .cl-heart-icon path{
  fill:currentColor!important;
  stroke:currentColor!important;
  stroke-width:0!important;
  transition:fill .14s ease, stroke-width .14s ease, transform .14s ease!important;
}

@media (hover:hover) and (pointer:fine){
  .cl-saved-badge:hover{
    transform:scale(1.06)!important;
    box-shadow:0 0 18px rgba(255,75,216,.32)!important;
  }
  .cl-saved-badge:hover .cl-heart-icon path{
    fill:transparent!important;
    stroke:currentColor!important;
    stroke-width:1.9!important;
  }
}

.cl-saved-badge.is-unsaving{
  pointer-events:none!important;
  animation:clBadgeUnsave .22s cubic-bezier(.18,.86,.22,1) both!important;
}

@keyframes clBadgeUnsave{
  0%{opacity:1;transform:scale(1)}
  48%{opacity:1;transform:scale(1.18)}
  100%{opacity:0;transform:scale(.24)}
}

/* Evento acontecendo agora: a badge da data vira AGORA pulsante. */
.cl-event-card__date.is-now-date{
  min-width:78px!important;
  color:#03150a!important;
  background:linear-gradient(135deg,#33e36f,#23c7ff)!important;
  border-color:rgba(255,255,255,.40)!important;
  box-shadow:0 0 18px rgba(51,227,111,.44),0 0 28px rgba(35,199,255,.22)!important;
  animation:clNowBadgePulse 1.05s ease-in-out infinite!important;
}

@keyframes clNowBadgePulse{
  0%,100%{
    transform:scale(1);
    filter:saturate(1);
    box-shadow:0 0 14px rgba(51,227,111,.34),0 0 24px rgba(35,199,255,.18);
  }
  50%{
    transform:scale(1.055);
    filter:saturate(1.25);
    box-shadow:0 0 24px rgba(51,227,111,.62),0 0 34px rgba(35,199,255,.32);
  }
}

/* Ponto do filtro Acontecendo agora segue vivo/piscante. */
.cl-live-dot{
  animation:livePulse 1.2s infinite!important;
}


/* ===== v35.25: refinamento premium da badge AGORA ===== */

.cl-event-card__date.is-now-date{
  min-width:86px!important;
  width:auto!important;
  height:34px!important;
  padding:0 16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  box-sizing:border-box!important;

  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
  color:#ffffff!important;
  text-shadow:0 1px 6px rgba(0,0,0,.30)!important;

  background:
    linear-gradient(135deg,
      rgba(51,227,111,.95) 0%,
      rgba(35,199,255,.92) 52%,
      rgba(126,86,255,.86) 100%
    )!important;
  border:1px solid rgba(255,255,255,.38)!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 16px rgba(51,227,111,.38),
    0 0 28px rgba(35,199,255,.22),
    inset 0 1px 0 rgba(255,255,255,.30)!important;
  transform-origin:center!important;
  animation:clNowBadgePremiumPulse 1.55s cubic-bezier(.22,.7,.22,1) infinite!important;
  white-space:nowrap!important;
}

@keyframes clNowBadgePremiumPulse{
  0%,100%{
    transform:scale(1);
    filter:saturate(1) brightness(1);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08),
      0 0 13px rgba(51,227,111,.30),
      0 0 24px rgba(35,199,255,.16),
      inset 0 1px 0 rgba(255,255,255,.28);
  }
  45%{
    transform:scale(1.035);
    filter:saturate(1.16) brightness(1.05);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.12),
      0 0 22px rgba(51,227,111,.50),
      0 0 34px rgba(35,199,255,.28),
      inset 0 1px 0 rgba(255,255,255,.36);
  }
}

@media (max-width:700px){
  .cl-event-card__date.is-now-date{
    min-width:82px!important;
    height:32px!important;
    padding:0 14px!important;
    font-size:11px!important;
    letter-spacing:.07em!important;
  }
}


/* ===== v36.0: carrossel evento/local no card + tabs mais interativas ===== */

/* TABS: texto desliza no hover e tooltip elegante */
.cl-date-section{
  position:relative!important;
  overflow:visible!important;
}

.cl-date-section__text{
  transition:transform .34s cubic-bezier(.18,.86,.22,1), opacity .24s ease!important;
  will-change:transform;
}

@media (hover:hover) and (pointer:fine){
  .cl-date-section:hover .cl-date-section__text{
    transform:translateX(16px)!important;
  }

  .cl-date-section::after{
    content:attr(data-tooltip);
    position:absolute;
    right:76px;
    top:50%;
    transform:translateY(-50%) translateX(6px);
    opacity:0;
    pointer-events:none;
    z-index:5;
    padding:8px 11px;
    border-radius:999px;
    font-size:11px;
    font-weight:850;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:rgba(255,255,255,.88);
    background:rgba(8,12,20,.54);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
    transition:opacity .22s ease, transform .28s cubic-bezier(.18,.86,.22,1);
  }

  .cl-date-section:hover::after{
    opacity:1;
    transform:translateY(-50%) translateX(0);
  }
}

/* Domingo da Parada: destaque chique e discreto na palavra PARADA */
.cl-date-heading-rainbow{
  display:inline-block;
  padding-left:.12em;
  background:linear-gradient(90deg,#ff245d,#ff8a1c,#ffe600,#33e36f,#23c7ff,#7e56ff,#ff4bd8,#ff245d);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:clDateParadaFlow 9s linear infinite;
  filter:drop-shadow(0 0 10px rgba(255,75,216,.16));
}

@keyframes clDateParadaFlow{
  from{background-position:0% 50%}
  to{background-position:220% 50%}
}

/* Mídia do card: carrossel leve evento/local */
.cl-event-card__media{
  position:relative!important;
  overflow:hidden!important;
}

.cl-media-carousel{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  background:transparent;
  --media-index:0;
}

.cl-media-carousel__track{
  display:flex;
  width:100%;
  height:100%;
  transform:translateX(calc(var(--media-index,0) * -100%));
  transition:transform .56s cubic-bezier(.18,.86,.22,1);
  will-change:transform;
}

.cl-media-carousel__slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  margin:0;
  position:relative;
  overflow:hidden;
}

.cl-media-carousel__slide .cl-event-card__image{
  position:static!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  transform:scale(1.002);
}

.cl-media-carousel__slide[data-media-type="venue"] .cl-event-card__image{
  filter:saturate(.94) contrast(.98) brightness(.92);
}

/* Controles discretos */
.cl-media-carousel__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:8;
  width:30px;
  height:44px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(4,8,14,.26);
  color:rgba(255,255,255,.84);
  font-size:22px;
  line-height:1;
  font-weight:800;
  opacity:0;
  cursor:pointer;
  transition:opacity .22s ease, background .18s ease, transform .2s ease;
}

.cl-media-carousel__nav--prev{left:8px}
.cl-media-carousel__nav--next{right:8px}

@media (hover:hover) and (pointer:fine){
  .cl-event-card:hover .cl-media-carousel__nav{
    opacity:.84;
  }
  .cl-media-carousel__nav:hover{
    background:rgba(4,8,14,.42);
    transform:translateY(-50%) scale(1.03);
  }
}

.cl-media-carousel__meta{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:8;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:25px;
  padding:5px 8px 5px 9px;
  border-radius:999px;
  color:rgba(255,255,255,.90);
  background:rgba(4,8,14,.34);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

.cl-media-carousel__label{
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.cl-media-carousel__dots{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.cl-media-carousel__dot{
  appearance:none;
  -webkit-appearance:none;
  width:6px;
  height:6px;
  border-radius:999px;
  padding:0;
  border:0;
  background:rgba(255,255,255,.38);
  cursor:pointer;
  transition:width .2s ease, background .2s ease, opacity .2s ease;
}

.cl-media-carousel__dot.is-active{
  width:14px;
  background:rgba(255,255,255,.92);
}

.cl-event-card.is-past .cl-media-carousel__nav,
.cl-event-card.is-past .cl-media-carousel__meta{
  display:none!important;
}

@media (max-width:700px){
  .cl-media-carousel__nav{
    opacity:.78;
    width:28px;
    height:40px;
    background:rgba(4,8,14,.30);
  }
  .cl-media-carousel__meta{
    right:8px;
    bottom:8px;
    transform:scale(.92);
    transform-origin:right bottom;
  }
}


/* ===== v36.1: carrossel em onda e retorno automático para o evento ===== */

.cl-media-carousel.has-carousel{
  --media-wave-delay:0ms;
}

.cl-media-carousel__track{
  transition-duration:.62s!important;
}

.cl-media-carousel__label{
  min-width:42px;
  text-align:left;
}

.cl-media-carousel.is-single .cl-media-carousel__nav,
.cl-media-carousel.is-single .cl-media-carousel__meta{
  display:none!important;
}


/* ===== v36.2: tooltip corrigido, filtros compactos, arquivo e animações ===== */

/* Tooltip das tabs não sobrepõe mais a badge da data */
@media (hover:hover) and (pointer:fine){
  .cl-date-section::after{
    right:118px!important;
    top:22px!important;
    transform:translateY(0) translateX(8px)!important;
    font-size:10px!important;
    padding:7px 10px!important;
    opacity:0!important;
    max-width:190px;
    white-space:nowrap;
  }
  .cl-date-section:hover::after{
    opacity:.96!important;
    transform:translateY(0) translateX(0)!important;
  }
}

/* Painel de filtros compacto por padrão */
.cl-controls{
  position:relative!important;
  overflow:hidden!important;
  max-height:410px;
  transition:max-height .62s cubic-bezier(.18,.86,.22,1), padding-bottom .35s ease;
  padding-bottom:74px!important;
}

html.cl-filters-expanded .cl-controls{
  max-height:980px;
  padding-bottom:30px!important;
}

.cl-controls::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:118px;
  z-index:6;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(60,51,74,0), rgba(60,51,74,.94) 52%, rgba(60,51,74,.98));
  opacity:1;
  transition:opacity .28s ease;
}

html.cl-filters-expanded .cl-controls::after{
  opacity:0;
}

.cl-filter-more{
  position:absolute;
  left:50%;
  bottom:18px;
  z-index:7;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:11px 18px;
  background:rgba(8,11,18,.58);
  color:#fff;
  font-size:11px;
  font-weight:950;
  line-height:1;
  letter-spacing:.055em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 12px 32px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}

.cl-filter-more:hover{
  transform:translateX(-50%) translateY(-1px);
  border-color:rgba(255,255,255,.24);
  background:rgba(8,11,18,.72);
}

.cl-filter-more::before{
  content:"⌄";
  display:inline-block;
  margin-right:8px;
  transition:transform .25s ease;
}

html.cl-filters-expanded .cl-filter-more::before{
  transform:rotate(180deg);
}

/* Dá a sensação de “ler mais” na área das vibes/regiões */
.cl-advanced-filter-block{
  position:relative;
}

/* Arquivo da agenda: header clicável e lista recente */
.cl-past-section.is-archive-flat{
  cursor:pointer;
  transition:transform .28s cubic-bezier(.18,.86,.22,1), border-color .22s ease, background .22s ease;
}

@media (hover:hover) and (pointer:fine){
  .cl-past-section.is-archive-flat:hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.22)!important;
  }
}

.cl-past-archive-grid.is-collapsed{
  display:none!important;
}

.cl-archive-more-wrap{
  grid-column:1/-1;
  display:flex;
  justify-content:center;
  margin:8px 0 28px;
}

.cl-archive-more{
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  padding:12px 18px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

.cl-archive-more:hover{
  background:rgba(255,255,255,.10);
}

/* Entrada dos cards em onda quando uma data abre */
.cl-date-content.is-open .cl-date-card-wrap{
  animation:clCardWaveIn .46s cubic-bezier(.18,.86,.22,1) both;
  animation-delay:calc(min(var(--i), 14) * 46ms);
}

@keyframes clCardWaveIn{
  from{
    opacity:0;
    transform:translateY(18px) scale(.975);
    filter:saturate(.85) brightness(.92);
  }
  58%{
    opacity:1;
    transform:translateY(-2px) scale(1.006);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:saturate(1) brightness(1);
  }
}

@media (max-width:700px){
  .cl-controls{
    max-height:520px;
    padding-bottom:78px!important;
  }
  html.cl-filters-expanded .cl-controls{
    max-height:1300px;
  }
  .cl-filter-more{
    width:calc(100% - 32px);
    text-align:center;
  }
}


/* ===== v36.3: correções filtros, tooltips, arquivo e animação ===== */

/* Botão de expandir filtros: seta refinada e clique garantido */
.cl-filter-more{
  pointer-events:auto!important;
  user-select:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
}

.cl-filter-more::before{
  content:""!important;
  width:15px!important;
  height:15px!important;
  display:inline-block!important;
  margin:0 2px 0 0!important;
  background:currentColor!important;
  opacity:.92!important;
  -webkit-mask:url("assets/expand-down-double.svg") center / contain no-repeat!important;
  mask:url("assets/expand-down-double.svg") center / contain no-repeat!important;
  transition:transform .28s cubic-bezier(.18,.86,.22,1)!important;
}

html.cl-filters-expanded .cl-filter-more::before{
  transform:rotate(180deg)!important;
}

/* Posiciona o tooltip das tabs sem invadir a badge de data/chevron */
@media (hover:hover) and (pointer:fine){
  .cl-date-section::after{
    right:170px!important;
    top:18px!important;
    transform:translateY(0) translateX(8px)!important;
    max-width:180px!important;
    white-space:nowrap!important;
    font-size:9.5px!important;
    padding:6px 9px!important;
    opacity:0!important;
  }

  .cl-date-section:hover::after{
    opacity:.92!important;
    transform:translateY(0) translateX(0)!important;
  }
}

/* Eventos encerrados agora tem a mesma linguagem visual de expand/contract */
.cl-past-section__right{
  display:inline-flex;
  align-items:center;
  gap:14px;
}

.cl-past-section .cl-date-section__chevron{
  flex:0 0 auto;
}

.cl-past-section.is-open .cl-date-section__chevron{
  transform:rotate(180deg);
}

@media (hover:hover) and (pointer:fine){
  .cl-past-section.is-archive-flat::after{
    content:attr(data-tooltip);
    position:absolute;
    right:138px;
    top:50%;
    transform:translateY(-50%) translateX(8px);
    opacity:0;
    pointer-events:none;
    z-index:5;
    padding:6px 9px;
    border-radius:999px;
    font-size:9.5px;
    font-weight:850;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:rgba(255,255,255,.88);
    background:rgba(8,12,20,.54);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
    transition:opacity .22s ease, transform .28s cubic-bezier(.18,.86,.22,1);
  }

  .cl-past-section.is-archive-flat:hover::after{
    opacity:.92;
    transform:translateY(-50%) translateX(0);
  }
}

/* Entrada dos cards mais lenta e com sensação de flow */
.cl-date-content.is-open .cl-date-card-wrap{
  animation:clCardWaveInV363 .72s cubic-bezier(.16,.84,.22,1) both!important;
  animation-delay:calc(min(var(--i), 14) * 82ms)!important;
}

@keyframes clCardWaveInV363{
  from{
    opacity:0;
    transform:translateY(28px) scale(.962);
    filter:saturate(.80) brightness(.88);
  }
  52%{
    opacity:1;
    transform:translateY(-4px) scale(1.010);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:saturate(1) brightness(1);
  }
}

@media (max-width:700px){
  .cl-date-content.is-open .cl-date-card-wrap{
    animation-duration:.58s!important;
    animation-delay:calc(min(var(--i), 10) * 58ms)!important;
  }
}


/* ===== v36.4: ajustes finais filtros, datas passadas, tooltip e fantasma ===== */

/* Reposiciona o botão do painel de filtros para não sobrepor Regiões */
html.cl-filters-expanded .cl-controls{
  padding-bottom:96px!important;
}

html.cl-filters-expanded .cl-filter-more{
  bottom:24px!important;
}

/* Remove o tooltip visual custom das tabs; fica só o comportamento/sem poluição visual */
.cl-date-section::after,
.cl-date-section:hover::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
}

/* Filtro de dias: dia atual/rolando na frente, passados no final e com separador */
.cl-date-past-separator{
  display:inline-flex;
  align-items:center;
  align-self:center;
  min-height:36px;
  padding:0 5px 0 12px;
  color:rgba(235,238,245,.42);
  font-size:10px;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.cl-date-chip-current{
  order:-2;
  animation:clDateCurrentPulse 1.55s ease-in-out infinite!important;
  border-color:rgba(51,227,111,.66)!important;
  box-shadow:0 0 16px rgba(51,227,111,.20), inset 0 1px 0 rgba(255,255,255,.08)!important;
}

.cl-date-chip-past{
  filter:grayscale(1) saturate(.15) brightness(.78);
  opacity:.58;
  border-color:rgba(210,215,225,.12)!important;
  background:rgba(255,255,255,.045)!important;
}

.cl-date-chip-past.is-active{
  opacity:.84;
  filter:grayscale(.4) saturate(.45) brightness(.9);
}

@keyframes clDateCurrentPulse{
  0%,100%{
    box-shadow:0 0 10px rgba(51,227,111,.16), inset 0 1px 0 rgba(255,255,255,.08);
  }
  50%{
    box-shadow:0 0 22px rgba(51,227,111,.34), inset 0 1px 0 rgba(255,255,255,.13);
  }
}

/* Eventos 24h/agora: badge mais estável quando aparece como AGORA */
.cl-event-card__date.is-now-date{
  letter-spacing:.055em!important;
}

/* Redução do fantasma: glow de tags e botões fica interno ao elemento/card */
.cl-event-card{
  isolation:isolate!important;
  contain:layout paint!important;
  overflow:hidden!important;
}

.cl-event-card__body,
.cl-card-actions,
.cl-tags{
  isolation:isolate!important;
}

.cl-tag:hover,
.cl-event-card.is-saved-card .cl-tag:hover{
  filter:none!important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tag-color-a,#fff) 42%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--tag-color-a,#fff) 15%, transparent)!important;
}

.cl-tag::after,
.cl-card-actions a::before,
.cl-card-actions a::after,
.cl-card-actions button::before,
.cl-card-actions button::after{
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* O hover de botões não projeta mais glow externo; só muda a superfície interna */
.cl-card-actions a:hover,
.cl-card-actions button:not([disabled]):hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 14px rgba(255,255,255,.04)!important;
  filter:none!important;
}


/* ===== v36.5: reconstrução anti-fantasma dos hovers internos do card ===== */

/*
  O fantasma retangular vinha da soma de:
  1) elementos internos do card com ::before/::after absolutos herdados de versões anteriores;
  2) backdrop-filter/filter/box-shadow externo em tags, status e botões;
  3) camadas translúcidas do card permitindo enxergar essas composições.

  Regra nova:
  - nenhum hover dentro do card projeta luz para fora do próprio elemento;
  - nenhum botão/tag/status usa pseudo-elemento luminoso global;
  - qualquer "glow" fica interno, com inset box-shadow;
  - o card continua glass/dark, mas sem composições retangulares.
*/

/* Isola cada card e impede vazamento de camada para cards vizinhos */
.cl-event-card{
  position:relative!important;
  isolation:isolate!important;
  contain:layout paint!important;
  overflow:hidden!important;
  transform:translateZ(0)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}

.cl-event-card__media,
.cl-event-card__body,
.cl-event-time,
.cl-tags,
.cl-card-actions{
  isolation:isolate!important;
  contain:paint!important;
  overflow:visible!important;
}

/* Remove pseudo-camadas antigas que poderiam ser posicionadas contra o card inteiro */
.cl-event-card__body::before,
.cl-event-card__body::after,
.cl-event-time::before,
.cl-event-time::after,
.cl-tags::before,
.cl-tags::after,
.cl-card-actions::before,
.cl-card-actions::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Superfícies internas: sem blur/backdrop/filter que cria composição retangular */
.cl-event-card .cl-tag,
.cl-event-card .cl-status-badge,
.cl-event-card .cl-card-actions a,
.cl-event-card .cl-card-actions button{
  position:relative!important;
  isolation:isolate!important;
  contain:paint!important;
  overflow:hidden!important;
  transform:translateZ(0)!important;
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Tags/vibes: glow interno, sem box-shadow externo */
.cl-event-card .cl-tag{
  cursor:default!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px color-mix(in srgb, var(--tag-color-a,#fff) 16%, transparent)!important;
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    color .18s ease!important;
  animation:none!important;
}

.cl-event-card .cl-tag::before,
.cl-event-card .cl-tag::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
}

@media (hover:hover) and (pointer:fine){
  .cl-event-card .cl-tag:hover,
  .cl-event-card.is-saved-card .cl-tag:hover{
    transform:none!important;
    animation:none!important;
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--tag-color-a,#fff) 20%, rgba(255,255,255,.075)),
        rgba(255,255,255,.10)
      )!important;
    border-color:color-mix(in srgb, var(--tag-color-a,#fff) 78%, rgba(255,255,255,.20))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 0 0 1px color-mix(in srgb, var(--tag-color-a,#fff) 38%, transparent),
      inset 0 0 18px color-mix(in srgb, var(--tag-color-a,#fff) 18%, transparent)!important;
    text-shadow:none!important;
  }
}

/* Status EM BREVE/AVISE-ME: completamente contido e sem pseudo hover gigante */
.cl-event-card .cl-status-badge{
  position:relative!important;
  background:rgba(96,104,118,.74)!important;
  background-image:none!important;
  border-color:rgba(255,255,255,.20)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 0 0 1px rgba(255,255,255,.035)!important;
  transition:none!important;
  animation:none!important;
}

.cl-event-card .cl-status-badge::before,
.cl-event-card .cl-status-badge::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
  width:0!important;
  height:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Desktop: não troca para AVISE-ME no hover. Isso elimina o principal gatilho visual. */
@media (hover:hover) and (pointer:fine){
  .cl-event-card .cl-status-badge[data-status="upcoming"]:hover,
  .cl-event-card .cl-status-badge:hover{
    color:#fff!important;
    font-size:10px!important;
    background:rgba(105,113,128,.78)!important;
    background-image:none!important;
    border-color:rgba(255,255,255,.24)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.15),
      inset 0 0 0 1px rgba(255,255,255,.04)!important;
    filter:none!important;
    transform:none!important;
  }
}

/* Mobile/touch continua vendo AVISE-ME direto, sem hover */
@media (max-width:700px), (hover:none), (pointer:coarse){
  .cl-event-card .cl-status-badge[data-status="upcoming"]{
    font-size:0!important;
    color:transparent!important;
  }
  .cl-event-card .cl-status-badge[data-status="upcoming"]::after{
    content:var(--cl-remind-label, "AVISE-ME")!important;
    display:grid!important;
    place-items:center!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:1!important;
    visibility:visible!important;
    color:#fff!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.055em!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    transform:none!important;
  }
}

/* Botões do rodapé do card: hover só por superfície interna, sem glow projetado */
.cl-event-card .cl-card-actions a,
.cl-event-card .cl-card-actions button{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 0 0 1px rgba(255,255,255,.025)!important;
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    color .16s ease!important;
}

.cl-event-card .cl-card-actions a::before,
.cl-event-card .cl-card-actions a::after,
.cl-event-card .cl-card-actions button::before,
.cl-event-card .cl-card-actions button::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}

@media (hover:hover) and (pointer:fine){
  .cl-event-card .cl-card-actions a:hover,
  .cl-event-card .cl-card-actions button:not([disabled]):hover{
    transform:none!important;
    background:rgba(255,255,255,.115)!important;
    border-color:rgba(255,255,255,.20)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 0 16px rgba(255,255,255,.045)!important;
    filter:none!important;
    text-shadow:none!important;
  }
}

/* Exceção controlada para o botão SALVO: permite texto Remover, mas dentro do botão */
.cl-event-card.is-saved-card .cl-card-actions button.is-saved{
  background:linear-gradient(135deg,#ff245d 0%, #e83ed1 58%, #7e56ff 100%)!important;
  background-size:100% 100%!important;
  animation:none!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.22)!important;
  box-shadow:
    0 0 18px rgba(255,75,216,.14),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
}

@media (hover:hover) and (pointer:fine){
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover{
    background:rgba(255,255,255,.115)!important;
    background-image:none!important;
    color:#fff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
  }

  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover span,
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover svg{
    opacity:0!important;
    visibility:hidden!important;
  }

  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover::after{
    content:"Remover"!important;
    display:grid!important;
    place-items:center!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:1!important;
    visibility:visible!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:900!important;
    line-height:1!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    transform:none!important;
  }
}

/* Card hover: só realce estrutural discreto, sem glow colorido projetado */
@media (hover:hover) and (pointer:fine){
  .cl-event-card:hover{
    transform:translateZ(0) scale(1.003)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.075),
      0 18px 48px rgba(0,0,0,.36)!important;
  }
}

/* Evita que filtros/backdrop do card reapareçam em imagens/carrossel */
.cl-media-carousel,
.cl-media-carousel *,
.cl-event-card__image{
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}


/* ===== v36.6: SAFE MODE anti-fantasma dos cards ===== */

/*
  Diagnóstico final:
  O retângulo/vinheta fantasma vem da composição do browser quando existe:
  - card translúcido com backdrop-filter;
  - filhos com hover/box-shadow;
  - pseudo-camadas dentro do card.
  Mesmo removendo o glow do elemento, o card ainda tinha backdrop-filter e fundo translúcido,
  então a camada de composição continuava aparecendo como uma faixa vertical.

  Solução segura:
  - remover backdrop-filter/filter de TODO o card e elementos internos;
  - transformar o corpo do card em superfície sólida glass-like, não transparente/blur;
  - remover pseudo-elementos e sombras externas nos hovers internos;
  - manter destaque por borda e inset-shadow, não por glow externo.
*/

/* Superfície do card sem backdrop/blur */
.cl-event-card,
.cl-event-card:hover,
.cl-event-card.is-saved-card,
.cl-event-card.is-live,
.cl-event-card.is-24h{
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--day-color,#23c7ff) 8%, transparent), transparent 38%),
    linear-gradient(180deg, #1f2a36 0%, #131b26 100%)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  box-shadow:0 18px 46px rgba(0,0,0,.30)!important;
  border-color:color-mix(in srgb, var(--day-color,#23c7ff) 42%, rgba(255,255,255,.12))!important;
  isolation:isolate!important;
  contain:layout paint style!important;
  overflow:hidden!important;
  transform:translateZ(0)!important;
}

/* Corpo do card sólido, sem transparência que revele camada fantasma */
.cl-event-card__body{
  background:
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--day-color,#23c7ff) 8%, transparent), transparent 36%),
    linear-gradient(180deg, #202b38 0%, #141d28 100%)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  overflow:hidden!important;
  contain:paint!important;
}

/* A mídia continua visual, mas sem filtros herdados */
.cl-event-card__media,
.cl-event-card__media::before,
.cl-event-card__media::after,
.cl-media-carousel,
.cl-media-carousel *,
.cl-event-card__image{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
  -webkit-filter:none!important;
}

/* Zera pseudo-camadas do card que podiam criar retângulos compostos */
.cl-event-card::before,
.cl-event-card::after,
.cl-event-card__body::before,
.cl-event-card__body::after,
.cl-event-time::before,
.cl-event-time::after,
.cl-tags::before,
.cl-tags::after,
.cl-card-actions::before,
.cl-card-actions::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Mantém borda do dia como outline real, sem pseudo-camada */
.cl-event-card{
  outline:1px solid color-mix(in srgb, var(--day-color,#23c7ff) 16%, transparent)!important;
  outline-offset:-1px!important;
}

/* Hover do card só realça borda, sem glow nem faixa */
@media (hover:hover) and (pointer:fine){
  .cl-event-card:hover{
    transform:translateZ(0) scale(1.002)!important;
    background:
      radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--day-color,#23c7ff) 10%, transparent), transparent 38%),
      linear-gradient(180deg, #22303e 0%, #16202c 100%)!important;
    box-shadow:0 20px 48px rgba(0,0,0,.34)!important;
  }
}

/* Elementos interativos dentro do card: sem glow externo, só estado interno */
.cl-event-card .cl-tag,
.cl-event-card .cl-status-badge,
.cl-event-card .cl-card-actions a,
.cl-event-card .cl-card-actions button,
.cl-event-card .cl-saved-badge{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075)!important;
  text-shadow:none!important;
  overflow:hidden!important;
  contain:paint!important;
}

.cl-event-card .cl-tag::before,
.cl-event-card .cl-tag::after,
.cl-event-card .cl-status-badge::before,
.cl-event-card .cl-status-badge::after,
.cl-event-card .cl-card-actions a::before,
.cl-event-card .cl-card-actions a::after,
.cl-event-card .cl-card-actions button::before,
.cl-event-card .cl-card-actions button::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}

/* Vibes: mantém graça por borda/fundo, não por glow projetado */
@media (hover:hover) and (pointer:fine){
  .cl-event-card .cl-tag:hover,
  .cl-event-card.is-saved-card .cl-tag:hover{
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--tag-color-a,#fff) 18%, rgba(255,255,255,.08)),
        rgba(255,255,255,.10)
      )!important;
    border-color:color-mix(in srgb, var(--tag-color-a,#fff) 72%, rgba(255,255,255,.18))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      inset 0 0 14px color-mix(in srgb, var(--tag-color-a,#fff) 12%, transparent)!important;
    animation:none!important;
    transform:none!important;
  }

  .cl-event-card .cl-card-actions a:hover,
  .cl-event-card .cl-card-actions button:not([disabled]):hover,
  .cl-event-card .cl-status-badge:hover{
    background:rgba(255,255,255,.115)!important;
    border-color:rgba(255,255,255,.22)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 0 12px rgba(255,255,255,.04)!important;
    transform:none!important;
    filter:none!important;
  }
}

/* Status upcoming: desktop totalmente estático, mobile segue AVISE-ME */
@media (hover:hover) and (pointer:fine){
  .cl-event-card .cl-status-badge[data-status="upcoming"]:hover{
    color:#fff!important;
    font-size:10px!important;
  }
}

@media (max-width:700px), (hover:none), (pointer:coarse){
  .cl-event-card .cl-status-badge[data-status="upcoming"]::after{
    display:grid!important;
  }
}

/* Card salvo: volta a ser destacado por superfície magenta discreta, sem glow externo */
.cl-event-card.is-saved-card{
  background:
    radial-gradient(circle at 8% 0%, rgba(255,36,93,.16), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(35,199,255,.10), transparent 36%),
    linear-gradient(180deg, #253044 0%, #171d2d 100%)!important;
  border-color:rgba(255,75,216,.62)!important;
  outline-color:rgba(255,75,216,.28)!important;
}

/* Botão Salvo preservado, sem faixa fantasma */
.cl-event-card.is-saved-card .cl-card-actions button.is-saved{
  background:linear-gradient(135deg,#ff245d 0%, #e83ed1 58%, #7e56ff 100%)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important;
}

@media (hover:hover) and (pointer:fine){
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover{
    background:rgba(255,255,255,.115)!important;
    color:#fff!important;
  }
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover span,
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover svg{
    opacity:0!important;
    visibility:hidden!important;
  }
  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover::after{
    content:"Remover"!important;
    display:grid!important;
    place-items:center!important;
    position:absolute!important;
    inset:0!important;
    opacity:1!important;
    visibility:visible!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:900!important;
    background:transparent!important;
    box-shadow:none!important;
  }
}


/* ===== v36.7: restaura visual premium/colorido do CARD SALVO sem reativar o fantasma ===== */

/*
  Mantém a correção anti-fantasma da v36.6:
  - sem backdrop-filter no card;
  - sem glow externo grande em hover;
  - sem pseudo-camadas retangulares.
  Mas restaura a aparência salva anterior: card vivo, colorido, pride/pop, com fundo magenta/azul.
*/

.cl-event-card.is-saved-card,
.cl-event-card.is-saved-card:hover{
  border-color:rgba(255,75,216,.86)!important;
  outline:1px solid rgba(35,199,255,.30)!important;
  outline-offset:-1px!important;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,36,93,.48), transparent 36%),
    radial-gradient(circle at 86% 82%, rgba(35,199,255,.44), transparent 42%),
    linear-gradient(135deg, #8149d8 0%, #bd54e4 38%, #4db7ff 100%)!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 18px 48px rgba(0,0,0,.34)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
}

.cl-event-card.is-saved-card .cl-event-card__body{
  background:
    radial-gradient(circle at 10% 20%, rgba(255,75,216,.36), transparent 36%),
    radial-gradient(circle at 92% 82%, rgba(35,199,255,.42), transparent 44%),
    linear-gradient(135deg, rgba(190,78,226,.92) 0%, rgba(128,112,255,.88) 48%, rgba(53,178,255,.90) 100%)!important;
  color:#fff!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
}

.cl-event-card.is-saved-card h3,
.cl-event-card.is-saved-card .cl-event-hour,
.cl-event-card.is-saved-card .cl-event-time strong{
  color:#fff!important;
  text-shadow:0 1px 10px rgba(0,0,0,.18)!important;
}

.cl-event-card.is-saved-card p,
.cl-event-card.is-saved-card .cl-location,
.cl-event-card.is-saved-card .cl-address{
  color:rgba(255,255,255,.78)!important;
  text-shadow:none!important;
}

/* Vibes no card salvo voltam a contrastar como bolhas escuras, sem vazar glow */
.cl-event-card.is-saved-card .cl-tag{
  background:rgba(35,37,52,.72)!important;
  background-image:none!important;
  color:#fff!important;
  border-color:color-mix(in srgb, var(--tag-color-a,#fff) 52%, rgba(255,255,255,.22))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.035)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
}

@media (hover:hover) and (pointer:fine){
  .cl-event-card.is-saved-card .cl-tag:hover{
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--tag-color-a,#fff) 18%, rgba(35,37,52,.78)),
        rgba(35,37,52,.82)
      )!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 0 14px color-mix(in srgb, var(--tag-color-a,#fff) 14%, transparent)!important;
  }
}

/* Botões do card salvo voltam ao contraste anterior */
.cl-event-card.is-saved-card .cl-card-actions a,
.cl-event-card.is-saved-card .cl-card-actions button{
  background:rgba(45,57,105,.32)!important;
  border-color:rgba(255,255,255,.14)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
}

.cl-event-card.is-saved-card .cl-card-actions button.is-saved{
  background:linear-gradient(135deg,#ff245d 0%, #e83ed1 58%, #7e56ff 100%)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:
    0 0 16px rgba(255,75,216,.16),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
}

@media (hover:hover) and (pointer:fine){
  .cl-event-card.is-saved-card .cl-card-actions a:hover,
  .cl-event-card.is-saved-card .cl-card-actions button:not([disabled]):hover{
    background:rgba(255,255,255,.15)!important;
    border-color:rgba(255,255,255,.22)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
  }

  .cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover{
    background:rgba(255,255,255,.13)!important;
    color:#fff!important;
  }
}

/* Badge coração salva mantém energia, mas sem sombra gigante */
.cl-event-card.is-saved-card .cl-saved-badge{
  background:linear-gradient(135deg,#ff245d,#e83ed1,#7e56ff)!important;
  color:#fff!important;
  box-shadow:
    0 0 16px rgba(255,75,216,.20),
    inset 0 1px 0 rgba(255,255,255,.20)!important;
}


/* ===== v36.8: corrige sobreposição EM BREVE / AVISE-ME ===== */

/*
  Havia regras antigas criando ::after "AVISE-ME" enquanto o texto original
  "EM BREVE" continuava visível, gerando sobreposição. Agora:
  - Desktop: EM BREVE fica sempre estático, sem ::after no hover.
  - Mobile/touch: esconde o texto original e mostra apenas AVISE-ME.
*/

.cl-event-card .cl-status-badge[data-status="upcoming"],
.cl-status-badge[data-status="upcoming"]{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:96px!important;
  width:96px!important;
  max-width:96px!important;
  height:34px!important;
  padding:0 10px!important;
  color:#fff!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  white-space:nowrap!important;
  text-align:center!important;
  background:rgba(96,104,118,.76)!important;
  background-image:none!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13)!important;
  overflow:hidden!important;
}

/* Desktop/mouse: não cria AVISE-ME no hover. */
@media (hover:hover) and (pointer:fine){
  .cl-event-card .cl-status-badge[data-status="upcoming"],
  .cl-event-card .cl-status-badge[data-status="upcoming"]:hover,
  .cl-event-card.is-saved-card .cl-status-badge[data-status="upcoming"],
  .cl-event-card.is-saved-card .cl-status-badge[data-status="upcoming"]:hover{
    color:#fff!important;
    font-size:10px!important;
    background:rgba(96,104,118,.76)!important;
    background-image:none!important;
    border-color:rgba(255,255,255,.20)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13)!important;
  }

  .cl-event-card .cl-status-badge[data-status="upcoming"]::before,
  .cl-event-card .cl-status-badge[data-status="upcoming"]::after,
  .cl-event-card .cl-status-badge[data-status="upcoming"]:hover::before,
  .cl-event-card .cl-status-badge[data-status="upcoming"]:hover::after,
  .cl-event-card.is-saved-card .cl-status-badge[data-status="upcoming"]::before,
  .cl-event-card.is-saved-card .cl-status-badge[data-status="upcoming"]::after,
  .cl-event-card.is-saved-card .cl-status-badge[data-status="upcoming"]:hover::before,
  .cl-event-card.is-saved-card .cl-status-badge[data-status="upcoming"]:hover::after{
    display:none!important;
    content:none!important;
    opacity:0!important;
    visibility:hidden!important;
  }
}

/* Mobile/touch: troca visualmente para AVISE-ME, sem sobrepor. */
@media (max-width:700px), (hover:none), (pointer:coarse){
  .cl-event-card .cl-status-badge[data-status="upcoming"],
  .cl-event-card.is-saved-card .cl-status-badge[data-status="upcoming"]{
    color:transparent!important;
    font-size:0!important;
  }

  .cl-event-card .cl-status-badge[data-status="upcoming"]::before,
  .cl-event-card .cl-status-badge[data-status="upcoming"]:hover::before{
    display:none!important;
    content:none!important;
  }

  .cl-event-card .cl-status-badge[data-status="upcoming"]::after,
  .cl-event-card.is-saved-card .cl-status-badge[data-status="upcoming"]::after{
    content:var(--cl-remind-label, "AVISE-ME")!important;
    display:grid!important;
    place-items:center!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:1!important;
    visibility:visible!important;
    color:#fff!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.055em!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    transform:none!important;
  }
}


/* ===== v36.9: AVISE-ME no hover desktop, chevron centralizado e arquivo animado ===== */

/* Desktop: EM BREVE troca para AVISE-ME no hover sem sobrepor textos */
@media (hover:hover) and (pointer:fine){
  .cl-event-card .cl-status-badge[data-status="upcoming"],
  .cl-event-card.is-saved-card .cl-status-badge[data-status="upcoming"]{
    color:#fff!important;
    font-size:10px!important;
  }

  .cl-event-card .cl-status-badge[data-status="upcoming"]::after,
  .cl-event-card.is-saved-card .cl-status-badge[data-status="upcoming"]::after{
    display:none!important;
    content:none!important;
  }

  .cl-event-card .cl-status-badge[data-status="upcoming"]:hover,
  .cl-event-card.is-saved-card .cl-status-badge[data-status="upcoming"]:hover{
    color:transparent!important;
    font-size:0!important;
    background:rgba(105,113,128,.78)!important;
    border-color:rgba(255,255,255,.24)!important;
  }

  .cl-event-card .cl-status-badge[data-status="upcoming"]:hover::after,
  .cl-event-card.is-saved-card .cl-status-badge[data-status="upcoming"]:hover::after{
    content:var(--cl-remind-label, "AVISE-ME")!important;
    display:grid!important;
    place-items:center!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:1!important;
    visibility:visible!important;
    color:#fff!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.055em!important;
    background:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    transform:none!important;
  }
}

/* Ajuste fino do ícone expand/contract das tabs: centralização óptica */
.cl-date-section__chevron,
.cl-past-section .cl-date-section__chevron{
  display:grid!important;
  place-items:center!important;
  width:34px!important;
  height:34px!important;
  line-height:0!important;
  padding:0!important;
}

.cl-date-section__chevron svg,
.cl-date-section__chevron .cl-icon,
.cl-date-section__chevron path{
  display:block!important;
}

.cl-date-section__chevron svg{
  width:17px!important;
  height:17px!important;
  transform:translateY(1px)!important;
  transform-origin:center!important;
}

.cl-date-section.is-open .cl-date-section__chevron svg,
.cl-past-section.is-open .cl-date-section__chevron svg{
  transform:translateY(-1px) rotate(180deg)!important;
}

/* Arquivo: animação em onda igual às datas */
.cl-past-archive-grid.is-open .cl-past-archive-item{
  animation:clArchiveCardWaveIn .78s cubic-bezier(.16,.84,.22,1) both!important;
  animation-delay:calc(min(var(--i), 14) * 82ms)!important;
}

.cl-past-archive-item.is-new-archive-item{
  animation:clArchiveLoadMoreIn .74s cubic-bezier(.16,.84,.22,1) both!important;
  animation-delay:calc(min(var(--new-i), 11) * 76ms)!important;
}

@keyframes clArchiveCardWaveIn{
  from{
    opacity:0;
    transform:translateY(28px) scale(.962);
    filter:saturate(.78) brightness(.86);
  }
  55%{
    opacity:1;
    transform:translateY(-4px) scale(1.008);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:saturate(1) brightness(1);
  }
}

@keyframes clArchiveLoadMoreIn{
  from{
    opacity:0;
    transform:translateY(30px) scale(.955);
  }
  58%{
    opacity:1;
    transform:translateY(-3px) scale(1.006);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.cl-archive-more{
  transition:transform .22s ease, background .22s ease, border-color .22s ease!important;
}

.cl-archive-more.is-loading-more{
  pointer-events:none!important;
  animation:clArchiveMoreTap .42s ease both!important;
}

@keyframes clArchiveMoreTap{
  0%{transform:scale(1)}
  46%{transform:scale(.96)}
  100%{transform:scale(1)}
}


/* ===== v36.10: carregar mais do arquivo sem recarregar a lista inteira ===== */

.cl-past-archive-item.is-new-archive-item{
  animation:clArchiveLoadMoreIn .78s cubic-bezier(.16,.84,.22,1) both!important;
  animation-delay:calc(min(var(--new-i), 11) * 86ms)!important;
  will-change:transform, opacity;
}

.cl-archive-more.is-loading-more{
  opacity:.68;
  pointer-events:none;
}

.cl-archive-more.is-loading-more::after{
  content:"";
  width:12px;
  height:12px;
  margin-left:8px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  display:inline-block;
  vertical-align:-2px;
  animation:clArchiveSpin .7s linear infinite;
}

@keyframes clArchiveSpin{
  to{transform:rotate(360deg)}
}


/* ===== v36.12: correção de sobreposição no Safari/iPhone após filtros ===== */

/*
  Em alguns iPhones/Safari, ao filtrar e reabrir os resultados,
  o footer/aviso era pintado por cima do último card.
  A causa provável é uma combinação de grid + max-height gigante + animação/filter do footer.
  Correção:
  - resultados e cards ficam numa camada acima do footer;
  - footer fica em camada baixa e não invade os cards;
  - no mobile, conteúdo aberto da tab não usa max-height animado/overflow hidden,
    evitando cálculo errado de altura no Safari.
*/

.cl-events-grid,
.cl-date-section,
.cl-date-content,
.cl-date-card-wrap,
.cl-event-card{
  position:relative!important;
}

.cl-events-grid,
.cl-date-section,
.cl-date-content{
  z-index:4!important;
  isolation:isolate!important;
}

.cl-date-card-wrap,
.cl-event-card{
  z-index:5!important;
}

.cl-site-footer,
.cl-footer,
footer{
  position:relative!important;
  z-index:0!important;
  isolation:isolate!important;
  clear:both!important;
}

.cl-site-footer *{
  position:relative;
  z-index:0;
}

/* Desktop mantém animação. Mobile prioriza estabilidade de layout. */
@media (max-width:700px){
  .cl-date-content.is-open{
    max-height:none!important;
    overflow:visible!important;
    opacity:1!important;
    transform:none!important;
    transition:opacity .22s ease, transform .22s ease!important;
    padding-bottom:18px!important;
  }

  .cl-date-content{
    width:100%!important;
    min-width:0!important;
  }

  .cl-date-card-wrap{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    display:block!important;
  }

  .cl-event-card{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  .cl-site-footer{
    margin-top:52px!important;
    transform:none!important;
    filter:none!important;
    animation:clFooterInMobileSafe .52s ease both!important;
  }

  .cl-site-footer:before{
    z-index:0!important;
    pointer-events:none!important;
  }

  @keyframes clFooterInMobileSafe{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
  }
}

/* Quando existe footer logo após resultados, força separação visual/espacial real. */
.cl-events-grid + .cl-site-footer,
.cl-date-content + .cl-site-footer{
  margin-top:56px!important;
}

/* Fallback extra para Safari: evita que animações dos cards afetem o fluxo do documento. */
@supports (-webkit-touch-callout:none){
  @media (max-width:700px){
    .cl-date-content.is-open{
      contain:none!important;
      transform:none!important;
    }
    .cl-date-content.is-open .cl-date-card-wrap{
      transform:none;
    }
    .cl-site-footer{
      z-index:0!important;
    }
  }
}


/* ===== v36.13: SEO/UX ajustes finais ===== */

/* Domingo 07/06: evita duplicar PARADA e deixa o efeito mais elegante */
.cl-date-heading-rainbow{
  padding-left:.18em!important;
  background:linear-gradient(90deg,#33e36f,#23c7ff,#7e56ff,#ff4bd8,#33e36f)!important;
  background-size:220% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  filter:drop-shadow(0 0 9px rgba(35,199,255,.16))!important;
  animation:clDateParadaFlow 11s linear infinite!important;
}

/* Mostrar eventos HOT */
.cl-hot-word{
  color:#ff3b3b;
  font-weight:950;
  letter-spacing:.035em;
  text-shadow:
    0 0 8px rgba(255,36,93,.42),
    0 0 14px rgba(255,138,28,.24);
}

.cl-adult-toggle:has(input:checked) .cl-hot-word{
  color:#fff;
  text-shadow:0 0 12px rgba(255,255,255,.40),0 0 18px rgba(255,36,93,.38);
}

/* Acontecendo agora no card: verde, ponto pulsante e sem hover estranho */
.cl-event-card.is-live .cl-status-badge{
  background:rgba(51,227,111,.14)!important;
  border-color:rgba(51,227,111,.54)!important;
  color:#eafff1!important;
  gap:7px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 14px rgba(51,227,111,.16)!important;
  animation:none!important;
}

.cl-status-live-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  display:inline-block;
  flex:0 0 auto;
  background:#33e36f;
  box-shadow:0 0 10px #33e36f,0 0 18px rgba(51,227,111,.48);
  animation:clLiveDotBlink 1.05s ease-in-out infinite;
}

@keyframes clLiveDotBlink{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.48;transform:scale(.78)}
}

@media (hover:hover) and (pointer:fine){
  .cl-event-card.is-live .cl-status-badge:hover{
    background:rgba(51,227,111,.14)!important;
    border-color:rgba(51,227,111,.54)!important;
    color:#eafff1!important;
    font-size:10px!important;
    transform:none!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 14px rgba(51,227,111,.16)!important;
  }
  .cl-event-card.is-live .cl-status-badge:hover::after,
  .cl-event-card.is-live .cl-status-badge:hover::before{
    display:none!important;
    content:none!important;
  }
}

/* Barra inferior: botão SUBIR mais destacado e seta animada */
.cl-bottom-nav [data-nav-filter="top"]{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(135deg,rgba(126,86,255,.30),rgba(255,75,216,.18))!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 18px rgba(126,86,255,.16)!important;
}

.cl-bottom-nav [data-nav-filter="top"] svg{
  animation:clSubirArrow 1.35s cubic-bezier(.18,.86,.22,1) infinite;
}

@keyframes clSubirArrow{
  0%,100%{transform:translateY(1px)}
  46%{transform:translateY(-4px)}
}

/* Prevenção extra: o status live não muda de tamanho no hover */
.cl-status-badge[data-status="live"]{
  min-width:132px!important;
  justify-content:center!important;
  white-space:nowrap!important;
}


/* ===== v36.14: seletor de idiomas ===== */
.cl-lang-menu{
  position:fixed;
  left:calc(50% - min(280px, calc(50vw - 12px)) + 10px);
  bottom:94px;
  z-index:80;
  display:flex;
  gap:6px;
  padding:7px;
  border-radius:18px;
  background:rgba(8,10,14,.88);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 55px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}

.cl-lang-menu[hidden]{
  display:none!important;
}

.cl-lang-menu button{
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  padding:9px 11px;
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.05em;
  cursor:pointer;
}

.cl-lang-menu button:hover{
  background:rgba(255,255,255,.13);
}

[data-nav-filter="lang"]{
  background:linear-gradient(135deg,rgba(35,199,255,.16),rgba(126,86,255,.16))!important;
}

[data-nav-filter="lang"] span{
  font-weight:950;
  letter-spacing:.06em;
}

@media (max-width:700px){
  .cl-lang-menu{
    left:22px;
    bottom:92px;
  }
}

/* ===== v36.15: trilingue com bandeiras, JSON e transição ===== */
body.is-language-switching .cl-app{animation:clLanguageSwitch .34s cubic-bezier(.18,.86,.22,1) both}
@keyframes clLanguageSwitch{0%{opacity:1;filter:saturate(1);transform:translateY(0)}42%{opacity:.72;filter:saturate(.82) blur(.35px);transform:translateY(2px)}100%{opacity:1;filter:saturate(1);transform:translateY(0)}}
[data-nav-filter="lang"]{min-width:92px!important;background:linear-gradient(135deg,rgba(35,199,255,.16),rgba(126,86,255,.16))!important}
[data-nav-filter="lang"] #cl-lang-current,[data-nav-filter="lang"] span{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.cl-lang-flag{display:inline-grid;place-items:center;font-size:20px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}
.cl-lang-code{font-size:11px;font-weight:950;letter-spacing:.04em}
.cl-lang-menu{position:fixed;left:calc(50% - min(280px, calc(50vw - 12px)) + 10px);bottom:94px;z-index:80;display:flex;gap:6px;padding:7px;border-radius:18px;background:rgba(8,10,14,.88);border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 55px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(18px);transform-origin:bottom left;animation:clLangMenuIn .24s cubic-bezier(.18,.86,.22,1) both}
.cl-lang-menu[hidden]{display:none!important}
@keyframes clLangMenuIn{from{opacity:0;transform:translateY(12px) scale(.96);filter:blur(2px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
.cl-lang-menu button{display:inline-flex;align-items:center;gap:8px;min-width:98px;border:1px solid rgba(255,255,255,.12);border-radius:13px;padding:9px 11px;background:rgba(255,255,255,.07);color:#fff;font-size:12px;font-weight:900;letter-spacing:.03em;cursor:pointer}
.cl-lang-menu button:hover,.cl-lang-menu button.is-active{background:linear-gradient(135deg,rgba(35,199,255,.18),rgba(255,75,216,.18));border-color:rgba(255,255,255,.24)}
.cl-lang-menu button .cl-lang-flag{font-size:18px}
.cl-event-card.is-saved-card .cl-card-actions button.is-saved:hover::after{content:var(--cl-remove-label, "Remover")!important}
.cl-status-badge{white-space:nowrap!important}
@media (max-width:700px){.cl-lang-menu{left:22px;bottom:92px}}


/* ===== v36.16: SVG flags + idioma es-MX + saída do menu ===== */
.cl-lang-flag-img{
  width:24px;
  height:24px;
  display:inline-block;
  flex:0 0 24px;
  border-radius:6px;
  object-fit:cover;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.28));
}

[data-nav-filter="lang"] .cl-lang-flag-img{
  width:25px;
  height:25px;
}

.cl-lang-menu button .cl-lang-flag-img{
  width:22px;
  height:22px;
}

.cl-lang-menu.is-closing{
  animation:clLangMenuOut .18s cubic-bezier(.55,.06,.68,.19) both!important;
}

@keyframes clLangMenuOut{
  from{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
  to{
    opacity:0;
    transform:translateY(10px) scale(.96);
    filter:blur(2px);
  }
}

/* Mantém bandeiras SVG substituindo emojis antigos */
.cl-lang-flag{
  display:none!important;
}

/* ===== v36.17: ajustes finos trilingue e botão idioma ===== */
[data-nav-filter="lang"]{
  min-width:auto!important;
  flex-direction:column!important;
  gap:5px!important;
}

[data-nav-filter="lang"] #cl-lang-current{
  display:block!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.06em!important;
  line-height:1!important;
}

[data-nav-filter="lang"] .cl-lang-flag-img.cl-nav-icon{
  width:25px!important;
  height:25px!important;
  margin:0!important;
  border-radius:6px!important;
  object-fit:cover!important;
  display:block!important;
}

.cl-lang-menu button{
  min-width:96px!important;
  justify-content:flex-start!important;
}

.cl-lang-menu button .cl-lang-flag-img{
  width:22px!important;
  height:22px!important;
  border-radius:6px!important;
}

.cl-footer-notice p[hidden]{
  display:none!important;
}


/* ===== v36.18: alinhamento barra inferior + traduções finais ===== */

/* Centraliza verticalmente todos os botões da barra inferior */
.cl-bottom-nav button,
.cl-bottom-nav a{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  text-align:center!important;
  line-height:1!important;
  padding-top:10px!important;
  padding-bottom:9px!important;
}

.cl-bottom-nav .cl-nav-icon,
.cl-bottom-nav svg{
  flex:0 0 auto!important;
  margin:0!important;
}

.cl-bottom-nav span{
  display:block!important;
  line-height:1!important;
  margin:0!important;
  transform:none!important;
}

/* Botão idioma: bandeira como ícone superior, texto embaixo */
[data-nav-filter="lang"]{
  min-width:92px!important;
}

[data-nav-filter="lang"] #cl-lang-current{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  line-height:1!important;
}

[data-nav-filter="lang"] > svg{
  display:none!important;
}

[data-nav-filter="lang"] .cl-lang-flag-img{
  width:24px!important;
  height:24px!important;
  border-radius:6px!important;
  margin:0!important;
}

[data-nav-filter="lang"] .cl-lang-code{
  font-size:11px!important;
  font-weight:950!important;
  line-height:1!important;
}

/* Ajuste específico para Salvos / Instagram / Contato ficarem no centro visual */
[data-nav-filter="saved"],
[data-nav-filter="instagram"],
[data-nav-filter="contact"]{
  padding-top:11px!important;
  padding-bottom:10px!important;
}

[data-nav-filter="saved"] svg,
[data-nav-filter="instagram"] svg,
[data-nav-filter="contact"] svg{
  width:22px!important;
  height:22px!important;
}

/* Menu de idioma */
.cl-lang-menu button{
  justify-content:flex-start!important;
}

.cl-lang-menu button .cl-lang-flag-img{
  width:22px!important;
  height:22px!important;
  border-radius:6px!important;
}

/* Aviso importante com quebras corretas e e-mail clicável */
.cl-notice-copy,
.cl-important-notice-copy,
.cl-notice-text{
  display:block;
}

.cl-notice-copy p,
.cl-important-notice-copy p,
.cl-notice-text p,
.cl-important-notice p,
.cl-footer-notice p,
.cl-footer-warning p{
  margin:0 0 1.05em!important;
}

.cl-notice-copy p:last-child,
.cl-important-notice-copy p:last-child,
.cl-notice-text p:last-child,
.cl-important-notice p:last-child,
.cl-footer-notice p:last-child,
.cl-footer-warning p:last-child{
  margin-bottom:0!important;
}

.cl-notice-copy a,
.cl-important-notice a,
.cl-footer-notice a,
.cl-footer-warning a{
  color:rgba(255,255,255,.92)!important;
  font-weight:850!important;
  text-decoration:underline!important;
  text-underline-offset:3px!important;
}

.cl-notice-pill,
.cl-notice-badge{
  white-space:nowrap!important;
}


/* ===== v36.19: correções de idioma, hero e estabilidade mobile ===== */

/* Hero: chips informativos voltam a parecer texto/selos, não botões */
.cl-hero__chips span:not(.cl-instagram-chip):not(.cl-hero-instagram):not(.cl-instagram-button),
.cl-hero-tags span:not(.cl-instagram-chip):not(.cl-hero-instagram):not(.cl-instagram-button),
.cl-hero__meta span:not(.cl-instagram-chip):not(.cl-hero-instagram):not(.cl-instagram-button){
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding-left:0!important;
  padding-right:0!important;
  cursor:default!important;
}

/* Instagram do hero continua sendo botão */
.cl-instagram-chip,
.cl-hero-instagram,
.cl-instagram-button,
a[href*="instagram.com/comlocal.online"]{
  cursor:pointer;
}

/* Botão de idioma: força SVG da bandeira como ícone superior */
[data-nav-filter="lang"]{
  overflow:hidden!important;
}

[data-nav-filter="lang"] #cl-lang-current{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  width:100%!important;
  height:100%!important;
}

[data-nav-filter="lang"] .cl-lang-flag-img{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  width:24px!important;
  height:24px!important;
  border-radius:6px!important;
  object-fit:cover!important;
  flex:0 0 24px!important;
}

[data-nav-filter="lang"] .cl-lang-code{
  display:block!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:950!important;
}

/* Se a imagem não carregou, não mostra emoji/globo quebrado */
[data-nav-filter="lang"] .cl-lang-flag,
[data-nav-filter="lang"] > svg{
  display:none!important;
}

/* Evita crash/repaint agressivo em Safari antigo no primeiro load */
@media (max-width:700px){
  body.is-language-switching .cl-app{
    animation:none!important;
    opacity:1!important;
    filter:none!important;
    transform:none!important;
  }
}


/* ===== v36.20: hero chips sem botão + tooltip arquivo + traduções salvos ===== */

/* Remove definitivamente o aspecto de botão dos três selos informativos do hero.
   Mantém somente o @comlocal.online com visual clicável. */
.cl-hero__chips > span,
.cl-hero__chips > .cl-chip,
.cl-hero__badges > span,
.cl-hero__badges > .cl-chip,
.cl-hero__meta > span,
.cl-hero__meta > .cl-chip,
.cl-hero__tags > span,
.cl-hero__tags > .cl-chip,
.cl-hero .cl-hero-chip:not(a):not(button):not(.cl-instagram-chip):not(.cl-hero-instagram):not(.cl-instagram-button),
.cl-hero [data-i18n="heroKicker"],
.cl-hero [data-i18n="heroLocation"],
.cl-hero [data-i18n="heroLive"]{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-radius:0!important;
  padding:0!important;
  min-height:auto!important;
  cursor:default!important;
}

/* Força que apenas o link/botão do Instagram preserve o formato de botão */
.cl-hero__chips a,
.cl-hero__chips button,
.cl-hero__badges a,
.cl-hero__badges button,
.cl-hero a[href*="instagram.com"],
.cl-instagram-chip,
.cl-hero-instagram,
.cl-instagram-button{
  border-radius:999px;
}

/* Espaçamento bonito entre os selos informativos sem parecer botão */
.cl-hero__chips,
.cl-hero__badges,
.cl-hero__meta,
.cl-hero__tags{
  gap:18px!important;
  align-items:center!important;
}

/* Tooltip das tabs: no arquivo/eventos encerrados ele vem mais à esquerda para não cobrir a contagem */
.cl-past-section [data-tooltip]::after,
.cl-past-section__head[data-tooltip]::after,
[data-archive-toggle][data-tooltip]::after{
  right:150px!important;
  left:auto!important;
  transform:translateY(-50%)!important;
  max-width:190px!important;
  white-space:nowrap!important;
}

/* Caso a regra original use before como tooltip */
.cl-past-section [data-tooltip]::before,
.cl-past-section__head[data-tooltip]::before,
[data-archive-toggle][data-tooltip]::before{
  right:150px!important;
  left:auto!important;
}

/* Botão voltar do painel de salvos: mantém layout e permite texto traduzido sem quebrar */
#cl-route-panel button,
.cl-route-panel button,
.cl-route-drawer button{
  white-space:nowrap;
}

/* Label de remover por swipe traduzível */
.cl-swipe-remove-label,
.cl-route-remove-label,
.cl-saved-remove-label,
[data-swipe-remove-label],
[data-remove-bg]{
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.04em;
}

@supports (-webkit-touch-callout:none){
  @media (max-width:700px){
    body.is-language-switching .cl-app{
      animation:none!important;
      filter:none!important;
      transform:none!important;
      opacity:1!important;
    }
  }
}


/* ===== v36.21: Hero badges viram texto, não botões ===== */

/* Alvo real do HTML: .cl-hero-pill dentro de .cl-hero__badges.
   Os três spans informativos ficam sem borda/fundo/contorno. */
.cl-hero__badges > span.cl-hero-pill{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-radius:0!important;
  padding:0!important;
  min-height:0!important;
  height:auto!important;
  color:rgba(255,255,255,.92)!important;
  cursor:default!important;
  pointer-events:none!important;
}

.cl-hero__badges > span.cl-hero-pill::before,
.cl-hero__badges > span.cl-hero-pill::after{
  display:none!important;
  content:none!important;
}

/* Mantém apenas o @comlocal.online com aparência de botão */
.cl-hero__badges > a.cl-hero-pill,
.cl-hero__badges > a.cl-instagram-link{
  border:1px solid rgba(255,75,150,.54)!important;
  background:rgba(255,75,150,.10)!important;
  box-shadow:0 0 22px rgba(255,75,150,.18), inset 0 1px 0 rgba(255,255,255,.10)!important;
  border-radius:999px!important;
  padding:12px 18px!important;
  pointer-events:auto!important;
}

/* Tooltip de Eventos Encerrados mais à esquerda, sem cobrir contagem */
.cl-past-section [data-tooltip]::after,
.cl-past-section__head[data-tooltip]::after,
[data-archive-toggle][data-tooltip]::after{
  right:190px!important;
  left:auto!important;
  transform:translateY(-50%)!important;
}

.cl-past-section [data-tooltip]::before,
.cl-past-section__head[data-tooltip]::before,
[data-archive-toggle][data-tooltip]::before{
  right:190px!important;
  left:auto!important;
}

/* Mobile: mantém selos do hero em linha limpa e sem cara de botão */
@media (max-width:700px){
  .cl-hero__badges > span.cl-hero-pill{
    font-size:13px!important;
  }
  .cl-hero__badges{
    gap:12px!important;
  }
}


/* ===== v36.22: correção definitiva do Hero — spans informativos não são botões ===== */

/* A solução definitiva é estrutural:
   os três itens informativos agora usam .cl-hero-meta-item, não .cl-hero-pill.
   Assim eles não herdam mais nenhum estilo de botão/pílula. */
.cl-hero__badges > .cl-hero-meta-item,
.cl-hero__badges > span:not(.cl-instagram-link){
  all:unset!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  box-sizing:border-box!important;
  color:rgba(255,255,255,.90)!important;
  font-family:inherit!important;
  font-size:14px!important;
  font-weight:850!important;
  line-height:1.1!important;
  text-shadow:0 1px 12px rgba(0,0,0,.32)!important;
  cursor:default!important;
  pointer-events:none!important;
  white-space:nowrap!important;
}

/* Mata qualquer vestígio visual caso algum cache ainda entregue .cl-hero-pill nos spans. */
.cl-hero__badges > span.cl-hero-pill,
.cl-hero__badges > span.cl-hero-meta-item{
  border:none!important;
  outline:none!important;
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  text-shadow:0 1px 12px rgba(0,0,0,.32)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-radius:0!important;
  padding:0!important;
  margin:0!important;
  min-width:0!important;
  min-height:0!important;
  width:auto!important;
  height:auto!important;
  transform:none!important;
  filter:none!important;
}

/* Remove pseudo-camadas que criavam o contorno/fundo de botão. */
.cl-hero__badges > span.cl-hero-pill::before,
.cl-hero__badges > span.cl-hero-pill::after,
.cl-hero__badges > span.cl-hero-meta-item::before,
.cl-hero__badges > span.cl-hero-meta-item::after{
  display:none!important;
  content:none!important;
  background:none!important;
  box-shadow:none!important;
  border:0!important;
}

/* Só o Instagram pode parecer botão dentro dessa linha. */
.cl-hero__badges > a.cl-hero-pill,
.cl-hero__badges > a.cl-instagram-link{
  all:revert!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  font-family:inherit!important;
  font-size:14px!important;
  font-weight:900!important;
  color:#fff!important;
  text-decoration:none!important;
  border:1px solid rgba(255,75,150,.56)!important;
  background:rgba(255,75,150,.12)!important;
  box-shadow:0 0 22px rgba(255,75,150,.18), inset 0 1px 0 rgba(255,255,255,.11)!important;
  border-radius:999px!important;
  padding:12px 18px!important;
  cursor:pointer!important;
}

.cl-hero__badges{
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
  flex-wrap:wrap!important;
}

@media (max-width:700px){
  .cl-hero__badges > .cl-hero-meta-item,
  .cl-hero__badges > span:not(.cl-instagram-link){
    font-size:13px!important;
    gap:6px!important;
  }
  .cl-hero__badges{
    gap:12px!important;
  }
}


/* ===== Com Local Parada v0.3.1 — Hero restaurado e multilíngue =====
   Correção definitiva: a regra antiga ".cl-hero__badges span" estiliza qualquer span descendente.
   Por isso agora limpamos o item informativo E seus spans internos. Só o Instagram conserva visual de botão. */

.cl-hero__badges{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:18px!important;
  margin-top:24px!important;
  align-items:center!important;
}

/* Itens informativos e TODOS seus spans internos sem aspecto de botão */
.cl-hero__badges .cl-hero-meta-item,
.cl-hero__badges .cl-hero-meta-item *,
.cl-hero__badges > span:not(.cl-instagram-link),
.cl-hero__badges > span:not(.cl-instagram-link) *{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-radius:0!important;
  padding:0!important;
  margin:0!important;
  min-width:0!important;
  min-height:0!important;
  width:auto!important;
  height:auto!important;
  transform:none!important;
  filter:none!important;
  text-decoration:none!important;
}

.cl-hero__badges .cl-hero-meta-item{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  color:rgba(255,255,255,.88)!important;
  font-size:13px!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
  line-height:1.1!important;
  text-shadow:0 1px 12px rgba(0,0,0,.34)!important;
  cursor:default!important;
  pointer-events:none!important;
  white-space:nowrap!important;
}

.cl-hero__badges .cl-hero-meta-emoji{
  font-size:14px!important;
  line-height:1!important;
}

.cl-hero__badges .cl-hero-meta-text{
  color:inherit!important;
  font:inherit!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
  text-shadow:inherit!important;
}

.cl-hero__badges .cl-hero-meta-item::before,
.cl-hero__badges .cl-hero-meta-item::after,
.cl-hero__badges .cl-hero-meta-item *::before,
.cl-hero__badges .cl-hero-meta-item *::after{
  display:none!important;
  content:none!important;
  background:none!important;
  box-shadow:none!important;
  border:0!important;
}

/* Instagram restaurado ao visual correto antigo */
.cl-hero__badges .cl-instagram-link,
.cl-hero__badges > a.cl-instagram-link,
.cl-hero__badges > a.cl-hero-pill.cl-instagram-link{
  all:unset!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:9px 13px!important;
  border-radius:999px!important;
  color:#fff!important;
  text-decoration:none!important;
  background:rgba(0,0,0,.24)!important;
  border:1px solid rgba(225,48,108,.58)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  box-shadow:0 0 18px rgba(225,48,108,.32),0 0 38px rgba(131,58,180,.22),inset 0 1px 0 rgba(255,255,255,.16)!important;
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  cursor:pointer!important;
  pointer-events:auto!important;
}

.cl-hero__badges .cl-instagram-link strong,
.cl-hero__badges .cl-instagram-link span{
  color:#fff!important;
  font:inherit!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
}

.cl-hero__badges .cl-instagram-link:hover{
  border-color:rgba(255,255,255,.45)!important;
  box-shadow:0 0 20px rgba(225,48,108,.38),0 0 42px rgba(131,58,180,.24),inset 0 1px 0 rgba(255,255,255,.18)!important;
}

.cl-hero__badges .cl-instagram-icon{
  width:18px!important;
  height:18px!important;
  color:#fff!important;
  flex:0 0 auto!important;
}

@media (max-width:700px){
  .cl-hero__badges{
    gap:12px!important;
  }
  .cl-hero__badges .cl-hero-meta-item{
    font-size:13px!important;
    gap:6px!important;
  }
  .cl-hero__badges .cl-instagram-link{
    padding:9px 12px!important;
  }
}


/* ===== Com Local Parada v0.3.2 — Salvos + HOT multilíngue ===== */

/* Filtro Salvos com mesmo coração dos cards salvos */
[data-quick="saved"]{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
}

[data-quick="saved"] .cl-saved-filter-heart{
  width:18px!important;
  height:18px!important;
  flex:0 0 auto!important;
  color:#fff!important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.18));
  transition:transform .24s cubic-bezier(.18,.88,.22,1.18), filter .24s ease;
}

[data-quick="saved"]:hover .cl-saved-filter-heart{
  transform:scale(1.08);
  filter:drop-shadow(0 0 12px rgba(255,255,255,.28));
}

/* Remove traduzível no swipe dos Locais Salvos.
   Mantém compatibilidade com camadas antigas que usam pseudo-elemento. */
.cl-swipe-remove-label,
.cl-route-remove-label,
.cl-saved-remove-label,
[data-swipe-remove-label],
[data-remove-bg],
.cl-saved-route-action{
  font-size:0!important;
}

.cl-swipe-remove-label::after,
.cl-route-remove-label::after,
.cl-saved-remove-label::after,
[data-swipe-remove-label]::after,
[data-remove-bg]::after,
.cl-saved-route-action::after{
  content:var(--cl-swipe-remove-label, "Remover")!important;
  font-size:12px!important;
  font-weight:950!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
}

/* Se a vibe original vier como X, mostramos como HOT sem mexer no JSON de eventos. */
.cl-tag-chip[data-tag="X"] .cl-tag-label,
.cl-vibe-chip[data-tag="X"] .cl-tag-label,
[data-tag="X"] .cl-tag-label{
  font-size:0!important;
}

.cl-tag-chip[data-tag="X"] .cl-tag-label::after,
.cl-vibe-chip[data-tag="X"] .cl-tag-label::after,
[data-tag="X"] .cl-tag-label::after{
  content:"HOT";
  font-size:inherit!important;
}



/* ===== Com Local Parada v0.3.3 — Arquivo responsivo, busca compacta e ajustes mobile ===== */

/* Filtro Salvos com coração */
[data-quick="saved"]{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
}

[data-quick="saved"] .cl-saved-filter-heart{
  width:18px!important;
  height:18px!important;
  flex:0 0 auto!important;
  color:#fff!important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.18));
  transition:transform .24s cubic-bezier(.18,.88,.22,1.18), filter .24s ease;
}

[data-quick="saved"]:hover .cl-saved-filter-heart{
  transform:scale(1.08);
  filter:drop-shadow(0 0 12px rgba(255,255,255,.28));
}

/* Remove traduzível no swipe dos Locais Salvos */
.cl-route-delete-bg,
.cl-swipe-remove-label,
.cl-route-remove-label,
.cl-saved-remove-label,
[data-swipe-remove-label],
[data-remove-bg],
.cl-saved-route-action{
  font-size:0!important;
}

.cl-route-delete-bg::after,
.cl-swipe-remove-label::after,
.cl-route-remove-label::after,
.cl-saved-remove-label::after,
[data-swipe-remove-label]::after,
[data-remove-bg]::after,
.cl-saved-route-action::after{
  content:var(--cl-swipe-remove-label, "Remover")!important;
  font-size:12px!important;
  font-weight:950!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
}

/* Vibe antiga X passa a aparecer como HOT */
.cl-tag-chip[data-tag="X"] .cl-tag-label,
.cl-vibe-chip[data-tag="X"] .cl-tag-label,
[data-tag="X"] .cl-tag-label{
  font-size:0!important;
}

.cl-tag-chip[data-tag="X"] .cl-tag-label::after,
.cl-vibe-chip[data-tag="X"] .cl-tag-label::after,
[data-tag="X"] .cl-tag-label::after{
  content:"HOT";
  font-size:inherit!important;
}

/* Barra inferior mobile: TOP centralizado e mais harmônico */
@media (max-width:700px){
  .cl-bottom-nav{
    align-items:stretch!important;
  }

  .cl-bottom-nav button,
  .cl-bottom-nav a{
    min-height:66px!important;
    padding:8px 4px 7px!important;
    justify-content:center!important;
    align-items:center!important;
    gap:5px!important;
  }

  .cl-bottom-nav [data-nav-filter="top"]{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    text-align:center!important;
    gap:5px!important;
  }

  .cl-bottom-nav [data-nav-filter="top"] svg,
  .cl-bottom-nav [data-nav-filter="top"] .cl-nav-icon{
    width:22px!important;
    height:22px!important;
    margin:0!important;
    transform-origin:center!important;
  }

  .cl-bottom-nav [data-nav-filter="top"] span{
    line-height:1!important;
    margin:0!important;
    transform:none!important;
    display:block!important;
  }
}

/* Deixa o botão de expandir filtros mais alto no mobile, escondendo mais o bloco avançado */
@media (max-width:700px){
  .cl-controls:not(.is-expanded):not(.cl-filters-expanded){
    max-height:285px!important;
    overflow:hidden!important;
  }

  html:not(.cl-filters-expanded) .cl-controls{
    max-height:285px!important;
    overflow:hidden!important;
  }

  #cl-filter-more{
    margin-top:-18px!important;
    transform:translateY(-12px)!important;
    position:relative!important;
    z-index:5!important;
  }

  html.cl-filters-expanded #cl-filter-more{
    margin-top:10px!important;
    transform:none!important;
  }
}

/* Ao digitar busca, o JS recolhe filtros avançados; esta regra suaviza o recolhimento */
.cl-controls{
  transition:max-height .36s cubic-bezier(.18,.86,.22,1), padding-bottom .28s ease!important;
}


/* ===== Com Local Parada v0.3.4 — Filtros mobile compactos sem perder botão ===== */

/* Correção do bug: na v0.3.3 o max-height cortava o #cl-filter-more.
   Agora o botão de expandir fica sempre visível, e o conteúdo avançado é que é mascarado. */
@media (max-width:700px){
  html:not(.cl-filters-expanded) .cl-controls{
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:18px!important;
  }

  html:not(.cl-filters-expanded) #cl-filter-more{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    margin:6px auto -2px!important;
    transform:translateY(-4px)!important;
    position:relative!important;
    z-index:12!important;
  }

  html.cl-filters-expanded #cl-filter-more{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    margin:12px auto 0!important;
    transform:none!important;
    position:relative!important;
    z-index:12!important;
  }

  /* Estado normal recolhido: mostra busca, quick filters, hot, dias e começo das vibes com fade,
     mas mantém o botão de expandir clicável logo abaixo. */
  html:not(.cl-filters-expanded) .cl-filter-group:nth-of-type(n+3){
    max-height:56px!important;
    overflow:hidden!important;
    position:relative!important;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.25) 76%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.25) 76%,transparent 100%)!important;
  }

  /* Quando a pessoa está digitando, compacta de verdade: some com dias/vibes/regiões,
     mas o botão continua disponível para reabrir se ela quiser. */
  html.cl-search-compact:not(.cl-filters-expanded) .cl-filter-group{
    display:none!important;
  }

  html.cl-search-compact:not(.cl-filters-expanded) #cl-filter-more{
    margin-top:8px!important;
    transform:none!important;
  }

  /* Evita que regras antigas de max-height/overflow das versões anteriores voltem a cortar o botão */
  .cl-controls:not(.is-expanded):not(.cl-filters-expanded){
    max-height:none!important;
    overflow:visible!important;
  }
}


/* ===== Com Local Parada v0.3.5 — botão filtros mobile compacto + no results multilíngue ===== */

/* Corrige o botão "Clique para expandir filtros" no mobile:
   antes ele era largo demais e ficava cortado na lateral. */
@media (max-width:700px){
  #cl-filter-more{
    left:auto!important;
    right:auto!important;
    width:auto!important;
    max-width:calc(100% - 48px)!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:12px 18px!important;
    justify-content:center!important;
    align-items:center!important;
    gap:9px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    border-radius:999px!important;
  }

  #cl-filter-more span,
  #cl-filter-more .cl-filter-more-text{
    font-size:0!important;
    max-width:0!important;
    overflow:hidden!important;
  }

  #cl-filter-more::after{
    content:var(--cl-filter-more-mobile-label, "Filtros avançados");
    display:inline-block;
    font-size:13px!important;
    line-height:1!important;
    font-weight:950!important;
    letter-spacing:.035em!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
  }

  #cl-filter-more svg,
  #cl-filter-more .cl-filter-more-icon{
    width:18px!important;
    height:18px!important;
    flex:0 0 auto!important;
    margin:0!important;
  }

  html:not(.cl-filters-expanded) #cl-filter-more{
    transform:translateY(-6px)!important;
  }

  html.cl-search-compact:not(.cl-filters-expanded) #cl-filter-more{
    transform:none!important;
    margin-top:8px!important;
  }
}


/* ===== Com Local Parada v0.3.6 — filtro recolhido premium e compacto ===== */

/*
  Objetivo:
  - Recolhido: mostrar busca + filtros rápidos + HOT + Dias + só o começo de Vibes.
  - Fade começa no topo de VIBES, e o botão fica centralizado, elegante, logo acima da dobra.
  - Expandido: mostra tudo normal.
*/

.cl-controls{
  position:relative!important;
}

/* Botão premium centralizado em todas as larguras */
#cl-filter-more{
  left:50%!important;
  right:auto!important;
  width:max-content!important;
  max-width:calc(100% - 48px)!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  transform:translateX(-50%) translateY(-60px)!important;
  position:relative!important;
  z-index:30!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  padding:11px 18px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  background:rgba(7,9,14,.78)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

html.cl-filters-expanded #cl-filter-more{
  transform:translateX(-50%) translateY(0)!important;
  margin-top:18px!important;
}

#cl-filter-more span,
#cl-filter-more .cl-filter-more-text{
  font-size:0!important;
  max-width:0!important;
  overflow:hidden!important;
}

#cl-filter-more::after{
  content:var(--cl-filter-more-mobile-label, "Filtros avançados");
  display:inline-block!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  color:#fff!important;
}

#cl-filter-more svg,
#cl-filter-more .cl-filter-more-icon{
  width:17px!important;
  height:17px!important;
  flex:0 0 auto!important;
  margin:0!important;
}

/* Recolhido: corta o container mais cedo, na região de VIBES */
html:not(.cl-filters-expanded) .cl-controls{
  max-height:430px!important;
  overflow:hidden!important;
  padding-bottom:0!important;
}

/* Fade premium começando na área de VIBES */
html:not(.cl-filters-expanded) .cl-controls::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:150px!important;
  z-index:20!important;
  pointer-events:none!important;
  background:linear-gradient(
    to bottom,
    rgba(30,34,48,0) 0%,
    rgba(30,34,48,.55) 30%,
    rgba(30,34,48,.88) 68%,
    rgba(30,34,48,.96) 100%
  )!important;
}

/* O botão precisa ficar acima do fade */
html:not(.cl-filters-expanded) #cl-filter-more{
  z-index:40!important;
}

/* Quando está digitando, fica mais compacto ainda, mas sem sumir com o botão */
html.cl-search-compact:not(.cl-filters-expanded) .cl-controls{
  max-height:290px!important;
}

html.cl-search-compact:not(.cl-filters-expanded) .cl-filter-group{
  display:none!important;
}

html.cl-search-compact:not(.cl-filters-expanded) #cl-filter-more{
  transform:translateX(-50%) translateY(-18px)!important;
}

/* Desktop e intermediário: também sobe cerca de 60px e deixa o bloco mais compacto */
@media (min-width:701px){
  html:not(.cl-filters-expanded) .cl-controls{
    max-height:390px!important;
  }

  html:not(.cl-filters-expanded) .cl-controls::after{
    height:132px!important;
  }

  html:not(.cl-filters-expanded) #cl-filter-more{
    transform:translateX(-50%) translateY(-60px)!important;
  }

  html.cl-filters-expanded #cl-filter-more{
    transform:translateX(-50%) translateY(0)!important;
  }
}

/* Mobile: botão menor e fade exatamente na dobra do bloco de VIBES */
@media (max-width:700px){
  html:not(.cl-filters-expanded) .cl-controls{
    max-height:435px!important;
  }

  html:not(.cl-filters-expanded) .cl-controls::after{
    height:164px!important;
    background:linear-gradient(
      to bottom,
      rgba(30,34,48,0) 0%,
      rgba(30,34,48,.42) 22%,
      rgba(30,34,48,.84) 62%,
      rgba(30,34,48,.98) 100%
    )!important;
  }

  html:not(.cl-filters-expanded) #cl-filter-more{
    transform:translateX(-50%) translateY(-58px)!important;
    padding:11px 16px!important;
    max-width:calc(100% - 84px)!important;
  }

  html.cl-filters-expanded #cl-filter-more{
    transform:translateX(-50%) translateY(0)!important;
  }

  #cl-filter-more::after{
    font-size:12px!important;
    letter-spacing:.045em!important;
  }
}

/* Remove overrides antigos que jogavam o botão para a lateral ou criavam faixa grande */
html:not(.cl-filters-expanded) #cl-filter-more,
html.cl-search-compact:not(.cl-filters-expanded) #cl-filter-more{
  margin-left:0!important;
  margin-right:0!important;
}

/* No estado expandido, não corta nada */
html.cl-filters-expanded .cl-controls{
  max-height:none!important;
  overflow:visible!important;
}

html.cl-filters-expanded .cl-controls::after{
  display:none!important;
}


/* ===== Com Local Parada v0.3.7 — arquitetura definitiva de filtros compactos ===== */

/*
  Esta versão para de depender de max-height fixo puro.
  O JS mede o conteúdo depois do JSON carregar e grava --cl-filter-collapsed-height.
  Assim o botão não some após renderização e o fade fica dentro do card.
*/

.cl-controls{
  position:relative!important;
  transition:max-height .42s cubic-bezier(.18,.86,.22,1), padding-bottom .28s ease!important;
}

/* Estado recolhido: o card corta por dentro, respeitando o border-radius da UI */
.cl-controls.is-filter-collapsed{
  max-height:var(--cl-filter-collapsed-height, 380px)!important;
  overflow:hidden!important;
  border-radius:inherit!important;
  padding-bottom:0!important;
}

/* Estado expandido: tudo visível */
.cl-controls.is-filter-expanded,
html.cl-filters-expanded .cl-controls{
  max-height:none!important;
  overflow:visible!important;
}

/* Fade interno, preso ao card, sem pontas retas para fora */
.cl-controls.is-filter-collapsed::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:118px!important;
  z-index:18!important;
  pointer-events:none!important;
  border-bottom-left-radius:inherit!important;
  border-bottom-right-radius:inherit!important;
  background:linear-gradient(
    to bottom,
    rgba(30,34,48,0) 0%,
    rgba(30,34,48,.30) 22%,
    rgba(30,34,48,.76) 62%,
    rgba(30,34,48,.97) 100%
  )!important;
}

html.cl-filters-expanded .cl-controls::after,
.cl-controls.is-filter-expanded::after{
  display:none!important;
}

/* Botão centralizado, premium e compacto. 
   Fica dentro do fade, não empurra o layout e não some quando o JSON carrega. */
#cl-filter-more{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:20px!important;
  top:auto!important;
  transform:translateX(-50%)!important;
  z-index:42!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:auto!important;
  max-width:calc(100% - 72px)!important;
  min-width:0!important;
  margin:0!important;
  padding:11px 18px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
  background:rgba(8,10,16,.82)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

/* Quando expandido, o botão volta para o fluxo normal abaixo dos filtros */
html.cl-filters-expanded #cl-filter-more,
.cl-controls.is-filter-expanded #cl-filter-more{
  position:relative!important;
  left:50%!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  margin:18px 0 0!important;
}

/* Texto curto no botão em todas as larguras, para não ficar gigante */
#cl-filter-more span,
#cl-filter-more .cl-filter-more-text{
  font-size:0!important;
  max-width:0!important;
  overflow:hidden!important;
}

#cl-filter-more::after{
  content:var(--cl-filter-more-mobile-label, "Filtros avançados")!important;
  display:inline-block!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  color:#fff!important;
}

#cl-filter-more svg,
#cl-filter-more .cl-filter-more-icon{
  width:17px!important;
  height:17px!important;
  flex:0 0 auto!important;
  margin:0!important;
}

/* Busca ativa: esconde os grupos e deixa só busca + botão compacto */
html.cl-search-compact:not(.cl-filters-expanded) .cl-filter-group{
  display:none!important;
}

html.cl-search-compact:not(.cl-filters-expanded) .cl-controls.is-filter-collapsed::after{
  height:92px!important;
}

html.cl-search-compact:not(.cl-filters-expanded) #cl-filter-more{
  bottom:16px!important;
}

/* Desktop/intermediário: botão efetivamente ~60px mais alto porque fica absoluto no corte do card */
@media (min-width:701px){
  .cl-controls.is-filter-collapsed::after{
    height:112px!important;
  }
  #cl-filter-more{
    bottom:18px!important;
  }
}

/* Mobile: mais compacto e com fade dentro das bordas arredondadas */
@media (max-width:700px){
  .cl-controls.is-filter-collapsed{
    max-height:var(--cl-filter-collapsed-height, 405px)!important;
  }

  .cl-controls.is-filter-collapsed::after{
    height:122px!important;
    background:linear-gradient(
      to bottom,
      rgba(30,34,48,0) 0%,
      rgba(30,34,48,.28) 18%,
      rgba(30,34,48,.82) 60%,
      rgba(30,34,48,.98) 100%
    )!important;
  }

  #cl-filter-more{
    bottom:18px!important;
    max-width:calc(100% - 96px)!important;
    padding:11px 15px!important;
  }

  #cl-filter-more::after{
    font-size:12px!important;
    letter-spacing:.045em!important;
  }
}

/* Neutraliza regras antigas das versões 0.3.3-0.3.6 que jogavam o botão para a lateral/baixo */
html:not(.cl-filters-expanded) #cl-filter-more,
html.cl-search-compact:not(.cl-filters-expanded) #cl-filter-more{
  margin-left:0!important;
  margin-right:0!important;
}


/* ===== Com Local Parada v0.3.8 — filtros compactos refinados ===== */

/* Card de filtros com borda e cantos iguais ao restante do site */
.cl-controls{
  border-radius:32px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 22px 70px rgba(0,0,0,.18)!important;
}

/* Estado expandido: sem gap gigante abaixo do botão */
.cl-controls.is-filter-expanded,
html.cl-filters-expanded .cl-controls{
  max-height:none!important;
  overflow:hidden!important;
  padding-bottom:28px!important;
  border-radius:32px!important;
}

html.cl-filters-expanded #cl-filter-more,
.cl-controls.is-filter-expanded #cl-filter-more{
  position:relative!important;
  left:50%!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  margin:16px 0 0!important;
}

/* Estado recolhido: muito mais compacto, com fade a partir de DIAS */
.cl-controls.is-filter-collapsed{
  max-height:var(--cl-filter-collapsed-height, 335px)!important;
  overflow:hidden!important;
  border-radius:32px!important;
  padding-bottom:0!important;
}

.cl-controls.is-filter-collapsed::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:118px!important;
  z-index:18!important;
  pointer-events:none!important;
  border-bottom-left-radius:32px!important;
  border-bottom-right-radius:32px!important;
  background:linear-gradient(
    to bottom,
    rgba(30,34,48,0) 0%,
    rgba(30,34,48,.38) 22%,
    rgba(30,34,48,.86) 64%,
    rgba(30,34,48,.985) 100%
  )!important;
}

/* Botão de filtros: centralizado e dentro do fade */
#cl-filter-more{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:18px!important;
  top:auto!important;
  transform:translateX(-50%)!important;
  z-index:42!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:auto!important;
  max-width:calc(100% - 80px)!important;
  min-width:0!important;
  margin:0!important;
  padding:11px 18px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
  background:rgba(8,10,16,.84)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

#cl-filter-more span,
#cl-filter-more .cl-filter-more-text{
  font-size:0!important;
  max-width:0!important;
  overflow:hidden!important;
}

#cl-filter-more::after{
  content:var(--cl-filter-more-mobile-label, "Filtros avançados")!important;
  display:inline-block!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  color:#fff!important;
}

#cl-filter-more svg,
#cl-filter-more .cl-filter-more-icon{
  width:17px!important;
  height:17px!important;
  flex:0 0 auto!important;
  margin:0!important;
}

/* Remove completamente o comportamento visual especial de busca compacta */
html.cl-search-compact:not(.cl-filters-expanded) .cl-filter-group{
  display:block!important;
}

html.cl-search-compact:not(.cl-filters-expanded) .cl-controls,
html.cl-search-compact:not(.cl-filters-expanded) .cl-controls.is-filter-collapsed{
  max-height:var(--cl-filter-collapsed-height, 335px)!important;
}

/* Desktop/intermediário: o corte fica antes de VIBES */
@media (min-width:701px){
  .cl-controls.is-filter-collapsed{
    max-height:var(--cl-filter-collapsed-height, 326px)!important;
  }

  .cl-controls.is-filter-collapsed::after{
    height:112px!important;
  }

  #cl-filter-more{
    bottom:18px!important;
  }
}

/* Mobile: corte mais alto, fade dentro dos cantos e sem pontas retas */
@media (max-width:700px){
  .cl-controls{
    border-radius:28px!important;
  }

  .cl-controls.is-filter-expanded,
  html.cl-filters-expanded .cl-controls{
    border-radius:28px!important;
    padding-bottom:24px!important;
  }

  .cl-controls.is-filter-collapsed{
    max-height:var(--cl-filter-collapsed-height, 350px)!important;
    border-radius:28px!important;
  }

  .cl-controls.is-filter-collapsed::after{
    height:124px!important;
    border-bottom-left-radius:28px!important;
    border-bottom-right-radius:28px!important;
    background:linear-gradient(
      to bottom,
      rgba(30,34,48,0) 0%,
      rgba(30,34,48,.36) 18%,
      rgba(30,34,48,.88) 60%,
      rgba(30,34,48,.99) 100%
    )!important;
  }

  #cl-filter-more{
    bottom:16px!important;
    max-width:calc(100% - 96px)!important;
    padding:10px 15px!important;
  }

  #cl-filter-more::after{
    font-size:12px!important;
    letter-spacing:.045em!important;
  }
}

/* Barra flutuante inferior: SUBIR/TOP refeito e centralizado */
.cl-bottom-nav [data-nav-filter="top"]{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:5px!important;
  padding:8px 10px!important;
  line-height:1!important;
}

.cl-bottom-nav [data-nav-filter="top"] svg,
.cl-bottom-nav [data-nav-filter="top"] .cl-nav-icon{
  display:block!important;
  width:24px!important;
  height:24px!important;
  margin:0 auto!important;
  flex:0 0 24px!important;
  transform-origin:center!important;
  position:static!important;
  left:auto!important;
  right:auto!important;
}

.cl-bottom-nav [data-nav-filter="top"] span{
  display:block!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  text-align:center!important;
  transform:none!important;
  width:100%!important;
}

@media (max-width:700px){
  .cl-bottom-nav [data-nav-filter="top"]{
    min-height:66px!important;
    padding:8px 8px 7px!important;
  }

  .cl-bottom-nav [data-nav-filter="top"] svg,
  .cl-bottom-nav [data-nav-filter="top"] .cl-nav-icon{
    width:23px!important;
    height:23px!important;
    flex-basis:23px!important;
  }
}


/* ===== Com Local Parada v0.3.9 — filtro recolhido ainda mais compacto ===== */

/*
  Pedido: fade imediatamente depois do "Mostrar eventos HOT".
  Na prática: no estado recolhido a UI mostra só busca + atalhos + HOT.
  DIAS já entra dentro do fade e fica quase todo escondido.
*/

.cl-controls.is-filter-collapsed{
  max-height:var(--cl-filter-collapsed-height, 305px)!important;
  overflow:hidden!important;
  border-radius:32px!important;
  padding-bottom:0!important;
}

/* Fade mais alto e mais cedo: começa logo após o HOT */
.cl-controls.is-filter-collapsed::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:116px!important;
  z-index:18!important;
  pointer-events:none!important;
  border-bottom-left-radius:32px!important;
  border-bottom-right-radius:32px!important;
  background:linear-gradient(
    to bottom,
    rgba(30,34,48,0) 0%,
    rgba(30,34,48,.24) 14%,
    rgba(30,34,48,.72) 44%,
    rgba(30,34,48,.94) 76%,
    rgba(30,34,48,.99) 100%
  )!important;
}

/* Botão mais alto, na área de DIAS/fade */
#cl-filter-more{
  bottom:15px!important;
  z-index:45!important;
}

/* Recolhido: DIAS/VIBES/REGIÕES não devem ficar legíveis */
html:not(.cl-filters-expanded) .cl-controls.is-filter-collapsed .cl-filter-group{
  opacity:.18!important;
  filter:blur(.25px)!important;
  pointer-events:none!important;
}

/* Mantém apenas o comecinho visual do bloco abaixo do HOT, com fade */
html:not(.cl-filters-expanded) .cl-controls.is-filter-collapsed .cl-filter-group:nth-of-type(n+2){
  opacity:.08!important;
}

/* Expandido volta normal */
html.cl-filters-expanded .cl-controls .cl-filter-group,
.cl-controls.is-filter-expanded .cl-filter-group{
  opacity:1!important;
  filter:none!important;
  pointer-events:auto!important;
}

/* Desktop: corte ainda mais curto */
@media (min-width:981px){
  .cl-controls.is-filter-collapsed{
    max-height:var(--cl-filter-collapsed-height, 304px)!important;
  }

  .cl-controls.is-filter-collapsed::after{
    height:112px!important;
  }

  #cl-filter-more{
    bottom:15px!important;
  }
}

/* Intermediário/tablet */
@media (min-width:701px) and (max-width:980px){
  .cl-controls.is-filter-collapsed{
    max-height:var(--cl-filter-collapsed-height, 318px)!important;
  }

  .cl-controls.is-filter-collapsed::after{
    height:116px!important;
  }

  #cl-filter-more{
    bottom:15px!important;
  }
}

/* Mobile: bem compacto, fade já sobre a entrada de DIAS */
@media (max-width:700px){
  .cl-controls.is-filter-collapsed{
    max-height:var(--cl-filter-collapsed-height, 326px)!important;
    border-radius:28px!important;
  }

  .cl-controls.is-filter-collapsed::after{
    height:124px!important;
    border-bottom-left-radius:28px!important;
    border-bottom-right-radius:28px!important;
    background:linear-gradient(
      to bottom,
      rgba(30,34,48,0) 0%,
      rgba(30,34,48,.26) 12%,
      rgba(30,34,48,.76) 43%,
      rgba(30,34,48,.95) 76%,
      rgba(30,34,48,.995) 100%
    )!important;
  }

  #cl-filter-more{
    bottom:14px!important;
    max-width:calc(100% - 110px)!important;
    padding:10px 15px!important;
  }

  #cl-filter-more::after{
    font-size:12px!important;
    letter-spacing:.045em!important;
  }
}

/* Estado expandido: sem fade, sem blur e sem gap grande */
html.cl-filters-expanded .cl-controls,
.cl-controls.is-filter-expanded{
  max-height:none!important;
  overflow:hidden!important;
  padding-bottom:24px!important;
}

html.cl-filters-expanded .cl-controls::after,
.cl-controls.is-filter-expanded::after{
  display:none!important;
}

html.cl-filters-expanded #cl-filter-more,
.cl-controls.is-filter-expanded #cl-filter-more{
  position:relative!important;
  left:50%!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  margin:14px 0 0!important;
}


/* ===== Com Local Parada v0.4.0 — filtros recolhidos de verdade ===== */

/*
  Recolhido agora mostra APENAS:
  busca + filtros rápidos + Mostrar eventos HOT.
  DIAS/VIBES/REGIÕES não ficam legíveis nem alargam a seção depois do JSON carregar.
*/

.cl-controls{
  border-radius:32px!important;
  overflow:hidden!important;
}

.cl-controls.is-filter-collapsed{
  max-height:var(--cl-filter-collapsed-height, 258px)!important;
  overflow:hidden!important;
  padding-bottom:0!important;
  border-radius:32px!important;
}

/* Esconde completamente os grupos avançados no estado recolhido.
   Isso impede que DIAS/VIBES/REGIÕES alarguem a altura quando o JSON renderiza as tags. */
html:not(.cl-filters-expanded) .cl-controls.is-filter-collapsed .cl-filter-group{
  opacity:0!important;
  visibility:hidden!important;
  max-height:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

/* Fade vem logo depois do HOT, só como acabamento visual interno do card */
.cl-controls.is-filter-collapsed::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:86px!important;
  z-index:18!important;
  pointer-events:none!important;
  border-bottom-left-radius:inherit!important;
  border-bottom-right-radius:inherit!important;
  background:linear-gradient(
    to bottom,
    rgba(30,34,48,0) 0%,
    rgba(30,34,48,.38) 24%,
    rgba(30,34,48,.84) 70%,
    rgba(30,34,48,.99) 100%
  )!important;
}

/* Botão sobe para a área logo após o HOT */
#cl-filter-more{
  position:absolute!important;
  left:50%!important;
  bottom:14px!important;
  transform:translateX(-50%)!important;
  z-index:45!important;
  margin:0!important;
  width:auto!important;
  max-width:calc(100% - 90px)!important;
  padding:10px 16px!important;
  border-radius:999px!important;
}

/* Expandido: grupos voltam e o botão entra no fluxo sem gap gigante */
html.cl-filters-expanded .cl-controls,
.cl-controls.is-filter-expanded{
  max-height:none!important;
  overflow:hidden!important;
  padding-bottom:22px!important;
}

html.cl-filters-expanded .cl-controls .cl-filter-group,
.cl-controls.is-filter-expanded .cl-filter-group{
  opacity:1!important;
  visibility:visible!important;
  max-height:none!important;
  height:auto!important;
  overflow:visible!important;
  pointer-events:auto!important;
}

html.cl-filters-expanded .cl-controls::after,
.cl-controls.is-filter-expanded::after{
  display:none!important;
}

html.cl-filters-expanded #cl-filter-more,
.cl-controls.is-filter-expanded #cl-filter-more{
  position:relative!important;
  left:50%!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  margin:14px 0 0!important;
}

/* Desktop */
@media (min-width:981px){
  .cl-controls.is-filter-collapsed{
    max-height:var(--cl-filter-collapsed-height, 252px)!important;
  }

  .cl-controls.is-filter-collapsed::after{
    height:82px!important;
  }

  #cl-filter-more{
    bottom:13px!important;
  }
}

/* Intermediário */
@media (min-width:701px) and (max-width:980px){
  .cl-controls.is-filter-collapsed{
    max-height:var(--cl-filter-collapsed-height, 258px)!important;
  }

  .cl-controls.is-filter-collapsed::after{
    height:84px!important;
  }

  #cl-filter-more{
    bottom:13px!important;
  }
}

/* Mobile */
@media (max-width:700px){
  .cl-controls{
    border-radius:28px!important;
  }

  .cl-controls.is-filter-collapsed{
    max-height:var(--cl-filter-collapsed-height, 268px)!important;
    border-radius:28px!important;
  }

  .cl-controls.is-filter-collapsed::after{
    height:88px!important;
    border-bottom-left-radius:28px!important;
    border-bottom-right-radius:28px!important;
    background:linear-gradient(
      to bottom,
      rgba(30,34,48,0) 0%,
      rgba(30,34,48,.40) 24%,
      rgba(30,34,48,.87) 70%,
      rgba(30,34,48,.995) 100%
    )!important;
  }

  #cl-filter-more{
    bottom:13px!important;
    max-width:calc(100% - 112px)!important;
    padding:9px 14px!important;
  }

  #cl-filter-more::after{
    font-size:12px!important;
    letter-spacing:.045em!important;
  }
}


/* ===== Com Local Parada v0.4.1 — filtro recolhido com altura travada pelo topo ===== */

/*
  Correção estrutural:
  - A altura recolhida é travada em height/max-height pelo JS.
  - DIAS/VIBES/REGIÕES ficam invisíveis e fora de interação no recolhido.
  - O botão fica posicionado pelo topo da seção, não pelo conteúdo renderizado depois do JSON.
*/

.cl-controls{
  position:relative!important;
  border-radius:32px!important;
  overflow:hidden!important;
  transition:height .38s cubic-bezier(.18,.86,.22,1), max-height .38s cubic-bezier(.18,.86,.22,1)!important;
}

.cl-controls.is-filter-collapsed{
  height:var(--cl-filter-collapsed-height, 270px)!important;
  max-height:var(--cl-filter-collapsed-height, 270px)!important;
  min-height:0!important;
  overflow:hidden!important;
  padding-bottom:0!important;
  border-radius:32px!important;
}

/* Mata de verdade os grupos avançados no recolhido para não empurrarem a altura */
html:not(.cl-filters-expanded) .cl-controls.is-filter-collapsed .cl-filter-group{
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:calc(var(--cl-filter-collapsed-height, 270px) - 36px)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  max-height:0!important;
  height:0!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
}

/* Fade começa depois do HOT e respeita as bordas */
.cl-controls.is-filter-collapsed::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:calc(var(--cl-filter-collapsed-height, 270px) - 92px)!important;
  bottom:0!important;
  height:auto!important;
  z-index:18!important;
  pointer-events:none!important;
  border-bottom-left-radius:inherit!important;
  border-bottom-right-radius:inherit!important;
  background:linear-gradient(
    to bottom,
    rgba(30,34,48,0) 0%,
    rgba(30,34,48,.36) 26%,
    rgba(30,34,48,.86) 72%,
    rgba(30,34,48,.99) 100%
  )!important;
}

/* Botão ancorado na altura recolhida, não no fluxo do conteúdo */
.cl-controls.is-filter-collapsed #cl-filter-more{
  position:absolute!important;
  left:50%!important;
  top:calc(var(--cl-filter-collapsed-height, 270px) - 58px)!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  z-index:45!important;
  margin:0!important;
  width:auto!important;
  max-width:calc(100% - 92px)!important;
  padding:9px 15px!important;
  border-radius:999px!important;
}

/* Expandido: volta para fluxo normal e sem espaço gigante */
html.cl-filters-expanded .cl-controls,
.cl-controls.is-filter-expanded{
  height:auto!important;
  max-height:none!important;
  overflow:hidden!important;
  padding-bottom:22px!important;
}

html.cl-filters-expanded .cl-controls .cl-filter-group,
.cl-controls.is-filter-expanded .cl-filter-group{
  display:block!important;
  position:static!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  max-height:none!important;
  height:auto!important;
  overflow:visible!important;
  margin:revert-layer;
  padding:revert-layer;
}

html.cl-filters-expanded .cl-controls::after,
.cl-controls.is-filter-expanded::after{
  display:none!important;
}

html.cl-filters-expanded #cl-filter-more,
.cl-controls.is-filter-expanded #cl-filter-more{
  position:relative!important;
  left:50%!important;
  top:auto!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  margin:14px 0 0!important;
}

/* Desktop */
@media (min-width:981px){
  .cl-controls.is-filter-collapsed #cl-filter-more{
    top:calc(var(--cl-filter-collapsed-height, 270px) - 57px)!important;
  }
  .cl-controls.is-filter-collapsed::after{
    top:calc(var(--cl-filter-collapsed-height, 270px) - 88px)!important;
  }
}

/* Intermediário */
@media (min-width:701px) and (max-width:980px){
  .cl-controls.is-filter-collapsed #cl-filter-more{
    top:calc(var(--cl-filter-collapsed-height, 270px) - 58px)!important;
  }
}

/* Mobile */
@media (max-width:700px){
  .cl-controls{
    border-radius:28px!important;
  }

  .cl-controls.is-filter-collapsed{
    border-radius:28px!important;
  }

  .cl-controls.is-filter-collapsed #cl-filter-more{
    top:calc(var(--cl-filter-collapsed-height, 270px) - 56px)!important;
    max-width:calc(100% - 112px)!important;
    padding:9px 14px!important;
  }

  .cl-controls.is-filter-collapsed::after{
    top:calc(var(--cl-filter-collapsed-height, 270px) - 90px)!important;
    border-bottom-left-radius:28px!important;
    border-bottom-right-radius:28px!important;
  }

  #cl-filter-more::after{
    font-size:12px!important;
    letter-spacing:.045em!important;
  }
}

/* Remove qualquer regra anterior que deixava DIAS/VIBES visíveis no recolhido */
html:not(.cl-filters-expanded) .cl-controls.is-filter-collapsed [class*="filter-group"]{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}


/* ===== Com Local Parada v0.4.2 — mobile filter fix + slide reveal ===== */

/* A animação agora acontece no próprio card de filtros */
.cl-controls{
  transition:
    height .42s cubic-bezier(.18,.86,.22,1),
    max-height .42s cubic-bezier(.18,.86,.22,1),
    padding-bottom .28s ease,
    box-shadow .28s ease!important;
  will-change:height, max-height!important;
}

/* Recolhido: nenhum grupo avançado pode vazar visualmente nem ocupar área por cima das tabs */
.cl-controls.is-filter-collapsed{
  contain:layout paint!important;
  overflow:hidden!important;
  isolation:isolate!important;
}

/* Esconde DIAS/VIBES/REGIÕES em qualquer estrutura de grupo conhecida */
html:not(.cl-filters-expanded) .cl-controls.is-filter-collapsed .cl-filter-group,
html:not(.cl-filters-expanded) .cl-controls.is-filter-collapsed .cl-filter-section,
html:not(.cl-filters-expanded) .cl-controls.is-filter-collapsed [data-filter-group],
html:not(.cl-filters-expanded) .cl-controls.is-filter-collapsed .cl-days,
html:not(.cl-filters-expanded) .cl-controls.is-filter-collapsed .cl-vibes,
html:not(.cl-filters-expanded) .cl-controls.is-filter-collapsed .cl-regions{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:calc(var(--cl-filter-collapsed-height, 270px) + 20px)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  height:0!important;
  max-height:0!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  transform:translateY(-10px)!important;
  transition:opacity .18s ease, transform .18s ease!important;
}

/* Expandido: os grupos voltam com reveal suave */
html.cl-filters-expanded .cl-controls .cl-filter-group,
html.cl-filters-expanded .cl-controls .cl-filter-section,
html.cl-filters-expanded .cl-controls [data-filter-group],
html.cl-filters-expanded .cl-controls .cl-days,
html.cl-filters-expanded .cl-controls .cl-vibes,
html.cl-filters-expanded .cl-controls .cl-regions,
.cl-controls.is-filter-expanded .cl-filter-group,
.cl-controls.is-filter-expanded .cl-filter-section,
.cl-controls.is-filter-expanded [data-filter-group],
.cl-controls.is-filter-expanded .cl-days,
.cl-controls.is-filter-expanded .cl-vibes,
.cl-controls.is-filter-expanded .cl-regions{
  position:static!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  transform:translateY(0)!important;
  transition:opacity .28s ease .08s, transform .36s cubic-bezier(.18,.86,.22,1) .04s!important;
}

/* Fade preso ao card, sem vazar e sem sobrepor cards/tabs abaixo */
.cl-controls.is-filter-collapsed::after{
  z-index:18!important;
  border-bottom-left-radius:inherit!important;
  border-bottom-right-radius:inherit!important;
}

/* O botão fica sempre dentro do card recolhido */
.cl-controls.is-filter-collapsed #cl-filter-more{
  z-index:50!important;
}

/* Expandido: botão entra no fluxo e não deixa gap enorme */
html.cl-filters-expanded #cl-filter-more,
.cl-controls.is-filter-expanded #cl-filter-more{
  position:relative!important;
  left:50%!important;
  top:auto!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  margin:14px 0 0!important;
}

/* Mobile específico: trava altura menor e impede a sobreposição vista no print */
@media (max-width:700px){
  .cl-controls.is-filter-collapsed{
    height:var(--cl-filter-collapsed-height, 270px)!important;
    max-height:var(--cl-filter-collapsed-height, 270px)!important;
    min-height:0!important;
    overflow:hidden!important;
    contain:layout paint!important;
  }

  .cl-controls.is-filter-collapsed::after{
    top:calc(var(--cl-filter-collapsed-height, 270px) - 84px)!important;
    bottom:0!important;
    height:auto!important;
  }

  .cl-controls.is-filter-collapsed #cl-filter-more{
    top:calc(var(--cl-filter-collapsed-height, 270px) - 54px)!important;
    bottom:auto!important;
    transform:translateX(-50%)!important;
  }

  html:not(.cl-filters-expanded) .cl-controls.is-filter-collapsed .cl-filter-group,
  html:not(.cl-filters-expanded) .cl-controls.is-filter-collapsed .cl-filter-section,
  html:not(.cl-filters-expanded) .cl-controls.is-filter-collapsed [data-filter-group]{
    display:block!important;
    top:calc(var(--cl-filter-collapsed-height, 270px) + 24px)!important;
    opacity:0!important;
    visibility:hidden!important;
    height:0!important;
    max-height:0!important;
  }
}

/* Reduz chance de artefato em Safari mobile */
@supports (-webkit-touch-callout:none){
  @media (max-width:700px){
    .cl-controls{
      transform:translateZ(0);
      backface-visibility:hidden;
    }
  }
}


/* ===== Com Local Parada v0.4.3 — TOP centralizado + barra aparece antes ===== */

/* Botão SUBIR/TOP com ícone refeito, simétrico e centralizado */
.cl-bottom-nav [data-nav-filter="top"]{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:6px!important;
  padding:9px 12px 8px!important;
  line-height:1!important;
}

.cl-bottom-nav [data-nav-filter="top"] .cl-top-icon,
.cl-bottom-nav [data-nav-filter="top"] svg{
  display:block!important;
  width:25px!important;
  height:25px!important;
  min-width:25px!important;
  min-height:25px!important;
  max-width:25px!important;
  max-height:25px!important;
  margin:0 auto!important;
  padding:0!important;
  position:static!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  transform-origin:center!important;
  color:#fff!important;
  overflow:visible!important;
}

.cl-bottom-nav [data-nav-filter="top"] .cl-top-icon path{
  vector-effect:non-scaling-stroke;
}

.cl-bottom-nav [data-nav-filter="top"] span{
  width:100%!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  line-height:1!important;
  transform:none!important;
}

/* micro animação vertical da seta, bem discreta */
.cl-bottom-nav.is-visible [data-nav-filter="top"] .cl-top-icon{
  animation:clTopArrowSoft 1.9s cubic-bezier(.45,0,.2,1) infinite;
}

@keyframes clTopArrowSoft{
  0%, 100%{ transform:translateY(0); }
  45%{ transform:translateY(-2px); }
}

/* Mobile: deixa o botão mais equilibrado dentro da pílula */
@media (max-width:700px){
  .cl-bottom-nav [data-nav-filter="top"]{
    padding:8px 10px 7px!important;
    min-height:66px!important;
  }

  .cl-bottom-nav [data-nav-filter="top"] .cl-top-icon,
  .cl-bottom-nav [data-nav-filter="top"] svg{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    min-height:24px!important;
  }
}


/* ===== Com Local Parada v0.4.4 — TOP desktop animado + tags live + filtros flow ===== */

/* Botão SUBIR/TOP: anima também no desktop e ganha hover premium igual os outros */
.cl-bottom-nav [data-nav-filter="top"]{
  transition:
    transform .34s cubic-bezier(.18,.86,.22,1),
    box-shadow .34s ease,
    border-color .34s ease,
    background .34s ease!important;
}

.cl-bottom-nav [data-nav-filter="top"] .cl-top-icon,
.cl-bottom-nav [data-nav-filter="top"] svg{
  transition:
    transform .34s cubic-bezier(.18,.86,.22,1),
    filter .34s ease!important;
}

/* Antes só o mobile animava em algumas cascatas. Agora força em todos os breakpoints. */
.cl-bottom-nav.is-visible [data-nav-filter="top"] .cl-top-icon,
.cl-bottom-nav.is-visible [data-nav-filter="top"] svg{
  animation:clTopArrowSoft 1.8s cubic-bezier(.45,0,.2,1) infinite!important;
}

.cl-bottom-nav [data-nav-filter="top"]:hover{
  transform:translateY(-3px) scale(1.025)!important;
  border-color:rgba(180,120,255,.58)!important;
  box-shadow:0 16px 34px rgba(139,92,255,.28), inset 0 1px 0 rgba(255,255,255,.18)!important;
}

.cl-bottom-nav [data-nav-filter="top"]:hover .cl-top-icon,
.cl-bottom-nav [data-nav-filter="top"]:hover svg{
  filter:drop-shadow(0 0 10px rgba(255,255,255,.36))!important;
}

@keyframes clTopArrowSoft{
  0%, 100%{ transform:translateY(0); }
  42%{ transform:translateY(-3px); }
}

/* Expandir/Recolher filtros com flow mais suave */
.cl-controls{
  transition:
    height .68s cubic-bezier(.16,.84,.22,1),
    max-height .68s cubic-bezier(.16,.84,.22,1),
    padding-bottom .42s ease,
    box-shadow .38s ease!important;
}

html.cl-filters-expanded .cl-controls .cl-filter-group,
html.cl-filters-expanded .cl-controls .cl-filter-section,
html.cl-filters-expanded .cl-controls [data-filter-group],
html.cl-filters-expanded .cl-controls .cl-days,
html.cl-filters-expanded .cl-controls .cl-vibes,
html.cl-filters-expanded .cl-controls .cl-regions,
.cl-controls.is-filter-expanded .cl-filter-group,
.cl-controls.is-filter-expanded .cl-filter-section,
.cl-controls.is-filter-expanded [data-filter-group],
.cl-controls.is-filter-expanded .cl-days,
.cl-controls.is-filter-expanded .cl-vibes,
.cl-controls.is-filter-expanded .cl-regions{
  transition:
    opacity .44s ease .12s,
    transform .58s cubic-bezier(.16,.84,.22,1) .08s!important;
}

/* A barra flutuante aparece mais cedo com uma entrada mais elegante */
.cl-bottom-nav{
  transition:
    opacity .34s ease,
    transform .44s cubic-bezier(.18,.86,.22,1),
    visibility .34s ease!important;
}

.cl-bottom-nav.is-visible{
  transform:translateX(-50%) translateY(0)!important;
}


/* ===== Com Local Parada v0.4.5 — TOP desktop animado + hover do filtro + coração SVG ===== */

/* Coração do filtro Salvos usando SVG enviado */
[data-quick="saved"] .cl-saved-filter-heart-img{
  display:block!important;
  width:18px!important;
  height:18px!important;
  object-fit:contain!important;
  flex:0 0 18px!important;
  transform-origin:center!important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.16))!important;
}

/* Botão SUBIR/TOP: força animação em desktop e mobile, sem depender de .is-visible */
.cl-bottom-nav [data-nav-filter="top"],
.cl-bottom-nav .cl-top-nav-btn{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  text-align:center!important;
  transition:
    transform .34s cubic-bezier(.18,.86,.22,1),
    box-shadow .34s ease,
    border-color .34s ease,
    background .34s ease,
    filter .34s ease!important;
}

.cl-bottom-nav [data-nav-filter="top"] .cl-top-icon,
.cl-bottom-nav [data-nav-filter="top"] svg,
.cl-bottom-nav .cl-top-nav-btn .cl-top-icon,
.cl-bottom-nav .cl-top-nav-btn svg{
  display:block!important;
  width:25px!important;
  height:25px!important;
  margin:0 auto!important;
  padding:0!important;
  position:static!important;
  transform-origin:center!important;
  animation:clTopArrowSoftV045 1.85s cubic-bezier(.45,0,.2,1) infinite!important;
  transition:filter .28s ease!important;
}

@keyframes clTopArrowSoftV045{
  0%, 100%{ transform:translate3d(0,0,0); }
  42%{ transform:translate3d(0,-3px,0); }
}

/* Hover do TOP alinhado aos botões vizinhos: não muda linguagem visual, só ressalta */
.cl-bottom-nav [data-nav-filter="top"]:hover,
.cl-bottom-nav .cl-top-nav-btn:hover{
  transform:translateY(-2px) scale(1.018)!important;
  border-color:rgba(255,255,255,.28)!important;
  background:linear-gradient(135deg, rgba(124,84,255,.26), rgba(255,67,181,.18))!important;
  box-shadow:
    0 18px 40px rgba(118,78,255,.24),
    inset 0 1px 0 rgba(255,255,255,.16)!important;
}

.cl-bottom-nav [data-nav-filter="top"]:hover .cl-top-icon,
.cl-bottom-nav [data-nav-filter="top"]:hover svg,
.cl-bottom-nav .cl-top-nav-btn:hover .cl-top-icon,
.cl-bottom-nav .cl-top-nav-btn:hover svg{
  filter:drop-shadow(0 0 10px rgba(255,255,255,.34))!important;
}

/* Botão Expandir/Recolher filtros: hover com seta interativa e scale soft */
#cl-filter-more{
  transition:
    transform .34s cubic-bezier(.18,.86,.22,1),
    box-shadow .34s ease,
    border-color .34s ease,
    background .34s ease!important;
}

#cl-filter-more svg,
#cl-filter-more .cl-filter-more-icon{
  transform-origin:center!important;
  transition:
    transform .34s cubic-bezier(.18,.86,.22,1),
    filter .34s ease!important;
}

/* Recolher: seta faz movimento para cima */
html.cl-filters-expanded #cl-filter-more:hover,
.cl-controls.is-filter-expanded #cl-filter-more:hover{
  transform:translateX(-50%) translateY(-2px) scale(1.025)!important;
  border-color:rgba(255,255,255,.30)!important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    0 0 24px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.15)!important;
}

html.cl-filters-expanded #cl-filter-more:hover svg,
html.cl-filters-expanded #cl-filter-more:hover .cl-filter-more-icon,
.cl-controls.is-filter-expanded #cl-filter-more:hover svg,
.cl-controls.is-filter-expanded #cl-filter-more:hover .cl-filter-more-icon{
  animation:clFilterArrowUpSoft .72s cubic-bezier(.18,.86,.22,1) infinite alternate!important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.28))!important;
}

/* Expandir: seta faz movimento para baixo */
html:not(.cl-filters-expanded) #cl-filter-more:hover,
.cl-controls.is-filter-collapsed #cl-filter-more:hover{
  transform:translateX(-50%) translateY(-2px) scale(1.025)!important;
  border-color:rgba(255,255,255,.30)!important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    0 0 24px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.15)!important;
}

html:not(.cl-filters-expanded) #cl-filter-more:hover svg,
html:not(.cl-filters-expanded) #cl-filter-more:hover .cl-filter-more-icon,
.cl-controls.is-filter-collapsed #cl-filter-more:hover svg,
.cl-controls.is-filter-collapsed #cl-filter-more:hover .cl-filter-more-icon{
  animation:clFilterArrowDownSoft .72s cubic-bezier(.18,.86,.22,1) infinite alternate!important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.28))!important;
}

@keyframes clFilterArrowUpSoft{
  from{ transform:translateY(0) rotate(180deg); }
  to{ transform:translateY(-3px) rotate(180deg); }
}

@keyframes clFilterArrowDownSoft{
  from{ transform:translateY(0) rotate(0deg); }
  to{ transform:translateY(3px) rotate(0deg); }
}

/* Respeita redução de movimento */
@media (prefers-reduced-motion: reduce){
  .cl-bottom-nav [data-nav-filter="top"] .cl-top-icon,
  .cl-bottom-nav [data-nav-filter="top"] svg,
  #cl-filter-more:hover svg,
  #cl-filter-more:hover .cl-filter-more-icon{
    animation:none!important;
  }
}


/* ===== Com Local Parada v0.4.6 — TOP refeito de verdade + coração branco ===== */

/* Coração do filtro Salvos: SVG branco igual ao texto */
[data-quick="saved"] .cl-saved-filter-heart-img{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  object-fit:contain!important;
  filter:brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,.18))!important;
  opacity:.96!important;
}

/*
  TOP/SUBIR refeito:
  - a animação agora fica no wrapper .cl-top-icon-shell, não diretamente no SVG.
  - isso evita conflito com regras antigas que aplicavam transform/animation no svg.
*/
.cl-bottom-nav .cl-top-nav-btn,
.cl-bottom-nav [data-nav-filter="top"]{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  text-align:center!important;
  line-height:1!important;
  padding:9px 12px 8px!important;
  transition:
    transform .32s cubic-bezier(.18,.86,.22,1),
    box-shadow .32s ease,
    border-color .32s ease,
    background .32s ease,
    filter .32s ease!important;
}

.cl-bottom-nav .cl-top-icon-shell{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:26px!important;
  height:24px!important;
  margin:0 auto!important;
  padding:0!important;
  line-height:0!important;
  transform-origin:center!important;
  animation:clTopShellFloatV046 1.75s cubic-bezier(.45,0,.2,1) infinite!important;
  will-change:transform!important;
}

.cl-bottom-nav .cl-top-icon-shell .cl-top-icon,
.cl-bottom-nav .cl-top-icon-shell svg{
  display:block!important;
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  min-height:24px!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  transform:none!important;
  animation:none!important;
  color:currentColor!important;
  overflow:visible!important;
}

.cl-bottom-nav .cl-top-icon-shell path{
  vector-effect:non-scaling-stroke;
}

@keyframes clTopShellFloatV046{
  0%, 100%{ transform:translate3d(0,0,0); }
  42%{ transform:translate3d(0,-4px,0); }
}

/* Hover do SUBIR seguindo a linguagem dos botões vizinhos: sutil, glass e sem exagero */
.cl-bottom-nav .cl-top-nav-btn:hover,
.cl-bottom-nav [data-nav-filter="top"]:hover{
  transform:translateY(-2px) scale(1.018)!important;
  border-color:rgba(255,255,255,.28)!important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 58%),
    linear-gradient(135deg, rgba(126,86,255,.30), rgba(255,75,216,.18))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 16px 34px rgba(126,86,255,.22),
    0 0 18px rgba(255,75,216,.10)!important;
}

.cl-bottom-nav .cl-top-nav-btn:hover .cl-top-icon-shell,
.cl-bottom-nav [data-nav-filter="top"]:hover .cl-top-icon-shell{
  animation:clTopShellHoverV046 .72s cubic-bezier(.18,.86,.22,1) infinite alternate!important;
  filter:drop-shadow(0 0 9px rgba(255,255,255,.34))!important;
}

@keyframes clTopShellHoverV046{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(0,-5px,0); }
}

/* Texto do botão centralizado */
.cl-bottom-nav .cl-top-nav-btn > span:last-child,
.cl-bottom-nav [data-nav-filter="top"] > span:last-child{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  line-height:1!important;
  transform:none!important;
}

/* Neutraliza animações antigas aplicadas direto no SVG do TOP */
.cl-bottom-nav .cl-top-nav-btn > svg,
.cl-bottom-nav [data-nav-filter="top"] > svg{
  animation:none!important;
  transform:none!important;
}

/* O ícone dos filtros também ganha hover de seta sem conflito com TOP */
#cl-filter-more:hover{
  transform:translateX(-50%) translateY(-2px) scale(1.022)!important;
}

@media (max-width:700px){
  .cl-bottom-nav .cl-top-nav-btn,
  .cl-bottom-nav [data-nav-filter="top"]{
    min-height:66px!important;
    padding:8px 10px 7px!important;
  }

  .cl-bottom-nav .cl-top-icon-shell{
    width:25px!important;
    height:24px!important;
  }
}

@media (prefers-reduced-motion: reduce){
  .cl-bottom-nav .cl-top-icon-shell,
  .cl-bottom-nav .cl-top-nav-btn:hover .cl-top-icon-shell,
  .cl-bottom-nav [data-nav-filter="top"]:hover .cl-top-icon-shell{
    animation:none!important;
  }
}


/* ===== Com Local Parada v0.4.7 — correção definitiva do botão SUBIR duplicado ===== */

/* O botão TOP tem apenas: wrapper do SVG + label. Qualquer texto antigo direto fica neutralizado. */
.cl-bottom-nav .cl-top-nav-btn{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  text-align:center!important;
  line-height:1!important;
  padding:9px 12px 8px!important;
}

.cl-bottom-nav .cl-top-nav-btn .cl-top-icon-shell{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:26px!important;
  height:24px!important;
  margin:0 auto!important;
  padding:0!important;
  line-height:0!important;
  flex:0 0 24px!important;
  transform-origin:center!important;
  animation:clTopShellFloatV047 1.75s cubic-bezier(.45,0,.2,1) infinite!important;
  will-change:transform!important;
}

.cl-bottom-nav .cl-top-nav-btn .cl-top-icon{
  display:block!important;
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  min-height:24px!important;
  max-width:24px!important;
  max-height:24px!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  transform:none!important;
  animation:none!important;
  color:#fff!important;
  overflow:visible!important;
  opacity:1!important;
  visibility:visible!important;
}

.cl-bottom-nav .cl-top-nav-btn .cl-top-icon path{
  stroke:currentColor!important;
  vector-effect:non-scaling-stroke!important;
}

.cl-bottom-nav .cl-top-nav-btn .cl-top-label{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  line-height:1!important;
  transform:none!important;
  color:inherit!important;
}

/* Remove qualquer segundo texto que tenha sobrado por cache/DOM antigo dentro do botão TOP */
.cl-bottom-nav .cl-top-nav-btn > span:not(.cl-top-icon-shell):not(.cl-top-label){
  display:none!important;
}

@keyframes clTopShellFloatV047{
  0%, 100%{ transform:translate3d(0,0,0); }
  42%{ transform:translate3d(0,-4px,0); }
}

.cl-bottom-nav .cl-top-nav-btn:hover{
  transform:translateY(-2px) scale(1.018)!important;
  border-color:rgba(255,255,255,.28)!important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 58%),
    linear-gradient(135deg, rgba(126,86,255,.30), rgba(255,75,216,.18))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 16px 34px rgba(126,86,255,.22),
    0 0 18px rgba(255,75,216,.10)!important;
}

.cl-bottom-nav .cl-top-nav-btn:hover .cl-top-icon-shell{
  animation:clTopShellHoverV047 .72s cubic-bezier(.18,.86,.22,1) infinite alternate!important;
  filter:drop-shadow(0 0 9px rgba(255,255,255,.34))!important;
}

@keyframes clTopShellHoverV047{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(0,-5px,0); }
}


/* ===== Com Local Parada v0.4.8 — SUBIR corrigido com SVG enviado ===== */

/* Remove pseudo textos antigos que estavam duplicando "SUBIR" */
.cl-bottom-nav .cl-top-nav-btn::before,
.cl-bottom-nav .cl-top-nav-btn::after,
.cl-bottom-nav [data-nav-filter="top"]::before,
.cl-bottom-nav [data-nav-filter="top"]::after{
  content:none!important;
  display:none!important;
}

/* Estrutura definitiva do botão SUBIR */
.cl-bottom-nav .cl-top-nav-btn,
.cl-bottom-nav [data-nav-filter="top"]{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  text-align:center!important;
  line-height:1!important;
  padding:9px 12px 8px!important;
  overflow:hidden!important;
}

.cl-bottom-nav .cl-top-nav-btn .cl-top-icon-shell{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:25px!important;
  height:24px!important;
  flex:0 0 24px!important;
  margin:0 auto!important;
  padding:0!important;
  line-height:0!important;
  opacity:1!important;
  visibility:visible!important;
  transform-origin:center!important;
  animation:clTopFloatV048 1.7s cubic-bezier(.45,0,.2,1) infinite!important;
  will-change:transform!important;
}

.cl-bottom-nav .cl-top-nav-btn .cl-top-icon-img{
  display:block!important;
  width:23px!important;
  height:23px!important;
  min-width:23px!important;
  min-height:23px!important;
  object-fit:contain!important;
  margin:0!important;
  padding:0!important;
  opacity:1!important;
  visibility:visible!important;
  filter:brightness(0) invert(1)!important;
  transform:none!important;
  animation:none!important;
}

.cl-bottom-nav .cl-top-nav-btn .cl-top-label{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  line-height:1!important;
  color:inherit!important;
  transform:none!important;
}

/* Se por cache sobrar algum span extra dentro do botão, some */
.cl-bottom-nav .cl-top-nav-btn > span:not(.cl-top-icon-shell):not(.cl-top-label){
  display:none!important;
}

/* Se por cache sobrar SVG antigo, some. Só a img nova vale. */
.cl-bottom-nav .cl-top-nav-btn > svg,
.cl-bottom-nav [data-nav-filter="top"] > svg{
  display:none!important;
}

@keyframes clTopFloatV048{
  0%, 100%{ transform:translate3d(0,0,0); }
  42%{ transform:translate3d(0,-4px,0); }
}

.cl-bottom-nav .cl-top-nav-btn:hover{
  transform:translateY(-2px) scale(1.018)!important;
  border-color:rgba(255,255,255,.28)!important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 58%),
    linear-gradient(135deg, rgba(126,86,255,.30), rgba(255,75,216,.18))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 16px 34px rgba(126,86,255,.22),
    0 0 18px rgba(255,75,216,.10)!important;
}

.cl-bottom-nav .cl-top-nav-btn:hover .cl-top-icon-shell{
  animation:clTopHoverV048 .72s cubic-bezier(.18,.86,.22,1) infinite alternate!important;
  filter:drop-shadow(0 0 9px rgba(255,255,255,.34))!important;
}

@keyframes clTopHoverV048{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(0,-5px,0); }
}

@media (prefers-reduced-motion: reduce){
  .cl-bottom-nav .cl-top-nav-btn .cl-top-icon-shell,
  .cl-bottom-nav .cl-top-nav-btn:hover .cl-top-icon-shell{
    animation:none!important;
  }
}


/* ===== Com Local Parada v0.4.9 — SUBIR maior e animado no desktop ===== */

/* Reescopo final do botão TOP para impedir que regras antigas deixem a seta pequena/estática */
.cl-bottom-nav .cl-top-nav-btn,
.cl-bottom-nav [data-nav-filter="top"].cl-top-nav-btn{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  text-align:center!important;
  line-height:1!important;
  padding:7px 12px 7px!important;
  overflow:hidden!important;
}

/* Aumenta a área do ícone */
.cl-bottom-nav .cl-top-nav-btn .cl-top-icon-shell{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:34px!important;
  height:30px!important;
  min-width:34px!important;
  min-height:30px!important;
  flex:0 0 30px!important;
  margin:0 auto!important;
  padding:0!important;
  line-height:0!important;
  opacity:1!important;
  visibility:visible!important;
  transform-origin:center!important;
  animation:clTopShellPulseV049 1.55s cubic-bezier(.45,0,.2,1) infinite!important;
  will-change:transform!important;
}

/* Ícone maior, branco e também animado diretamente no IMG para evitar conflito */
.cl-bottom-nav .cl-top-nav-btn .cl-top-icon-img{
  display:block!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  max-width:32px!important;
  max-height:32px!important;
  object-fit:contain!important;
  margin:0!important;
  padding:0!important;
  opacity:1!important;
  visibility:visible!important;
  filter:brightness(0) invert(1) drop-shadow(0 0 7px rgba(255,255,255,.20))!important;
  transform-origin:center!important;
  animation:clTopImgFloatV049 1.55s cubic-bezier(.45,0,.2,1) infinite!important;
  will-change:transform!important;
}

/* Não deixe nenhum SVG antigo interferir */
.cl-bottom-nav .cl-top-nav-btn > svg,
.cl-bottom-nav [data-nav-filter="top"] > svg{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}

/* Label único */
.cl-bottom-nav .cl-top-nav-btn .cl-top-label{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  line-height:1!important;
  color:inherit!important;
  transform:none!important;
  font-size:12px!important;
}

/* Some qualquer segundo texto herdado */
.cl-bottom-nav .cl-top-nav-btn > span:not(.cl-top-icon-shell):not(.cl-top-label){
  display:none!important;
}

@keyframes clTopShellPulseV049{
  0%, 100%{ transform:translate3d(0,0,0); }
  46%{ transform:translate3d(0,-2px,0); }
}

@keyframes clTopImgFloatV049{
  0%, 100%{ transform:translate3d(0,1px,0) scale(1); }
  44%{ transform:translate3d(0,-5px,0) scale(1.035); }
}

/* Hover coerente com os botões vizinhos */
.cl-bottom-nav .cl-top-nav-btn:hover{
  transform:translateY(-2px) scale(1.018)!important;
  border-color:rgba(255,255,255,.30)!important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 58%),
    linear-gradient(135deg, rgba(126,86,255,.30), rgba(255,75,216,.18))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 16px 34px rgba(126,86,255,.22),
    0 0 18px rgba(255,75,216,.10)!important;
}

.cl-bottom-nav .cl-top-nav-btn:hover .cl-top-icon-shell{
  animation:clTopShellHoverV049 .68s cubic-bezier(.18,.86,.22,1) infinite alternate!important;
}

.cl-bottom-nav .cl-top-nav-btn:hover .cl-top-icon-img{
  animation:clTopImgHoverV049 .68s cubic-bezier(.18,.86,.22,1) infinite alternate!important;
  filter:brightness(0) invert(1) drop-shadow(0 0 11px rgba(255,255,255,.38))!important;
}

@keyframes clTopShellHoverV049{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(0,-3px,0); }
}

@keyframes clTopImgHoverV049{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(0,-6px,0) scale(1.05); }
}

/* Desktop explicitamente: não deixa cair para tamanho pequeno */
@media (min-width:701px){
  .cl-bottom-nav .cl-top-nav-btn .cl-top-icon-shell{
    width:34px!important;
    height:30px!important;
    flex-basis:30px!important;
  }
  .cl-bottom-nav .cl-top-nav-btn .cl-top-icon-img{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
  }
}

/* Mobile ainda um pouco grande, mas proporcional */
@media (max-width:700px){
  .cl-bottom-nav .cl-top-nav-btn .cl-top-icon-shell{
    width:32px!important;
    height:29px!important;
    flex-basis:29px!important;
  }
  .cl-bottom-nav .cl-top-nav-btn .cl-top-icon-img{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
  }
}

@media (prefers-reduced-motion: reduce){
  .cl-bottom-nav .cl-top-nav-btn .cl-top-icon-shell,
  .cl-bottom-nav .cl-top-nav-btn .cl-top-icon-img,
  .cl-bottom-nav .cl-top-nav-btn:hover .cl-top-icon-shell,
  .cl-bottom-nav .cl-top-nav-btn:hover .cl-top-icon-img{
    animation:none!important;
  }
}


/* ===== Com Local Parada v0.5.2 — altura correta das tabs abertas por filtro ===== */

/*
  Correção real do overlap:
  a tab aberta usava --content-height muito baixo (420px/240px por evento).
  Em cards salvos/coloridos, 1 card já passa disso; a próxima data subia e ficava por baixo.
  Agora o JS estima altura por linhas/colunas e esta regra garante respiro no fim.
*/

/* Volta o lado direito da tab para a estrutura original, sem hacks de layout */
.cl-date-section__right{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  margin-left:auto!important;
}

.cl-date-section__pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.cl-date-section__chevron{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* A área de cards aberta precisa respeitar o content-height maior */
.cl-date-content.is-open{
  max-height:var(--content-height, 900px)!important;
  overflow:visible!important;
  margin-bottom:34px!important;
  padding-bottom:34px!important;
}

/* Se houver apenas 1 card na data filtrada, adiciona folga visual antes da próxima tab */
.cl-date-content.is-open:has(.cl-date-card-wrap:only-child){
  margin-bottom:58px!important;
  padding-bottom:58px!important;
}

/* O wrapper do card fica no fluxo normal; nada de card invadindo próxima seção */
.cl-date-card-wrap{
  position:relative!important;
  z-index:1!important;
}

.cl-date-content.is-open + .cl-date-section{
  margin-top:18px!important;
}

@media (max-width:700px){
  .cl-date-content.is-open{
    margin-bottom:46px!important;
    padding-bottom:46px!important;
  }

  .cl-date-content.is-open:has(.cl-date-card-wrap:only-child){
    margin-bottom:76px!important;
    padding-bottom:76px!important;
  }
}


/* ===== Com Local Parada v0.5.3 — reduz folga grande após seção com 1 card ===== */

/*
  v0.5.2 corrigiu o overlap aumentando a altura da tab aberta.
  Aqui reduzimos a sobra visual entre o card único e a próxima tab sem voltar a sobrepor.
*/

.cl-date-content.is-open{
  margin-bottom:22px!important;
  padding-bottom:22px!important;
}

/* Antes estava 58px; agora fica só uma folga elegante e segura. */
.cl-date-content.is-open:has(.cl-date-card-wrap:only-child){
  margin-bottom:30px!important;
  padding-bottom:30px!important;
}

/* A próxima tab aproxima um pouco quando vem logo depois de uma seção aberta. */
.cl-date-content.is-open + .cl-date-section{
  margin-top:8px!important;
}

@media (max-width:700px){
  .cl-date-content.is-open{
    margin-bottom:30px!important;
    padding-bottom:30px!important;
  }

  .cl-date-content.is-open:has(.cl-date-card-wrap:only-child){
    margin-bottom:42px!important;
    padding-bottom:42px!important;
  }

  .cl-date-content.is-open + .cl-date-section{
    margin-top:10px!important;
  }
}


/* ===== Com Local Parada v0.8.3 — JSON separado + ajustes de horário/SUBIR ===== */
.cl-tag-svg-icon{
  display:inline-block;
  width:1.05em;
  height:1.05em;
  flex:0 0 1.05em;
  vertical-align:-.16em;
  background:var(--tag-icon-color,#fff);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

.cl-bottom-nav .cl-top-nav-btn .cl-top-label,
.cl-bottom-nav [data-nav-filter="top"] .cl-top-label{
  font-size:10px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  font-weight:800!important;
  line-height:1!important;
}


/* Com Local 0.8.3 — SUBIR com texto igual aos outros botões */
.cl-bottom-nav [data-nav-filter="top"] span,
.cl-bottom-nav .cl-top-nav-btn span{
  font-size:10px!important;
  letter-spacing:.08em!important;
  font-weight:900!important;
  line-height:1!important;
}
@media (max-width:700px){
  .cl-bottom-nav [data-nav-filter="top"] span,
  .cl-bottom-nav .cl-top-nav-btn span{font-size:9px!important;}
}


/* ===== Com Local Parada v0.8.4 — respeita status publicado/rascunho/oculto ===== */


/* ===== Com Local Parada v0.8.5 — Vibes sincronizadas com painel admin =====
   Usa Cor A, Cor B, Cor do ícone, SVG e Cor do texto vindos do tags.json. */
.cl-tags{
  gap:8px!important;
}

.cl-tag,
#cl-tag-filters .cl-chip.cl-tag-filter-chip{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  color:var(--tag-text,#fff)!important;
  border:1px solid color-mix(in srgb,var(--tag-color-a,#fff) 48%, rgba(255,255,255,.20))!important;
  background:
    radial-gradient(circle at 12% 0,color-mix(in srgb,var(--tag-color-a,#fff) 30%, transparent),transparent 52%),
    linear-gradient(135deg,
      color-mix(in srgb,var(--tag-color-a,#fff) 22%, rgba(20,22,30,.94)),
      color-mix(in srgb,var(--tag-color-b,#23c7ff) 18%, rgba(20,22,30,.90))
    )!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.055),
    0 0 18px color-mix(in srgb,var(--tag-color-a,#fff) 26%, transparent)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.38)!important;
}

.cl-tag{
  min-height:31px!important;
  padding:7px 10px!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
}

#cl-tag-filters .cl-chip.cl-tag-filter-chip{
  min-height:42px!important;
  padding:10px 13px!important;
  font-weight:900!important;
}

.cl-tag::before,
#cl-tag-filters .cl-chip.cl-tag-filter-chip::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  opacity:.42!important;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tag-color-b,#23c7ff) 20%, transparent),transparent)!important;
  transform:translateX(-60%) skewX(-14deg)!important;
  transition:transform .45s ease!important;
}

.cl-tag:hover::before,
#cl-tag-filters .cl-chip.cl-tag-filter-chip:hover::before,
#cl-tag-filters .cl-chip.cl-tag-filter-chip.is-active::before{
  transform:translateX(60%) skewX(-14deg)!important;
}

.cl-tag .cl-tag-label,
#cl-tag-filters .cl-chip.cl-tag-filter-chip .cl-tag-label{
  color:var(--tag-text,#fff)!important;
  display:inline-block!important;
  max-width:150px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.cl-tag-svg-icon{
  background:var(--tag-icon-color,#fff)!important;
  color:var(--tag-icon-color,#fff)!important;
  width:1.08em!important;
  height:1.08em!important;
  flex:0 0 1.08em!important;
}

#cl-tag-filters .cl-chip.cl-tag-filter-chip:hover,
#cl-tag-filters .cl-chip.cl-tag-filter-chip.is-active{
  color:var(--tag-text,#fff)!important;
  border-color:color-mix(in srgb,var(--tag-color-a,#fff) 72%, #fff 10%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 22px color-mix(in srgb,var(--tag-color-a,#fff) 35%, transparent),
    0 0 26px color-mix(in srgb,var(--tag-color-b,#23c7ff) 18%, transparent)!important;
}

/* Compatibilidade: tag antiga X continua aparecendo como HOT, preservando chip moderno. */
.cl-tag[data-tag="X"] .cl-tag-label,
.cl-vibe-chip[data-tag="X"] .cl-tag-label,
[data-tag="X"] .cl-tag-label{
  font-size:0!important;
}
.cl-tag[data-tag="X"] .cl-tag-label::after,
.cl-vibe-chip[data-tag="X"] .cl-tag-label::after,
[data-tag="X"] .cl-tag-label::after{
  content:"HOT";
  font-size:12px!important;
}