/* ==========================================================
   NATHÁLIA GOMES · web-summit.v1.css
   A página de captura da comunidade gratuita no WhatsApp (/web-summit/, 03/11/2026), no padrão das outras páginas.
   O sistema vem do base.v1.css: tons, aba, cabeça centrada, cortina, feixe, botão, ponto pulsante, cartão de perfil,
   cartões de contexto, formulário (cartão, campos, erro e enviado) e rodapé com o monograma. Aqui, só o que é desta página.
   ========================================================== */

/* ---------- leitura: os títulos das outras páginas (frase-base leve e a virada em negrito) ---------- */
.ws { --w-text: 400; --fs-eyebrow: 12px; --fs-body: clamp(17px, .25vw + 14.5px, 18px); --bottom-bar-clearance: calc(clamp(40px, 5vw, 64px) + env(safe-area-inset-bottom, 0px)); }
.ws .titulo { font-family: var(--font-text); font-weight: 300; text-transform: none; letter-spacing: -.012em; line-height: 1.16; color: var(--fg-2); text-wrap: balance; }
.ws .titulo em { font-style: normal; font-weight: 600; color: var(--fg); }
.ws .titulo-display { font-size: clamp(34px, 2.4vw + 20px, 58px); line-height: 1.07; letter-spacing: -.02em; }
.ws .titulo-2 { font-size: clamp(25px, 1.1vw + 17px, 36px); }
/* nos títulos de seção, a virada em negrito abre a linha de baixo; no hero, o negrito segue na mesma linha */
.ws .titulo-2 em { display: block; }
.ws .btn-txt { text-wrap: balance; }

/* ---------- hero: o palco do Web Summit na largura toda, atrás do texto, se dissolvendo no café à esquerda (onde está
   o texto) e embaixo; o texto à esquerda. Sem animação de entrada (03/11/2026: o retrato saiu do topo, a pedido do usuário;
   ela aparece no cartão de perfil da pauta). O palco sai no P&B tonalizado das diretrizes (Producao/qa/exporta-web-summit.py). ---------- */
.ws-hero { display: flex; align-items: center; min-height: min(100svh, 920px); padding-block: clamp(112px, 10vw, 140px) clamp(72px, 7vw, 104px); overflow: hidden; }
.ws-hero > .wrap { position: relative; z-index: 1; width: 100%; }
.ws-palco { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .3) 0%, rgb(0 0 0 / .42) 36%, #000 74%), linear-gradient(180deg, #000 68%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, rgb(0 0 0 / .3) 0%, rgb(0 0 0 / .42) 36%, #000 74%), linear-gradient(180deg, #000 68%, transparent 100%); mask-composite: intersect; }
.ws-palco img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
/* a sombra café atrás do texto, como uma luz baixa: o palco segue inteiro e a leitura não briga com o telão */
.ws-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 50% 62% at 20% 52%, rgb(27 20 16 / .86) 0%, rgb(27 20 16 / .6) 46%, transparent 76%); }
.ws-hero .lead, .ws-hero .apoio { text-shadow: 0 1px 14px rgb(27 20 16 / .7); }
.ws-topo { position: absolute; inset: 0 0 auto; z-index: 1; padding-top: clamp(28px, 3vw, 44px); }
.ws-assinatura { width: clamp(150px, 11vw, 184px); color: var(--linho); }
.ws-hero-texto { max-width: min(600px, 48%); }
/* o ponto que pulsa no sobretítulo (o mesmo da barra do sistema): ela está no evento */
.ws-ao-vivo { display: flex; align-items: flex-start; gap: 14px; color: var(--claro-2); }
.ws-ao-vivo .ponto { flex: none; margin-top: calc(.8em - 3.5px); }
.ws-hero .titulo { margin-top: 22px; max-width: 13em; }
.ws-hero .lead { margin-top: 24px; max-width: 33em; }
.ws-hero .acoes { margin-top: 36px; }
.ws-hero .apoio { margin-top: 16px; }
/* a linha de apoio com o escudo: acesso gratuito e saída a qualquer momento (ícone de traço fino, cor argila) */
.ws-apoio { display: flex; align-items: center; gap: 10px; text-wrap: balance; }
.ws-apoio-icone { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--argila); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 01 a pauta: as perguntas no eixo, o cartão de perfil e os quatro temas ---------- */
/* as duas perguntas somam 170 caracteres: a cabeça abre mais que a padrão para o título caber em 3 linhas */
.ws-pauta .cabeca-centro { max-width: 70rem; }
.ws-pauta .titulo { font-size: clamp(24px, 1vw + 17px, 32px); }
.ws-perfil { margin-top: clamp(40px, 5vw, 64px); }
.ws-perfil .perfil-foto img { object-position: 74% 30%; }
.ws-assina { display: grid; gap: 12px; }
.ws-nome { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 2.2vw + 18px, 54px); line-height: .95; letter-spacing: .01em; text-transform: uppercase; color: var(--fg); }
.ws-nome em { font-style: italic; color: var(--italico); }
.ws-credenciais { padding-top: 18px; border-top: 1px solid var(--fio-escuro); font-size: max(11px, var(--fs-eyebrow)); line-height: 1.8; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--claro-3); }
.ws-temas { margin-top: clamp(24px, 3vw, 40px); }
.ws-temas p strong { color: var(--fg); }
.ws-cta { margin-top: clamp(40px, 5vw, 56px); text-align: center; }

