/* ============================================================
   Fest'Arte 2026 — Componentes
   Depende de tokens.css. Linguagem: display condensada em caps
   + grifo itálico, cards-ingresso com dobra, adesivos inclinados,
   marquees e reveals de scroll (js/festarte-motion.js).
   ============================================================ */

/* --- Botões (pilula com borda tracejada + seta) --- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--fonte-display);font-weight:500;font-size:.95rem;text-transform:uppercase;letter-spacing:.05em;padding:13px 26px;border-radius:var(--raio-pill);border:2px dashed transparent;text-decoration:none;cursor:pointer;transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1),transform var(--dur-1)}
.btn::after{content:'→';font-family:var(--fonte-texto);font-weight:700;transition:transform var(--dur-2) var(--ease-mola)}
.btn:hover::after{transform:translateX(5px)}
.btn:active{transform:translate(2px,2px)}
.btn--primario{background:var(--terracota);color:var(--branco);border-color:var(--terracota);box-shadow:inset 0 0 0 2px var(--terracota),0 0 0 0 transparent}
.btn--primario{box-shadow:none;outline:2px dashed rgba(241,225,211,.5);outline-offset:-7px}
.btn--primario:hover{background:var(--laranja);border-color:var(--laranja)}
.btn--secundario{background:var(--branco);color:var(--terracota);border-color:var(--salmao)}
.btn--secundario:hover{background:var(--terracota);color:var(--branco);border-color:var(--terracota)}
.btn--claro{background:var(--palha);color:var(--terracota);border-color:var(--palha);outline:2px dashed rgba(144,38,22,.35);outline-offset:-7px}
.btn--claro:hover{background:var(--branco)}
/* inline (nao inline-flex) para a seta acompanhar a ultima palavra quando o texto quebra */
.btn--link{display:inline;padding:0;border:none;background:none;color:var(--terracota);text-decoration:underline;text-underline-offset:3px}
.btn--link::after{margin-left:8px;display:inline-block}
.btn--link:hover{color:var(--laranja)}
/* seta colada na ultima palavra: sem isso ela quebra sozinha numa linha
   quando o texto do link preenche a largura da coluna */
.btn--link--seta-junta::after{content:none}
.btn--link--seta-junta .seta-junta{white-space:nowrap}
.btn--link--seta-junta .seta-junta::after{content:'→';font-family:var(--fonte-texto);font-weight:700;margin-left:8px;display:inline-block;transition:transform var(--dur-2) var(--ease-mola)}
.btn--link--seta-junta:hover .seta-junta::after{transform:translateX(5px)}

/* --- Kicker / eyebrow --- */
.kicker{font-family:var(--fonte-display);font-weight:500;font-size:var(--texto-s);text-transform:uppercase;letter-spacing:.16em;color:var(--laranja)}

/* --- Título de seção dividido (palavra · fio · grifo · palavra) --- */
.titulo-secao{display:flex;align-items:baseline;gap:clamp(12px,3vw,32px);flex-wrap:wrap;margin:0 0 var(--esp-4)}
.titulo-secao b{font-family:var(--fonte-display);font-weight:600;text-transform:uppercase;font-size:var(--display-2);line-height:1;color:var(--terracota)}
.titulo-secao .grifo{font-size:calc(var(--display-2)*.82);color:var(--laranja)}
.titulo-secao .fio{flex:1;min-width:60px;border-top:1px solid var(--preto);align-self:center;opacity:.55}

/* --- Tag de dia --- */
/* --- Cabecalho da programacao ---
   Ele mora DENTRO da coluna da esquerda, junto com as abas de dia e a nota,
   para a secao ler como uma coluna editorial unica em vez de um titulo solto
   por cima de uma grade assimetrica. */
.prog-cabecalho h2{margin-bottom:.3em;text-wrap:balance}
.prog-cabecalho p{margin:0}
/* Na coluna estreita o corpo padrao do h2 (3.4rem) nao cabe: "cada um com uma
   cara" pede 551px e a coluna tem ~500px, entao "cara" sobrava sozinha numa
   linha. 3rem faz o grifo caber inteiro sem espremer o painel do dia.
   So no desktop: abaixo de 761px a secao vira coluna unica e sobra largura. */
@media (min-width: 761px){
  .prog-cabecalho h2{font-size:clamp(1.9rem,4.6vw,3rem)}
}

/* --- Nota do rodape da programacao ---
   Ela vive DENTRO da coluna das abas, para encostar na ultima data. Tirar ela
   dali e usar linha propria na grade nao funciona: o painel do dia e' mais alto
   que as abas, a grade estica a primeira linha e a nota desce junto com ele.
   No mobile (1 coluna) a coluna das abas vira `display:contents`, os filhos
   sobem para a grade principal e a nota vai para o fim, depois do conteudo
   do dia, para nao separar a aba do que ela abre. */
