:root{
/* --muted era #7f7f7f: sobre o fundo #ececec dava contraste 3.7:1 e sobre
branco 4.0:1 — ambos abaixo do mínimo WCAG AA (4.5:1) para texto corrido.
#6a6a6a passa nos dois fundos (4.6:1 no #ececec, 5.5:1 no branco)
mantendo o mesmo cinza de leitura secundária. */
--bg:#ececec; --surface:#fff; --ink:#151515; --muted:#6a6a6a;
--border:#ddd; --red:#e5231b; --blue:#2b4c9b; --cyan:#37c3e8;
--cream:#efe7d6; --purple:#6d4aff; --amber:#e0a800; --lgray:#b9b9b9;
--azul-h7plus:#417ef4;
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:#009FCF;color:#fff}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
/* sem overflow-x:hidden — o vazamento é corrigido na origem (ver bloco "Responsivo" no fim do arquivo).
o hidden aqui só escondia a barra horizontal e ainda quebrava position:sticky em qualquer descendente. */
body{background:var(--bg);color:var(--ink);font-family:"Geist",system-ui,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* overflow-wrap: rede de segurança. Uma palavra única maior que a caixa (ex.: "PATROCINADORES"
a 38px num container de 320px) empurrava o documento inteiro. Só age quando a palavra
realmente não cabe — em qualquer outro caso é no-op. */
.display{font-family:"Geist","Arial Black",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;overflow-wrap:break-word}
.wrap{max-width:1720px;margin:0 auto;padding:0 20px}
/* variação estreita: para listas/linhas longas que ficam com buracos em telas largas (ex.: .erow da agenda) */
.wrap--narrow{max-width:1280px}
@media(min-width:768px){.wrap{padding:0 40px}}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
/* Skip-link (injetado pelo assets/nav.js): invisível até receber foco por Tab */
.skiplink{position:fixed;left:14px;top:14px;z-index:200;background:var(--ink);color:#fff;
padding:12px 18px;border-radius:10px;font-size:13px;font-weight:600;
transform:translateY(-200%);transition:transform .2s}
.skiplink:focus,.skiplink:focus-visible{transform:none}
@media(prefers-reduced-motion:reduce){.skiplink{transition:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:600;font-size:13px;padding:12px 24px;cursor:pointer;transition:.2s;border:1px solid transparent;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em;font-family:inherit}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000}
.btn-outline{border-color:rgba(21,21,21,.3);color:var(--ink);background:transparent}
.btn-outline:hover{border-color:var(--ink)}
.btn-invert{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
/* Call 10/09/2026 (00:19:30, H26) — Klaus: "a cor de destaque do hover dos
botoes, para um tom mais escuro". O hover era uma chapa BRANCA em cima de
fundo escuro: estourava a tela e, no botao do H7 Plus, apagava o texto.
Agora clareia o vidro em vez de trocar por branco. */
.btn-invert:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-cream:hover{background:#e2d8c2}
/* O botao "Conhecer o H7 Plus". A cor vinha num style= inline (color:#cdeefb),
que GANHA de qualquer :hover escrito aqui — por isso o texto continuava
azul-claro sobre o branco e sumia. Virou classe, e o hover e o azul da
propria secao, o mesmo que o LED e os cartoes usam. */
.btn-plus{border-color:var(--cyan);color:#cdeefb;background:transparent}
.btn-plus:hover{background:var(--azul-h7plus);border-color:var(--azul-h7plus);color:#fff}
.btn-lg{padding:16px 30px}
.btn-sm{padding:8px 16px;font-size:12px;text-transform:none;letter-spacing:0}
.arrow::after{content:"↗";font-size:1.1em;line-height:1}
/* Reveal — visível sem JS */
.reveal.in{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}}
/* Foto: container com fallback; cobre quando o arquivo existe */
.photo{position:relative;overflow:hidden;background:linear-gradient(135deg,#cfc8bb,#96908a)}
.photo.dark{background:linear-gradient(150deg,#39404d,#101319)}
.photo.warm{background:linear-gradient(135deg,#dcd1bd,#ab9c82)}
.photo.navy{background:radial-gradient(130% 130% at 55% 25%,#33475f,#0b1018 75%)}
.photo::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:16px 16px;opacity:.3}
.aimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* Header */
header{position:fixed;inset:14px 0 auto 0;z-index:60;padding:0 14px}
@media(min-width:768px){header{inset-block-start:18px;padding:0 24px}}
/* Header sticky: preso na viewport, some ao rolar para BAIXO e volta ao rolar para CIMA.
Antes era position:absolute — o cabeçalho ia embora junto com o documento e o menu ficava
inalcançável (medido em Chrome/360: com scrollY=600 o #burger estava em top=-571px).
Divisão de trabalho com o assets/nav.js: ele SÓ liga/desliga a classe `nav-oculto`
(e garante que nunca esconde com o menu aberto e que sempre mostra no topo da página);
posição, transform, transição e z-index são daqui.
NÃO precisa compensar espaço: o header já era fora do fluxo (absolute), então trocar para
fixed não empurra nada — medido em 300/300 combinações, o topo continua idêntico ao de hoje.
O z-index:60 acima continua servindo: fica abaixo da .toolbar (80), dos modais (120), do
.ytovl (300) e do #h7gate das páginas /app/ (200), e acima do mapa (o #leafmap tem
z-index:2 e cria contexto de empilhamento, então os panes/popups do Leaflet não escapam). */
header{--nav-off:14px;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
@media(min-width:768px){header{--nav-off:18px}}
/* o -100% tira a própria altura do header; o --nav-off tira o respiro do topo (14px, 18px em
≥768) e os 20px extras escondem também a sombra do .nav, que vaza para baixo da caixa.
Resultado medido: top vai de 14 para -94 (<768) e de 18 para -98 (≥768). */
header.nav-oculto{transform:translateY(calc(-100% - var(--nav-off) - 20px))}
@media(prefers-reduced-motion:reduce){header{transition:none}}
/* Com o header fixo, o alvo de um link âncora (#naves, #ambientes, #generosidade, #ingressos)
parava escondido atrás dele. O header ocupa até 14+74=88px (<768) e 18+78=96px (≥768);
o scroll-margin-top para a rolagem um pouco abaixo disso. Só age em navegação por hash. */
:target{scroll-margin-top:100px}
@media(min-width:768px){:target{scroll-margin-top:108px}}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px;background:#fff;border-radius:16px;padding:0 18px 0 26px;box-shadow:0 14px 44px -22px rgba(0,0,0,.16);transition:box-shadow .3s}
@media(min-width:768px){.nav{height:78px;padding:0 22px 0 34px}}
.logo{font-family:"Geist",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:1.3rem;display:inline-flex;align-items:center;line-height:1}
.logo svg{width:.78em;height:.78em;margin:0 .5px;transform:translateY(.02em)}
/* Reuniao 09/09/2026 (00:05:11) — Klaus: "40px, 30px nos botoes do menu".
30px ja a partir de 1200 (onde o menu aparece) e 40px quando sobra tela. */
.navlinks{display:none;align-items:center;gap:30px}
@media(min-width:1600px){.navlinks{gap:40px}}
.navlinks a{font-size:14px;color:rgba(21,21,21,.8);transition:.2s;display:flex;align-items:center;gap:6px}
.navlinks a:hover{color:var(--ink)}
.navitem{position:relative}
.navitem>a .chev{transition:transform .25s;color:var(--muted)}
.navitem:hover>a .chev{transform:rotate(180deg)}
.drop{position:absolute;top:100%;left:-18px;min-width:560px;background:#fff;border-radius:16px;box-shadow:0 26px 70px -26px rgba(0,0,0,.3);padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;margin-top:16px}
.drop::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.navitem:hover .drop,.navitem:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1px;padding:10px 14px;border-radius:10px;transition:.15s}
.drop a:hover{background:#f1f1f1}
.drop a b{font-size:14px;font-weight:600;color:var(--ink)}
.drop a small{font-size:11.5px;color:var(--muted)}
.macc{border:none}
.macc summary{list-style:none;cursor:pointer;padding:12px 16px;border-radius:10px;color:var(--ink);font-weight:500;display:flex;align-items:center;gap:8px}
.macc summary::-webkit-details-marker{display:none}
.macc[open] summary .chev{transform:rotate(180deg)}
.macc .chev{transition:transform .25s;color:var(--muted)}
.macc .sub{display:flex;flex-direction:column;border-left:1px solid var(--border);margin:2px 0 8px 22px}
.macc .sub a{padding:9px 14px;font-size:14px;color:rgba(21,21,21,.75)}
.macc .sub a small{color:var(--muted);font-size:11px;margin-left:6px}
.badge{background:var(--ink);color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;letter-spacing:.03em}
.navcta{display:none;align-items:center;gap:16px}
.navcta a.link{font-size:14px;color:rgba(21,21,21,.8)}
.navcta a.link:hover{color:var(--ink)}
.burger{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--border);border-radius:8px;background:none;cursor:pointer}
@media(min-width:1200px){.navlinks,.navcta{display:flex}.burger{display:none}}
.mobile{position:absolute;inset:98px 14px auto 14px;z-index:55;background:#fff;border-radius:16px;box-shadow:0 24px 60px -24px rgba(0,0,0,.3);padding:18px 14px;display:none;flex-direction:column;gap:6px;max-height:calc(100svh - 120px);overflow:auto}
.mobile.open{display:flex}
.mobile > a{padding:12px 16px;border-radius:10px;color:var(--ink);font-weight:500}
.mobile .mcta{display:flex;flex-direction:column;gap:12px;margin-top:16px}
/* O override `.mobile{position:fixed;inset-block-start:112px}` que existia aqui SAIU.
Ele só era necessário enquanto o header era absolute (o menu ia embora ao rolar).
Com o header fixed, o .mobile volta a ser absolute contra o próprio header e já acompanha
a viewport de graça — e o top:98px da regra base recompõe sozinho a posição: 14+98=112 e
18+98=116. Medido (top,left,width): 112,14,332 @360 · 112,14,386 @414 · 116,14,740 @768 ·
116,14,996 @1024 · 116,14,1171 @1199 — idêntico ao de antes desta mudança.
Absolute ainda é o mais seguro dos dois: o transform do `nav-oculto` faz do header um bloco
de contenção, o que quebraria um filho position:fixed; sendo absolute, o menu simplesmente
acompanha o header, que é o comportamento certo. */
/* Hero */
.hw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hwi{display:inline-block;will-change:transform}
.hero .sub{position:relative}
.uline{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(21,21,21,.45);transform-origin:left center;display:block}
:root{--hgal-h:clamp(260px,46vh,520px)}
/* ═══ Hero com vídeo ═══════════════════════════════════════════════════
O vídeo cobre o hero inteiro (object-fit:cover) atrás de um véu escuro
em gradiente — mais fechado em cima (onde o header branco flutua) e
embaixo (onde o subtítulo precisa de contraste). A frase é branca por
cima. O hero mede quase a tela toda para o vídeo ser o primeiro impacto,
sem virar tela cheia de verdade: o topo da próxima seção fica à mostra,
que é o convite para rolar. */
.hero{position:relative;overflow:hidden;text-align:center;padding:150px 20px 90px;
min-height:min(92svh,1100px);display:flex;flex-direction:column;justify-content:center;align-items:center;
background:#0b0d10;color:#fff}
@media(min-width:768px){.hero{padding-top:170px}}
.hero>.eyebrow,.hero>h1,.hero>.sub{position:relative;z-index:1}
.hvid{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0b0d10}
.hvid-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92)}
/* o player do YouTube entra por cima do poster e só aparece quando está
tocando (classe .tocando, posta pelo assets/hero-video.js); o tamanho e
a posição do iframe são calculados lá para cobrir o hero */
.hvid-yt{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s ease}
.hvid-yt iframe{position:absolute;border:0;pointer-events:none;filter:saturate(.92)}
.hvid.tocando .hvid-yt{opacity:1}
.hvid::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(to bottom,rgba(8,10,14,.62) 0,rgba(8,10,14,.34) 40%,rgba(8,10,14,.5) 70%,rgba(8,10,14,.8) 100%)}
.hero .eyebrow{color:rgba(255,255,255,.74)}
.hero h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25)}
/* Reuniao 09/09/2026 (00:05:11) — Klaus: "remover essa linha branca que esta
aparecendo no texto da descricao". O sublinhado do .sub some so no hero. */
.hero .sub{color:rgba(255,255,255,.86);border-bottom:0;padding-bottom:0}
.hero .sub b{color:#fff}
.hero .uline{background:rgba(255,255,255,.6)}
/* ═══ Galeria do hero ══════════════════════════════════════════════════
A página abria num cinza vazio: manchete, subtítulo e um quadro de vídeo
que só ganha imagem quando a rede responde. Agora ela abre com as fotos
que o site JÁ tem (Café, Volts, ambientes, testemunhos), em duas fileiras
que andam devagar em sentidos opostos — como o pátio visto da janela.
Fecha a seção da agenda, fora do .wrap, sangrando de borda a borda. "Um
pouco transparente" é literal: opacidade abaixo de 1 e uma máscara que
dissolve as pontas esquerda e direita da fita. As fotos são cópias leves
(assets/galeria/, 440px de altura, ~30KB cada) — as originais têm até
380KB e dezesseis delas no topo da página pesariam 3MB. */
/* 12/09/2026 — Mauricio: "da uma afastada para os slides de baixo das
fotos". O trilho de cartoes tem margin-bottom:-30px (a sombra do hover
mora dentro do padding dele), entao 64px aqui viravam 34px de vao real —
a galeria colava nos cartoes. 140 aqui = ~110px de respiro visivel. */
.hgal{position:relative;margin:140px 0 0;height:var(--hgal-h);display:flex;flex-direction:column;gap:12px;
pointer-events:none;opacity:.82;z-index:0;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%)}
.hgal-row{flex:1 1 0;min-height:0;overflow:hidden}
.hgal-track{display:flex;gap:12px;height:100%;width:max-content;will-change:transform;animation:hgal 110s linear infinite}
.hgal-row.rev .hgal-track{animation-direction:reverse}
.hgal-track img{height:100%;width:auto;flex:none;object-fit:cover;border-radius:14px;filter:saturate(.9)}
@keyframes hgal{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.hgal-track{animation:none}}
.hero h1{font-size:clamp(2.6rem,8.6vw,7.4rem);max-width:1400px;margin:18px auto 0}
.hero .sub{display:inline-block;margin-top:26px;padding-bottom:5px;border-bottom:1px solid rgba(21,21,21,.3);font-size:15px;max-width:820px}
.videowrap{position:relative;max-width:1180px;margin:56px auto 0}
.video{position:relative;aspect-ratio:16/8.4;border-radius:24px;overflow:hidden;border:6px solid #fff;box-shadow:0 30px 80px -40px rgba(0,0,0,.35)}
.video .halftone{position:absolute;inset:0;z-index:2;background-image:radial-gradient(rgba(90,140,190,.5) 1.3px,transparent 1.4px);background-size:11px 11px;opacity:.16;mix-blend-mode:screen}
.play{position:absolute;inset:0;display:grid;place-items:center;z-index:3}
.play span{width:82px;height:82px;border-radius:999px;background:var(--red);display:grid;place-items:center;color:#fff;transition:.3s;animation:ring 2.4s infinite;box-shadow:0 0 0 14px rgba(229,35,27,.18)}
.video:hover .play span{transform:scale(1.08)}
@keyframes ring{0%{box-shadow:0 0 0 10px rgba(229,35,27,.2)}70%{box-shadow:0 0 0 26px rgba(229,35,27,0)}100%{box-shadow:0 0 0 10px rgba(229,35,27,0)}}
.toolbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:#161616e6;backdrop-filter:blur(10px);border:1px solid #3a3d44;border-radius:999px;padding:8px;max-width:min(94vw,760px);overflow-x:auto;z-index:80;scrollbar-width:none;box-shadow:0 22px 60px -18px rgba(0,0,0,.55)}
.toolbar::-webkit-scrollbar{display:none}
.toolbar .fan{flex:none;width:44px;height:44px;border-radius:999px;background:#000;display:grid;place-items:center;color:#fff}
.toolbar a{flex:none;font-size:13px;color:#d6d6d6;padding:10px 16px;border-radius:999px;border:1px solid #333;transition:.2s;white-space:nowrap}
.toolbar a:hover{border-color:#666;color:#fff}
.toolbar a.active{background:#f3efe6;color:#141414;border-color:#f3efe6;font-weight:600}
@media(max-width:719px){.toolbar{left:10px;right:10px;transform:none;bottom:12px;max-width:none;justify-content:flex-start}}
/* Reuniao 09/09/2026 (00:26:58) — Klaus: "tirar essa barra branca do final".
Era este padding no body: reservava lugar para a .toolbar flutuante, mas pintado
com o fundo claro do body. O mesmo respiro no footer some, porque o footer e escuro. */
footer{padding-bottom:104px}
/* Reuniao 09/09/2026 (00:07:45) — Klaus: "o padding da sessao com no minimo 120px",
para os blocos respirarem. 96px no telefone, onde 120 vira buraco. */
section.blk{padding:96px 0}
@media(min-width:768px){section.blk{padding:120px 0}}
.two{display:grid;gap:44px;align-items:center;grid-template-columns:1fr}
@media(min-width:1024px){.two{grid-template-columns:1fr 1fr;gap:64px}}
/* Call 10/09/2026 (H27) — "aumentar a largura de 50 50 para 70 30 das
colunas dele". Modificador, e nao mudanca no .two: ele monta meia duzia
de blocos no site inteiro e o 50/50 continua certo neles. */
@media(min-width:1024px){.two--70{grid-template-columns:7fr 3fr}}
/* Conectar */
.toggle{display:inline-flex;background:#f1f1f1;border:1px solid var(--border);border-radius:999px;padding:5px;gap:4px}
.toggle button{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:12px 24px;border-radius:999px;cursor:pointer;color:var(--muted);transition:.2s}
.toggle button.on{background:var(--ink);color:#fff}
/* Reuniao 09/09/2026 (00:08:47) — Werikson: "um hover nelas, so para ficar roxinho,
dar essa sensacao de animado, de ludico". So na aba que ainda nao esta ligada. */
.toggle button:not(.on):hover{color:var(--purple);background:rgba(109,74,255,.09)}
.conectarimg{border-radius:24px;min-height:420px;height:100%}
@media(min-width:1024px){.conectarimg{min-height:560px}}
/* Valores */
/* O DNA em uma linha: numeral, título e uma frase, separados por fio. Sem
caixa branca e sem ícone — o texto é a peça. */
.vgrid{display:grid;grid-template-columns:1fr;border-top:1px solid rgba(21,21,21,.2)}
@media(min-width:768px){.vgrid{grid-template-columns:repeat(3,1fr)}}
.vcard{display:flex;gap:18px;align-items:flex-start;padding:28px 0;border-bottom:1px solid rgba(21,21,21,.2);text-align:left}
@media(min-width:768px){
.vcard{padding:40px 32px 40px 0;border-bottom:1px solid rgba(21,21,21,.2)}
.vcard+.vcard{padding-left:32px;border-left:1px solid rgba(21,21,21,.2)}
.vcard:last-child{padding-right:0}
}
.vcard .vn{font-family:"Geist",sans-serif;font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--muted);padding-top:7px;font-variant-numeric:tabular-nums;flex:none}
.vcard h3{font-family:"Geist",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(19px,1.6vw,25px);letter-spacing:-.01em;line-height:1}
.vcard p{margin-top:8px;font-size:13.5px;color:var(--muted);max-width:340px}
/* Marquee */
.marquee{overflow:hidden;background:#0d0d0d;color:#fff;padding:18px 0;position:relative}
.marquee .track{display:inline-flex;white-space:nowrap;will-change:transform;animation:scroll 30s linear infinite}
.marquee .track span{font-family:"Geist",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:15px;display:inline-flex;align-items:center;gap:48px;padding-right:48px}
.marquee .track b{color:var(--cream);font-weight:400}
@keyframes scroll{to{transform:translateX(-50%)}}
/* ═══ Porta de hangar ══════════════════════════════════════════════════
Folhas de aco sobre a faixa preta que antecede a agenda. Elas correm do
centro para os lados e somem — a faixa fica exatamente como era.
Porta CORREDICA e nao seccional: a que sobe em paineis horizontais e
porta de garagem. Hangar abre de lado, e as folhas se empilham nas pontas.
As folhas so existem quando o JS as cria. Sem script a faixa nasce aberta
(o estado final), nunca tapada por uma porta que nao vai abrir.
O relevo e feito com gradiente e uma costura de 1px: a nervura da chapa.
Sem imagem, sem textura carregada — a folha inteira e uma div. */
.marquee.tem-porta{position:relative}
.hd{position:absolute;inset:0;pointer-events:none;z-index:4}
.hd-f{position:absolute;top:0;bottom:0;
background:linear-gradient(180deg,#31313a 0%,#1e1e25 54%,#2b2b33 100%);
border-right:1px solid rgba(0,0,0,.66);
/* a de dentro e a nervura; a de fora e a folha projetando sombra no vao
atras dela — so aparece nas bordas que estao correndo, que e onde a
profundidade precisa ser lida */
box-shadow:inset 1px 0 0 rgba(255,255,255,.07), 0 0 26px rgba(0,0,0,.6);
transform:translate3d(0,0,0);
transition:transform 900ms cubic-bezier(.16,1,.3,1);
will-change:transform}
/* a folha da ponta nao precisa de nervura: nao ha vizinha depois dela */
.hd-f:last-child{border-right:none}
/* ═══ Painel de embarque (split-flap) ══════════════════════════════════
A peca de assinatura da home. Ocupa o lugar do primeiro .marquee e usa
o mesmo preto, entao a pagina nao ganha um bloco novo — ganha outro
conteudo no bloco que ja existia.
O tamanho da celula e a unica medida: gap, altura e corpo saem dela por
calculo. Sao 21 celulas (a maior frase), e a 3.4vw elas cabem inteiras
num telefone de 360px sem quebrar linha — painel que quebra em duas
linhas deixa de parecer painel. */
.splitflap{background:#0d0d0d;padding:20px 14px;overflow:hidden;
--sf:clamp(12px,3.4vw,30px)}
.sf-row{display:flex;justify-content:center;gap:calc(var(--sf)*.13)}
.sf-cell{width:var(--sf);height:calc(var(--sf)*1.46);border-radius:2px;
background:#1b1b1f;display:flex;align-items:center;justify-content:center;
position:relative;overflow:hidden;flex:0 0 auto}
/* a costura no meio e a flap: e ela que faz a celula ler como painel
mecanico e nao como caixinha de texto */
.sf-cell::after{content:"";position:absolute;left:0;right:0;top:50%;
height:1px;background:#0d0d0d;opacity:.9}
.sf-cell.vazia{background:#141417}
.sf-cell i{font-family:"Geist",sans-serif;font-style:normal;font-weight:700;font-size:calc(var(--sf)*.7);line-height:1;color:var(--cream);
letter-spacing:0}
/* enquanto gira, a letra e mais apagada: o olho le "passando" */
.sf-cell.girando i{color:#8a8577}
.sf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ═══ Rota sobre o mapa ════════════════════════════════════════════════
Primeiro tentei isto no hero e estava errado: o hero e' ocupado por uma
manchete gigante e por um card de video de 1180px, e o aviao passava
ATRAS do card — invisivel na maior parte do percurso, e o rastro sobrava
como um risco solto ao lado. Aqui na secao do Cafe existe um mapa-mundi
de fundo (.worldbg) e ar de verdade: um aviao tracando rota sobre o mapa
diz "missao" e "hangar" no lugar onde a pagina ja fala disso.
A camada nao tem altura propria (inset:0 na secao, que ja e' relative e
overflow:hidden) e nao capta clique: a secao mede exatamente o mesmo com
e sem ela. */
.takeoff{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.takeoff .tk-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.takeoff .tk-rastro{stroke:rgba(43,76,155,.34);stroke-width:1.5;
stroke-dasharray:0;stroke-linecap:round;vector-effect:non-scaling-stroke}
.takeoff .tk-aviao{position:absolute;left:0;top:0;width:24px;height:24px;margin:-12px 0 0 -12px;
color:rgba(43,76,155,.62);display:block}
.takeoff .tk-aviao svg{width:100%;height:100%;display:block}
@media(max-width:640px){.takeoff .tk-aviao{width:18px;height:18px;margin:-9px 0 0 -9px}}
@media(prefers-reduced-motion:reduce){.takeoff{display:none}}
/* ═══ Trilha de voo (a rolagem como rota) ═══════════════════════════════
O mapa de bordo: uma linha na margem esquerda com um ponto por seção e
o avião descendo conforme a página rola — atrás dele a rota já voada em
traço cheio, à frente em tracejado. É o mesmo objeto (o avião) que já
cruza o hero, o Café e a faixa das Naves, agora acompanhando a pessoa a
página inteira. Só em ≥1200px: abaixo disso a margem é do conteúdo.
mix-blend-mode:difference com branco: sobre o fundo claro vira preto,
sobre o H7 Plus (preto) vira branco — uma cor só, legível nos dois. */
.fr{position:fixed;left:10px;top:50%;transform:translateY(-50%);height:min(58vh,540px);width:34px;z-index:50;
pointer-events:none;display:none;color:#fff;mix-blend-mode:difference}
@media(min-width:1200px){html.js .fr{display:block}}
.fr-line{position:absolute;left:5px;top:0;bottom:0;border-left:1px dashed rgba(255,255,255,.5)}
.fr-done{position:absolute;left:5px;top:0;width:1px;height:0;background:#fff}
.fr-wp{position:absolute;left:0;width:11px;height:11px;margin-top:-5.5px;pointer-events:auto;cursor:pointer;background:none;border:0;padding:0;color:inherit}
.fr-wp::before{content:"";position:absolute;left:2px;top:2px;width:7px;height:7px;border-radius:50%;background:#000;border:1px solid rgba(255,255,255,.8);box-sizing:border-box}
.fr-wp.on::before{background:#fff}
/* O rótulo fica em pixel inteiro (o hangar-motion.js mede a altura e
centra por margin-top, sem translate): com translateY(-50%) ele caía em
meio pixel e, numa camada com mix-blend-mode, saía borrado. Corpo 10,5px
e sem letter-spacing exagerado pelo mesmo motivo — letra pequena demais
vira mancha. */
.fr-wp span{position:absolute;left:16px;top:50%;writing-mode:vertical-rl;
font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;line-height:1;
opacity:0;transition:opacity .25s;-webkit-font-smoothing:antialiased}
.fr-wp.on span,.fr-wp:hover span,.fr-wp:focus-visible span{opacity:1}
/* Reunião 09/09/2026 (00:06:07) — Klaus: "nunca é bom quando o avião está
indo para baixo, parece que está caindo". Werikson: "imagina ele para a
direita, virado para a tela: eu também sirvo como uma seta, estou apontado
para cá porque estou aqui". Então o nariz é sempre para a DIREITA — o avião
deixou de descer a página e virou o marcador que aponta para o conteúdo.
O ícone nasce apontando para cima; 90° leva o nariz para a direita.
(A classe .subindo continua sendo posta pelo hangar-motion.js e agora não
muda nada aqui — de propósito: nada de meia-volta a cada rolagem.) */
.fr-av{position:absolute;left:-5px;top:0;width:22px;height:22px;margin-top:-11px;color:#fff;transform:rotate(90deg);
background:#000;border-radius:50%;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
@media(prefers-reduced-motion:reduce){.fr-av{transition:none}}
.fr-av svg{width:100%;height:100%;display:block}
@media(prefers-reduced-motion:reduce){.fr-wp span{transition:none}}
@media(prefers-reduced-motion:reduce){.marquee .track{animation:none}}
/* Jornada */
.worldbg{position:absolute;inset:0;opacity:.55;pointer-events:none;
-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.worldbg img{width:100%;height:100%;object-fit:cover;object-position:center top}
.worldbg .wdots{position:absolute;inset:0;background-image:radial-gradient(rgba(21,21,21,.05) 1.4px,transparent 1.4px);background-size:26px 26px}
.collage{position:relative;height:420px}
@media(min-width:640px){.collage{height:520px}}
.pcard{position:absolute;border-radius:18px;border:4px solid #fff;box-shadow:0 26px 60px -26px rgba(0,0,0,.42);overflow:hidden}
.stamp{position:absolute;color:var(--blue);transform:rotate(var(--r,0deg));z-index:4;filter:drop-shadow(0 3px 6px rgba(0,0,0,.08))}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-10px) rotate(var(--rot,0deg))}}
/* Sua nave banner */
.navebanner{position:relative;overflow:hidden;background:#0d0d0d;color:#fff;border-radius:28px;padding:64px 44px 150px}
@media(min-width:1024px){.navebanner{padding:72px 56px;display:grid;grid-template-columns:minmax(220px,300px) 1fr 340px;gap:40px;align-items:center;min-height:300px}}
.navebanner h3{font-family:"Geist",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.02}
.navebanner p{margin-top:14px;color:rgba(255,255,255,.72);font-size:14.5px;max-width:520px}
.navebanner .acts{display:flex;flex-direction:column;gap:12px;margin-top:26px;position:relative;z-index:3}
@media(min-width:1024px){.navebanner .acts{margin-top:0}}
.swoosh{position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none}
@media(min-width:1024px){.swoosh{height:78%}}
.swoosh svg.trail{position:absolute;inset:auto 0 -1px 0;width:100%;height:70%}
.swoosh .jet{position:absolute;bottom:58%;left:calc(13% - 26px);width:56px;color:var(--cream)}
@media(min-width:1024px){.swoosh .jet{width:72px;left:calc(13.5% - 36px)}}
/* ── VOLTS EM PRETO (call 10/09/2026, 00:09:25, H29) ────────────────────
Decisao do Klaus com o Mauricio: a secao do Volts ganha fundo preto. A
outra metade do pedido — trocar os tres quadros por UM png com as tres
fotos ja montadas — depende do arquivo, que o Klaus ficou de mandar;
ate la os quadros continuam os de hoje (o sorteio do volts-fotos.js
segue valendo) e so a chapa mudou.
O padding-top de 20px que a secao trazia no style= saiu junto: ele
existia porque o banner das Naves colava aqui em cima, e esse banner foi
escondido (H16). Numa faixa preta, o respiro e' o que separa. */
#volts{background:#0d0d0d;color:#fff}
#volts .eyebrow{color:rgba(255,255,255,.62)}
#volts .muted{color:rgba(255,255,255,.72)}
#volts .btn-outline{border-color:rgba(255,255,255,.4);color:#fff}
#volts .btn-outline:hover{background:rgba(255,255,255,.14);border-color:#fff}
/* Volts — mosaico de três quadros: um alto à esquerda (.a, duas linhas,
recebe sempre uma foto em pé) e dois baixos à direita. Quais fotos entram
é sorteado a cada acesso pelo assets/volts-fotos.js. */
.voltsgrid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:200px;gap:14px}
@media(min-width:640px){.voltsgrid{grid-template-columns:1.35fr 1fr;grid-auto-rows:250px}}
.voltsgrid .a{grid-row:span 2}
/* O arredondado é UM só, e vem daqui — nenhuma foto traz canto gravado no
arquivo (o volts-6 trazia e foi cortado). O inherit na imagem garante o
mesmo canto mesmo se o overflow do quadro falhar em algum navegador. */
.voltsgrid .photo{border-radius:18px}
.voltsgrid .photo .aimg{border-radius:inherit}
/* Agenda */
.events{margin-top:44px;display:flex;flex-direction:column;gap:14px}
.erow{display:grid;grid-template-columns:1fr;gap:14px;align-items:center;border:1px solid var(--border);border-radius:18px;padding:26px 28px;background:#fff}
@media(min-width:920px){.erow{grid-template-columns:1.1fr 210px 1.7fr 250px;gap:24px}}
.erow h3{font-family:"Geist",sans-serif;font-weight:800;text-transform:uppercase;font-size:20px;line-height:1.05}
.erow .date{font-size:13px;font-weight:600;border-left:1px solid var(--border);padding-left:18px}
@media(max-width:919px){.erow .date{border-left:none;padding-left:0}}
.erow .date small{display:block;color:var(--muted);font-weight:400;margin-top:2px}
.erow .desc{font-size:13.5px;color:var(--muted)}
.ebtn{border:1.5px solid var(--ink);border-radius:12px;padding:14px 18px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-align:center;transition:.2s;background:#fff;display:block}
.ebtn:hover{background:var(--ink);color:#fff}
/* ── Agenda da HOME: cartões de embarque, arrastáveis ──────────────────
O dono pediu "estilo ticket". O cartão passa a ter a anatomia de um
cartão de embarque: cabeçalho (a foto do evento ou a faixa preta com a
marca), o título, uma linha de dados em colunas com rótulo pequeno em
cima (DATA · DIA · HORA — só o que é verdade, nada de portão inventado),
o picote com os recortes nas bordas e o canhoto com código de barras e
o botão. Trilho, arrasto, setas e proporções são os mesmos de antes.
Quem rola é o .eslider, nunca a página: os cartões têm largura fixa
(flex:0 0 …), então o container não cresce junto — ele corta e rola por
dentro. É o que mantém o documento sem barra horizontal em 390px.
A .erow acima continua viva e não mudou: é ela que desenha a /agenda/
completa e os blocos de lista (assets/blocos/tipos/listaEventos.js). */
/* Reuniao 09/09/2026 (00:14:27) — Klaus: "a sombra esta recortando aqui embaixo,
parece que nao e otimizada". O .eslider rola no eixo X, e isso corta tambem no Y:
a sombra do cartao no hover (28px para baixo) nao cabia nos 18px de padding.
Agora cabe, e a margem negativa devolve o espaco para o bloco nao crescer. */
.eslider{margin-top:32px;margin-bottom:-30px;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
padding:14px 0 48px;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.eslider::-webkit-scrollbar{display:none}
.eslider:active{cursor:grabbing}
/* ── O TRILHO VAZA ATE A BORDA DA TELA (call 10/09/2026, 00:10:32, H17) ──
Klaus: o cartao nao pode parar cortado na margem do texto; ele continua,
e o trilho anda sozinho. O .eslider saiu de dentro do .wrap--narrow e
agora ocupa a largura toda — o alinhamento do PRIMEIRO cartao com o
titulo vem deste padding, que refaz a conta do .wrap--narrow
(max-width 1280 + 20/40px de gutter).
Sem `vw`: 100vw inclui a barra de rolagem e a pagina inteira ganharia
rolagem horizontal no Windows. Aqui 100% e a largura do proprio bloco,
que ja desconta a barra.
scroll-padding acompanha o padding para o arrasto e as setas pararem no
mesmo lugar; o scroll-snap sai porque snap OBRIGATORIO briga com o
passeio automatico (o navegador puxa de volta a cada quadro). */
/* 12/09/2026 — Mauricio, vendo a homolog: "os cards tao no canto demais".
O vazamento da H17 levava o trilho ate a borda da TELA. Parado nao
incomodava; com o passeio andando, os cartoes passam POR BAIXO do
padding (num container que rola, o conteudo atravessa a area de padding
e so e' cortado na borda da CAIXA) e iam grudar no canto, dos dois
lados. O bloco era o unico da pagina sem margem nenhuma.
Agora a goteira e' do .eslider-vaza (padding), entao a caixa que corta
para 20px/40px da borda — a mesma margem de todas as outras secoes. O
cartao continua cortado, que e' o que o Klaus pediu para dizer "tem
mais", mas dentro da pagina em vez de encostado no canto.
O padding que sobrou no .eslider e' so o que alinha o PRIMEIRO cartao
com o titulo: a distancia entre a goteira e o texto do .wrap--narrow
(max-width 1280). Como a caixa ja perdeu 80px (2x40) para a goteira, a
conta vira (100% - 1200)/2 — em 1440px da 80px, e o cartao nasce nos
mesmos 120px do titulo. No telefone a conta zera sozinha (a tela e' mais
estreita que 1280, entao goteira e texto coincidem).
Sem `vw` de proposito: 100vw inclui a barra de rolagem e a pagina
inteira ganharia rolagem horizontal no Windows.
scroll-padding acompanha para o arrasto e as setas pararem no mesmo
lugar; o scroll-snap sai porque snap OBRIGATORIO briga com o passeio
automatico (o navegador puxa de volta a cada quadro). */
/* ── AUDITORIA 18/09/2026 (Klaus, home): "na secao de Agenda, 'vazar' os
cards pelas laterais" ────────────────────────────────────────────────
A goteira de 20/40px acima e o recuo que alinhava o primeiro cartao com
o titulo saem: o trilho volta a ocupar a tela inteira e os cartoes
encostam nas duas bordas, cortando de um lado e do outro. O padding
vertical do .eslider continua onde estava (e o que guarda a sombra do
hover); so o lateral zera. Para voltar ao alinhamento com o titulo,
devolver o padding-inline desta regra. */
.eslider-vaza{position:relative;padding:0}
.eslider-vaza .eslider{scroll-snap-type:none;padding-left:0;padding-right:0;scroll-padding-left:0}
.ecard{flex:0 0 clamp(262px,26vw,318px);scroll-snap-align:start;user-select:none;position:relative;
display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);
border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .2s}
.ecard:hover{border-color:#c4c4c4;transform:translateY(-4px);box-shadow:0 28px 50px -30px rgba(0,0,0,.35)}
.ecard>*{min-width:0;overflow-wrap:anywhere}
/* Cabeçalho. Com foto, ela; sem foto, a faixa preta com o mês e a marca —
e não mais o gradiente de espera com a logo apagada, que era o pedaço
mais "gerado" do cartão. */
.ecard .emedia{position:relative;display:block;aspect-ratio:16/7.6;overflow:hidden;background:#0d0d0d}
.ecard .emedia .aimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ecard .ehead{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0d0d0d;color:#fff;padding:0 16px;min-height:50px}
.ecard .ehead img{height:12px;width:auto;filter:brightness(0) invert(1);opacity:.9;flex:none}
.ecard .ehead small{font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Selo do que se repete toda semana (o Encounter): "todo domingo" sem
fingir uma data avulsa. Sobre a foto fica no canto; na faixa é o texto. */
.ecard .eselo{position:absolute;left:12px;top:12px;z-index:2;background:var(--cream);color:var(--ink);
border-radius:999px;padding:6px 12px;font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.1em;line-height:1;white-space:nowrap}
.ecard .ehead .eselo{position:static}
.ecard .ebody{padding:16px 18px 12px;display:flex;flex-direction:column;gap:11px;flex:1}
.ecard h3{font-family:"Geist",sans-serif;font-weight:800;text-transform:uppercase;font-size:19px;line-height:1.08;letter-spacing:-.01em}
.ecard h3 a{color:inherit;text-decoration:none}
.ecard h3 a:hover{text-decoration:underline;text-underline-offset:4px}
/* A linha de dados do cartão de embarque: rótulo miúdo em cima, valor em
Geist embaixo. As colunas medem o próprio conteúdo (auto), então
"29 a 31/08" não estoura nem vira reticência. */
.ecard .egrid{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:8px 14px;
border-top:1px solid var(--border);padding-top:11px}
.ecard .egrid.dois{grid-template-columns:repeat(2,auto);justify-content:flex-start;gap:8px 28px}
.ecard .egrid div{display:flex;flex-direction:column;gap:4px;min-width:0}
.ecard .egrid small{font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ecard .egrid b{font-family:"Geist",sans-serif;font-weight:800;font-size:15.5px;line-height:1;text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap}
/* duas linhas: o que cabe da frase mais longa (a do Encounter). Cartão mais
curto não fica com buraco — o canhoto tem margin-top:auto. */
.ecard .edesc{font-size:12.5px;color:var(--muted);line-height:1.5;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* O picote: tracejado com os recortes redondos nas bordas. Os círculos
têm a cor do fundo da página e nascem centrados na borda do cartão; o
overflow:hidden do .ecard corta a metade de fora e sobra a mordida. */
.ecard .eperf{position:relative;height:0;margin-top:auto;border-top:1.5px dashed #cfcfcf}
.ecard .eperf::before,.ecard .eperf::after{content:"";position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;
background:var(--bg);border:1px solid var(--border);box-sizing:border-box}
.ecard .eperf::before{left:-9px}
.ecard .eperf::after{right:-9px}
/* O canhoto: código de barras (desenhado em CSS, sem imagem) e o botão. */
.ecard .efoot{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px;background:#f8f8f6}
.ecard .ebar{display:block;height:26px;opacity:.9;
background:repeating-linear-gradient(90deg,#151515 0 2px,transparent 2px 4px,#151515 4px 5px,transparent 5px 8px,
#151515 8px 11px,transparent 11px 12px,#151515 12px 13px,transparent 13px 16px,#151515 16px 18px,transparent 18px 21px)}
.ecard .ebtn{padding:13px 16px}
/* As setas do trilho são as MESMAS .tarr dos testemunhos, mas vivem na
linha do título da seção, ao lado do botão — no cartão de embarque o
meio do cartão é o título, e uma bolinha branca por cima tapava ele. */
.enav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.enav .tarr{position:static;transform:none;width:46px;height:46px;box-shadow:none;border:1px solid rgba(21,21,21,.3);background:transparent}
.enav .tarr:hover{transform:none;border-color:var(--ink);background:#fff}
/* Ainda há mais */
/* ═══ TAGS DE FILTRO DOS AMBIENTES ════════════════════════════════════
Reuniao 09/09/2026 (00:18:49-00:20:58): o slider virou trilho de tags por
publico. Elas rolam no telefone em vez de quebrar em tres linhas, e a que
esta ligada usa o roxo institucional — o mesmo hover que o Werikson pediu
para os botoes ("so para ficar roxinho"). */
.ambtags{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 0 6px;-webkit-overflow-scrolling:touch}
.ambtags::-webkit-scrollbar{display:none}
/* ── NO TELEFONE AS TAGS PRECISAM PARECER SLIDER (call 10/09, H18) ──────
Elas ja rolavam, mas sem barra e sem nenhuma pista: quem olhava achava
que as tags eram so as que cabiam na tela. A conclusao da propria call,
olhando o site no F12 (00:22:06), foi que CORTAR e' o que avisa que tem
mais para rolar — o mesmo que o trilho de eventos faz. Entao: a ultima
tag visivel morre num esmaecimento na borda direita e o snap para
certinho em cada tag. No desktop nao ha corte, e a mascara sai. */
@media(max-width:899px){
.ambtags{scroll-snap-type:x proximity;padding-right:34px;
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 42px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 42px),transparent)}
.ambtag{scroll-snap-align:start}
}
.ambtag{flex:none;font-family:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;
padding:12px 20px;border-radius:999px;border:1px solid var(--border);background:var(--surface);
color:var(--ink);transition:.18s}
.ambtag:hover{color:var(--purple);border-color:rgba(109,74,255,.5);background:rgba(109,74,255,.07)}
.ambtag.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ambtag.on:hover{background:var(--ink);color:#fff}
/* filtro ligado com um unico ambiente: sem bolinhas e sem setas — nao ha
para onde navegar, e o par vazio parecia botao quebrado. */
.ambrot.um-so .amb-dots,.ambrot.um-so .amb-arr{display:none}
/* ── O CREME DO CARROSSEL VIRA BRANCO (auditoria 18/09/2026) ───────────
Klaus: "na secao de ambientes, trocar as cores amarelas de textos e
botao para branco". Mesmo caso do rodape (12/09): o "amarelo" e' o
--cream (#efe7d6), que sobre a chapa preta do painel puxa para o palha.
A troca e' UMA linha — o --cream redefinido DENTRO do carrossel faz
nome, sobrancelha, icone do proximo encontro, bolinha e o botao
.btn-cream nascerem brancos. O creme da marca continua no resto do
site. Para voltar: apagar o --cream desta regra. */
.ambrot{--cream:#fff;position:relative;border-radius:24px;overflow:hidden;height:min(560px,calc(100svh - 170px));min-height:430px;background:#0d0d0d}
@media(max-width:899px){.ambrot{height:min(590px,calc(100svh - 130px));min-height:520px}}
.amb-slide{position:absolute;inset:0;display:grid;grid-template-columns:1.15fr 1fr;opacity:0;transition:opacity .55s ease;pointer-events:none}
.amb-slide>*{min-width:0}
@media(max-width:899px){.amb-slide{grid-template-columns:1fr;grid-template-rows:190px 1fr}}
.amb-slide.on{opacity:1;pointer-events:auto}
.amb-foto{position:relative;overflow:hidden}
/* ── A JUNCAO FOTO x PAINEL (call 10/09/2026, 00:13:03, H21) ────────────
"aplicar um gradiente sobre a imagem para evitar o corte seco para o
fundo preto". A foto encostava no painel num corte a faca. O degrade
vive na FAIXA da junção (nao na foto inteira, para nao apagar o rosto de
ninguem) e termina exatamente na cor do painel (#141414). No telefone o
slide empilha — foto em cima, painel embaixo — e o degrade vira a borda
de BAIXO.
::before e NAO ::after, e com z-index: o ::after do .photo ja existe (a
textura de pontinhos, com opacity:.3 — que rebaixaria o degrade junto) e
a foto .aimg tem z-index:1, entao qualquer camada sem z-index fica
ATRAS dela. Foi o primeiro jeito e o degrade simplesmente nao aparecia. */
.amb-foto::before{content:"";position:absolute;inset:0 0 0 auto;width:38%;z-index:2;pointer-events:none;
background:linear-gradient(90deg,rgba(20,20,20,0) 0%,rgba(20,20,20,.55) 62%,#141414 100%)}
@media(max-width:899px){
.amb-foto::before{inset:auto 0 0 0;width:auto;height:46%;
background:linear-gradient(180deg,rgba(20,20,20,0) 0%,rgba(20,20,20,.55) 62%,#141414 100%)}
}
.amb-foto .wm{position:absolute;inset:0;display:grid;place-items:center;opacity:.25}
.amb-foto .wm img{height:120px;max-width:70%;object-fit:contain;filter:brightness(0) invert(1)}
/* O padding de baixo era 74px/58px para caber a fileira de barrinhas.
Com ela fora (call 10/09, H22) sobrava um buraco: voltou a ser simetrico
com o de cima, e o texto centraliza de verdade. */
.amb-panel{position:relative;background:#141414;color:#fff;padding:34px 40px 38px;display:flex;flex-direction:column;justify-content:center;gap:15px}
@media(max-width:899px){
.amb-panel{padding:18px 18px 22px;justify-content:flex-start;gap:11px}
.amb-desc{font-size:13px}
.amb-logo{min-height:34px;flex-wrap:wrap}
.amb-logo img{max-height:34px}
.amb-logo b{font-size:19px;line-height:1.05}
.amb-logo .dest{--fl:15px;gap:4px 8px}
.amb-next{padding:11px 14px}
.amb-next b{font-size:12.5px}
.amb-cta .btn{white-space:normal;width:100%;padding:13px 16px;font-size:11.5px;line-height:1.3}
}
/* A trama de pontinhos do painel (.bgdots) saiu na call de 10/09 (H20):
"remover os pontilhados de fundo na secao de ambientes (via CSS)". O
fundo preto FICA — o pedido veio junto com o degrade da foto, que existe
justamente para encontrar esse preto. */
/* O título do slide é o letreiro (.dest), não mais a logo. A escala é de
título — bem maior que a do cartão do H7 Plus — e as palavras quebram
sozinhas em tela estreita, porque o .dest já é flex-wrap. */
.amb-logo{min-height:52px;display:flex;align-items:center}
.amb-logo .dest{--fl:clamp(15px,1.7vw,26px);gap:5px 10px;margin-top:0}
.amb-logo img{max-height:52px;max-width:250px;width:auto;filter:brightness(0) invert(1)}
.amb-logo b{font-family:Geist,sans-serif;font-size:26px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
/* Reuniao 09/09/2026 (00:15:27) — o nome do ambiente e titulo, nao letreiro. */
.ambrot-nome{font-size:clamp(24px,2.4vw,38px);line-height:1;color:var(--cream);margin:2px 0 2px}
@media(max-width:899px){.ambrot-nome{font-size:clamp(22px,6vw,30px)}}
.amb-quem{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--cream)}
.amb-desc{font-size:14.5px;color:rgba(255,255,255,.72);max-width:420px;line-height:1.55}
.amb-next{display:flex;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:14px 18px;max-width:420px;background:rgba(255,255,255,.04)}
.amb-next svg{flex:none;color:var(--cream)}
.amb-next b{display:block;font-size:13.5px}
.amb-next small{font-size:11.5px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.14em}
.amb-cta{margin-top:6px}
/* Os pontinhos do rotator: a BARRA visível continua com 4px, mas o botão em si
tem 24px de altura (alvo de toque decente) — a barra é desenhada como
background centralizado e o preenchimento (::after) ocupa a mesma faixa.
O bottom desce 10px para a barra ficar exatamente onde sempre esteve. */
/* FORA DA TELA desde a call de 10/09 (H22): o index.html deixou de desenhar
a fileira (era um cronometro, e cortava a leitura do slide). As regras
ficam porque o desenho inteiro mora aqui — devolver a fileira e' voltar
uma linha no index.html, e nada disto precisa ser reescrito. */
.amb-dots{position:absolute;left:44px;bottom:16px;right:44px;display:flex;gap:7px;z-index:3;flex-wrap:wrap}
@media(max-width:899px){.amb-dots{left:22px;bottom:12px;right:22px}}
.amb-dots button{height:24px;flex:1;min-width:12px;max-width:56px;border:none;border-radius:99px;cursor:pointer;position:relative;padding:0;
background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) center/100% 4px no-repeat}
.amb-dots button.on::after{content:"";position:absolute;inset:10px 0;border-radius:99px;background:var(--cream);transform-origin:left;animation:dotfill var(--dur,6s) linear forwards}
.ambrot:hover .amb-dots button.on::after,.ambrot.parado .amb-dots button.on::after{animation-play-state:paused}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.amb-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:999px;border:none;background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px -8px rgba(0,0,0,.45);transition:.2s;opacity:.92}
.amb-arr:hover{transform:translateY(-50%) scale(1.08);opacity:1}
.amb-arr.prev{left:16px}
.amb-arr.next{right:16px}
@media(max-width:899px){.amb-arr{width:44px;height:44px;top:95px}.amb-arr.prev{left:10px}.amb-arr.next{right:10px}
/* alvo de toque: a bolinha mede 19x24 no celular; 44px de altura com a
barra de 4px no mesmo lugar (o background é centralizado e o ::after
ocupa a mesma faixa) */
.amb-dots button{height:44px}.amb-dots button.on::after{inset:20px 0}.amb-dots{bottom:2px}}
.feature{position:relative;border-radius:24px;overflow:hidden;min-height:440px;display:flex;align-items:flex-end}
@media(min-width:900px){.feature{min-height:560px}}
.feature .grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.08) 62%);z-index:2}
.feature .inner{position:relative;z-index:3;padding:32px;color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;width:100%;flex-wrap:wrap}
@media(min-width:768px){.feature .inner{padding:44px}}
.feature .inner h3{font-size:clamp(1.2rem,2.3vw,1.85rem);font-weight:600;max-width:660px;line-height:1.3}
.logos{margin-top:36px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;row-gap:14px;justify-content:space-between}
.logos button{background:none;border:none;padding:8px 10px;cursor:pointer;opacity:.45;transition:.25s;border-radius:10px}
.logos button:hover{opacity:.8;background:rgba(21,21,21,.05)}
.logos button.on{opacity:1;background:rgba(21,21,21,.06)}
.logos button img{height:30px;width:auto;display:block}
.logos button.on img{filter:brightness(0)}
.logos button b{font-family:Geist,sans-serif;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:#6f6f6f;white-space:nowrap}
.logos button.on b{color:var(--ink)}
/* A fileira de ambientes usa o MESMO letreiro do H7 Plus (.dest), só que em
escala de navegação: 12 nomes numa linha só ficariam gigantes com o
--fl do cartão (clamp(15px,1.35vw,22px)). O resto do visual da placa
— o degradê, o vinco no meio, a fonte — vem de graça do .dest. */
@media(max-width:899px){.logos{display:none}}
/* Podcast */
.podwrap{position:relative;z-index:5}
.podcast{background:#f3f3f1;border:1px solid var(--border);border-radius:28px;display:grid;grid-template-columns:1fr;overflow:visible;margin-bottom:-64px;box-shadow:0 30px 70px -40px rgba(0,0,0,.25)}
@media(min-width:960px){.podcast{grid-template-columns:minmax(260px,380px) 1fr auto;align-items:center}}
/* ── A BORDA NA FOTO DO JUAN E DA KEILA (call 10/09, 00:16:52, H23) ─────
Klaus viu uma borda aparecendo no recorte e apontou o PNG; o combinado
foi tentar por codigo antes de pedir arquivo novo. O que o codigo tinha:
o .pph e uma celula do grid com align-items:center, entao a base da foto
(bottom:0 dela) nao coincidia com a base do CARTAO — a foto terminava no
meio da chapa e o corte ficava a mostra.
Agora a celula estica ate o fundo (align-self:stretch) e a foto desce
com ela: o recorte morre na borda de baixo do cartao, que e onde ninguem
ve. Se a borda PERSISTIR depois disto, ai e o arquivo — o Klaus assumiu
mandar o PNG corrigido. */
.podcast .pph{position:relative;min-height:260px;align-self:stretch}
.podcast .pph img{position:absolute;bottom:0;width:auto;max-width:none;object-fit:contain}
.podcast .pph .pj{left:6%;height:98%;z-index:1;filter:saturate(.95)}
.podcast .pph .pk{left:34%;height:116%;z-index:2}
.podcast .pmid{padding:34px 38px}
.podcast .pmid h3{font-family:"Geist",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(1.35rem,2.3vw,1.95rem);line-height:1.05}
.podcast .pmid p{margin-top:12px;color:var(--muted);font-size:14px;max-width:430px}
.podcast .pacts{padding:0 38px 34px;display:flex;flex-direction:column;gap:12px;min-width:280px}
@media(min-width:960px){.podcast .pacts{padding:34px 38px 34px 0}}
.pbtn{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1.5px solid var(--ink);border-radius:12px;padding:16px 20px;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;background:transparent;transition:.2s}
.pbtn:hover{background:var(--ink);color:#fff}
/* H7 Plus */
/* padding-top 150 -> 200 (call 10/09, 00:16:52, H24): "aumentar para
aproximadamente 200 pixels" entre o cartao do Spotify e o titulo
"Formacao para o seu proximo passo". O cartao invade esta secao com
margin-bottom:-64px, entao o vao VISIVEL sai de ~86px para ~136px. */
.h7{position:relative;overflow:hidden;background:#020608;color:#fff;padding:200px 0 0}
.plusbg{position:absolute;inset:0 0 auto 0;width:100%;height:auto;min-height:60%;object-fit:cover;object-position:top;pointer-events:none;transform:translateY(-30%)}
.h7:has(.plusbg) .glow{display:none}
.h7 .glow{position:absolute;left:50%;top:-160px;width:1000px;max-width:150%;height:600px;transform:translateX(-50%);border-radius:999px;background:radial-gradient(closest-side,#eafcff 0%,#7fe3ff 18%,#1a90b8 38%,#0a2233 62%,transparent 78%);opacity:.9;filter:blur(26px)}
.h7 .content{position:relative;text-align:center}
.h7 h2{font-size:clamp(1.9rem,4.6vw,3.8rem)}
.h7 .sub{max-width:580px;margin:20px auto 0;color:rgba(255,255,255,.72);font-size:14.5px}
/* ═══ Cartões do H7 Plus como painel de embarque ══════════════════════
A arte fica em cima (o .hmedia de sempre); o corpo é um letreiro de
aeroporto: mono, rótulos apagados, o nome do curso em placas de flap,
LED de status. As placas giram ao entrar na tela (hangar-motion.js).
Paleta do painel: chapa #131518, osso (o --cream da casa), âmbar. */
/* AUDITORIA 18/09/2026 (Klaus, H7 Plus): "remover a cor amarelada e colocar
branco no lugar". O cartao de embarque e' o mesmo na home e na pagina do
H7 Plus — o --cream (#efe7d6) vira branco dentro dele, como ja foi feito
no rodape, no carrossel de ambientes e no painel de datas. */
.hcard.hcard--board{--cream:#fff;background:#131518;color:var(--cream);border:1px solid #23262c;
font-family:"Geist Mono",ui-monospace,Consolas,monospace}
.hcard--board:hover{box-shadow:0 30px 70px -26px rgba(0,0,0,.8);border-color:#2f333a}
.hboard{padding:16px 18px 6px;display:flex;flex-direction:column;gap:9px;flex:1}
.hb-k{display:block;font-style:normal;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#79808c}
/* Reuniao 09/09/2026 (00:22:17) — Klaus: "esse Voo H7003, qual a ideia?"; Werikson:
"nao tem utilidade". A tag saiu do cartao e o status virou frase legivel
("Embarque disponivel"). Sozinho, o status ocupa a linha pela esquerda. */
.hb-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(236,231,216,.09)}
.hb-top .hb-st:only-child{margin-right:auto}
/* O DESTINO era o letreiro de flaps; Klaus: "so tirar esse letreiro aqui e colocar
o titulo normal — na verdade o destino E o nome do curso". */
.hb-dest{font-family:"Geist",sans-serif;font-weight:800;text-transform:uppercase;
font-size:clamp(19px,1.5vw,25px);line-height:1.06;letter-spacing:-.01em;color:var(--cream)}
/* ── O LED VERDE VOLTOU PARA A LINHA (call 10/09, 00:19:30, H25) ────────
Regressao nossa, da leva de 09/09. Esta regra existia para empilhar a
tag "Voo H7 00x" EM CIMA do status. O H11 tirou a tag; sem ela o .hb-st
virou o primeiro do .hb-top e passou a ser empilhado tambem — a
bolinha verde subiu para cima de "Embarque disponivel". A regra ganhava
(0,2,1 contra 0,1,0 do .hb-st{display:flex}), entao o conserto e' dizer
que ela nao vale para o status. A .hb-voo ficou sem uso no mesmo dia e
so continua aqui caso a tag volte. */
.hb-top>span:first-child:not(.hb-st){display:flex;flex-direction:column;gap:3px}
.hb-voo{font-weight:500;font-size:13px;letter-spacing:.08em;color:var(--cream)}
.hb-st{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#9aa895;padding-bottom:1px}
.hb-st .led{width:7px;height:7px;border-radius:50%;flex:none;background:#46d97e;box-shadow:0 0 6px rgba(70,217,126,.7);transition:.2s}
.hcard--board:hover .led{background:var(--azul-h7plus);box-shadow:0 0 7px rgba(65,126,244,.8)}
/* as placas: mesmo desenho do painel de embarque da faixa preta, em
miniatura. Uma palavra por grupo (.w) para o nome quebrar entre
palavras, nunca no meio de uma. */
.dest{--fl:clamp(15px,1.35vw,22px);display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:-4px;min-height:calc(var(--fl)*1.46)}
.dest .w{display:inline-flex;gap:3px;flex:none}
.dest .fl{display:inline-flex;align-items:center;justify-content:center;width:var(--fl);height:calc(var(--fl)*1.46);flex:none;
background:linear-gradient(180deg,#272c33 0%,#20252b 48%,#161a1f 52%,#1b2025 100%);border-radius:3px;
box-shadow:0 1px 0 rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.025);position:relative;
font-family:"Geist",sans-serif;font-weight:700;font-size:calc(var(--fl)*.8);line-height:1;color:var(--cream)}
.dest .fl::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55)}
.dest .fl.girando{color:#8a8577}
.hcard--board:hover .fl{filter:brightness(1.1)}
.hb-grid{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;padding-top:10px;border-top:1px solid rgba(236,231,216,.09)}
.hb-grid>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.hb-v{font-family:"Geist",sans-serif;font-weight:800;font-size:15px;line-height:1.1;text-transform:uppercase;letter-spacing:-.01em;color:var(--cream)}
.hb-valor{color:var(--azul-h7plus);display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.hb-valor small{font-family:"Geist Mono",monospace;font-size:9.5px;font-weight:400;color:#79808c;text-transform:none;letter-spacing:0}
.hcard--board .hfoot{border-top:1px solid rgba(236,231,216,.09);color:var(--cream);font-family:"Geist Mono",monospace;font-weight:500;letter-spacing:.14em;font-size:11.5px}
.hcard--board:hover .hfoot{color:var(--azul-h7plus)}
.h7cards{display:grid;gap:16px;grid-template-columns:1fr;margin-top:64px;padding-bottom:70px}
@media(min-width:640px){.h7cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.h7cards{grid-template-columns:repeat(4,1fr)}}
.hcard{background:#fff;color:var(--ink);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;text-align:left;transition:.3s;transform:translateY(0)}
.hcard:hover{transform:translateY(-6px);box-shadow:0 30px 70px -26px rgba(0,0,0,.6)}
.hmedia{position:relative;aspect-ratio:16/10;overflow:hidden}
.hbody{padding:18px 20px 4px}
.hbody small{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.hbody h3{font-family:Geist,sans-serif;font-weight:800;font-size:20px;margin-top:7px;line-height:1.15}
.hmeta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:16px 0 0;padding:14px 0;border-top:1px solid #ececec;font-size:13px;color:var(--muted)}
.hmeta b{color:var(--ink);font-weight:600}
.hprice{font-family:Geist,sans-serif;font-weight:800;font-size:19px;color:var(--ink)}
.hfoot{margin-top:auto;border-top:1px solid #ececec;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.hfoot svg{transition:.25s}
.hcard:hover .hfoot svg{transform:translateX(6px)}
.h7card{aspect-ratio:16/9.2;border-radius:16px;border:1px solid rgba(255,255,255,.09);position:relative;overflow:hidden;transition:.3s}
.h7card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.25)}
.h7card .art{position:absolute;inset:0}
.h7card img.aimg{z-index:2}
.h7card img.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.h7card .art>span{z-index:1}
.art-start .pl{z-index:1}
/* artes fallback */
.art-plano{background:#0a1626}
.art-plano .t{position:absolute;inset:0;display:grid;place-items:center;font-family:"Geist";font-weight:900;text-transform:uppercase;font-size:clamp(2.4rem,5vw,3.4rem);letter-spacing:-.03em;line-height:.82;color:#2f6bff;text-align:center}
.art-plano .corner{position:absolute;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.art-first{background:linear-gradient(160deg,#b9c7d4,#7e93a6 60%,#5d7286)}
.art-first .t{position:absolute;inset:0;display:grid;place-items:center;font-family:"Geist";font-style:italic;font-weight:800;font-size:clamp(1.9rem,4vw,2.6rem);color:#1d2f45;transform:rotate(-7deg);letter-spacing:-.02em}
.art-start{background:#f4f2ee}
.art-start .blob{position:absolute;right:0;top:0;width:62%;height:100%;background:#f4611c;border-bottom-left-radius:38%}
.art-start .pl{position:absolute;right:14%;top:16%;width:52%;color:#fff;filter:drop-shadow(0 14px 20px rgba(0,0,0,.2))}
.art-start .t{position:absolute;left:16px;bottom:10px;font-family:"Geist";font-weight:500;font-size:clamp(1.5rem,3vw,2rem);color:#141414;letter-spacing:-.04em}
.art-start .t b{font-weight:900}
.art-staff{background:linear-gradient(150deg,#2a2a2c,#101012)}
.art-staff .v{position:absolute;left:14px;top:14px;font-family:"Geist";font-weight:900;text-transform:uppercase;font-size:15px;color:#e8e8e8;transform:rotate(-4deg);letter-spacing:.02em}
.art-staff .v small{display:block;font-size:7px;letter-spacing:.3em;text-align:right}
.art-staff .t{position:absolute;left:16px;bottom:12px;font-family:"Geist";font-weight:500;font-size:clamp(1.5rem,3vw,2rem);color:#fff;letter-spacing:-.04em}
.art-staff .t b{font-weight:900}
/* Naves map */
/* altura responsiva por padrão: qualquer página com mapa já nasce certa,
sem precisar neutralizar min-height na página */
.mapwrap{position:relative;border-radius:22px;overflow:hidden;height:clamp(300px,55vh,540px);background:#e3e3e3}
@media(min-width:1024px){.mapwrap{height:600px}}
.mapwrap .roads{position:absolute;inset:0;opacity:.7;background:
linear-gradient(115deg,transparent 47.6%,#d0d0d0 48%,#d0d0d0 49.4%,transparent 49.8%),
linear-gradient(28deg,transparent 59.6%,#d5d5d5 60%,#d5d5d5 60.8%,transparent 61.2%),
linear-gradient(75deg,transparent 69.6%,#dadada 70%,#dadada 70.6%,transparent 71%),
radial-gradient(circle at 68% 38%,#d8d8d8 0 2px,transparent 3px)}
#leafmap{position:absolute;inset:0;z-index:2}
/* o cinza vive só no mapa-base. No #leafmap inteiro ele matava a cor de tudo
que fica por cima — pin selecionado, popup e o CTA do popup. */
.mapwrap .leaflet-tile-pane{filter:grayscale(1) contrast(.92) brightness(1.04)}
.mapwrap .leaflet-popup-content-wrapper{border-radius:14px;box-shadow:0 18px 50px -14px rgba(0,0,0,.35);padding:4px}
.mapwrap .leaflet-popup-content{margin:10px 12px;font-family:Geist,sans-serif}
.mapwrap .leaflet-popup-content b{display:block;font-family:Geist,sans-serif;font-size:14.5px;font-weight:800;color:var(--ink)}
.mapwrap .leaflet-popup-content small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.mapwrap .leaflet-popup-content .btn{width:100%;margin-top:10px;padding:10px 12px;font-size:10.5px;border-radius:9px}
/* o leaflet.css é carregado DEPOIS do site.css, então `.leaflet-container a{color:#0078A8}`
(0,1,1) vencia `.btn-primary{color:#fff}` (0,1,0) e o CTA do popup saía azul sobre preto.
Estas regras são (0,2,1)+ e ganham por especificidade, independente da ordem dos . */
.leaflet-container a.btn{color:var(--ink)}
.leaflet-container a.btn-primary,.leaflet-container a.btn-invert{color:#fff}
.leaflet-container a.btn-outline,.leaflet-container a.btn-cream{color:var(--ink)}
.leaflet-container a.btn-invert:hover{color:var(--ink)}
/* mesma causa: os créditos do mapa. Antes o grayscale do #leafmap apagava o azul do
leaflet.css; com o filtro só nos tiles, a cor precisa vir daqui.
O !important da bandeirinha é obrigatório — o leaflet.css usa display:inline!important. */
.leaflet-container .leaflet-control-attribution a{color:var(--muted)}
.leaflet-container .leaflet-attribution-flag{display:none!important}
.navepin{filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.pin{position:absolute;width:22px;transform:translate(-50%,-100%);transition:.2s;z-index:2}
.pin:hover{transform:translate(-50%,-108%) scale(1.15)}
.pin svg{width:100%;color:#151515;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.pin:hover,.pin.open{z-index:20}
.tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);width:210px;background:#fff;border-radius:14px;box-shadow:0 18px 50px -14px rgba(0,0,0,.35);padding:14px;opacity:0;visibility:hidden;transition:.2s;text-align:left;cursor:default}
.tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff}
.tip::before{content:"";position:absolute;top:100%;left:-8px;right:-8px;height:16px}
.pin.flip .tip::before{top:auto;bottom:100%}
.pin:hover .tip,.pin.open .tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.pin.flip .tip{bottom:auto;top:calc(100% + 10px)}
.pin.flip .tip::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#fff}
.tip b{display:block;font-family:Geist,sans-serif;font-size:14.5px;font-weight:800}
.tip small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.tip .btn{width:100%;margin-top:10px;padding:10px 12px;font-size:10.5px;border-radius:9px}
/* modal */
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:18px}
.modal.open{display:flex}
.modal .ovl{position:absolute;inset:0;background:rgba(10,10,10,.55);backdrop-filter:blur(4px)}
.modal .box{position:relative;width:min(430px,100%);background:#fff;border-radius:20px;padding:30px;box-shadow:0 40px 100px -30px rgba(0,0,0,.5)}
.modal .box h3{font-family:Geist,sans-serif;font-weight:800;text-transform:uppercase;font-size:1.35rem;padding-right:36px}
.modal .nfo{margin-top:12px;border:1px solid var(--border);border-radius:12px;padding:12px 14px;font-size:13.5px;background:#fafafa}
.modal .nfo b{display:block}
.modal label{display:block;font-size:12.5px;font-weight:500;margin:14px 0 6px}
.modal input{width:100%;height:48px;border:1px solid #c9c9c9;border-radius:10px;padding:0 14px;font-family:inherit;font-size:14px;outline:none}
.modal input:focus{border-color:var(--ink)}
.modal .x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:999px;border:1px solid var(--border);background:none;cursor:pointer;display:grid;place-items:center}
.modal .send{width:100%;margin-top:18px}
.modal .ok{display:none;text-align:center;padding:20px 0 6px}
.modal .ok svg{color:#1a9e4b;margin-bottom:8px}
/* Generosidade */
.infobox{border:1px solid var(--border);border-radius:16px;padding:6px 26px;background:#fff;margin-top:32px;font-size:14px}
.infobox .row{padding:18px 0;border-bottom:1px solid var(--border)}
.infobox .row:last-child{border-bottom:none}
.infobox b{display:block;margin-bottom:4px}
.form{border:1px solid var(--border);border-radius:24px;padding:32px;background:#fff}
@media(min-width:768px){.form{padding:42px}}
.form h3{font-family:"Geist",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,2.4vw,1.9rem)}
.form label{display:block;font-size:13px;margin:20px 0 8px;font-weight:500}
.form label .req{color:var(--red)}
.form input{width:100%;height:54px;border:1px solid #c9c9c9;border-radius:12px;padding:0 16px;font-family:inherit;font-size:14px;outline:none;background:#fff}
.form input:focus{border-color:var(--ink)}
.frow{display:grid;grid-template-columns:1fr;gap:0 16px}
@media(min-width:560px){.frow{grid-template-columns:1fr 1fr}}
.opts{display:grid;grid-template-columns:1fr;gap:12px;margin-top:8px}
@media(min-width:560px){.opts{grid-template-columns:1fr 1fr}}
.opt{display:flex;align-items:center;gap:12px;border:1.5px solid var(--border);border-radius:12px;padding:17px 16px;font-size:13.5px;cursor:pointer;transition:.2s;background:#fff}
.opt.sel{border-color:var(--ink)}
.opt .box{width:20px;height:20px;border:1.5px solid #bbb;border-radius:5px;display:grid;place-items:center;flex:none;font-size:12px}
.opt.sel .box{background:var(--ink);border-color:var(--ink);color:#fff}
.form .foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px;flex-wrap:wrap}
.form .foot small{font-size:11.5px;color:var(--muted);max-width:55%}
.form .foot small b{font-weight:600;text-decoration:underline}
.sendbtn{border:1.5px solid var(--ink);background:var(--ink);color:#fff;border-radius:12px;padding:16px 34px;font-family:inherit;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:.2s}
.sendbtn:hover{background:#000}
/* Testemunhos — o container é .tslider (ver mais abaixo). "tgrid" é o ID do elemento,
não uma classe: as regras .tgrid que existiam aqui eram código morto e saíram. */
.tcard{position:relative;aspect-ratio:3/4.4;border-radius:18px;overflow:hidden;background:#2a221c}
.tcard .photo{position:absolute;inset:-8%}
.tcard .photo,.tcard .aimg{filter:blur(9px) saturate(.9);transform:scale(1.08)}
.tcard .p{position:absolute;inset:0;display:grid;place-items:center;z-index:3}
.tcard .p span{width:54px;height:54px;border-radius:999px;background:rgba(255,255,255,.28);backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.45);transition:.25s}
.tcard:hover .p span{transform:scale(1.12);background:rgba(255,255,255,.4)}
/* ── Footer ──────────────────────────────────────────────────────────────
Três andares, de cima para baixo: o CONVITE (onde e quando — a última
chamada de toda página, com a copy aprovada de "Localização"), as
COLUNAS de links, e a fita do DNA com a barra legal. Antes o rodapé era
só a lista: 28 links empilhados (1.889px no celular) e nenhum convite
para o domingo — quem chegava ao fim da página ia embora sem endereço.
O convite lê como o cartão de embarque da agenda: rótulo miúdo em mono
em cima, valor em Inter embaixo (DIA · HORA · ONDE). Os dados são os do
arquivo até o painel confirmar (assets/institucional-loader.js). */
footer{border-top:1px solid var(--border);background:var(--bg);overflow:hidden}
/* ── O rodapé é a CHAPA do painel (02/09/2026) ─────────────────────────
A mesma chapa dos cartões do H7 Plus e do painel de partidas
(hangar-pages.css: --chapa). No creme da página o site não terminava,
desbotava; na chapa, o "Venha nos encontrar" é o último painel do
aeroporto. Tokens locais porque o hangar-pages.css não carrega na home.
Para voltar ao claro: apagar este bloco inteiro. */
/* ── O CREME DO RODAPE VIRA BRANCO (12/09/2026) ─────────────────────────
Mauricio, olhando a homolog: "no rodape o amarelo tem q ser branco". O
amarelo e' o --cream (#efe7d6) — sobre a chapa escura ele puxa para o
palha. E o mesmo espirito do G13 da call ("amarelo sai, branco entra em
titulo, botao e label sobre fundo escuro"), so que aplicado aqui.
A troca e' UMA linha: o --cream e' redefinido DENTRO do rodape, entao
todo `var(--cream)` daqui para baixo ja nasce branco — titulo, valores,
titulo de coluna, botao, seta de voltar ao topo. O creme da marca
continua intacto no resto do site (placas de embarque, cartoes). As
rgba() logo abaixo eram creme na mao e foram junto. */
footer{--cream:#fff;
--chapa:#131518;--chapa-borda:#23262c;--chapa-fio:rgba(255,255,255,.12);--chapa-apagado:#9aa3b0;
background:var(--chapa);color:var(--cream);border-top:0}
footer .fconvite{border-bottom-color:var(--chapa-fio)}
footer .fconvite-fatos dt{color:var(--chapa-apagado)}
footer .fconvite-fatos dd{color:var(--cream)}
footer .fconvite-fatos dd a{border-bottom-color:rgba(255,255,255,.32)}
footer .fconvite-fatos dd a:hover{border-bottom-color:var(--cream)}
footer .facts .btn-primary{background:var(--cream);color:var(--ink);border-color:var(--cream)}
footer .facts .btn-primary:hover{background:#fff;border-color:#fff}
footer .facts .btn-outline{color:var(--cream);border-color:rgba(255,255,255,.4)}
footer .facts .btn-outline:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
footer .logo img{filter:brightness(0) invert(1)}
footer .fbrand p,footer .fcol a,footer .fbar small{color:var(--chapa-apagado)}
footer .fcol a:hover{color:var(--cream)}
footer .fcol h4{color:var(--cream)}
footer .watermark p,footer .watermark .track span{color:rgba(255,255,255,.06)}
footer .fbar{border-top-color:var(--chapa-fio)}
footer .totop{border-color:rgba(255,255,255,.35);color:var(--cream)}
footer .totop:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
/* ── O RODAPE VAZA NAS LATERAIS (call 10/09/2026, H28) ──────────────────
"ajustar o rodape aumentando o espacamento e tornar o texto vazado nas
laterais para que ele preencha a tela corretamente."
A chapa escura ja ia de ponta a ponta; quem parava no meio era o
CONTEUDO, preso ao .wrap (max-width 1720px). Em tela larga o rodape
ficava com duas faixas escuras vazias dos lados e o texto numa caixa no
centro. Agora o conteudo acompanha a tela e so guarda o respiro das
bordas. Vale para o site inteiro: o rodape e o mesmo em todas as
paginas. */
footer .wrap{max-width:none}
@media(min-width:1400px){footer .wrap{padding:0 64px}}
/* Reuniao 09/09/2026 (00:25:29) — Klaus: "no footer, ajustar o padding tambem".
Call 10/09 (H28): mais espacamento ainda — 80/56 -> 104/72. */
.fconvite{display:grid;gap:30px;padding:104px 0 72px;border-bottom:1px solid var(--border)}
@media(min-width:900px){.fconvite{grid-template-columns:1fr auto;align-items:end;gap:48px}}
.fconvite-h{font-family:"Geist",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
line-height:.98;font-size:clamp(2rem,4.2vw,3.4rem);margin:0;text-wrap:balance}
.fconvite-fatos{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:12px 40px}
.fconvite-fatos>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.fconvite-fatos dt{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.fconvite-fatos dd{margin:0;font-size:15px;font-weight:600;color:var(--ink);line-height:1.4}
.fconvite-fatos dd a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(21,21,21,.28);transition:border-color .2s}
.fconvite-fatos dd a:hover{border-bottom-color:var(--ink)}
.facts{display:flex;flex-direction:column;gap:12px}
.facts .btn{min-width:220px}
@media(max-width:899px){.facts{flex-direction:row;flex-wrap:wrap}.facts .btn{flex:1 1 200px;min-width:0}}
/* As colunas. No desktop cinco: marca · Hangar 7 · Ambientes (em duas
subcolunas — 12 links em 6 linhas, e não uma torre) · Formação · Social.
No meio, duas. No celular, uma grade de duas colunas por áreas: a marca
e os Ambientes atravessam, Hangar 7 e Formação dividem uma linha, e o
Social vira uma fila horizontal — o rodapé cai de 24 linhas de link
para 12. */
.fgrid{display:grid;gap:36px 28px;padding-top:80px;
grid-template-columns:1fr 1fr;
grid-template-areas:"marca marca" "casa forma" "amb amb" "social social"}
.fbrand{grid-area:marca}.fcol{grid-area:casa}.fcol-amb{grid-area:amb}.fcol-forma{grid-area:forma}.fcol-social{grid-area:social}
@media(min-width:640px){.fgrid{grid-template-columns:1fr 1fr;grid-template-areas:"marca marca" "casa forma" "amb amb" "social social"}}
@media(min-width:1100px){.fgrid{gap:44px 32px;padding-top:72px;
grid-template-columns:1.3fr .8fr 1.7fr 1fr .8fr;
grid-template-areas:"marca casa amb forma social"}}
.fbrand p{margin-top:18px;font-size:14px;color:var(--muted);max-width:26ch;line-height:1.55}
.fcol h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-wrap:balance}
/* no celular "Formação e conteúdo" quebra em duas linhas ao lado de
"Hangar 7": os dois títulos reservam a mesma altura para as listas
começarem alinhadas */
@media(max-width:639px){.fcol h4{min-height:2.6em}}
.fcol ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:12px}
.fcol a{font-size:14px;color:var(--muted)}
.fcol a:hover{color:var(--ink)}
.fcol-amb ul{display:block;columns:2;column-gap:28px}
.fcol-amb li{break-inside:avoid;padding:0 0 12px}
.fcol-social ul{flex-direction:row;flex-wrap:wrap;gap:8px 22px}
@media(min-width:1100px){.fcol-social ul{flex-direction:column;gap:12px}}
.coords{margin-top:20px;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.watermark{margin-top:56px;overflow:hidden;user-select:none;pointer-events:none}
.watermark p{font-family:"Geist",sans-serif;font-weight:800;text-transform:uppercase;white-space:nowrap;font-size:clamp(2.5rem,9vw,7.5rem);line-height:1;letter-spacing:-.02em;color:rgba(21,21,21,.07)}
/* ── O DNA passando no rodapé (pedido do dono) ──────────────────────────
"colocar esse texto em markee pra ficar passando… da direita para a
esquerda". É o MESMO mecanismo do .marquee do meio da página, e não um
segundo: a fita carrega o texto DUAS vezes e o @keyframes scroll leva
ela até -50% — o ponto exato em que a segunda cópia está onde a primeira
começou, então o laço não tem emenda visível.
A tipografia continua a do .watermark (fantasma gigante); o que mudou é
o
parado ter virado fita. Quem liga "reduzir movimento" não vê nada
deslizando — a regra está no bloco prefers-reduced-motion no fim deste
arquivo, junto com as outras. */
.watermark .track{display:inline-flex;white-space:nowrap;will-change:transform;animation:scroll 24s linear infinite}
.watermark .track span{font-family:"Geist",sans-serif;font-weight:800;text-transform:uppercase;white-space:nowrap;
font-size:clamp(2.5rem,9vw,7.5rem);line-height:1;letter-spacing:-.02em;color:rgba(21,21,21,.07);padding-right:.4em}
.fbar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding:32px 0}
.fbar small{font-size:12px;color:var(--muted)}
.totop{width:44px;height:44px;border-radius:999px;border:1px solid #bbb;display:grid;place-items:center;background:none;cursor:pointer;color:var(--ink);transition:.2s}
.totop:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* ===== Eventos ===== */
.erow h3 a{color:inherit;text-decoration:none}
.erow h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.evmeta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.evmeta .vcard h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.evmeta .vcard p{font-size:16px;font-weight:600;color:var(--ink);margin-top:8px}
@media(max-width:760px){.evmeta{grid-template-columns:1fr}}
.sponsor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.sponsor-slot{border:1.5px dashed #c9c9c9;border-radius:16px;background:#f7f7f7;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.sponsor-slot img{max-width:70%;max-height:60%;object-fit:contain}
@media(max-width:760px){.sponsor-grid{grid-template-columns:repeat(2,1fr)}}
/* ===== Breadcrumbs (estilo eyebrow, menor) ===== */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin-bottom:22px;color:var(--muted)}
.photo .crumbs,[style*="color:#fff"] .crumbs{color:inherit;opacity:.75}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:none}
.photo .crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.55;letter-spacing:0}
.crumbs [aria-current]{color:inherit}
/* ===== Catálogo de ambientes ===== */
.ambcat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
@media(max-width:980px){.ambcat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ambcat{grid-template-columns:1fr}}
.ambcard{background:#fff;border-radius:22px;padding:12px 12px 16px;display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1.5px solid transparent;transition:transform .25s,box-shadow .25s,border-color .25s}
.ambcard:hover{transform:translateY(-4px);box-shadow:0 26px 54px -30px rgba(0,0,0,.28);border-color:var(--border)}
.ambcard .ph{border-radius:14px;overflow:hidden;aspect-ratio:16/9.6;background:linear-gradient(135deg,#1c1c1c,#3a3a3a)}
.ambcard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.ambcard .row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 10px 6px}
.ambcard .row h3{font-size:19px;letter-spacing:-.01em;font-family:Geist,sans-serif}
.ambcard .quem{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.ambcard .assin{font-size:13.5px;color:#555;line-height:1.55;margin-top:10px}
.ambcard .lg{flex-shrink:0;max-width:118px;display:flex;justify-content:flex-end}
.ambcard .lg img{max-height:52px;max-width:118px;width:auto;filter:brightness(0)}
.ambcard .btn{margin:14px 0 0;width:100%;justify-content:center;border-radius:13px;padding:15px;font-size:11px}
/* Conectar: transição suave entre "Para Você" e "Para seus filhos" */
.confade{animation:confade .38s ease}
@keyframes confade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.conectarimg.plain{background:none;box-shadow:none;border-radius:0;overflow:visible}
.conectarimg.plain::after{display:none}
/* "Para seus filhos": as 4 fotos na MESMA disposicao e tamanho da ilustracao rocket-kids.webp
que estava aqui (medida no print: quadro de 650x525, grande atras no alto, tres menores na
frente). O .kidsrot e um palco com a proporcao 650:525 centralizado na caixa; cada cartao
usa % desse palco, entao a composicao nao muda de forma com a altura da caixa. */
.kidsrot{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);aspect-ratio:650/525;z-index:1}
.kidsrot .kfoto{position:absolute;overflow:hidden;border-radius:16px;background:linear-gradient(135deg,#dcd1bd,#ab9c82);box-shadow:0 18px 38px rgba(22,19,15,.20)}
.kidsrot .kfoto .aimg{border-radius:inherit}
/* 1 grande atras (louvor) | 2 esquerda (tia de rosa) | 3 centro, na frente de tudo (mae e filha) | 4 direita (pintura) */
.kidsrot .kfoto:nth-child(1){left:18.2%;top:0;width:68.8%;height:54.3%;transform:rotate(-1deg);z-index:1}
.kidsrot .kfoto:nth-child(2){left:0;top:43.8%;width:31.5%;height:46.7%;transform:rotate(-3deg);z-index:2}
.kidsrot .kfoto:nth-child(3){left:32.3%;top:57.1%;width:35.4%;height:42.9%;transform:rotate(1deg);z-index:4}
.kidsrot .kfoto:nth-child(4){left:68.5%;top:38.1%;width:31.5%;height:54.3%;transform:rotate(6deg);z-index:3}
/* ===== Testemunhos: slider da playlist do YouTube ===== */
.tslider{margin-top:48px;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.tslider::-webkit-scrollbar{display:none}
.tslider:active{cursor:grabbing}
.tslider .tcard{flex:0 0 clamp(210px,23vw,300px);scroll-snap-align:start;user-select:none}
.tcard.tv .aimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;transform:none}
.tcard.tv::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent 45%);z-index:2}
.tcard .tt{position:absolute;left:14px;right:14px;bottom:12px;z-index:4;color:#fff;font-size:12.5px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tarr{position:absolute;top:50%;transform:translateY(-30%);z-index:5;width:46px;height:46px;border-radius:999px;border:0;background:#fff;color:#151515;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px -8px rgba(0,0,0,.4);transition:.2s}
.tarr:hover{transform:translateY(-30%) scale(1.08)}
/* setas encostadas na borda do .wrap (não em -6px): em telas onde o wrap ocupa a viewport
inteira o -6px empurrava o documento e criava barra de rolagem horizontal */
.tarr.prev{left:0}.tarr.next{right:0}
@media(max-width:760px){.tarr{display:none}}
/* ── Proporção dos testemunhos (pedido do dono) ────────────────────────────
No PC, a mesma proporção de um vídeo do YouTube (16/9) — que é a proporção
real da thumbnail que já entra ali (i.ytimg.com/…/hqdefault.jpg), então o
object-fit deixou de cortar a imagem em pé. No celular, 9/16: fica com cara
de stories, que foi o pedido.
Só a proporção e a largura do cartão mudam; arrastar, snap e setas seguem
sendo o mesmo .tslider. O corte em 761px é o MESMO em que as setas .tarr
aparecem (regra logo acima): acima dele há mouse e largura para o 16/9;
abaixo, dedo e tela em pé. Um corte só, dois comportamentos que combinam. */
.tcard{aspect-ratio:9/16}
@media(min-width:761px){
.tcard{aspect-ratio:16/9}
.tslider .tcard{flex:0 0 clamp(300px,34vw,460px)}
}
.ytovl{position:fixed;inset:0;background:rgba(5,5,5,.88);z-index:300;display:grid;place-items:center;padding:20px}
.ytbox{position:relative;width:min(960px,100%)}
.ytbox iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:#000;display:block}
.ytx{position:absolute;top:-46px;right:0;background:none;border:0;color:#fff;font-size:22px;cursor:pointer;padding:8px}
/* hero com thumbnail real do YouTube: sem texturas por cima */
.video.yt::after{display:none}
.video.yt .halftone{display:none}
.video.yt .aimg{filter:none;object-fit:cover}
/* ===== Hero: a espera pela thumbnail real do último vídeo =====
O quadro não mostra imagem nenhuma até a verdadeira chegar. O que preenche
a espera é o próprio gradiente navy do .photo com um brilho lento passando
por cima — diz "está vindo" sem prometer uma imagem que não é aquela.
A classe .carregando é posta pelo latest-video.js (nunca no HTML): sem JS,
ou se a busca falhar, o quadro fica parado no gradiente em vez de piscar
para sempre. Quando a thumbnail termina de DECODIFICAR, ela entra em fade
e o brilho sai — a troca acontece uma vez só, e para a imagem certa. */
.video .aimg{opacity:0;transition:opacity .65s ease}
.video .aimg.pronta{opacity:1}
.video.carregando::before{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.085) 50%,transparent 66%);
background-size:240% 100%;animation:videoluz 2s ease-in-out infinite}
@keyframes videoluz{from{background-position:170% 0}to{background-position:-50% 0}}
/* ===== Café de Boas-Vindas: hero com formulário ===== */
.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}
.cafehero{position:relative;min-height:92svh;display:flex;align-items:center;border-radius:0 0 28px 28px;overflow:hidden;background:#20242c;padding:150px 0 70px}
.cafehero .media{position:absolute;inset:0}
.cafehero .media img,.cafehero .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cafehero .veu{position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,8,10,.82) 18%,rgba(8,8,10,.42) 58%,rgba(8,8,10,.28))}
.cafehero .inner{position:relative;z-index:3;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;width:100%}
.cafeform{max-width:430px;width:100%;justify-self:end}
.cafeform .cfk{font-family:"Geist",sans-serif;font-weight:800;font-size:clamp(20px,2.2vw,25px);letter-spacing:-.02em;color:#fff;margin-bottom:14px}
.cafeform input{display:block;width:100%;font:inherit;font-size:16px;padding:16px 20px;border:0;border-radius:14px;background:#fff;color:var(--ink);margin-top:12px;box-shadow:0 20px 50px -30px rgba(0,0,0,.55)}
.cafeform input::placeholder{color:#767676}
.cafeform input:focus{outline:2px solid rgba(255,255,255,.85);outline-offset:2px}
.cafeform button{width:100%;margin-top:12px;font:700 15.5px Inter,sans-serif;background:#e9ddc9;color:#232323;border:0;border-radius:14px;padding:17px;cursor:pointer;transition:.2s}
.cafeform button:hover{background:#fff;transform:translateY(-1px)}
.cafeform button:disabled{opacity:.55}
.cafeform small{display:block;margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.8);text-align:center;line-height:1.8}
.cafeform small a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.cfmsg{display:none;font-size:13px;border-radius:10px;padding:11px 13px;margin-top:12px}
.cfmsg.err{display:block;background:#fde3e1;color:#8a1a12}
/* confirmação de sucesso no mesmo padrão da caixa de erro (verde acessível) */
.cfmsg.ok{display:block;background:#e6f6ec;color:#116329}
.cafeok{background:rgba(12,12,14,.55);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);border-radius:18px;padding:26px 24px;color:#fff}
.cafeok h3{font-family:"Geist",sans-serif;font-weight:800;font-size:21px;letter-spacing:-.02em}
.cafeok p{margin-top:10px;font-size:14px;line-height:1.7;color:rgba(255,255,255,.88)}
.cafehero .crumbs,.cafehero .crumbs a{color:rgba(255,255,255,.75)}
.cafehero .inner .crumbs{grid-column:1/-1;align-self:start;margin-bottom:6px}
@media(max-width:880px){
.cafehero{padding:120px 0 40px;min-height:auto}
.cafehero .inner{grid-template-columns:1fr;gap:30px}
.cafeform{justify-self:stretch;max-width:none}
}
/* =========================================================================
RESPONSIVO — correções medidas em Chrome (360/390/768/1024/1440)
Tudo aqui é aditivo e só vale onde precisa: nada muda em ≥1200px.
========================================================================= */
/* --- Podcast: a foto do casal (369px de largura) estourava o card de 318px no mobile.
Acima de 960px o card vira grid de 3 colunas e a foto já cabe — por isso o recorte. --- */
@media(max-width:959px){
.podcast .pph{overflow:hidden;border-radius:28px 28px 0 0}
.podcast .pph img{max-width:100%;object-position:bottom}
}
/* --- Toolbar fixa: em telas estreitas ela rola na horizontal.
1) o item ativo (a maior intenção do site) vem primeiro, já visível sem rolar;
2) scroll-snap para parar sempre num item inteiro;
3) véu na borda direita avisando que há mais coisa para o lado. --- */
@media(max-width:719px){
.toolbar{scroll-snap-type:x proximity;scroll-padding-inline:8px}
.toolbar .fan{order:-2;scroll-snap-align:start}
.toolbar a{scroll-snap-align:start;min-height:44px;display:inline-flex;align-items:center}
.toolbar a.active{order:-1}
.toolbar::after{content:"";flex:none;position:sticky;right:0;align-self:stretch;
width:40px;margin:-8px -8px -8px -40px;border-radius:0 999px 999px 0;
background:linear-gradient(90deg,rgba(22,22,22,0),#161616 72%);pointer-events:none;opacity:0}
/* o véu só aparece quando a toolbar realmente rola, e some ao chegar no fim.
sem suporte a scroll timeline ele fica invisível — nunca cobre um item que já cabe. */
@supports (animation-timeline:scroll()){
.toolbar::after{animation:tbveu linear both;animation-timeline:scroll(self inline)}
}
}
@keyframes tbveu{0%,72%{opacity:1}100%{opacity:0}}
/* Com o link ativo movido para o INÍCIO do DOM (ordem certa para o foco por teclado),
o order:1 devolve a ele a última posição visual em ≥720px — que é como está hoje.
É no-op enquanto o HTML não muda, porque hoje o ativo já é o último do DOM. */
@media(min-width:720px){.toolbar a.active{order:1}}
/* --- Alvos de toque: mínimo de 44px onde o dedo encosta.
Recorte em 1199px porque é onde o site troca o menu desktop pelo hambúrguer. --- */
@media(max-width:1199px){
.btn{min-height:44px;white-space:normal;text-align:center}
.burger{width:44px;height:44px} /* era 40x40; o ícone é centralizado, não muda de tamanho */
.mobile > a{min-height:44px;display:flex;align-items:center}
.macc summary{min-height:44px}
.macc .sub a{padding:11.5px 14px}
.fcol ul{gap:2px}
.fcol a{display:flex;align-items:center;min-height:44px}
.fcol-amb li{padding:0} /* o link de 44px já espaça */
.fcol-social ul{gap:2px 22px}
.modal .x{width:44px;height:44px;top:10px;right:10px} /* fechar do modal: era 34x34 */
.ytx{padding:11px 14px} /* fechar do lightbox: alvo ~44px */
}
/* --- Respiro em telas pequenas: os paddings de desktop comiam a viewport --- */
@media(max-width:560px){
.navebanner{padding:52px 22px 150px} /* eram 44px de lado: sobravam só 232px de 360 */
}
/* --- .erow: itens de grid nascem com min-width:auto, então uma palavra longa (um endereço,
por exemplo) empurrava a linha inteira e estourava o documento em telas ~320px.
Mesmo tratamento que o .amb-slide já usa. O overflow-wrap:anywhere permite que a
coluna encolha de verdade (só quebra a palavra quando ela realmente não cabe). --- */
.erow>*{min-width:0;overflow-wrap:anywhere}
/* --- Mesma família de correção para o .two e para campos de formulário.
Itens de grid/flex nascem com min-width:auto, então um (que tem largura
intrínseca por causa do `size` padrão) travava a coluna e empurrava o documento.
O !important abaixo atinge UMA única página do site — /app/checkin/, a única que
força `grid-template-columns:1fr 1fr` inline; em todo o resto o .two já é 1fr
abaixo de 1024px, então é literalmente no-op. --- */
.two>*{min-width:0}
input,select,textarea{min-width:0;max-width:100%}
@media(max-width:719px){.two{grid-template-columns:1fr!important}}
/* --- Colagem da jornada: os carimbos têm largura fixa em px (definida no HTML) e
ficavam maiores que as próprias fotos no mobile. Escalar mantém a proporção
entre eles sem precisar sobrescrever a largura inline. --- */
@media(max-width:639px){
.stamp{transform:rotate(var(--r,0deg)) scale(.8)}
}
@media(max-width:480px){
.collage{height:330px}
.stamp{transform:rotate(var(--r,0deg)) scale(.6)}
}
/* =========================================================================
FOCO VISÍVEL — navegação por teclado.
currentColor acompanha a cor do texto, então o anel funciona tanto no fundo
claro (traço escuro) quanto nos blocos escuros (toolbar, painéis) sem regra
por contexto. :focus-visible não dispara em clique/toque — o mouse não muda.
Este bloco vive no FIM do arquivo de propósito: os `outline:none` de
.form input / .modal input têm a mesma especificidade, e aqui a ordem
garante que o teclado sempre ganha o anel de volta.
========================================================================= */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
outline:2px solid currentColor;outline-offset:2px}
/* =========================================================================
MENOS MOVIMENTO — quem liga "reduzir movimento" no sistema não deve ver
nada pulsando, flutuando ou deslizando. O .reveal, o marquee, o header e o
GSAP da home já respeitam a preferência; este bloco cobre o que faltava.
========================================================================= */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.play span{animation:none} /* pulso do botão de play do hero */
.video.carregando::before{animation:none} /* brilho de espera do quadro do vídeo */
.video .aimg{transition:none} /* a thumbnail real aparece sem fade */
.pcard{animation:none!important} /* "floaty" da colagem (vem inline no HTML) */
.confade{animation:none} /* fade da troca Você/Filhos */
.amb-slide{transition:none} /* troca de slide do rotator sem cross-fade */
/* a barra de progresso do slide não anima: fica cheia, marcando qual está ativo */
.amb-dots button.on::after{animation:none;transform:none}
/* o DNA no rodapé para de deslizar e fica legível parado — o texto continua
inteiro na tela, só não anda (mesma regra do .marquee lá em cima) */
.watermark .track{animation:none}
/* os cartões da agenda param de deslizar sozinhos quando as setas são
usadas; o arrastar com o dedo continua, porque é ação da pessoa */
.eslider{scroll-behavior:auto}
}