/* ---------- 02 a comunidade: a conversa ilustrada e o formulário lado a lado, na mesma altura ---------- */
.ws-comunidade .feixe { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); }
.ws-zap { display: inline-flex; align-items: center; gap: 12px; color: var(--claro-2); }
.ws-zap-icone { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--argila); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ws-comunidade .titulo { margin-top: 18px; }
.ws-comunidade .cabeca-centro .lead + .lead { margin-top: 14px; }
.ws-comunidade-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: stretch; gap: clamp(24px, 3vw, 40px); max-width: 1120px; margin: clamp(40px, 5vw, 64px) auto 0; }

/* a conversa: o que chega no grupo (foto do evento, texto e áudio), com as linhas no lugar das palavras.
   Os quatro cantos no mesmo raio, o padrão da VSL (pedido do usuário, 03/11/2026: nada da forma bússola aqui) */
.ws-conversa { --r-conversa: 16px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--fio-escuro); border-radius: var(--r-conversa); background: linear-gradient(180deg, var(--cafe), #241d19); box-shadow: 0 50px 90px -60px #000; }
.ws-conversa-topo { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--fio-escuro); background: #f3eae008; }
.ws-conversa-avatar { position: relative; flex: none; width: 42px; height: 42px; }
.ws-conversa-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ws-conversa-avatar::after { content: ""; position: absolute; inset: -4px; border: 1.5px solid var(--argila); border-radius: 50%; }
.ws-conversa-nome { flex: 1; }
.ws-linhas { display: grid; gap: 7px; }
.ws-linhas i { display: block; width: var(--w); height: 7px; border-radius: 4px; background: #f3eae024; }
.ws-conversa-nome i:first-child { height: 9px; background: #f3eae05c; }
.ws-conversa-corpo { flex: 1; display: grid; align-content: center; gap: 12px; padding: 20px 22px 24px; }
.ws-msg { max-width: 84%; padding: 12px 14px 14px; border: 1px solid #f3eae012; border-radius: 12px; background: #f3eae00d; }
.ws-msg-foto { display: grid; gap: 12px; padding: 6px 6px 14px; }
.ws-msg-foto .ws-linhas { padding-inline: 8px; }
.ws-msg-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; }
.ws-msg-img img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 44%; }
.ws-msg-audio { display: flex; align-items: center; gap: 12px; width: 78%; }
.ws-play { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--argila); color: var(--cafe); }
.ws-play svg { width: 16px; height: 16px; fill: currentColor; }
.ws-onda { flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; }
.ws-onda i { flex: 1; height: calc(var(--h) * 100%); min-height: 3px; border-radius: 2px; background: #f3eae04d; }
.ws-digitando { display: inline-flex; gap: 5px; width: fit-content; padding: 13px 15px; border-radius: 12px; background: #f3eae00d; }
.ws-digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--claro-3); }
/* as mensagens chegam uma a uma quando a conversa entra na tela (motion.v1.js: [data-vivo] → .em-cena); os pontos digitam */
.js .ws-conversa .ws-msg, .js .ws-conversa .ws-digitando { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .ws-conversa.em-cena .ws-msg, .js .ws-conversa.em-cena .ws-digitando { opacity: 1; transform: none; }
.js .ws-conversa.em-cena .ws-msg:nth-child(2) { transition-delay: .7s; }
.js .ws-conversa.em-cena .ws-msg:nth-child(3) { transition-delay: 1.4s; }
.js .ws-conversa.em-cena .ws-digitando { transition-delay: 2.1s; }
.ws-conversa.em-cena .ws-digitando i { animation: ws-digita 1.2s ease-in-out infinite; }
.ws-digitando i:nth-child(2) { animation-delay: .15s; }
.ws-digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes ws-digita { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* o formulário: o cartão do sistema, centrado na altura da conversa */
.ws-cartao { display: flex; flex-direction: column; justify-content: center; }
.ws-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ws-form .contato-enviar .btn-txt, .ws-entrar .btn-txt { flex: 1; padding-right: 22px; text-align: center; }
.ws-form-apoio { justify-content: center; text-align: center; }
.ws-pote { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ws-entrar { align-self: stretch; min-width: 0; margin-top: 4px; }
.ws-entrar[hidden] { display: none; }
/* o erro aparece logo abaixo do campo que precisa de atenção */
.ws-form .campo + .contato-erro { margin-top: -6px; }
/* enviando: o bloco do botão ocupa a largura e respira até a planilha responder (sem trocar o texto) */
.ws-form.enviando .contato-enviar { pointer-events: none; }
.ws-form.enviando .btn-bloco { width: calc(100% - var(--b-pad) * 2); animation: ws-respira 1.1s ease-in-out infinite alternate; }
.ws-form.enviando .btn-agulha { left: calc(100% - 24px - 22px); }
.ws-form.enviando .btn-txt { color: var(--cafe); }
@keyframes ws-respira { from { opacity: .6; } to { opacity: 1; } }

/* ---------- rodapé: a frase de fecho no eixo (acende com a rolagem), o monograma e a linha da assinatura.
   O base zera o respiro do rodapé porque nas outras páginas ele vem depois de uma seção de fechamento; aqui a frase
   mora no próprio rodapé, então ela ganha o fio argila em cima e o respiro até o monograma. ---------- */
.ws-rodape .rodape-inner { padding-top: clamp(16px, 2vw, 24px); }
.ws-frase { max-width: 22em; margin: 0 auto; padding-top: 0; border-top: 0; text-align: center; color: var(--claro); }
.ws-frase::before { content: ""; display: block; width: 44px; height: 1px; margin: 0 auto 28px; background: var(--argila); }
.ws-rodape .rodape-mono { width: min(44vw, 320px); margin-top: clamp(56px, 7vw, 96px); }
.ws .rodape-txt { font-size: max(11px, var(--fs-eyebrow)); letter-spacing: var(--tr-caps); text-transform: uppercase; text-align: right; }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  /* o palco sobe para o topo, na largura toda, e o texto entra pela parte apagada dele */
  .ws-hero { display: block; min-height: 0; padding-top: 0; }
  .ws-hero::after { display: none; }
  .ws-palco { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 11;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 50%, transparent 100%); }
  .ws-palco img { object-position: 50% 42%; }
  .ws-hero > .wrap { margin-top: -16%; }
  .ws-hero-texto { max-width: 640px; }
  .ws-comunidade-grade { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 760px) {
  .ws-palco { aspect-ratio: 5 / 4; }
  .ws-palco img { object-position: 50% 36%; }
  /* o texto entra só na parte apagada da foto: o sobretítulo não pode cair sobre a plateia do palco */
  .ws-hero > .wrap { margin-top: -10%; }
  /* no celular, o botão vem logo depois do título, para caber na primeira tela; o texto de apoio vem depois */
  .ws-hero-texto { display: flex; flex-direction: column; }
  .ws-hero .acoes { order: 3; margin-top: 26px; }
  .ws-hero .apoio { order: 4; }
  .ws-hero .lead { order: 5; margin-top: 28px; font-size: var(--fs-body); }
  .ws-hero .titulo { margin-top: 16px; }
  .ws-hero .btn, .ws-form .contato-enviar, .ws-cta .btn { width: 100%; min-width: 0; }
  .ws-hero .btn .btn-txt, .ws-cta .btn .btn-txt { flex: 1; padding-right: 22px; text-align: center; }
  .ws-apoio { align-items: flex-start; }
  .ws-apoio-icone { margin-top: 1px; }
  /* a foto dos bastidores é horizontal: no celular, em 4:3, aparecem o notebook e as pessoas ao fundo */
  .ws-perfil .perfil-foto { aspect-ratio: 4 / 3; }
  .ws-perfil .perfil-foto img { object-position: 70% 30%; }
  /* no celular, a conversa encurta (a foto, o áudio e os pontos bastam) para o formulário ficar perto */
  .ws-conversa-corpo { padding: 20px 16px 24px; }
  .ws-msg:not(.ws-msg-foto):not(.ws-msg-audio) { display: none; }
  .ws .rodape-base { flex-direction: column; align-items: center; text-align: center; }
  .ws .rodape-txt { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ws-conversa .ws-msg, .js .ws-conversa .ws-digitando { opacity: 1; transform: none; }
}