/* ═══════════════════════════════════════════════════════════════
   ESTAÇÃO VERÃO SHOW 2027 · página do evento
   A mesma identidade do save the date: fundo laranja, moldura
   marquise azul com bolinhas, papel creme com grão, Palmore nos
   títulos e datas, Ambiguity no texto, sombra dura nos botões.

   REGRA DA DECORAÇÃO (a mesma de antes)
   Todo ornamento vive dentro de .deco — camada absoluta (z-1)
   irmã de .conteudo (z-5). Nenhum seletor de conteúdo alcança o
   ornamento, e nenhum ornamento entra na coluna de leitura.

   AS FONTES não têm "·", "◇", "✓" nem "→". Separador é "•";
   losango, visto e seta são CSS ou SVG. Palmore não tem "º".
   A Weirdy ficou de fora: cada letra dela sai num estilo (umas
   vazadas, outras cheias) e título com ela vira ruído.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Palmore';          font-weight:400;font-display:swap;src:url('fontes/Palmore-Regular.woff2') format('woff2'),url('fontes/Palmore-Regular.woff') format('woff')}
@font-face{font-family:'Palmore';          font-weight:700;font-display:swap;src:url('fontes/Palmore-Bold.woff2') format('woff2'),url('fontes/Palmore-Bold.woff') format('woff')}
@font-face{font-family:'Ambiguity Radical';font-weight:400;font-display:swap;src:url('fontes/Ambiguity-Regular.woff2') format('woff2'),url('fontes/Ambiguity-Regular.woff') format('woff')}
@font-face{font-family:'Ambiguity Radical';font-weight:700;font-display:swap;src:url('fontes/Ambiguity-Bold.woff2') format('woff2'),url('fontes/Ambiguity-Bold.woff') format('woff')}
@font-face{font-family:'Ambiguity Radical';font-weight:900;font-display:swap;src:url('fontes/Ambiguity-Black.woff2') format('woff2'),url('fontes/Ambiguity-Black.woff') format('woff')}

:root{
  color-scheme:light;
  --laranja:#FF9E00; --magenta:#F71E91; --magenta-esc:#E70083; --carmim:#C50D4A;
  --azul:#047CEC;    --marinho:#033B75; --verde:#00621E;
  --creme:#FBEAD3;   --creme-sol:#FDE8C4; --areia:#E4C08D;
  --tinta:#2A1405;   --tinta-2:#6B4A2A;
  --papel:#FBEAD3;   --cartao:#FFFCF4;
  /* tons um passo mais fundos do magenta e do azul do KV, só onde
     tem texto pequeno em cima: com eles o branco passa no contraste
     AA (4,5:1). A moldura e os ornamentos seguem nas cores puras. */
  --magenta-txt:#D9007B; --magenta-txt-2:#C2006E; --azul-txt:#0466C8;
  --picote:#F3DEC4;  /* tom do papel já com o grão: a meia-lua parece recorte */

  --titulo:'Palmore','Bodoni Moda',Didot,Georgia,serif;
  --texto:'Ambiguity Radical','Archivo','Helvetica Neue',Arial,sans-serif;

  --track:.025em;
  --gut:18px;
  --col:32rem;
  --largo:68rem;       /* coluna das grades (programação, setores) */
  --capa:440px;        /* largura máxima do escudo        */
  --moldura:15px;      /* espessura da borda marquise     */
  --passo:21px;        /* distância entre as bolinhas     */
  --bolinha:3.1px;
  --margem-quadro:12px;
  --menu:48px;         /* altura do menu grudado no topo  */
  --sombra:5px;

  --azulejo:98px; --azulejo-fora:70px;
  --praia:126px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--menu) + 14px)}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0; background:var(--laranja); color:var(--tinta);
  font-family:var(--texto); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--marinho); outline-offset:3px}
h1,h2,h3,p,ul,ol{margin:0}
ul{padding:0; list-style:none}

