/* IA para quem decide · 2ª edição — o mundo do telão de agosto ("Wallpaper IA CoreTI", Claude Design) */
:root {
  --noite: #08080a;
  --carvao: #27262b;
  --nuvem: #eeece8;
  --nuvem-80: rgba(238, 236, 232, .8);
  --nuvem-66: rgba(238, 236, 232, .66);
  --nuvem-22: rgba(238, 236, 232, .22);
  --nuvem-10: rgba(238, 236, 232, .1);
  --espectro: linear-gradient(100deg, #9678d3 0%, #0090da 34%, #47a23f 66%, #e97722 100%);
  --erro: #ffb59a;
  --display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --texto: "Hanken Grotesk", system-ui, sans-serif;
  --borda: 6%;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--noite); color: var(--nuvem); font: 400 1rem/1.55 var(--texto); -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .22em; }
::selection { background: #6538b5; color: #fff; }
:focus-visible { outline: 2px solid var(--nuvem); outline-offset: 4px; border-radius: 4px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.pular { position: fixed; left: 16px; top: -100px; z-index: 60; background: var(--nuvem); color: var(--noite); padding: 12px 16px; border-radius: 8px; font-weight: 700; }
.pular:focus { top: 12px; }

/* a Zion mora num canvas fixo atrás de tudo */
#zion { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
.zion-toque { position: fixed; z-index: 4; left: 0; top: 0; border: 0; padding: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.zion-toque:focus-visible { outline-offset: 6px; border-radius: 50%; }
main, .rodape, .topo { position: relative; z-index: 2; }

/* cabeçalho: a marca no canto, como no telão */
.topo { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(16px, 3.5vw, 56px); background: linear-gradient(to bottom, rgba(8,8,10,.86), rgba(8,8,10,0)); }
.topo-marca { display: inline-flex; min-height: 44px; align-items: center; }
.topo-marca img { width: clamp(132px, 13vw, 190px); }

.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 10px; border: 0; font: 700 1rem var(--texto); text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease), transform .2s var(--ease); }
.botao-claro { background: var(--nuvem); color: var(--noite); }
.botao-claro:hover { background: #fff; transform: translateY(-1px); }
.botao-grande { min-height: 54px; padding: 0 28px; font-size: 1.0625rem; }
.topo-cta { min-height: 44px; padding: 0 18px; font-size: .95rem; }
.link-seta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--nuvem-80); text-decoration: underline; text-decoration-color: var(--nuvem-22); }
.link-seta::after { content: "→"; text-decoration: none; transition: translate .2s var(--ease); }
.link-seta:hover { color: var(--nuvem); text-decoration-color: currentColor; }
.link-seta:hover::after { translate: 4px 0; }

/* capítulos: cada um ocupa a tela; a legenda vive na faixa de baixo */
.cap { position: relative; min-height: 100svh; padding: 15svh var(--borda) 15svh; }

/* sobretítulo do telão: traço na cor do capítulo + caixa alta espaçada */
.sobretitulo { display: flex; align-items: center; gap: 14px; font-size: .8125rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--nuvem-66); }
.traco { flex: none; width: 34px; height: 2px; background: var(--cor); }

