/* FAAL Co-Host · v2 "Palco e passaporte" (08/11/2026), por cima da paleta B (site-b-20261104.css).
   Mesmos tokens: petróleo, areia, âmbar. Retrato igual ao do rodrigofaal e do faalstudio.
   Movimento: entra carimbando (classe .visto) + 1 movimento contínuo por bloco; pausa fora da tela
   (.pausado), para com "menos movimento" e sem JS mostra tudo no estado final. */

/* ---------- topo sobre o palco escuro ---------- */
.topo{transition:background .35s,border-color .35s}
.topo.sobre-palco{background:rgba(16,48,47,.72);border-bottom-color:rgba(247,242,233,.1)}
.topo.sobre-palco nav a{color:#B5C8C3}
.topo.sobre-palco nav a:hover{color:#F7F2E9}
.topo.sobre-palco .nav-burger{color:#F7F2E9}
.topo .logo-escuro{display:none}
.topo.sobre-palco .logo-escuro{display:block}
.topo.sobre-palco .logo-claro{display:none}

/* ---------- palco (hero) ---------- */
.palco{padding:72px 24px 0;overflow:hidden;min-height:calc(100svh - 64px);display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.palco-fundo{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(1200px 600px at 78% 105%,rgba(232,146,63,.22),transparent 60%),
  radial-gradient(900px 500px at 0% 0%,rgba(24,66,65,.9),transparent 70%),var(--petroleo)}
.palco-sol{position:absolute;width:min(62vw,720px);aspect-ratio:1;border-radius:50%;right:-4%;bottom:-30%;
  background:radial-gradient(circle at 50% 40%,#F4B56A 0%,#E8923F 45%,rgba(232,146,63,0) 70%);opacity:.5;filter:blur(2px);
  animation:sol 14s ease-in-out infinite alternate}
.palco-grao{position:absolute;inset:0;opacity:.07;background-image:radial-gradient(rgba(247,242,233,.9) 1px,transparent 1px);background-size:4px 4px;mix-blend-mode:overlay}
@keyframes sol{to{transform:translate(-3%,-4%) scale(1.06)}}

.hero-v2{grid-template-columns:1.02fr .98fr;align-items:end;gap:24px;width:100%}
.hero-texto{padding-bottom:84px}
.hero-v2 h1{font-size:clamp(2.6rem,5.6vw,4.9rem);color:var(--creme)}
.hero-v2 h1 em{color:var(--ambar-claro);font-style:italic;font-weight:500}
.hero-v2 .lead{color:#D5E0DC;max-width:34em}
.hero-v2 .nota-oferta{color:var(--creme-suave)}
.hero-v2 .btn-ln{border-color:rgba(247,242,233,.3);color:var(--creme)}
.hero-v2 .btn-ln:hover{border-color:var(--ambar-claro)}

.retrato-palco{position:relative;height:min(72svh,650px);min-height:500px;display:flex;justify-content:center;align-items:flex-end}
.retrato-hero{position:relative;z-index:2;height:100%;width:auto;max-width:none;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.35))} /* degradê do pé vem embutido no WebP: mask-image desenhava uma caixa clara no laranja */
.anel-texto{position:absolute;z-index:1;width:min(92%,520px);top:2%;left:50%;translate:-50% 0;fill:rgba(247,242,233,.55);
  font:600 15px var(--font-mono);letter-spacing:.42em;animation:gira 40s linear infinite}
@keyframes gira{to{rotate:360deg}}

/* carimbos de passaporte */
.carimbos{position:absolute;inset:0;z-index:3;pointer-events:none}
.carimbo{position:absolute;width:132px;height:auto;overflow:visible;fill:none;stroke:var(--ambar-claro);stroke-width:3;opacity:.92}
.carimbo .fino{stroke-width:1.2;stroke-dasharray:3 4}
.carimbo text{fill:var(--ambar-claro);stroke:none;text-anchor:middle;font-family:var(--font-mono);font-weight:600}
.carimbo .cid{font-size:22px;letter-spacing:.08em}
.carimbo .pais{font-size:9.5px;letter-spacing:.2em}
.carimbo.anfitriao{stroke:#F7F2E9;width:158px}
.carimbo.anfitriao text{fill:#F7F2E9}
.c1{left:-2%;top:16%;rotate:-12deg}
.c2{right:0;top:6%;rotate:14deg;width:106px}
.c3{left:-1%;bottom:36%;rotate:8deg}
.c4{right:-3%;bottom:30%;rotate:-9deg;width:98px}
.c5{right:4%;bottom:14%;rotate:-5deg}

.cartao-flut{position:absolute;z-index:4;background:rgba(247,242,233,.96);color:var(--tinta);border-radius:16px;padding:14px 16px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.5);backdrop-filter:blur(8px)}
.cartao-flut small{display:block;color:var(--tinta-suave);font-size:.76rem;line-height:1.3}
.cartao-flut .num{display:block;font-size:1.7rem;color:var(--ambar-texto);line-height:1.15}
.cf1{left:-6%;bottom:12%;animation:boia 6s ease-in-out infinite}
.cf2{right:-5%;top:31%;animation:boia 7s ease-in-out -2s infinite;text-align:center;padding:12px 14px}
.cf2 .num{font-size:1.4rem}
@keyframes boia{50%{translate:0 -10px}}

/* faixa de cidades */
.faixa-cidades{position:relative;z-index:5;margin:0 -24px;border-top:1px solid rgba(247,242,233,.14);background:rgba(10,34,33,.6);overflow:hidden}
.faixa-trilho{display:flex;width:max-content;animation:faixa 48s linear infinite}
.faixa-trilho span{font:500 .82rem var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--creme-suave);padding:16px 26px;white-space:nowrap}
.faixa-trilho span::after{content:"✈";margin-left:26px;color:var(--ambar)}
@keyframes faixa{to{transform:translateX(-50%)}}

/* ---------- passaporte ---------- */
.passaporte{overflow:hidden}
.passaporte-topo{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;margin-bottom:48px}
.passaporte-topo h2{margin:0}
.passaporte-topo h2 em{color:var(--ambar-texto)}
.postais{margin:0 -24px;padding:18px 0 34px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.postais-trilho{display:flex;gap:26px;width:max-content;padding:0 24px;animation:faixa 70s linear infinite}
.postais:hover .postais-trilho{animation-play-state:paused}
.postal{flex:none;width:250px;background:#fff;padding:10px 10px 14px;border-radius:6px;box-shadow:0 18px 40px -22px rgba(16,48,47,.55);position:relative}
.postal:nth-child(odd){rotate:-2.2deg}
.postal:nth-child(even){rotate:1.8deg;margin-top:22px}
.postal img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px}
.postal figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:10px;font-size:.78rem;color:var(--tinta-suave)}
.postal figcaption b{font-family:var(--font-serif);font-size:1.05rem;color:var(--tinta);font-weight:600}
.postal::after{content:"";position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;border:2px dashed rgba(232,146,63,.9);
  background:radial-gradient(circle,rgba(247,242,233,.25),transparent 70%);rotate:-14deg}

.troca{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px}
.troca-card{background:var(--branco);border:1px solid var(--linha);border-radius:20px;padding:26px 24px 24px;position:relative}
.troca-card .ilus{width:76px;height:76px;margin-bottom:16px;overflow:visible}
.ilus .aro{fill:none;stroke:var(--ambar);stroke-width:2.5;stroke-dasharray:5 5}
.ilus .traco{fill:none;stroke:var(--tinta);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ilus .mexe{transform-origin:48px 48px;animation:balanca 4s ease-in-out infinite}
.ilus .pontos{animation:pisca 1.6s steps(2) infinite}
@keyframes balanca{50%{transform:rotate(-6deg) scale(1.04)}}
@keyframes pisca{50%{opacity:.25}}
.troca-de{font:600 .7rem var(--font-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ambar-texto);margin-bottom:6px}
.troca-card h3{margin-bottom:14px}
.troca-para{border-top:1px dashed var(--linha);padding-top:12px;color:var(--tinta-suave);font-size:.95rem}
.troca-para span{display:block;font:600 .7rem var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tinta);margin-bottom:2px}

/* ---------- entrada que carimba (só com JS: html.js) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js [data-carimba]:not(.visto) .carimbo,
  html.js .troca-card[data-carimba]:not(.visto){opacity:0;transform:scale(1.6)}
  html.js .carimbo,html.js .troca-card{transition:opacity .35s ease,transform .45s cubic-bezier(.2,1.6,.4,1)}
  html.js .visto .c1{transition-delay:.5s}html.js .visto .c2{transition-delay:.8s}html.js .visto .c3{transition-delay:1.1s}
  html.js .visto .c4{transition-delay:1.4s}html.js .visto .c5{transition-delay:1.8s}
  html.js .troca-card:nth-child(2){transition-delay:.15s}html.js .troca-card:nth-child(3){transition-delay:.3s}
  /* o retrato é o LCP: nunca nasce invisível, só sobe 24 px */
  html.js [data-carimba]:not(.visto) .retrato-hero{transform:translateY(24px)}
  html.js .retrato-hero{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
}
.pausado .anel-texto,.pausado .cartao-flut,.pausado .palco-sol,.pausado .faixa-trilho,.pausado .postais-trilho,.pausado .mexe,.pausado .pontos{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .anel-texto,.cartao-flut,.palco-sol,.faixa-trilho,.postais-trilho,.ilus .mexe,.ilus .pontos{animation:none!important}
  .postais{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* ---------- palco laranja (data-cor="ambar", 08/11/2026) ----------
   Cada negócio com uma cor forte: rodrigofaal azul, faalstudio verde, Co-Host laranja da paleta B.
   Texto em petróleo sobre o laranja (5,8:1); creme sobre laranja reprova (2,2:1) e fica só em cartão e faixa. */
.palco-marca{display:none}
.palco[data-cor="ambar"]{--txt:#10302F;--suave:#10302F;--acTxt:#10302F;--traco:#10302F;--linha:rgba(16,48,47,.22)}
.palco[data-cor="ambar"] .palco-fundo{background:
  radial-gradient(900px 600px at 72% 40%,#F4B56A 0%,rgba(244,181,106,0) 65%),
  radial-gradient(1200px 700px at 0% 100%,rgba(176,98,30,.55),transparent 70%),#E8923F}
.palco[data-cor="ambar"] .palco-sol{background:radial-gradient(circle at 50% 40%,#FFD9A8 0%,rgba(255,217,168,0) 68%);opacity:.55}
.palco[data-cor="ambar"] .palco-grao{opacity:.1;mix-blend-mode:multiply;background-image:radial-gradient(rgba(16,48,47,.5) 1px,transparent 1px)}
.palco[data-cor="ambar"] .palco-marca{display:block;position:absolute;right:-2%;top:8%;font:700 clamp(7rem,17vw,15rem)/.85 var(--font-serif);
  letter-spacing:-.04em;color:rgba(255,226,186,.35);white-space:nowrap;user-select:none}
.palco[data-cor="ambar"] .hero-v2 h1{color:#10302F}
.palco[data-cor="ambar"] .hero-v2 h1 em{color:#10302F;background:linear-gradient(transparent 72%,rgba(247,242,233,.7) 72%,rgba(247,242,233,.7) 92%,transparent 92%)}
.palco[data-cor="ambar"] .hero-v2 .lead,.palco[data-cor="ambar"] .hero-v2 .nota-oferta,.palco[data-cor="ambar"] .prova{color:#10302F}
.palco[data-cor="ambar"] .prova b{color:#10302F}
.palco[data-cor="ambar"] .btn-ac{background:#10302F;color:#F7F2E9;box-shadow:0 14px 34px -14px rgba(16,48,47,.8)}
.palco[data-cor="ambar"] .btn-ln{border-color:rgba(16,48,47,.45);color:#10302F}
.palco[data-cor="ambar"] .btn-ln:hover{border-color:#10302F}
.palco[data-cor="ambar"] .anel-texto{fill:rgba(16,48,47,.6)}
.palco[data-cor="ambar"] .carimbo{stroke:#10302F}
.palco[data-cor="ambar"] .carimbo text{fill:#10302F}
.palco[data-cor="ambar"] .carimbo.anfitriao{stroke:#10302F}
.palco[data-cor="ambar"] .carimbo.anfitriao rect{fill:#10302F}
.palco[data-cor="ambar"] .carimbo.anfitriao text{fill:#F7F2E9}
.palco[data-cor="ambar"] .retrato-hero{filter:drop-shadow(0 30px 50px rgba(90,40,0,.35))}
.palco[data-cor="ambar"] .faixa-cidades{background:#10302F;border-top:0}
body:has(.palco[data-cor="ambar"]) .topo.sobre-palco{background:rgba(16,48,47,.92)}

/* ---------- celular ---------- */
@media (max-width:900px){
  /* celular: o retrato abre a página e o título sobe por cima da base dele */
  .palco{padding-top:12px;min-height:0}
  .hero-v2{grid-template-columns:1fr;gap:0}
  .retrato-palco{order:-1;height:400px;min-height:0;margin:0 -24px}
  .retrato-hero{height:100%}
  .anel-texto{width:330px;top:0}
  .hero-texto{position:relative;z-index:6;margin-top:-34px;padding-bottom:28px}
  .hero-v2 h1{font-size:2.45rem;text-shadow:0 2px 24px rgba(16,48,47,.9)}
  .palco[data-cor="ambar"] .hero-v2 h1{text-shadow:0 2px 20px rgba(244,181,106,.9)}
  .palco[data-cor="ambar"] .palco-marca{top:3%;right:auto;left:50%;translate:-50% 0;font-size:6rem}
  .carimbo{width:92px}.c2{width:76px}.carimbo.anfitriao{width:112px}
  .c1{left:4%;top:12%}.c2{right:4%;top:4%}.c3{display:none}.c4{display:none}.c5{right:3%;top:52%;bottom:auto}
  .cf1{left:4%;top:44%;bottom:auto;padding:10px 12px}.cf1 .num{font-size:1.25rem}.cf1 small{font-size:.7rem}
  .cf2{display:none}
  .passaporte-topo{grid-template-columns:1fr;gap:16px;margin-bottom:28px}
  .postal{width:200px}
  .troca{grid-template-columns:1fr}
}