.prog-nota{margin-top:var(--esp-2);padding-top:var(--esp-3);border-top:2px dashed var(--salmao-suave)}
.prog-nota p{margin:0 0 var(--esp-2);font-size:var(--texto-s)}
@media (max-width: 760px){
  /* !important porque a coluna carrega display:grid inline */
  .prog-coluna-abas{display:contents !important}
  .prog-grid{gap:var(--esp-2) !important}
  .prog-coluna-painel{order:50;margin-top:var(--esp-2)}
  .prog-nota{order:99;margin-top:0}
}

/* --- Abas da programacao acompanham a rolagem ---
   Desktop: a coluna inteira (titulo + abas + nota) fica sticky enquanto o
   painel do dia rola. O `top` vem do script no index: se a coluna for mais
   alta que a tela, ela gruda pelo pe e o titulo sai, mas as abas ficam.
   Mobile: a coluna vira display:contents, entao so o <nav> das abas gruda,
   compacto em 4 colunas, sobre o conteudo do dia. */
.prog-abas{display:grid;gap:var(--esp-2)}
@media (min-width: 761px){
  .prog-coluna-abas{position:sticky;top:24px}
}
@media (max-width: 760px){
  .prog-abas{position:sticky;top:0;z-index:5;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 -16px;padding:10px 16px;background:var(--branco);border-bottom:2px dashed var(--salmao-suave)}
  .prog-abas .prog-aba{padding:10px 4px !important;justify-content:center !important;text-align:center;border-radius:var(--raio-s) !important}
  .prog-abas .prog-aba > span:first-child > span:first-child{font-size:.9rem !important;width:min-content;margin:0 auto}
  .prog-abas .prog-aba > span:first-child > span:last-child,
  .prog-abas .prog-aba > span[aria-hidden]{display:none}
}

