/* ============================================================
   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)}

/* --- 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 --- */
.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" (673px de secao / 545px de card em telas largas).
   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:545px;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)}
}