.so-leitor{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.pular{
  position:absolute; left:12px; top:-60px; z-index:99; padding:10px 14px;
  background:var(--tinta); color:#fff; font-weight:900; text-decoration:none;
}
.pular:focus{top:12px}

/* ═══════════ moldura marquise ═══════════ */
.pagina{padding:var(--margem-quadro)}
.quadro{
  max-width:820px; margin-inline:auto;
  padding:var(--moldura);
  background-color:var(--azul);
  background-image:
    radial-gradient(var(--bolinha) at 50% 50%, #FDE8C4 99%, transparent 100%),
    radial-gradient(var(--bolinha) at 50% 50%, #FDE8C4 99%, transparent 100%),
    radial-gradient(var(--bolinha) at 50% 50%, #FDE8C4 99%, transparent 100%),
    radial-gradient(var(--bolinha) at 50% 50%, #FDE8C4 99%, transparent 100%);
  background-size:
    var(--passo) var(--moldura), var(--passo) var(--moldura),
    var(--moldura) var(--passo), var(--moldura) var(--passo);
  background-position:center top, center bottom, left center, right center;
  background-repeat:repeat-x, repeat-x, repeat-y, repeat-y;
}
.quadro-miolo{
  /* clip e não hidden: hidden transforma o miolo em caixa de rolagem
     e o menu deixa de grudar no topo */
  position:relative; overflow:hidden; overflow:clip; isolation:isolate;
  background:
    radial-gradient(120% 900px at 50% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    var(--papel);
}
.textura{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

.bloco{position:relative; padding-inline:var(--gut)}
.deco{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.conteudo{position:relative; z-index:5; max-width:var(--col); margin-inline:auto}
.conteudo--largo{max-width:var(--largo)}

/* ═══════════ tipografia comum ═══════════ */
.olho{
  margin:0 0 10px; font-size:11px; font-weight:900; letter-spacing:.24em;
  text-transform:uppercase; color:var(--carmim);
}
.titulo{
  font-family:var(--titulo); font-weight:700; color:var(--magenta-esc);
  font-size:clamp(42px,12.5vw,70px); line-height:.95; letter-spacing:.005em;
  text-shadow:3px 3px 0 var(--tinta);
  text-wrap:balance;
}
.titulo--claro{color:#fff}
.sub{
  margin:14px auto 0; max-width:30rem; font-size:15px; line-height:1.55;
  color:var(--tinta-2); text-wrap:pretty;
}
.secao-cab{text-align:center; margin-bottom:30px}

.secao{
  padding-block:52px 56px;
  border-top:2px dotted rgba(42,20,5,.26);
}
.secao--sem-regua{border-top:0}

/* losango feito em CSS: o glifo ◇ não existe nas fontes */
.losango{
  display:inline-block; width:.42em; height:.42em; flex:none;
  border:.09em solid var(--magenta); transform:rotate(45deg) translateY(-.18em);
}

/* ═══════════ botões ═══════════ */
.botao{
  display:flex; align-items:center; justify-content:center; gap:.6em;
  width:100%; max-width:26rem; margin:22px auto 0;
  padding:16px 14px;
  font:inherit; font-weight:900; text-transform:uppercase; text-align:center;
  text-decoration:none; cursor:pointer; line-height:1.25;
  font-size:clamp(12.5px, 3.5vw, 14.5px);
  letter-spacing:clamp(.04em, 1.2vw, .12em);
  color:var(--tinta); background:var(--creme-sol);
  border:3px solid var(--tinta); box-shadow:var(--sombra) var(--sombra) 0 var(--tinta);
  transition:transform .08s ease, box-shadow .08s ease, background-color .12s ease;
}
.botao:hover{background:#fff}
.botao:active{transform:translate(3px,3px); box-shadow:2px 2px 0 var(--tinta)}
.botao--ir{background:var(--magenta-txt); color:#fff}
.botao--ir:hover{background:var(--magenta-txt-2)}
.botao--zap{background:var(--verde); color:#fff}
.botao--zap:hover{background:#004F18}
.botao--azul{background:var(--azul-txt); color:#fff}
.botao--azul:hover{background:var(--marinho)}
.botao--grande{font-size:clamp(14px,4vw,16px); padding:19px 14px; letter-spacing:.08em}
@media (max-width:420px){ .botao--grande .seta{display:none} }
.botao--linha{display:inline-flex; width:auto; margin:0; padding:12px 16px; font-size:12px; letter-spacing:.12em}
.seta{width:1.05em; height:1.05em; flex:none}

/* ═══════════ capa ═══════════ */
.capa{padding-bottom:40px; text-align:center}
.capa-grade{display:grid; grid-template-columns:minmax(0,1fr); justify-items:center}
.capa-arte{margin:0; line-height:0; width:100%}
.capa-arte img{width:100%; max-width:var(--capa); height:auto; margin-inline:auto}
.capa-info{position:relative; z-index:5; max-width:30rem; margin-top:4px}

.capa-nome{
  margin:0 0 10px; font-size:12px; font-weight:900; letter-spacing:.26em;
  text-transform:uppercase; color:var(--carmim);
}
.capa-mote{
  margin:0 auto 20px; max-width:22rem;
  font-family:var(--titulo); font-weight:700; color:var(--tinta);
  font-size:clamp(25px,6.8vw,34px); line-height:1.12; text-wrap:balance;
}
.data-linha{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:0; line-height:1;
}
.data-dia{
  font-family:var(--titulo); font-weight:700; color:var(--tinta);
  font-size:clamp(34px,10vw,50px); letter-spacing:var(--track);
}
.data-linha .losango{font-size:clamp(34px,10vw,50px); transform:rotate(45deg)}
.capa-quando{
  margin:12px 0 0; font-size:12px; font-weight:900; letter-spacing:.12em;
  text-transform:uppercase; color:var(--carmim); text-wrap:balance;
}
.capa-local{margin:6px 0 0; font-size:14.5px; color:var(--tinta-2)}
.oficial{margin:14px 0 0; font-size:12.5px; color:var(--tinta-2)}
.oficial b{color:var(--tinta)}

/* o aviso de open bar que o cliente pediu em destaque */
.aviso{
  display:block; position:relative; margin:26px auto 0; max-width:26rem;
  padding:16px 16px 15px; text-align:left; text-decoration:none;
  background:var(--cartao); border:3px solid var(--carmim);
  box-shadow:var(--sombra) var(--sombra) 0 var(--carmim);
  color:var(--tinta); font-size:14.5px; line-height:1.5;
}
.aviso:hover{background:#fff}
.aviso-selo{
  display:inline-block; margin:0 0 8px; padding:5px 10px 4px;
  background:var(--carmim); color:#fff;
  font-size:11px; font-weight:900; letter-spacing:.2em; text-transform:uppercase;
}
.aviso-txt{display:block}
.aviso b{color:var(--carmim)}
.aviso-ir{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  font-size:11.5px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  color:var(--carmim);
}

/* ═══════════ sobre ═══════════ */
.sobre{padding-block:40px 6px; text-align:center}
.sobre-txt{
  max-width:36rem; margin:0 auto; font-family:var(--titulo); font-weight:700;
  font-size:clamp(21px,5.8vw,27px); line-height:1.3; color:var(--tinta); text-wrap:balance;
}
.sobre-txt + .sobre-txt{margin-top:12px}

/* ═══════════ menu grudado ═══════════ */
/* Um letreiro que desce junto: faixa marinho com as bolinhas da
   marquise embaixo. Marinho e não o azul da moldura porque o texto
   é miúdo — no azul claro ele não passa no contraste. */
.menu{
  position:sticky; top:0; z-index:30;
  background-color:var(--marinho);
  background-image:radial-gradient(2.4px at 50% 50%, #FDE8C4 99%, transparent 100%);
  background-size:16px 8px; background-position:center bottom; background-repeat:repeat-x;
  border-block:3px solid var(--tinta);
  padding-bottom:6px;
}
.menu ul{
  display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
  padding:0 8px; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.menu ul::-webkit-scrollbar{display:none}
.menu li{flex:none; scroll-snap-align:start}
.menu a{
  display:block; padding:13px 11px 9px; white-space:nowrap; text-decoration:none;
  font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  color:var(--creme-sol); border-bottom:3px solid transparent;
}
.menu a:hover{color:#fff}
.menu a[aria-current="true"]{color:#fff; border-bottom-color:var(--laranja)}
.menu .menu-comprar{
  margin:7px 2px 2px 6px; padding:7px 12px 6px;
  background:var(--magenta-txt); color:#fff; border:2.5px solid var(--tinta);
  box-shadow:3px 3px 0 var(--tinta);
}
.menu .menu-comprar:hover{background:var(--magenta-txt-2)}
@media (max-width:699px){ .menu .menu-li-comprar{display:none} }

/* ═══════════ programação ═══════════ */
.fds + .fds{margin-top:34px}
.fds-rot{
  display:flex; align-items:center; gap:12px; margin:0 0 14px;
  font-size:11px; font-weight:900; letter-spacing:.24em; text-transform:uppercase;
  color:var(--tinta-2);
}
.fds-rot::before,.fds-rot::after{content:''; flex:1; border-top:2px dotted rgba(42,20,5,.3)}
.fds-noites{display:grid; grid-template-columns:minmax(0,1fr); gap:26px}

/* cada noite é um ingresso: cabeçalho colorido com as bolinhas da
   marquise, picote, e a fileira de artistas embaixo */
.noite{
  position:relative; display:flex; flex-direction:column;
  background:var(--cartao); border:3px solid var(--tinta);
  box-shadow:6px 6px 0 var(--tinta);
}
.noite-topo{
  position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  padding:20px 16px 12px;
  background-color:var(--magenta-txt);
  background-image:radial-gradient(2.4px at 50% 50%, var(--creme-sol) 99%, transparent 100%);
  background-size:14px 10px; background-position:center 3px; background-repeat:repeat-x;
  color:#fff;
}
.noite--sabado .noite-topo{background-color:var(--azul-txt)}
.noite-data{margin:0; font-weight:400; line-height:1}
.noite-data time{display:block}
.noite-semana{
  display:block; margin-bottom:6px; font-size:11.5px; font-weight:900;
  letter-spacing:.24em; text-transform:uppercase; color:#fff;
}
.noite-dia{
  font-family:var(--titulo); font-weight:700; font-size:clamp(40px,12vw,54px);
  letter-spacing:var(--track); line-height:.9;
}
.noite-mes{
  margin-left:4px; font-family:var(--titulo); font-weight:700;
  font-size:clamp(22px,6vw,28px); letter-spacing:.04em;
}
.noite-num{
  flex:none; text-align:right; font-size:10px; font-weight:900; letter-spacing:.18em;
  text-transform:uppercase; color:#fff; line-height:1.35;
}
.noite-num b{display:block; font-size:22px; letter-spacing:.02em; color:#fff}
.noite-marca{
  position:absolute; top:-13px; left:12px; z-index:2;
  padding:5px 10px 4px; background:var(--laranja); color:var(--tinta);
  border:2.5px solid var(--tinta); box-shadow:3px 3px 0 var(--tinta);
  font-size:10.5px; font-weight:900; letter-spacing:.18em; text-transform:uppercase;
}

.picote{position:relative; height:18px; background:var(--cartao)}
.picote::before{
  content:''; position:absolute; left:16px; right:16px; top:50%;
  border-top:3px dashed rgba(42,20,5,.28);
}
.picote::after{
  /* as duas meias-luas, num gradiente só */
  content:''; position:absolute; left:-15px; right:-15px; top:50%; height:24px;
  transform:translateY(-50%);
  background:
    radial-gradient(circle at 12px 50%, var(--picote) 9px, var(--tinta) 9.5px 12px, transparent 12.5px) left/24px 24px no-repeat,
    radial-gradient(circle at 12px 50%, var(--picote) 9px, var(--tinta) 9.5px 12px, transparent 12.5px) right/24px 24px no-repeat;
}

.artistas{
  display:grid; gap:14px 10px; padding:18px 14px 4px;
  grid-template-columns:repeat(var(--n,3), minmax(0,1fr));
}
.artistas--1{--n:1; justify-items:center}
.artistas--1 .artista{max-width:11.5rem; width:100%}
.artistas--2{--n:2; padding-inline:clamp(14px,6vw,40px)}
.artista{display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0}

/* o hexágono do escudo do KV, em miniatura, para a foto */
.foto{
  width:100%; max-width:9.5rem;
  filter:drop-shadow(4px 4px 0 var(--tinta));
}
.foto-hex{
  display:block; aspect-ratio:5/6; padding:3px; background:var(--tinta);
  clip-path:polygon(50% 0%, 100% 16%, 100% 84%, 50% 100%, 0 84%, 0 16%);
}
.foto-hex > *{
  display:block; width:100%; height:100%;
  clip-path:polygon(50% 0%, 100% 16%, 100% 84%, 50% 100%, 0 84%, 0 16%);
}
.foto img{object-fit:cover; object-position:50% 25%}
.foto--inteira img{object-fit:contain; object-position:center; background:var(--creme); padding:5%}

/* sem foto: a cor do KV, o sol raiado apagadinho atrás e as
   iniciais em Palmore — fica com cara de arte, não de buraco */
.foto-vaga{
  position:relative; display:grid !important; place-items:center; overflow:hidden;
  background-color:var(--c, var(--magenta));
  background-image:radial-gradient(circle at 50% 40%, rgba(255,255,255,.26), rgba(255,255,255,0) 60%);
}
.foto-vaga::before{
  content:''; position:absolute; inset:-14%;
  background:url('img/2027/sol-raiado.webp') 50% 42% / contain no-repeat;
  opacity:.34;
}
.foto-vaga span{
  position:relative; font-family:var(--titulo); font-weight:700; color:#fff;
  font-size:clamp(30px,9.5vw,46px); line-height:1; letter-spacing:.02em;
  text-shadow:3px 3px 0 var(--tinta);
}
.artistas--2 .foto-vaga span{font-size:clamp(38px,12vw,54px)}
.artistas--1 .foto-vaga span{font-size:clamp(44px,14vw,64px)}
.foto-vaga--1{--c:var(--magenta)}
.foto-vaga--2{--c:var(--azul)}
.foto-vaga--3{--c:var(--carmim)}
.foto-vaga--4{--c:var(--verde)}
.foto-vaga--5{--c:var(--laranja)}

.artista-nome{
  margin-top:10px; font-family:var(--titulo); font-weight:700; color:var(--tinta);
  font-size:clamp(17px,4.9vw,21px); line-height:1.08; text-wrap:balance;
  overflow-wrap:anywhere;
}
.artistas--1 .artista-nome{font-size:clamp(22px,6.4vw,28px)}

.noite-ingresso{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:auto; padding:13px 12px 12px;
  border-top:3px solid var(--tinta); background:var(--creme-sol);
  font-size:11.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--tinta);
}
.noite-corpo{flex:1; display:flex; flex-direction:column; padding-bottom:18px}
.noite-ingresso:hover{background:var(--laranja)}

/* durante o evento: o que já passou apaga, o de hoje acende */
.noite--passou{box-shadow:4px 4px 0 rgba(42,20,5,.35); border-color:rgba(42,20,5,.45)}
.noite--passou .noite-topo{background-color:#8E7A66}
.noite--passou .artistas{opacity:.6; filter:grayscale(.85)}
.noite--hoje{box-shadow:6px 6px 0 var(--tinta), 0 0 0 5px var(--laranja)}

.prog-fim{text-align:center; margin-top:40px}

/* ═══════════ setores ═══════════ */
/* Os setores vêm em dois grupos — o que NÃO é open bar e o que é —
   porque essa é a dúvida que o cliente pediu para matar de cara. */
.grupo{max-width:62rem; margin-inline:auto}
.grupo + .grupo{margin-top:44px}
.grupo-cab{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 18px}
.grupo-rot{
  margin:0; padding:9px 14px 8px; color:#fff;
  font-size:clamp(13px,3.8vw,15px); font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  border:3px solid var(--tinta); box-shadow:4px 4px 0 var(--tinta);
}
.grupo--nao .grupo-rot{background:var(--carmim)}
.grupo--sim .grupo-rot{background:var(--verde)}
.grupo-nota{font-size:14.5px; font-weight:700; color:var(--tinta-2)}
.setor--diamante{max-width:62rem; margin:30px auto 0}
.setores{display:grid; grid-template-columns:minmax(0,1fr); gap:24px}
.setor{
  position:relative; padding:20px 18px 20px;
  background:var(--cartao); border:3px solid var(--tinta);
  box-shadow:6px 6px 0 var(--tinta);
}
.setor-cab{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:12px}
.setor-nome{
  width:100%; margin:0 0 4px; font-family:var(--titulo); font-weight:700;
  font-size:clamp(28px,8vw,34px); line-height:1.04; color:var(--tinta);
}
.setor-linha{margin:-4px 0 12px; font-size:14px; font-weight:700; color:var(--tinta-2)}

.selo{
  display:inline-flex; align-items:center; gap:5px; padding:5px 9px 4px;
  font-size:10.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  border:2px solid var(--tinta); line-height:1.2; white-space:nowrap;
}
.selo--sim{background:var(--verde); color:#fff}
.selo--nao{background:var(--carmim); color:#fff}
.selo--18{background:var(--tinta); color:#fff}
.selo--social{background:var(--creme-sol); color:var(--tinta)}
.selo--fora{background:transparent; color:var(--tinta-2); border-style:dashed}

.lista{display:grid; gap:7px}
.lista li{
  position:relative; padding-left:24px; font-size:14.5px; line-height:1.45; color:var(--tinta);
}
.lista li::before{
  /* o visto em CSS: as fontes não têm ✓ */
  content:''; position:absolute; left:3px; top:.38em; width:6px; height:11px;
  border:solid var(--verde); border-width:0 3px 3px 0; transform:rotate(42deg);
}

.bar{
  margin-top:16px; padding:13px 14px 14px;
  background:#F1F8F2; border:2px dashed rgba(0,98,30,.55);
}
.bar-rot{
  margin:0 0 8px; font-size:10.5px; font-weight:900; letter-spacing:.2em;
  text-transform:uppercase; color:var(--verde);
}
.bar ul{display:flex; flex-wrap:wrap; gap:6px}
.bar li{
  padding:5px 9px 4px; background:#fff; border:1.5px solid rgba(0,98,30,.35);
  font-size:12.5px; font-weight:700; color:var(--tinta);
}
.setor-18{
  margin-top:12px; font-size:12.5px; font-weight:700; color:var(--carmim);
}
.setor-contato{margin-top:16px}
.setor-contato p{margin:0 0 10px; font-size:13.5px; font-weight:700; color:var(--tinta-2)}

/* Front Stage: o pedido do cliente. Moldura carmim, sombra carmim
   e o carimbo — impossível ler o card sem ver que não é open bar. */
.setor--destaque{
  border-color:var(--carmim); border-width:4px;
  box-shadow:7px 7px 0 var(--carmim);
  background:
    repeating-linear-gradient(-45deg, rgba(197,13,74,.05) 0 10px, transparent 10px 20px),
    var(--cartao);
}
.carimbo{
  display:block; width:fit-content; max-width:100%; margin:4px auto 18px;
  padding:12px 20px 11px; transform:rotate(-4deg);
  border:4px solid var(--carmim); outline:2px solid var(--carmim); outline-offset:3px;
  color:var(--carmim); text-align:center;
  font-size:clamp(17px,5.4vw,22px); font-weight:900; letter-spacing:.14em;
  text-transform:uppercase; line-height:1.1;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.75'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23m)'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.75'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23m)'/%3E%3C/svg%3E");
}
.carimbo span{display:block; white-space:nowrap; font-size:clamp(22px,6.9vw,32px); letter-spacing:.1em; line-height:1}
.carimbo span + span{margin-top:2px}
.carimbo small{
  display:block; margin-top:8px; font-size:clamp(10px,2.9vw,12px); letter-spacing:.12em;
}
.setor--destaque .setor-nome{color:var(--carmim)}
.grau{font-family:var(--texto); font-weight:900; font-size:.62em; vertical-align:.55em; margin-left:.04em}

.setor--sem-venda{background:transparent; box-shadow:none; border-style:dashed}

/* mapa: o espaço já fica reservado; quando a imagem chega, entra */
.mapa{max-width:44rem; margin:40px auto 0}
.mapa-tit{
  margin:0 0 12px; text-align:center; font-family:var(--titulo); font-weight:700;
  font-size:clamp(22px,6vw,28px); color:var(--tinta);
}
.mapa-vaga{
  display:grid; place-items:center; gap:10px; min-height:190px; padding:26px 20px;
  text-align:center; background:rgba(255,252,244,.6);
  border:3px dashed rgba(42,20,5,.4);
  font-size:14.5px; font-weight:700; color:var(--tinta-2);
}
.mapa-vaga svg{width:42px; height:42px; color:var(--magenta)}
.mapa-img{border:3px solid var(--tinta); box-shadow:6px 6px 0 var(--tinta); background:#fff}

/* ═══════════ ingresso social ═══════════ */
/* a faixa magenta que atravessa o quadro de borda a borda, com as
   bolinhas da marquise em cima e embaixo */
.social{
  padding-block:56px 58px; text-align:center; color:#fff;
  background-color:var(--magenta-txt);
  background-image:
    radial-gradient(2.6px at 50% 50%, var(--creme-sol) 99%, transparent 100%),
    radial-gradient(2.6px at 50% 50%, var(--creme-sol) 99%, transparent 100%);
  background-size:17px 14px, 17px 14px;
  background-position:center top, center bottom; background-repeat:repeat-x;
  border-block:3px solid var(--tinta);
}
.social .olho{color:#fff}
.social-num{margin:4px 0 0; line-height:.85}
.social-cinquenta{
  font-family:var(--titulo); font-weight:700; font-size:clamp(96px,31vw,170px); color:#fff;
  text-shadow:6px 6px 0 var(--tinta); letter-spacing:-.01em;
}
.social-mais{
  margin-top:10px; font-family:var(--titulo); font-weight:700;
  font-size:clamp(25px,7.4vw,36px); color:var(--creme-sol); line-height:1.1;
}
.social-mais b{color:#fff}
.social-texto{
  margin:18px auto 0; max-width:27rem; font-size:15.5px; line-height:1.55; color:#fff;
}
.social-texto b{color:#fff; text-decoration:underline; text-decoration-color:var(--laranja); text-decoration-thickness:3px; text-underline-offset:3px}
.social-onde{margin-top:22px}
.social-onde-rot{
  margin:0 0 10px; font-size:11px; font-weight:900; letter-spacing:.2em;
  text-transform:uppercase; color:#fff;
}
.chips{display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
.chips li{
  padding:7px 11px 6px; background:var(--creme-sol); color:var(--tinta);
  border:2.5px solid var(--tinta); box-shadow:3px 3px 0 var(--tinta);
  font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
}
.social-nao{margin-top:18px; font-size:14px; font-weight:700; color:#fff}
.social .d-sol{
  position:absolute; left:50%; top:50%; width:min(560px,130%);
  transform:translate(-50%,-50%); opacity:.16;
}

/* ═══════════ cartões de informação ═══════════ */
.info-grade{display:grid; grid-template-columns:minmax(0,1fr); gap:22px}
.cartao{
  position:relative; padding:20px 18px;
  background:var(--cartao); border:3px solid var(--tinta);
  box-shadow:6px 6px 0 var(--tinta);
}
.cartao-tit{
  margin:0 0 12px; font-family:var(--titulo); font-weight:700;
  font-size:clamp(23px,6.4vw,28px); line-height:1.1; color:var(--tinta);
}

/* acessibilidade */
.pcd-grade{display:grid; grid-template-columns:minmax(0,1fr); gap:22px}
.pcd-ingressos{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.pcd-ing{
  padding:16px 10px 14px; text-align:center; color:#fff;
  background:var(--azul-txt); border:3px solid var(--tinta); box-shadow:5px 5px 0 var(--tinta);
}
.pcd-ing .rot{
  display:block; font-size:10.5px; font-weight:900; letter-spacing:.16em;
  text-transform:uppercase; color:#fff;
}
.pcd-ing b{
  display:block; margin:6px 0 4px; font-family:var(--titulo); font-weight:700;
  font-size:clamp(34px,10vw,44px); line-height:1;
}
.pcd-ing small{display:block; font-size:12.5px; line-height:1.35; color:#fff}

/* meia-entrada */
.meia-lista{display:grid; grid-template-columns:minmax(0,1fr); gap:12px}
.meia-item{
  display:grid; gap:2px; padding:14px 16px 13px;
  background:var(--cartao); border:2.5px solid var(--tinta);
  box-shadow:4px 4px 0 rgba(42,20,5,.85);
}
.meia-quem{font-family:var(--titulo); font-weight:700; font-size:22px; line-height:1.12}
.meia-quem small{
  font-family:var(--texto); font-weight:700; font-size:13px; color:var(--tinta-2);
  margin-left:4px;
}
.meia-doc{font-size:13.5px; line-height:1.45; color:var(--tinta-2)}
.meia-doc a{color:var(--azul-txt); font-weight:700}
.letra-miuda{
  max-width:40rem; margin:22px auto 0; text-align:center;
  font-size:12.5px; line-height:1.6; color:var(--tinta-2);
}

/* idade */
.idade-grade{display:grid; grid-template-columns:minmax(0,1fr); gap:18px}
.idade{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:16px 16px 16px 14px; background:var(--cartao);
  border:3px solid var(--tinta); box-shadow:5px 5px 0 var(--tinta);
}
.idade-faixa{
  display:grid; place-items:center; align-content:center;
  width:78px; aspect-ratio:5/6; color:#fff; text-align:center;
  background:var(--c, var(--azul));
  clip-path:polygon(50% 0%, 100% 16%, 100% 84%, 50% 100%, 0 84%, 0 16%);
}
.idade-faixa b{font-family:var(--titulo); font-weight:700; font-size:21px; line-height:1}
.idade-faixa small{font-size:9.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase}
.idade--verde{--c:var(--verde)} .idade--azul{--c:var(--azul-txt)}
.idade--magenta{--c:var(--magenta-txt)} .idade--carmim{--c:var(--carmim)}
.idade--carmim .idade-faixa b{font-size:27px}
.idade-tit{margin:2px 0 4px; font-family:var(--titulo); font-weight:700; font-size:22px; line-height:1.1}
.idade-txt{font-size:14px; line-height:1.5; color:var(--tinta)}
.idade-onde{margin-top:6px; font-size:12.5px; line-height:1.45; color:var(--tinta-2)}
.idade-onde b{color:var(--tinta)}
.idade{align-content:start}
.idade-link{grid-column:1 / -1}
.idade-link .botao{width:100%; margin:4px 0 0}

/* nota de rodapé de seção (fotos com artistas, credenciamento) */
.nota-caixa{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  max-width:40rem; margin:0 auto; padding:18px 18px 17px;
  background:rgba(255,252,244,.7); border:2.5px dashed rgba(42,20,5,.45);
}
.nota-caixa svg{width:30px; height:30px; color:var(--carmim); margin-top:2px}
.nota-caixa h3{
  margin:0 0 6px; font-size:11.5px; font-weight:900; letter-spacing:.2em;
  text-transform:uppercase; color:var(--carmim);
}
.nota-caixa p{font-size:14.5px; line-height:1.55; color:var(--tinta)}
.nota-caixa p + p{margin-top:8px}

/* ═══════════ local ═══════════ */
.local{text-align:center; padding-bottom:0}
.local-cartao{
  max-width:34rem; margin:0 auto; padding:24px 20px 22px;
  background:var(--azul-txt); color:#fff;
  border:3px solid var(--tinta); box-shadow:6px 6px 0 var(--tinta);
}
.local-nome{
  margin:0 0 8px; font-family:var(--titulo); font-weight:700;
  font-size:clamp(23px,6.4vw,30px); line-height:1.12; text-wrap:balance;
}
.local-end{font-size:15px; line-height:1.5; color:#fff}
.local-botoes{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px}
.local-botoes .botao{margin:0; font-size:12px; padding:13px 8px; letter-spacing:.06em}
.cidade{
  /* os marcos de Praia Grande do KV, em fila, plantados na régua */
  display:flex; justify-content:center; align-items:flex-end; gap:clamp(4px,3vw,26px);
  margin:34px auto 0; max-width:40rem; padding-inline:6px;
}
.cidade img{width:30%; max-width:150px; height:auto}
.cidade img:nth-child(2){width:34%; max-width:176px}

.comercial{
  max-width:34rem; margin:34px auto 0; padding:18px 18px 20px; text-align:center;
  border-top:2px dotted rgba(42,20,5,.3);
}
.comercial p{font-size:14.5px; color:var(--tinta-2)}
.comercial p b{color:var(--tinta)}
.comercial .botao{margin-top:14px}

/* ═══════════ ornamentos do KV ═══════════ */
.d-azulejo{
  position:absolute; top:var(--y,260px); width:var(--azulejo); height:auto; opacity:.92;
}
.d-azulejo--e{left:calc(var(--azulejo-fora) * -1)}
.d-azulejo--d{right:calc(var(--azulejo-fora) * -1); transform:scaleX(-1)}
.d-hibisco{position:absolute; width:74px; opacity:.95}
.d-hibisco--e{left:-26px; top:var(--y,40px); transform:rotate(-14deg)}
.d-hibisco--d{right:-24px; top:var(--y,40px); transform:scaleX(-1) rotate(-14deg)}
.d-gaivota{position:absolute; width:84px; opacity:.95}
.d-folha{position:absolute; width:150px; opacity:.95}
.d-folha--e{left:-58px; top:-28px; transform:rotate(8deg)}
.d-folha--d{right:-58px; top:-28px; transform:scaleX(-1) rotate(8deg)}
.d-onda{position:absolute; width:70px; opacity:.92}
.d-onda--e{left:-54px; top:var(--y,40%)}
.d-onda--d{right:-54px; top:var(--y,40%)}

.d-praia{position:absolute; bottom:0; height:var(--praia); width:auto}
.d-cadeira{left:-44px}
.d-guardasol{right:-30px; height:calc(var(--praia) * 1.18)}

/* ═══════════ rodapé ═══════════ */
.rodape{
  padding-block:30px calc(var(--praia) * 1.18 + 24px);
  text-align:center; border-top:2px dotted rgba(42,20,5,.28);
}
.rodape .conteudo{max-width:28rem}
.rodape-marca{
  font-family:var(--titulo); font-weight:700;
  font-size:clamp(19px,5vw,23px); line-height:1.15; color:var(--carmim);
}
.rodape-mote{
  margin:6px auto 0; font-size:11px; font-weight:900; letter-spacing:.2em;
  text-transform:uppercase; color:var(--azul-txt); text-wrap:balance;
}
.nw{white-space:nowrap}
.nota{margin:14px 0 0; font-size:12px; line-height:1.65; color:rgba(42,20,5,.75)}
.nota a{color:var(--tinta); font-weight:700}

/* ═══════════ barra de compra (celular) ═══════════ */
.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--creme-sol); border-top:3px solid var(--tinta);
  /* escondida E fora do teclado até o JS acender */
  transform:translateY(110%); visibility:hidden;
  transition:transform .22s ease, visibility 0s linear .22s;
}
.barra.ver{transform:none; visibility:visible; transition:transform .22s ease}
.barra .botao{margin:0 auto; padding:13px 12px; max-width:30rem}
.sem-js .barra{display:none}

/* ═══════════ telas maiores ═══════════ */
@media (min-width:600px){
  .fds-noites{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch}
  .noite-dia{font-size:48px}
  .info-grade--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .meia-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .idade-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:700px){
  :root{
    --gut:34px; --margem-quadro:22px; --moldura:18px; --passo:25px; --capa:500px;
    --azulejo:118px; --azulejo-fora:38px; --praia:168px; --menu:50px;
  }
  .capa{padding-top:38px}
  .d-cadeira{left:-38px}
  .d-guardasol{right:-26px}
  .setores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pcd-grade{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:start}
  .barra{display:none}
  .menu ul{justify-content:center; flex-wrap:wrap}
  .secao{padding-block:64px 68px}
}
@media (min-width:1000px){
  :root{--azulejo:117px; --azulejo-fora:30px; --capa:520px}
  .quadro{max-width:1180px}
  .capa{padding-block:46px 52px}
  .capa-grade{
    grid-template-columns:minmax(0,520px) minmax(0,30rem);
    justify-content:center; align-items:center; column-gap:48px;
    text-align:left;
  }
  .capa-info{margin-top:0}
  .capa-mote{font-size:40px; max-width:26rem}
  #programacao .conteudo--largo{max-width:60rem}
  .capa-mote{margin-left:0}
  .data-linha{justify-content:flex-start}
  .capa-info .botao{margin-left:0}
  .aviso{margin-left:0}
  .fds{display:grid; grid-template-columns:150px 1fr; column-gap:26px; align-items:start}
  .fds-rot{
    display:block; margin:0; padding-top:30px; text-align:right;
    font-size:11.5px; line-height:1.6;
  }
  .fds-rot::before,.fds-rot::after{display:none}
  .fds-rot b{display:block; font-family:var(--titulo); font-weight:700; font-size:52px; letter-spacing:0; color:var(--magenta-esc); text-shadow:2px 2px 0 var(--tinta); line-height:1}
  .fds-rot b small{font-family:var(--texto); font-size:.42em; vertical-align:.9em}
  .idade-grade{grid-template-columns:repeat(4,minmax(0,1fr))}
  .idade{grid-template-columns:minmax(0,1fr); justify-items:start}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}
@media print{
  body{background:#fff}
  .menu,.barra,.deco,.textura{display:none !important}
  .quadro{padding:0; background:none}
}

/* Complementos de conteúdo do documento GW. */
.artista-integrantes{display:block;margin-top:7px;font-size:12px;line-height:1.4;color:var(--tinta-2)}
.setor-descricao{margin:10px 0 14px;font-size:14px;line-height:1.6}
.setor-observacao{margin-top:16px;padding-top:12px;border-top:1px solid currentColor;font-size:13px;line-height:1.6}
.social-detalhe{margin:16px auto 0;max-width:34rem;font-size:14px;line-height:1.6}
@media(min-width:1000px){.idade-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}