/* --- Grade do dia (paineis da programacao) --- */
.grade-dia{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.grade-dia li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:var(--esp-2);align-items:start}
.grade-dia__hora{font-family:var(--fonte-display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--terracota);font-size:var(--texto-s);line-height:1.4;padding-top:2px}
.grade-dia b,.grade-dia__principal b{display:block;font-weight:700;line-height:1.35}
.grade-dia__desc{display:block;font-size:var(--texto-s);opacity:.8;line-height:1.45}
.grade-dia__principal{margin:var(--esp-3) 0 0;padding-top:var(--esp-3);border-top:2px dashed var(--salmao-suave)}
/* laranja sobre o branco do card-dobra = 5.22, passa no AA */
.grade-dia__selo{display:block;font-family:var(--fonte-display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:var(--texto-xs);color:var(--laranja);margin-bottom:6px}
.grade-dia__meta{font-size:var(--texto-s);font-weight:700;color:var(--laranja);margin:0 0 var(--esp-3)}
.grade-dia__local{display:block;font-size:var(--texto-xs);font-weight:700;color:var(--laranja);margin-top:4px;line-height:1.4}
.grade-dia__sub{list-style:none;margin:10px 0 0;padding:0 0 0 14px;border-left:2px dashed var(--salmao-suave);display:grid;gap:10px}
.grade-dia__sub li{display:block}
.grade-dia__sub b{font-size:var(--texto-s)}
/* selo Libras: terracota sobre branco, texto e icone juntos (nao depende so do simbolo) */
.selo-libras{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:3px 10px 3px 6px;border:1.5px solid var(--terracota);border-radius:var(--raio-pill);color:var(--terracota);font-family:var(--fonte-display);font-weight:600;font-size:var(--texto-xs);text-transform:uppercase;letter-spacing:.06em;line-height:1.2}
.selo-libras svg{width:16px;height:16px;flex:none}
@media (max-width:480px){.grade-dia li{grid-template-columns:60px minmax(0,1fr);gap:12px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.prog-painel img{display:block;width:100%;height:auto;border-bottom:2px dashed var(--salmao-suave)}

.tag-dia{display:inline-block;font-family:var(--fonte-display);font-weight:500;font-size:var(--texto-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--terracota);background:var(--salmao-suave);border:1.5px dashed var(--salmao);border-radius:var(--raio-pill);padding:5px 16px}

/* --- Card-ingresso com dobra (assinatura do KV) --- */
.card-dobra{position:relative;background:var(--branco);border-radius:var(--raio-m);padding:var(--esp-4);clip-path:polygon(0 0,calc(100% - var(--dobra)) 0,100% var(--dobra),100% 100%,0 100%);transition:transform var(--dur-2) var(--ease)}
.card-dobra::before{content:'';position:absolute;top:0;right:0;width:var(--dobra);height:var(--dobra);background:var(--salmao);clip-path:polygon(0 0,100% 100%,0 100%)}
.card-dobra::after{content:'';position:absolute;inset:10px;border:1.5px dashed var(--salmao-suave);border-radius:calc(var(--raio-m) - 4px);pointer-events:none}
.envelope-dobra{filter:drop-shadow(var(--sombra-dobra));transition:filter var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.envelope-dobra:hover{transform:translateY(-6px) rotate(-.6deg)}

/* --- Adesivo inclinado (nota colada) --- */
.adesivo{display:inline-flex;flex-direction:column;gap:2px;background:var(--branco);color:var(--terracota);padding:10px 18px 12px;border-radius:var(--raio-s);transform:rotate(-6deg);filter:drop-shadow(var(--sombra-dobra-s));font-family:var(--fonte-display)}
.adesivo--dir{transform:rotate(5deg)}
.adesivo small{font-family:var(--fonte-grifo);font-style:italic;text-transform:none;font-size:.8rem;color:var(--preto);letter-spacing:.02em}
.adesivo b{font-weight:600;text-transform:uppercase;font-size:1.05rem;letter-spacing:.04em}

/* --- Selo giratório (badge circular com texto em rotação) --- */
.selo{position:relative;width:148px;height:148px;display:grid;place-items:center}
.selo svg{position:absolute;inset:0;width:100%;height:100%;animation:girar 16s linear infinite}
.selo svg text{font-family:var(--fonte-display);font-size:11.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;fill:currentColor}
.selo__miolo{width:96px;height:96px;border-radius:50%;background:var(--palha);color:var(--terracota);display:grid;place-items:center;font-family:var(--fonte-display);font-weight:600;text-transform:uppercase;font-size:.85rem;letter-spacing:.06em;text-align:center;text-decoration:none;outline:1.5px dashed var(--salmao);outline-offset:-6px;transition:transform var(--dur-2) var(--ease-mola)}
.selo__miolo:hover{transform:scale(1.08)}
@keyframes girar{to{transform:rotate(1turn)}}

/* --- Barra de fatos (faixa escura, números grandes) --- */
.faixa-fatos{background:var(--preto);color:var(--palha);border-radius:var(--raio-g);padding:var(--esp-6) var(--esp-4)}
.barra-fatos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--esp-4)}
.fato{display:flex;flex-direction:column;align-items:flex-start;gap:var(--esp-1);border-top:1px solid rgba(241,225,211,.25);padding-top:var(--esp-2)}
.fato__icone{width:44px;height:44px;display:grid;place-items:center;background:transparent;color:var(--salmao);border:1.5px dashed var(--salmao);border-radius:50%}
.fato__icone svg{width:22px;height:22px}
.fato strong{font-family:var(--fonte-display);font-weight:600;text-transform:uppercase;color:var(--salmao);font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.05}
.fato span{font-size:var(--texto-s);opacity:.85}
/* variante sobre palha (legado) */
.barra-fatos--clara .fato{border-top-color:var(--salmao-suave)}
.barra-fatos--clara .fato strong{color:var(--terracota)}
.barra-fatos--clara .fato span{opacity:1}

/* --- Bloco editorial --- */
.bloco-editorial{max-width:640px}
.bloco-editorial .kicker{display:block;margin-bottom:var(--esp-1)}
.bloco-editorial p+p{margin-top:-.25em}
/* Faixa da feira: card curto (1 paragrafo) deixava a banda de foto mais baixa
   que a do "O festival" (764px de secao / 636px de card em telas largas,
   medido em 28/09/2026 depois das correcoes de copy do cliente).
   O piso abaixo iguala as duas bandas e centraliza o card na vertical.
   So a partir de 992px — abaixo disso o card cresce sozinho e o piso sobraria. */
@media (min-width: 992px){
  .faixa-editorial{min-height:636px;align-items:center}
}

/* --- FAQ accordion --- */
.faq{max-width:680px}
.faq details{border-bottom:2px solid var(--salmao-suave);padding:var(--esp-2) 0}
.faq summary{font-family:var(--fonte-display);font-weight:500;text-transform:uppercase;font-size:var(--display-3);line-height:1.2;color:var(--terracota);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--esp-2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.6rem;color:var(--salmao);transition:transform var(--dur-2) var(--ease-mola);flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:var(--esp-2) 0 0;animation:aparecer var(--dur-2) var(--ease)}
@keyframes aparecer{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- CTA final (tipografia gigante + selo + adesivos) --- */
.cta-final{background:var(--terracota);color:var(--palha);text-align:center;padding:var(--esp-12) var(--esp-3) var(--esp-8);border-radius:var(--raio-g);position:relative;overflow:hidden}
.cta-final::before{content:'';position:absolute;top:0;right:0;width:160px;height:160px;background:var(--telha);clip-path:polygon(100% 0,0 0,100% 100%);opacity:.55}
.cta-final h2{color:var(--palha);font-size:clamp(2.6rem,9vw,5.6rem);line-height:.98;position:relative;margin-bottom:.35em}
.cta-final h2 .grifo{color:var(--salmao)}
.cta-final p{position:relative}
.cta-final .adesivo{position:absolute;z-index:2}
.cta-final .selo{margin:var(--esp-4) auto 0;color:var(--palha);position:relative;z-index:2}

/* --- Marquee (loop infinito, pausa no hover) --- */
.marquee{overflow:hidden;position:relative}
.marquee__trilho{display:flex;align-items:center;gap:var(--esp-6);width:max-content;animation:marquee var(--marquee-dur,26s) linear infinite}
.marquee:hover .marquee__trilho{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* --- Letreiro gigante (rodapé / divisor) --- */
.letreiro{background:var(--salmao);overflow:hidden;padding:var(--esp-2) 0;border-radius:var(--raio-g)}
.letreiro .marquee__trilho{gap:0;animation-duration:var(--marquee-dur,40s)}
.letreiro span{font-family:var(--fonte-display);font-weight:700;text-transform:uppercase;font-size:clamp(4rem,14vw,10rem);line-height:.9;color:var(--terracota);white-space:nowrap;padding-right:.35em}
.letreiro em{font-family:var(--fonte-grifo);font-style:italic;font-weight:500;color:var(--palha)}

/* --- Barra de logos institucional --- */
.barra-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--esp-4);padding:var(--esp-3);background:var(--branco);border-radius:var(--raio-m)}
.barra-logos img{height:56px;width:auto}
.barra-logos .logo-placeholder,.marquee .logo-placeholder{height:56px;min-width:120px;display:grid;place-items:center;border:2px dashed var(--salmao);border-radius:var(--raio-s);color:var(--salmao);font-family:var(--fonte-display);font-size:var(--texto-xs);text-transform:uppercase;letter-spacing:.06em;padding:0 var(--esp-2);white-space:nowrap}

/* --- Hero (bloco cheio terracota + adesivos flutuantes) --- */
.hero{position:relative;overflow:hidden;text-align:center;background:var(--terracota-escura);color:var(--palha);border-radius:var(--raio-g);padding:var(--esp-12) var(--esp-3) var(--esp-6)}
.hero h1{color:var(--branco);font-size:var(--display-1);max-width:14em;margin-left:auto;margin-right:auto}
.hero h1 .grifo{color:var(--salmao)}
.hero .kicker{display:block;margin-bottom:var(--esp-2);color:var(--palha);opacity:.85}
.hero img.hero__logo{width:min(190px,42vw);height:auto;margin-bottom:var(--esp-4)}
.hero p.hero__sub{font-size:var(--texto-g);max-width:520px;margin:0 auto var(--esp-4);opacity:.92}
.hero__ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
.hero .adesivo{position:absolute;z-index:1;animation:flutuar 5.5s var(--ease) infinite alternate}
.hero .adesivo--dir{animation-delay:-2.7s}
.hero__meta{display:flex;justify-content:center;gap:var(--esp-8);flex-wrap:wrap;margin-top:var(--esp-8);padding-top:var(--esp-3);border-top:1px dashed rgba(241,225,211,.35)}
.hero__meta div{text-align:left}
.hero__meta small{display:block;font-family:var(--fonte-display);text-transform:uppercase;letter-spacing:.14em;font-size:var(--texto-xs);color:var(--salmao)}
.hero__meta b{font-family:var(--fonte-display);font-weight:500;text-transform:uppercase;font-size:var(--texto-g);color:var(--branco)}
@keyframes flutuar{from{translate:0 -6px}to{translate:0 8px}}

/* --- Reveal de scroll (js/festarte-motion.js adiciona .in) --- */
/* escondido só quando o JS de movimento está ativo (.tem-js) — sem JS, tudo visível */
.tem-js .reveal{opacity:0;transform:translateY(26px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.tem-js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.tem-js .reveal{opacity:1;transform:none}}

/* ============================================================
   Mobile — respiro horizontal. Em tela estreita o padding
   generoso dos cards come a largura util do texto.
   ============================================================ */
@media (max-width: 640px){
  .bloco-editorial[style]{padding:var(--esp-4) var(--esp-3) !important}
  .faixa-fatos{padding:var(--esp-4) var(--esp-3)}
  .card-dobra{padding:var(--esp-3)}
  .card-dobra::after{inset:8px}
  .cta-final{padding:var(--esp-8) var(--esp-3) var(--esp-6)}
  .faq summary{gap:var(--esp-1)}
  .barra-logos{gap:var(--esp-3);padding:var(--esp-2)}
}