/* fala da Zion: sem JS aparece no capítulo; com JS vira legenda e fica só para leitor de tela */
.fala { margin-top: 32px; max-width: 60ch; color: var(--nuvem-80); font-size: 1.125rem; border-left: 2px solid var(--nuvem-22); padding-left: 16px; }
.vh, .js .fala { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.js .fala { margin: 0; padding: 0; border: 0; }

/* balão de chat da Zion: preso à esfera, no estilo das pílulas do telão */
.balao { position: fixed; z-index: 5; left: 0; top: 0; width: max-content; max-width: 380px; padding: 12px 18px 14px; border-radius: 20px; border: 1px solid rgba(238,236,232,.2); background: rgba(39,38,43,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 36px rgba(8,8,10,.55); pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); }
.balao[data-lado="direita"] { border-bottom-left-radius: 6px; }
.balao[data-lado="esquerda"] { border-bottom-right-radius: 6px; }
.balao[data-lado="abaixo"] { border-top-left-radius: 6px; }
.balao-autor { display: flex; align-items: center; gap: 8px; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: rgba(238,236,232,.6); margin-bottom: 4px; }
.balao-ponto { width: 7px; height: 7px; border-radius: 999px; background: var(--cor, #9678d3); }
#legenda { font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.45; font-weight: 500; color: rgba(238,236,232,.96); }
.balao-digitando { display: none; gap: 5px; padding: 6px 0 4px; }
.balao.digitando .balao-digitando { display: flex; }
.balao-digitando span, .msg-pontos span { width: 7px; height: 7px; border-radius: 50%; background: rgba(238,236,232,.7); animation: digita 1.2s ease-in-out infinite; }
.balao-digitando span:nth-child(2), .msg-pontos span:nth-child(2) { animation-delay: .15s; }
.balao-digitando span:nth-child(3), .msg-pontos span:nth-child(3) { animation-delay: .3s; }
@keyframes digita { 0%, 60%, 100% { opacity: .3; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }

/* apresentação da Zion: perguntas que ela responde no balão */
.perguntas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.perguntas-titulo { flex-basis: 100%; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: rgba(238,236,232,.6); }
.pergunta { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(238,236,232,.22); background: rgba(39,38,43,.72); color: var(--nuvem); font: 600 .975rem var(--texto); cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.pergunta:hover { border-color: rgba(238,236,232,.5); }
.pergunta[aria-pressed="true"] { border-color: #9678d3; background: rgba(101,56,181,.28); }

/* quem conduz: retrato do Douglas à esquerda */
.cap-conduz { gap: clamp(32px, 5vw, 80px); }
.retrato { flex: none; width: min(34vw, 420px); margin: 0 0 0 4%; rotate: -1.5deg; filter: drop-shadow(0 24px 60px rgba(8,8,10,.7)); }
.retrato img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 14px; }
.cap-conduz .coluna { margin-left: 0; }

/* 1. abertura: stand-by do telão */
.cap-abertura { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding-top: 19svh; }
.cap-abertura h1 { font-size: clamp(2.75rem, 6.4vw, 6.5rem); line-height: .98; letter-spacing: -.03em; text-shadow: 0 10px 60px rgba(0,0,0,.65); }
.kicker { display: flex; align-items: center; gap: 12px; font-size: clamp(.75rem, 1.05vw, .95rem); letter-spacing: .22em; text-transform: uppercase; color: var(--nuvem-66); font-weight: 500; }
.ponto { flex: none; width: 7px; height: 7px; border-radius: 999px; background: linear-gradient(100deg, #6538b5, #0090da, #47a23f, #e97722); }
.ponto-volta { background: linear-gradient(100deg, #e97722, #47a23f, #0090da, #6538b5); }
.abertura-acoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; margin-top: 14px; }

/* 2. coluna à direita, Zion à esquerda */
.cap-coluna { display: flex; align-items: center; }
.coluna { margin-left: 46%; max-width: 640px; display: flex; flex-direction: column; gap: clamp(12px, 2vh, 22px); }
.coluna h2 { font-size: clamp(1.75rem, min(3.7vw, 6.2vh), 4rem); line-height: 1.03; }
.linha { font-size: clamp(1rem, min(1.25vw, 2.1vh), 1.375rem); line-height: 1.45; color: var(--nuvem-80); max-width: 44ch; }

.temas { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.temas li { display: grid; grid-template-columns: 44px auto; column-gap: 14px; padding: 12px 0; border-top: 1px solid var(--nuvem-10); }
.tema-n { grid-row: span 2; font: 800 1.0625rem/1.5 var(--display); color: var(--cor); }
.tema-nome { font-weight: 600; font-size: clamp(1.0625rem, 1.25vw, 1.3rem); }
.tema-desc { color: var(--nuvem-66); font-size: .975rem; }

.empresas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.empresas li { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.empresas img { width: 34px; height: 34px; }
.emp-nome { font-weight: 600; font-size: clamp(1rem, 1.15vw, 1.3rem); color: rgba(238,236,232,.92); }
.emp-desc { color: rgba(238,236,232,.6); font-size: .975rem; }

/* 3. fotos: carrossel infinito em duas faixas (o fim emenda no começo) */
.cap-fotos { display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 4vh, 40px); padding-left: 0; padding-right: 0; }
.lugar { display: flex; flex-direction: column; gap: 6px; padding: 0 var(--borda); }
.lugar-kicker { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(238,236,232,.6); font-weight: 600; }
.lugar-nome { font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
.carrossel { display: grid; gap: clamp(16px, 2.4vw, 28px); overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.faixa { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; gap: clamp(16px, 2.4vw, 28px); padding-right: clamp(16px, 2.4vw, 28px); }
.faixa li { flex: none; }
.faixa img { height: clamp(180px, 27svh, 300px); width: auto; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) {
  .carrossel { overflow-x: auto; scroll-snap-type: x mandatory; }
  .faixa li { scroll-snap-align: start; }
  .faixa li[aria-hidden="true"] { display: none; }
}

/* 4. herói: Zion no alto, título em espectro */
.cap-heroi { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(10px, 1.6vh, 18px); padding-top: 41svh; }
.kicker-heroi { font-size: .8125rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(238,236,232,.62); font-weight: 600; }
.titulo-heroi { max-width: 16ch; font-size: clamp(2.75rem, min(7vw, 11vh), 8rem); line-height: .92; letter-spacing: -.035em; background: var(--espectro); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.sub-heroi { max-width: 50ch; font-size: clamp(1rem, 1.35vw, 1.5rem); line-height: 1.45; color: rgba(238,236,232,.8); }
.servico { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 40px; margin: 8px 0 0; }
.servico dt { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(238,236,232,.6); font-weight: 600; }
.servico dd { margin: 4px 0 0; font-weight: 700; font-size: 1.0625rem; }

/* 5. largo: trilho de números */
.cap-largo { display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(24px, 4vh, 48px); }
.largo-cabeca { display: flex; flex-direction: column; gap: 14px; }
.largo-cabeca h2 { font-size: clamp(1.875rem, 3.4vw, 3.6rem); line-height: 1.02; max-width: 20ch; }
.trilho-numeros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.trilho-numeros li { display: flex; flex-direction: column; gap: 8px; }
.num { font: 800 clamp(2.25rem, 3.6vw, 3.75rem)/1 var(--display); letter-spacing: -.02em; color: var(--cor); font-variant-numeric: tabular-nums; }
.rotulo { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(238,236,232,.66); line-height: 1.4; max-width: 24ch; }
.trilho { position: relative; height: 3px; border-radius: 999px; background: rgba(238,236,232,.14); }
.trilho-cheio { position: absolute; inset: 0 auto 0 0; width: calc(var(--prog, 1) * 100%); border-radius: 999px; background: linear-gradient(100deg, #6538b5, #0090da, #47a23f, #e97722); }
.trilho-ponto { position: absolute; top: -5px; left: calc(var(--prog, 1) * 100%); width: 13px; height: 13px; margin-left: -6px; border-radius: 999px; background: var(--nuvem); box-shadow: 0 0 20px rgba(238,236,232,.9); }
.fonte { font-size: .875rem; color: rgba(238,236,232,.6); max-width: 90ch; }

/* 6. inscrição */
.cap-inscricao { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding-top: 18svh; padding-bottom: 14svh; }
.inscricao-cabeca { position: sticky; top: 18svh; display: flex; flex-direction: column; gap: 18px; padding-bottom: 40svh; }
.inscricao-cabeca h2 { font-size: clamp(2.25rem, 4.4vw, 4.25rem); line-height: 1; }
.legenda-form { font-size: clamp(1.125rem, 1.5vw, 1.5rem); line-height: 1.4; font-weight: 500; color: rgba(238,236,232,.92); min-height: 2.8em; max-width: 26ch; }
.legenda-form::after { content: ""; display: inline-block; width: .07em; height: .95em; margin-left: .08em; vertical-align: -.12em; background: #9678d3; opacity: 0; }
.legenda-form.digitando::after { opacity: 1; animation: pisca 1.05s steps(2, start) infinite; }
@keyframes pisca { 50% { opacity: 0; } }

#form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.largo { grid-column: 1 / -1; }
.campo-form { display: grid; gap: 8px; min-width: 0; }
.campo-form label { font-weight: 600; font-size: .95rem; color: rgba(238,236,232,.9); }
.campo-form input, .campo-form select { font: 400 1rem var(--texto); color: var(--nuvem); background: rgba(238,236,232,.05); border: 1px solid rgba(238,236,232,.28); border-radius: 10px; min-height: 50px; padding: 10px 14px; width: 100%; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.campo-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--nuvem) 50%), linear-gradient(135deg, var(--nuvem) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.campo-form select option { background: var(--carvao); color: var(--nuvem); }
.campo-form input::placeholder, .conversa-controle input::placeholder { color: rgba(238,236,232,.66); }
.campo-form input:hover, .campo-form select:hover:not(:disabled) { border-color: rgba(238,236,232,.5); }
.campo-form input:focus-visible, .campo-form select:focus-visible { outline: 2px solid #9678d3; outline-offset: 0; border-color: #9678d3; background-color: rgba(238,236,232,.08); }
.campo-form select:disabled { opacity: .55; cursor: not-allowed; }
.erro { display: none; color: var(--erro); font-size: .9rem; font-weight: 500; }
.campo-form.invalido .erro { display: block; }
.campo-form.invalido input, .campo-form.invalido select { border-color: var(--erro); }
.aviso-campo { font-size: .9rem; color: rgba(238,236,232,.66); }
.consentimento { grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.consentimento input { width: 24px; height: 24px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: #9678d3; }
.consentimento label { font-weight: 400; font-size: .95rem; line-height: 1.5; color: rgba(238,236,232,.72); cursor: pointer; }
.consentimento .erro { grid-column: 2; }
.hp { position: absolute; left: -9999px; }
.enviar { display: grid; gap: 10px; justify-items: start; }
.enviar .botao:disabled { opacity: .6; cursor: progress; transform: none; }
.form-erro { color: var(--erro); font-weight: 500; min-height: 1.5em; }
.sucesso { display: grid; gap: 12px; padding: 32px 0; }
.sucesso h3 { font-size: clamp(2rem, 3.2vw, 3rem); }
.sucesso p { color: rgba(238,236,232,.8); font-size: 1.125rem; }

.rodape { padding: 56px var(--borda) 40px; border-top: 1px solid var(--nuvem-10); display: grid; gap: 10px; color: rgba(238,236,232,.6); font-size: .925rem; background: var(--noite); }
.rodape img { width: 170px; margin-bottom: 10px; }
/* alvo de toque de 44 px sem afastar as linhas do rodapé */
.rodape a { display: inline-block; padding: 13px 0; margin: -13px 0; }

/* informação de decisão já na abertura */
.decisao { font-size: clamp(1rem, 1.3vw, 1.25rem); color: rgba(238,236,232,.86); }
.decisao strong { color: var(--nuvem); font-weight: 700; }
.lugar-sub { max-width: 52ch; color: rgba(238,236,232,.8); font-size: 1.0625rem; }

/* os anéis da Zion passam por trás do texto: um véu escuro suave mantém a leitura */
.coluna, .sub-heroi, .servico { position: relative; }
.coluna::before, .cap-heroi .sub-heroi::before { content: ""; position: absolute; inset: -48px -64px; z-index: -1; background: radial-gradient(closest-side, rgba(8,8,10,.78), rgba(8,8,10,.5) 60%, rgba(8,8,10,0)); pointer-events: none; }

/* recapitulação de data, hora, local e entrada */
.recap { display: grid; gap: 10px; margin: 4px 0 0; padding: 16px 0; border-top: 1px solid var(--nuvem-10); border-bottom: 1px solid var(--nuvem-10); }
.recap div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.recap dt { font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: rgba(238,236,232,.6); }
.recap dd { margin: 0; font-weight: 600; color: rgba(238,236,232,.92); }
.modo-conversa .legenda-form { display: none; }

/* inscrição em conversa */
.modos { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 999px; border: 1px solid rgba(238,236,232,.16); background: rgba(39,38,43,.6); }
.modo { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: transparent; color: rgba(238,236,232,.7); font: 600 .925rem var(--texto); cursor: pointer; }
.modo[aria-pressed="true"] { background: var(--nuvem); color: var(--noite); }
.conversa { display: flex; flex-direction: column; height: min(66svh, 600px); min-height: 400px; border-radius: 20px; border: 1px solid rgba(238,236,232,.14); background: rgba(20,19,23,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; }
.conversa-fio { list-style: none; margin: 0; padding: 22px 20px 12px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.msg { max-width: 84%; padding: 11px 16px; border-radius: 18px; font-size: 1.0625rem; line-height: 1.45; }
.msg-zion { align-self: flex-start; border-bottom-left-radius: 6px; background: rgba(39,38,43,.95); border: 1px solid rgba(238,236,232,.16); color: rgba(238,236,232,.96); }
.msg-pessoa { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--nuvem); color: var(--noite); font-weight: 600; display: flex; align-items: center; gap: 12px; }
/* alvo de toque de 44 px; a margem negativa devolve o espaço para a bolha não crescer */
.msg-alterar { border: 0; padding: 0 8px; margin: -10px -8px; background: transparent; color: #4a4950; font: 600 .8125rem var(--texto); text-decoration: underline; cursor: pointer; min-height: 44px; min-width: 44px; }
.msg-pontos { display: inline-flex; gap: 5px; padding: 4px 0; }
@media (prefers-reduced-motion: no-preference) { .msg:not(.digitando) { animation: entra .32s var(--ease) both; } }
@keyframes entra { from { opacity: 0; translate: 0 8px; } }
.conversa-entrada { padding: 12px 14px 14px; border-top: 1px solid rgba(238,236,232,.1); background: rgba(8,8,10,.5); }
.conversa-controle { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.conversa-controle input, .conversa-controle select { flex: 1 1 220px; min-width: 0; min-height: 50px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(238,236,232,.28); background: rgba(238,236,232,.06); color: var(--nuvem); font: 400 1rem var(--texto); }
.conversa-controle select option { background: var(--carvao); }
.conversa-controle input:focus-visible, .conversa-controle select:focus-visible { outline: 2px solid #9678d3; outline-offset: 0; border-color: #9678d3; }
.conversa-controle [aria-invalid="true"] { border-color: var(--erro); }
.conversa-enviar { min-height: 50px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--nuvem); color: var(--noite); font: 700 1rem var(--texto); cursor: pointer; }
.conversa-enviar:hover { background: #fff; }
.conversa-enviar:disabled { opacity: .6; cursor: progress; }
.conversa-confirmar { flex: 1 1 auto; }
.conversa-corrigir { min-height: 50px; padding: 0 16px; border: 1px solid rgba(238,236,232,.28); border-radius: 12px; background: transparent; color: var(--nuvem); font: 600 .95rem var(--texto); cursor: pointer; }
.conversa-erro { min-height: 1.4em; margin-top: 6px; color: var(--erro); font-size: .925rem; font-weight: 500; }
.conversa-erro:empty { min-height: 0; margin: 0; }

/* sucesso com próximo passo */
.recap-sucesso { margin: 8px 0 4px; }
.sucesso-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 8px; }

/* efeitos do telão: o título nasce do clarão; as empresas pousam na lista vindas da esfera */
.anima .titulo-heroi { opacity: 0; filter: blur(14px); scale: .9; transition: opacity .9s var(--ease), filter .9s var(--ease), scale 1.1s var(--ease); }
.anima .titulo-heroi.nasceu { opacity: 1; filter: none; scale: 1; }
.anima .empresas li { opacity: 0; translate: -6px 0; transition: opacity .3s var(--ease), translate .3s var(--ease); }
.anima .empresas li.pousou { opacity: 1; translate: 0 0; }

/* quem recebe: espelho de "Quem conduz", foto à direita */
.cap-recebe { flex-direction: row-reverse; }
.cap-recebe .retrato { margin: 0 4% 0 0; rotate: 1.5deg; }
.cap-recebe .retrato img { object-position: 50% 25%; }

/* celular: a Zion sobe para o topo da tela e o texto desce */
@media (max-width: 760px) {
  .cap { padding: 13svh 20px 16svh; min-height: 80svh; }
  .cap-abertura { padding-top: 15svh; min-height: 100svh; }
  .abertura-acoes { flex-direction: column; width: 100%; }
  .abertura-acoes .botao { width: 100%; }
  .cap-coluna { align-items: flex-start; padding-top: 34svh; }
  .coluna { margin-left: 0; }
  .cap-heroi { padding-top: 34svh; }
  .servico { gap: 12px 28px; }
  .cap-fotos { padding-left: 0; padding-right: 0; }
  .faixa img { height: 170px; }
  .trilho-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .cap-inscricao { grid-template-columns: 1fr; padding-top: 22svh; }
  .conversa { height: 70svh; min-height: 380px; }
  .msg { max-width: 92%; }
  .inscricao-cabeca { position: static; padding-bottom: 0; }
  #form { grid-template-columns: 1fr; }
  .enviar .botao { width: 100%; }
  .cap-conduz { flex-direction: column; padding-top: 34svh; }
  .cap-largo, .cap-fotos { padding-top: 30svh; justify-content: flex-start; }
  .retrato { width: 72%; margin: 0; }
  .cap-recebe { flex-direction: column; }
  .cap-recebe .retrato { margin: 0 0 0 auto; }
}