com vários

dentro, e não só um

solto. */ .amb-lead p + p { margin-top: 12px; } .amb-quando-txt + .amb-quando-txt { margin-top: 10px; } /* Selo pequeno (categoria do conteúdo): rótulo em mono com o ponto na cor do ambiente — sem a pílula. */ .bl-selo, .amb-selo { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-family: var(--mono, "Geist Mono", monospace); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; } .bl-selo::before, .amb-selo::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--amb); } .bl-acoes, .amb-acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } /* ───────────────────────── ZONA 1 · hero ──────────────────────── */ /* Sem o degradê da cor do ambiente: a lavagem de cor por trás do título era o traço mais "gerado" do hero. A cor do ambiente aparece onde é objeto — no carimbo, no LED do relógio, no botão. */ .bl-hero, .amb-hero { background: var(--bg); padding: 150px 0 0; } .bl-hero-grid, .amb-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center; padding-bottom: 44px; } /* .amb-chip fica sem apelido: `.bl-chip` já é outra peça em blocos.css (ver a nota "OS DOIS NOMES" no topo). Ele é um CARIMBO (.stamp em assets/hangar-pages.css) na cor do ambiente; aqui só o que o carimbo genérico não sabe: o logo cabe dentro. */ .stamp.amb-chip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 8px; margin: 6px 0 22px; max-width: 100%; white-space: normal; text-align: left; line-height: 1.3; /* a tinta é a cor do ambiente ESCURECIDA: o amarelo do Flight puro sobre o fundo claro dava 1,7:1 — carimbo que não se lê não é carimbo */ --tinta: color-mix(in srgb, var(--amb) 55%, var(--ink)); } .amb-chip img { height: 18px; width: auto; display: block; flex: none; } @media (max-width: 720px) { .stamp.amb-chip { font-size: 11px; padding: 8px 12px 7px; --r: -2deg; } } .bl-nome, .amb-nome { font-size: clamp(2.5rem, 7vw, 5.2rem); margin-top: 20px; } .bl-assin, .amb-assin { font-family: "Geist", sans-serif; font-weight: 700; font-size: clamp(18px, 2.3vw, 24px); line-height: 1.3; letter-spacing: -.01em; margin-top: 18px; max-width: 560px; } .bl-desc, .amb-desc { margin-top: 14px; max-width: 560px; font-size: 15.5px; line-height: 1.7; color: var(--muted); } /* Palavras-chave (campo `marquee`) e a linha "Encontros · Onde": as duas são a linha de fatos em mono do cabeçalho (.ph-strip, hangar-pages.css). Aqui só o respiro entre elas. */ .amb-tags { margin-top: 22px; } .amb-fatos { margin-top: 18px; } .bl-hero-foto, .amb-hero-foto { position: relative; margin: 0; } .bl-hero-foto img, .amb-hero-foto img { width: 100%; aspect-ratio: 4/3.2; object-fit: cover; display: block; border-radius: 18px; box-shadow: 0 24px 50px -34px rgba(0, 0, 0, .4); } /* Call 10/09/2026 (00:24:58, A13) — "altura padrão e escurecimento do banner para substituir o divisor". A pista (.runway) saiu do cabeçalho das páginas de ambiente; quem marca o fim do hero agora é o pé da foto escurecendo. O degradê é só na faixa de baixo (não na foto inteira, para não apagar rosto de ninguém) e não capta clique. */ .amb-hero-foto::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; border-radius: 0 0 18px 18px; pointer-events: none; background: linear-gradient(180deg, rgba(12, 12, 12, 0) 0%, rgba(12, 12, 12, .48) 100%); } /* ───────────── ZONA 1 · o que você encontra + prova ───────────── */ /* teto de largura: numa .wrap de 1720px as linhas ficariam largas demais para ler (título de um lado, texto do outro) */ .bl-rows, .amb-rows { margin-top: 40px; border-top: 1px solid var(--border); max-width: 1120px; } /* sem o quadrado numerado: a lista não é sequência */ .bl-row, .amb-row { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--border); } .bl-row h3, .amb-row h3 { font-family: "Geist", sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(18px, 2vw, 22px); letter-spacing: -.01em; line-height: 1.1; } .bl-row p, .amb-row p { font-size: 14.5px; line-height: 1.7; color: var(--muted); } /* Frase-manifesto: o momento de cor cheia da página. Sem apelido `.bl-frase`: o nome já é de outra peça em blocos.css (ver a nota "OS DOIS NOMES" no topo). */ .amb-frase { background: var(--amb); color: var(--amb-ink); border-radius: 28px; margin: 0 0 20px; } .amb-frase .wrap { padding-top: 74px; padding-bottom: 74px; } .amb-frase p { font-family: "Geist", sans-serif; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; font-size: clamp(1.6rem, 4.2vw, 3.1rem); max-width: 900px; } .bl-gal, .amb-gal { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; } .bl-gal img, .amb-gal img { width: 100%; height: 100%; min-height: 220px; max-height: 400px; object-fit: cover; border-radius: 20px; display: block; } /* ────────────────────── ZONA 2 · entregáveis ──────────────────── */ .bl-cards, .amb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 34px; } .bl-card, .amb-card { display: flex; flex-direction: column; background: #fff; border-radius: 14px; padding: 26px 24px; border: 1px solid var(--border); color: var(--ink); transition: border-color .2s; } a.bl-card:hover, a.amb-card:hover { border-color: var(--ink); } /* imagem do entregável — opcional, o cartão funciona sem ela. Sem sangria negativa: assim ela nunca briga com o padding do cartão. */ :is(.bl-card, .amb-card) :is(.bl-capa, .amb-capa) { display: block; width: 100%; max-width: 100%; margin: 0 0 16px; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; } .bl-card h3, .amb-card h3 { font-family: "Geist", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -.01em; margin-top: 14px; } .bl-card p, .amb-card p { margin-top: 9px; font-size: 14px; line-height: 1.65; color: var(--muted); } :is(.bl-card, .amb-card) :is(.bl-mais, .amb-mais) { margin-top: auto; padding-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); } :is(.bl-card, .amb-card) :is(.bl-mais, .amb-mais)::after { content: " →"; color: var(--amb); } :is(.bl-card, .amb-card) :is(.bl-quando, .amb-quando) { margin-top: 10px; font-size: 12px; color: var(--muted); } /* ────────────────────── ZONA 3 · calendário ───────────────────── As datas são linhas do painel de partidas (.board, assets/hangar-pages.css). Aqui só o que é deste template: o texto acima e a largura do painel vazio. */ .bl-quando-txt, .amb-quando-txt { margin-top: 18px; font-size: 15px; line-height: 1.6; } .bl-quando-txt b, .amb-quando-txt b { font-weight: 700; } .bl-datas--so-agenda, .amb-datas--so-agenda { max-width: 640px; } .board-empty p + p { margin-top: 8px; } /* ───────────────────── ZONA 4 · próximo passo ─────────────────── A tira por fio da home (.vgrid/.vcard, site.css). Aqui só o perfil em mono acima do título e a ação embaixo. */ .amb-passos { margin-top: 34px; } .amb-passos .vcard > div { display: flex; flex-direction: column; min-width: 0; } .amb-passos .vcard .tk-k { display: block; margin-bottom: 10px; } .amb-passos .vcard .rt-x { display: block; margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); } .amb-passos .vcard:hover .rt-x { text-decoration: underline; text-underline-offset: 4px; } .bl-convite, .amb-convite { position: relative; overflow: hidden; background: var(--ink); color: #fff; border-radius: 24px; padding: 52px 44px 150px; margin-top: 22px; } /* o texto e os botões ficam por cima do avião (.swoosh, site.css) */ .bl-convite > :not(.swoosh), .amb-convite > :not(.swoosh) { position: relative; z-index: 3; } @media (min-width: 1024px) { .bl-convite, .amb-convite { padding-bottom: 60px; } } .bl-convite h3, .amb-convite h3 { font-family: "Geist", sans-serif; font-weight: 800; font-size: clamp(21px, 2.9vw, 30px); letter-spacing: -.02em; } .bl-convite p, .amb-convite p { margin-top: 14px; max-width: 640px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .74); } /* ═══════════════════════════════════════════════════════════════ AS ZONAS DO CONTRATO (docs/design/CONTRATO-AMBIENTE.md) ───────────────────────────────────────────────────────────────── Peças novas, escritas em 24/08/2026 quando a página de ambiente passou de 5 para 10 zonas. Elas NÃO ganham o apelido `.bl-*` de propósito: só o assets/amb-render.js as usa hoje, e o motor de blocos tem peças próprias para texto, citação, FAQ e vídeo. Criar um `.bl-conta` que ninguém desenha é justamente a duplicação que a nota no topo deste arquivo existe para evitar. No dia em que um bloco precisar da mesma peça, ela ganha o apelido aqui, sem cópia. Tudo abaixo se pinta com --amb/--amb-ink, que o amb-render.js já validou em 4.5:1 — nenhuma cor nova é escrita à mão. ═══════════════════════════════════════════════════════════════ */ /* ── ZONA 1 · a linha de acolhida, embaixo dos botões do hero ──── */ .amb-acolhida { margin-top: 22px; max-width: 560px; font-size: 14.5px; line-height: 1.7; color: var(--muted); padding-left: 16px; border-left: 1px solid var(--amb-linha); } /* ── ZONA 2 · o próximo encontro, com cronômetro ──────────────── O relógio é o PAINEL EM PLACAS de assets/hangar-pages.css (.amb-conta e .amb-conta__*): chapa escura, casa por placa, LED na cor do ambiente. Aqui só a medida. */ .amb-conta { margin-top: 26px; max-width: 820px; } /* A nota logo abaixo do cronômetro: informação crítica e literal ("o check-in abre 10 minutos antes"). Fica com a cor do ambiente na borda para não se perder no meio do texto de apoio. */ .amb-nota { margin-top: 18px; max-width: 620px; padding: 12px 16px; border-left: 1px solid var(--amb); background: var(--amb-nevoa); border-radius: 4px 12px 12px 4px; font-size: 14.5px; line-height: 1.6; color: var(--ink); } /* ── ZONA 3 · seções de texto corrido ─────────────────────────── Medida de leitura curta de propósito: é o único lugar da página com vários parágrafos seguidos. */ .amb-texto { margin-top: 18px; max-width: 680px; } .amb-texto p { font-size: 16px; line-height: 1.8; color: var(--ink); } .amb-texto p + p { margin-top: 16px; } .amb-cit { margin: 26px 0 0; max-width: 680px; padding: 22px 26px; background: #fff; border-radius: 4px 12px 12px 4px; border-left: 1px solid var(--amb); } .amb-cit p { font-family: "Geist", sans-serif; font-weight: 700; letter-spacing: -.01em; font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5; color: var(--ink); } .amb-cit cite { display: block; margin-top: 12px; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .amb-lista { margin-top: 24px; max-width: 680px; list-style: none; } .amb-lista li { position: relative; padding: 12px 0 12px 30px; font-size: 15px; line-height: 1.7; color: var(--ink); border-bottom: 1px solid var(--border); } .amb-lista li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 8px; height: 8px; border-radius: 99px; background: var(--amb); } /* ── ZONA 4 · manifesto — a faixa de cor cheia ─────────────────── */ /* Reunião 09/09/2026 (01:00:22) — Klaus: "o bloco do manifesto está pegando até o final aqui; blocar ele e adicionar a margem do jeito certo, não ficar inteiro assim". A faixa deixou de encostar nas bordas da tela: ela agora tem a mesma margem lateral do conteúdo (20px no telefone, 40px acima de 768 — os mesmos números do .wrap) e nunca passa da largura do resto da página. */ .amb-manifesto { background: var(--amb); color: var(--amb-ink); border-radius: 28px; margin: 36px 20px 32px; max-width: 1720px; } @media (min-width: 768px) { .amb-manifesto { margin: 44px 40px 40px; } } @media (min-width: 1800px) { .amb-manifesto { margin-left: auto; margin-right: auto; } } .amb-manifesto .wrap { padding-top: 68px; padding-bottom: 68px; } /* o rótulo da faixa segue a tinta do ambiente, nunca o cinza do site: cinza sobre o amarelo do Flight dava 3,2:1 */ .amb-manifesto .eyebrow { color: var(--amb-ink); } .amb-manifesto__t { font-family: "Geist", sans-serif; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; font-size: clamp(1.6rem, 4.2vw, 3.1rem); max-width: 900px; } .amb-manifesto__l { margin-top: 26px; max-width: 720px; } .amb-manifesto__l p { font-size: clamp(15.5px, 1.9vw, 18px); line-height: 1.65; } .amb-manifesto__l p + p { margin-top: 12px; } /* ── ZONA 7 · para você que… ──────────────────────────────────── Lista de identificação: itens grandes, um por linha, cada um com o traço da cor do ambiente. */ .amb-check { margin-top: 30px; max-width: 820px; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--border); } .amb-check li { position: relative; border-bottom: 1px solid var(--border); padding: 16px 12px 16px 40px; font-size: 15.5px; line-height: 1.6; color: var(--ink); } .amb-check li::before { content: ""; position: absolute; left: 8px; top: 50%; width: 14px; height: 8px; margin-top: -6px; border-left: 2.5px solid var(--amb); border-bottom: 2.5px solid var(--amb); transform: rotate(-45deg); } /* O botão de UM cartão (`itens[].cta`). Ele reusa o `.amb-mais` do cartão de conteúdo — o que falta é só desfazer o que o navegador põe num