/* ==========================================================================
   Carolina Loth — Palestrante
   Paleta e tipografia herdadas da marca atual (Elementor global colors).
   ========================================================================== */

:root{
  /* ---------------------------------------------------------------------
     Paleta oficial — [MANUAL]Carolina-Loth.pdf, jan/2026, pág. 18.
     São estas cinco e mais nada: o manual diz "não aplique cores não
     previstas". Superfícies derivadas usam só color-mix destas.
     --------------------------------------------------------------------- */
  --gold:   #C49F74;   /* C20 M35 Y55 K10 */
  --sand:   #D5C9B6;   /* C20 M20 Y30 K0  */
  --mist:   #EDEDED;   /* C9  M5  Y6  K0  */
  --ink:    #1C2C39;   /* C90 M70 Y50 K60 */
  --slate:  #4D5E6B;   /* C70 M50 Y40 K30 */
  --white:  #FFFFFF;

  /* Superfícies */
  --paper:   var(--mist);
  /* Só as 5 cores do manual (revisão de 28/09/2026). --paper-2 era uma
     mistura de areia com cinza claro (#E4DFD8), cor que o manual não prevê.
     Hoje é apenas o texto padrão sobre grafite. */
  --paper-2: var(--mist);

  --line:        color-mix(in srgb, var(--ink) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 32%, transparent);
  --line-dark:   color-mix(in srgb, var(--sand) 26%, transparent);

  /* Tipografia — o manual prevê duas famílias: Lora (principal) e Inter
     (apoio). Rótulos e metadados usam Inter com espacejamento, não uma
     terceira fonte. */
  --f-display: "Lora", "Iowan Old Style", Georgia, serif;
  --f-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-label:   var(--f-sans);

  --t-hero:  clamp(2.9rem, 6.8vw, 6rem);
  --t-h2:    clamp(2rem, 4.2vw, 3.4rem);
  --t-h3:    clamp(1.35rem, 2.1vw, 1.75rem);
  --t-lead:  clamp(1.06rem, 1.45vw, 1.3rem);
  --t-body:  1.0625rem;
  --t-meta:  .72rem;

  --gut:     clamp(1.25rem, 4vw, 2.5rem);
  /* Respiro de cada lado da seção. Vão padrão entre seções = 2 × --sect:
     160px no desktop (1440) e 110px no celular (390), proporcional à largura
     e não à altura da tela (decisão de 25/09/2026). */
  --sect:    clamp(55px, calc(2.381vw + 45.71px), 80px);
  --wrap:    1240px;
  --ease:    cubic-bezier(.22,1,.36,1);
  /* Fotografia arredondada. Menor que os 14px dos prints de depoimento,
     para que aqueles continuem lendo como "tela de celular". */
  --r-img:   clamp(6px, .55vw, 10px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-sans); font-size:var(--t-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; }
/* Sobre grafite o contorno grafite some (no botão do formulário ele tinha
   exatamente a cor do fundo). Nas áreas escuras o foco passa a areia. */
.s-dark :focus-visible,
.ftr :focus-visible,
.pane.is-alt :focus-visible{ outline-color:var(--sand); }
::selection{ background:var(--sand); color:var(--ink); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
/* "Ir para o conteúdo": primeiro item do Tab, fora da tela até receber foco. */
.skip{
  position:fixed; left:var(--gut); top:.75rem; z-index:200;
  padding:.8em 1.2em; background:var(--ink); color:var(--white);
  font-size:.9rem; font-weight:600; text-decoration:none;
  transform:translateY(calc(-100% - 1.5rem));
}
.skip:focus{ transform:none; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Tipografia utilitária ---------- */
.eyebrow{
  font-family:var(--f-label); font-size:var(--t-meta); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate);
  display:flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:clamp(18px,3vw,34px); height:1px; background:var(--gold); flex:none; }
.s-dark .eyebrow{ color:var(--sand); }

.display{ font-family:var(--f-display); font-weight:600; line-height:1.06; letter-spacing:-.022em; overflow-wrap:break-word; }
h2.display{ font-size:var(--t-h2); }
/* Título de seção que nomeia os temas por extenso: no tamanho cheio ia a
   cinco linhas. Um degrau abaixo, balanceado. */
h2.display.is-long{ font-size:clamp(1.75rem,3.1vw,2.6rem); line-height:1.12; text-wrap:balance; }
.lead{ font-size:var(--t-lead); line-height:1.6; color:var(--slate); }
.s-dark .lead{ color:var(--mist); }
.tnum{ font-family:var(--f-label); font-variant-numeric:tabular-nums; }
em.mark{
  font-style:normal; color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--gold);
  text-decoration-thickness:.075em; text-underline-offset:.13em;
}
.s-dark em.mark{ color:var(--gold); text-decoration:none; }

/* ---------- Seções ---------- */
.section{ padding-block:var(--sect); position:relative; }
.s-dark{ background:var(--ink); color:var(--paper-2); }
/* Duas seções escuras seguidas viram um campo contínuo: sem mudança de cor,
   a soma dos espaçamentos lê como vão esquecido. Meia pausa + fio de 1px. */
.s-dark + .s-dark{ padding-top:var(--sect); border-top:1px solid var(--line-dark); }
.s-dark h2, .s-dark h3{ color:var(--white); }
/* Fundo areia exato. Ardósia sobre areia dá 4,1:1, abaixo do mínimo para
   texto pequeno: dentro dessas seções o texto secundário passa a grafite
   (8,6:1) e a hierarquia vem de tamanho e peso. */
.s-tint{ background:var(--sand); --slate:var(--ink); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

.s-head{ max-width:62ch; margin-bottom:clamp(2.5rem,5vw,4rem); display:grid; gap:1.1rem; }
/* Nota curta de apoio ao lead (ex.: posição apartidária). */
.nota-neutra{ font-size:.9rem; line-height:1.6; color:var(--slate); padding-left:.9rem; border-left:2px solid var(--gold); }
.s-dark .nota-neutra{ color:var(--sand); }
/* Lead com o mesmo fio dourado da nota (home, seção Palestras). */
.lead-fio{ padding-left:.9rem; border-left:2px solid var(--gold); }
/* "As outras palestras": o 62ch do s-head jogava "escala" sozinha para a
   segunda linha. Sem o limite, o título cabe numa linha no desktop. */
.s-head:has(+ .other-talks){ max-width:none; }

/* ---------- Botões ---------- */
/* Botões — a varredura de preenchimento entra da esquerda no hover.
   Cada variante declara o próprio par repouso/hover em variáveis: assim uma
   troca de paleta não pode apagar o efeito em silêncio, como aconteceu quando
   o fundo e a varredura viraram a mesma cor. */
.btn{
  --bg:var(--ink);   --fg:var(--white); --bd:var(--ink);
  --bg-h:var(--gold); --fg-h:var(--ink); --bd-h:var(--gold);
  position:relative; display:inline-flex; align-items:center; gap:.7em;
  padding:1.05em 1.7em; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font-size:.9rem; font-weight:600; letter-spacing:.005em; text-decoration:none;
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--bg-h);
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease);
}
.btn:hover::after{ transform:scaleX(1); transform-origin:left; }
.btn:hover{ color:var(--fg-h); border-color:var(--bd-h); }
.btn .arw{ transition:transform .45s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }

.btn-ghost{
  --bg:transparent; --fg:var(--ink); --bd:var(--line-strong);
  --bg-h:var(--ink); --fg-h:var(--mist); --bd-h:var(--ink);
}
.s-dark .btn-ghost{
  --fg:var(--paper-2); --bd:var(--line-dark);
  --bg-h:var(--gold); --fg-h:var(--ink); --bd-h:var(--gold);
}
/* Verde do WhatsApp: exceção à paleta, pelo reconhecimento imediato. No botão
   com texto usa o tom escuro (5:1 com branco); o #1FA855 dá 3,1:1 e só serve
   ao ícone do botão flutuante, onde o mínimo para gráfico é 3:1. */
.btn-wa{
  --bg:#17803F; --bd:#17803F;
  --bg-h:#12652F; --fg-h:var(--white); --bd-h:#12652F;
}

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* Link com sublinhado animado */
.link{
  display:inline-flex; align-items:center; gap:.5em; text-decoration:none;
  font-weight:600; font-size:.92rem; color:var(--ink);
  padding-bottom:.25em; background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:left bottom;
  transition:background-size .45s var(--ease);
}
.link:hover{ background-size:100% 1px; }
.link .arw{ transition:transform .4s var(--ease); }
.link:hover .arw{ transform:translateX(4px); }
.s-dark .link{ color:var(--gold); }

/* ==========================================================================
   Cabeçalho
   ========================================================================== */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
}
.hdr-in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:var(--hdr-h,clamp(76px,7vw,100px)); transition:height .5s var(--ease); }
.hdr.is-stuck .hdr-in{ --hdr-h:clamp(66px,6vw,86px); }

/* Logo: arquivos oficiais da marca (imagens_e_videos/Logo, versão "Renovado"),
   sem a assinatura antiga, então não há mais recorte. Cabeçalho usa a versão
   COR (marca-cor.webp); rodapé escuro, a BRANCO (marca-branco.webp). O
   monograma ocupa quase a altura inteira da arte: o cabeçalho é dimensionado
   pela altura, para nunca transbordar. */
.logo{
  display:block; flex:none;
  height:clamp(52px,4.9vw,70px); aspect-ratio:354/166;
  transition:height .5s var(--ease);
}
.logo img{ width:100%; height:100%; object-fit:contain; object-position:left center; }
.hdr.is-stuck .logo{ height:clamp(45px,4.2vw,60px); }

/* Rodapé: mesmo bloco, dimensionado pela largura, onde há altura de sobra */
.logo-full{ height:auto; width:clamp(150px,17vw,196px); }
.logo-full img{ height:auto; }

.nav{ display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.2rem); }
/* :not(.btn) — senão esta regra vence a cor do botão por especificidade
   e o rótulo some sobre o fundo escuro dele. */
.nav a:not(.btn){ text-decoration:none; font-size:.875rem; font-weight:500; color:var(--ink); position:relative; padding-block:.4em; }
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--ink);
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.nav a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left; }
.nav .btn{ padding:.8em 1.25em; font-size:.82rem; }

/* Menu de palestras */
.has-sub{ position:relative; }
.sub{
  position:absolute; top:calc(100% + .7rem); left:50%; translate:-50% 0; min-width:290px;
  background:var(--white); border:1px solid var(--line); padding:.5rem;
  opacity:0; visibility:hidden; translate:-50% 8px; transition:.35s var(--ease);
  box-shadow:0 24px 60px -24px rgba(28,44,57,.28);
}
.has-sub:hover .sub, .has-sub:focus-within .sub{ opacity:1; visibility:visible; translate:-50% 0; }
.sub a{ display:block; padding:.75rem .9rem; font-size:.85rem; line-height:1.35; transition:background .3s; }
.sub a::after{ display:none; }
.sub a:hover{ background:var(--mist); }
.sub a span{ display:block; font-family:var(--f-label); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin-top:.3rem; }


.burger{ display:none; width:46px; height:46px; border:1px solid var(--line-strong); background:none; cursor:pointer; padding:0; place-items:center; }
/* Os dois traços ocupam a mesma célula da grade, centrados no botão, e o
   translateY os afasta. Fechado: centros a 24,5px um do outro (a mesma
   distância de antes, quando cada traço ficava numa linha da grade). Aberto:
   os dois voltam ao centro e giram, formando o X. Antes, em linhas separadas,
   o deslocamento de 3,25px não os aproximava e o ícone aberto virava ">". */
.burger span{ grid-area:1/1; display:block; width:20px; height:1.5px; background:var(--ink); transition:.35s var(--ease); }
.burger span:first-child{ transform:translateY(-12.25px); }
.burger span:last-child{ transform:translateY(12.25px); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(0) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(0) rotate(-45deg); }

/* Barra de progresso de leitura */
.prog{ position:fixed; top:0; left:0; height:2px; width:100%; transform-origin:0 50%; background:var(--gold); z-index:101; transform:scaleX(0); }
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .prog{ animation:prog linear both; animation-timeline:scroll(root block); }
    @keyframes prog{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Hero → primeira seção: 120px no desktop e ~73px no celular,
   porque os dois blocos têm o mesmo fundo (decisão de 25/09/2026). */
.hero{ padding-top:clamp(7.75rem,11.5vh,9.25rem); padding-bottom:clamp(18px, calc(2.095vw + 9.8px), 40px); position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; z-index:0; top:-28%; right:-14%; width:min(72vw,900px); aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--sand) 62%, transparent), transparent 66%);
  pointer-events:none;
}
.hero-in{ position:relative; z-index:1; display:grid; gap:clamp(2.5rem,5vw,4rem); }
.hero h1{ font-size:var(--t-hero); margin-block:1rem 1.4rem; max-width:9ch; line-height:.98; }
.hero .lead{ max-width:62ch; }
.hero .btn-row{ margin-top:1.75rem; }
/* Nome em duas linhas, como na logo: "Loth" alinhado à direita, terminando
   junto com o "a" final de "Carolina". O data-split já transforma cada palavra
   num <span>; com o h1 em grid da largura de "Carolina", cada span vira uma
   linha e o segundo encosta à direita. Só com JS (sem os spans, o nome fica
   como antes). Vale para todas as larguras, inclusive no celular
   (decisão de 29/09/2026). */
.js .hero h1{ display:grid; justify-items:end; width:fit-content; max-width:none; }

/* Linha de oferta: a tese antes da trajetória. Fio dourado à esquerda
   (dourado só como fio sobre fundo claro, nunca como texto). */
.hero-oferta{
  font-family:var(--f-display); font-weight:500; font-size:clamp(1.2rem,1.9vw,1.45rem);
  line-height:1.4; letter-spacing:-.01em; color:var(--ink);
  border-left:3px solid var(--gold); padding-left:clamp(.85rem,1.4vw,1.1rem);
  max-width:34ch; margin-bottom:.2rem;
}
/* Linha de prova, logo abaixo dos botões (modelo "linha curta sob o CTA"):
   menor que a oferta, texto ardósia; destaque por sublinhado dourado. */
.hero-cred{ margin-top:1.4rem; font-size:.8rem; line-height:1.7; color:var(--slate); max-width:56ch; }
.hero-cred .hl{ color:var(--ink); }
.hero-cred .hl{ font-weight:600; border-bottom:2px solid var(--gold); padding-bottom:1px; }


.hero-fig{ position:relative; margin:0; }
.hero-fig picture{ display:block; overflow:hidden;  border-radius:var(--r-img); }
.hero-fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 85%; }

@media (min-width:1000px){
  .hero-in{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:clamp(3rem,5vw,5rem); }
  .hero-fig img{ aspect-ratio:4/5; }
}

/* Celular: a foto de palco entra na primeira tela, acima do nome, em faixa
   horizontal. Mesma <img> do desktop, só reordenada e recortada; o rosto fica
   no terço de cima da foto original, daí o object-position em 22%. */
@media (max-width:759px){
  .hero{ padding-top:calc(clamp(76px,7vw,100px) + .75rem); }
  .hero-in{ gap:1.1rem; }
  .hero-fig{ order:-1; }
  /* Sem a bio no hero, sobra altura: a foto cresce de 210 para 250px e o
     CTA principal continua na primeira tela (~619px em 390×844, com o nome
     em duas linhas). */
  .hero-fig img{ aspect-ratio:4/3; max-height:250px; object-position:center 22%; }
  /* Sem JS o nome fica numa linha só. Com JS, a regra .js .hero h1 (acima)
     põe "Loth" na segunda linha, alinhado à direita, também no celular
     (decisão de 29/09/2026). */
  .hero h1{ margin-block:.7rem 1rem; max-width:none; }
  .hero-cred{ margin-top:1rem; }
  .hero .btn-row{ margin-top:1.15rem; }
}

/* Parallax nativo, sem JS */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .hero-fig img{ animation:kb linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
    @keyframes kb{ from{ scale:1.14; } to{ scale:1.02; } }
  }
}

/* ==========================================================================
   Redes sociais — título à esquerda, as quatro redes na mesma faixa
   ========================================================================== */
/* O espaçamento padrão de seção deixa este bloco boiando: conteúdo é raso. */
.redes{ padding-block:var(--sect); }
.redes-in{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
.redes-head h2{ font-size:clamp(1.9rem,3.6vw,3rem); max-width:12ch; }

/* Abaixo de 960px o título fica acima: 2×2 entre 701 e 959px e lista no
   celular (≤700px), pela media query no fim do bloco. */
.redes-grid{ display:grid; gap:clamp(1.25rem,2.6vw,2rem); grid-template-columns:repeat(2,1fr); }
.rede{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.85rem;
  padding-bottom:1.1rem; border-bottom:1px solid var(--line-dark); text-decoration:none;
  transition:border-color .45s var(--ease);
}
.rede:hover{ border-bottom-color:var(--gold); }
.rede-txt{ display:grid; gap:.85rem; justify-items:center; }
.rede-ic{ color:var(--gold); transition:transform .45s var(--ease); }
.rede:hover .rede-ic{ transform:translateY(-3px); }
.rede-n{
  font-family:var(--f-label); font-size:var(--t-meta); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.rede-d{ font-size:.88rem; line-height:1.5; color:var(--sand); max-width:22ch; }
/* Variante clara (quando a faixa não está em .s-dark): nome e ícone em
   grafite, descrição em ardósia; o dourado fica só no fio do hover. */
.redes:not(.s-dark) .rede{ border-bottom-color:var(--line); }
.redes:not(.s-dark) .rede-ic,
.redes:not(.s-dark) .rede-n{ color:var(--ink); }
.redes:not(.s-dark) .rede-d{ color:var(--slate); }
.redes:not(.s-dark) .rede:hover{ border-bottom-color:var(--gold); }

/* Faixa horizontal (≥960px): título à esquerda, os quatro cards à direita.
   A coluna dos cards fica com ~69% do .wrap e o título com ~27%; cada card
   mede 144px a 960 e 186px a 1440. Para caber sem estourar, o ícone cai de 42
   para 26px e a descrição de .88 para .78rem — a descrição do Facebook, a mais
   longa, vai a quatro linhas abaixo de 1100px, o teto que a referência admite.
   Abaixo de 960px nada disto se aplica: o bloco volta ao empilhado de sempre. */
@media (min-width:960px){
  .redes-in{
    grid-template-columns:minmax(0,28fr) minmax(0,72fr);
    gap:clamp(1.5rem,3vw,2.75rem); align-items:center;
  }
  .redes-head h2{ font-size:clamp(1.45rem,2.2vw,2rem); max-width:14ch; text-wrap:balance; }
  .redes-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.85rem,1.4vw,1.4rem); }
  .rede{ gap:.7rem; padding-bottom:.85rem; }
  .rede-txt{ gap:.5rem; }
  .rede-ic svg{ width:26px; height:26px; }
  /* Sem balanceamento, "encontram" e "feed" caíam sozinhos na última linha. */
  .rede-d{ font-size:.78rem; line-height:1.45; max-width:none; text-wrap:balance; }
}

/* Em coluna estreita, três colunas ficam ilegíveis e duas deixam um órfão.
   Vira lista: ícone à esquerda, nome e descrição à direita. */
@media (max-width:700px){
  .redes-grid{ grid-template-columns:1fr; gap:0; }
  .rede{
    flex-direction:row; align-items:center; text-align:left;
    gap:1.1rem; padding-block:1.1rem; border-bottom:1px solid var(--line-dark);
  }
  .rede:first-child{ border-top:1px solid var(--line-dark); }
  .redes:not(.s-dark) .rede,
  .redes:not(.s-dark) .rede:first-child{ border-color:var(--line); }
  .rede-ic{ flex:none; }
  .rede-n{ display:block; }
  .rede-d{ max-width:none; }
  .rede-txt{ gap:.3rem; justify-items:start; }
}

/* ==========================================================================
   Problema — duas colunas contrastantes
   ========================================================================== */
.split{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
@media (min-width:820px){ .split{ grid-template-columns:1fr 1fr; } }
.pane{ padding:clamp(1.75rem,3.4vw,2.75rem); border:1px solid var(--line); background:var(--white); }
.pane.is-alt{ background:var(--ink); border-color:var(--ink); color:var(--paper-2); }
.pane .eyebrow{ margin-bottom:1.4rem; }
.pane.is-alt .eyebrow{ color:var(--gold); }
.pane h3{ font-family:var(--f-display); font-size:var(--t-h3); font-weight:600; line-height:1.24; letter-spacing:-.015em; margin-bottom:1.2rem; }
.pane.is-alt h3{ color:var(--white); }
.pane li{ display:flex; gap:.85rem; padding-block:.62rem; font-size:.97rem; line-height:1.55; border-top:1px solid var(--line); }
.pane.is-alt li{ border-top-color:var(--line-dark); }
.pane li:first-child{ border-top:0; padding-top:0; }
.pane li i{ font-family:var(--f-label); font-style:normal; font-size:.7rem; color:var(--slate); padding-top:.42em; flex:none; }
.pane.is-alt li i{ color:var(--gold); }
.verdict{ margin-top:clamp(2rem,4vw,3rem); font-family:var(--f-display); font-size:clamp(1.25rem,2.5vw,1.95rem); font-weight:500; line-height:1.34; letter-spacing:-.015em; max-width:34ch; }

/* ==========================================================================
   Método — scrollytelling com coluna fixa
   ========================================================================== */
.method-grid{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:940px){ .method-grid{ grid-template-columns:.95fr 1.05fr; align-items:start; } }

.method-sticky{ position:sticky; top:clamp(7rem,15vh,9rem); }
.method-fig{ position:relative; overflow:hidden; margin:0;  border-radius:var(--r-img); }
.method-fig img{ width:100%; aspect-ratio:4/3; object-fit:cover; filter:saturate(.82) contrast(1.05); }
.method-fig::after{ content:""; position:absolute; inset:0; background:linear-gradient(200deg, transparent 34%, color-mix(in srgb,var(--ink) 76%, transparent)); }
.method-badge{
  position:absolute; z-index:2; left:0; bottom:0; padding:1.25rem 1.5rem; background:var(--gold); color:var(--ink);
  font-family:var(--f-label); font-size:var(--t-meta); letter-spacing:.14em; text-transform:uppercase; font-weight:500;
}
.method-count{ margin-top:1.5rem; font-family:var(--f-label); font-size:var(--t-meta); letter-spacing:.14em; color:var(--sand); }
.method-count b{ color:var(--gold); font-weight:500; }

.steps{ display:grid; gap:clamp(1rem,2vw,1.4rem); counter-reset:s; }
.step{
  padding:clamp(1.6rem,3vw,2.3rem); border:1px solid var(--line-dark); position:relative;
  transition:background .6s var(--ease), border-color .6s var(--ease), transform .6s var(--ease);
}
.step::before{
  counter-increment:s; content:"0" counter(s);
  font-family:var(--f-label); font-size:var(--t-meta); letter-spacing:.14em; color:var(--sand); opacity:.55;
  display:block; margin-bottom:1rem; transition:color .6s var(--ease), opacity .6s var(--ease);
}
.step h3{ font-family:var(--f-display); font-size:var(--t-h3); font-weight:600; letter-spacing:-.015em; line-height:1.24; margin-bottom:.85rem; }
.step p{ color:var(--sand); font-size:.99rem; }
.step.is-on{ background:color-mix(in srgb,var(--slate) 30%, transparent); border-color:var(--gold); }
.step.is-on::before{ color:var(--gold); opacity:1; }

/* ==========================================================================
   Palestras
   ========================================================================== */
.talks{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:900px){ .talks{ grid-template-columns:repeat(3,1fr); } }
.talk{
  background:var(--paper); padding:clamp(1.9rem,3.4vw,2.6rem); display:flex; flex-direction:column; gap:1.1rem;
  text-decoration:none; position:relative; isolation:isolate; min-height:100%;
  transition:background .55s var(--ease), color .55s var(--ease);
}
.talk::before{ content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease); }
.talk:hover{ background:var(--white); }
.talk:hover::before{ transform:scaleX(1); }
.talk .n{ font-family:var(--f-label); font-size:var(--t-meta); letter-spacing:.14em; color:var(--slate); }
.talk h3{ font-family:var(--f-display); font-size:clamp(1.45rem,2.3vw,1.9rem); font-weight:600; letter-spacing:-.018em; line-height:1.16; }
.talk p{ color:var(--slate); font-size:.97rem; }
.talk .who{ margin-top:auto; padding-top:1.1rem; border-top:1px solid var(--line); font-size:.83rem; color:var(--slate); line-height:1.5; }
.talk .who b{ display:block; font-family:var(--f-label); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--slate); font-weight:500; margin-bottom:.4rem; }
.talk .go{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.9rem; color:var(--ink); }
/* Home, três cartões lado a lado: as cinco partes de cada cartão (número, título,
   descrição, "Para quem" e "Ver a palestra") dividem as mesmas linhas da
   grade. A descrição mais longa define a altura da faixa, então o fio do
   "Para quem" e o "Ver a palestra" ficam no mesmo nível nos três. Sem
   suporte a subgrid, vale o flex de cima (fio empurrado para baixo). */
@supports (grid-template-rows:subgrid){
  @media (min-width:900px){
    .talks > .talk{ display:grid; grid-row:span 5; grid-template-rows:subgrid; row-gap:1.1rem; }
    .talks > .talk .who{ margin-top:0; }
    .talks > .talk .go{ justify-self:start; align-self:end; }
  }
}
.talk .go .arw{ transition:transform .45s var(--ease); }
.talk:hover .go .arw{ transform:translateX(5px); }

/* ==========================================================================
   Palco / vídeo
   ========================================================================== */
.stage-grid{ display:grid; gap:clamp(1rem,2vw,1.5rem); }
.stage-side{ display:grid; gap:clamp(1rem,2vw,1.5rem); grid-auto-rows:1fr; }
@media (min-width:760px){ .stage-side{ grid-template-columns:1fr 1fr; } }

/* A razão fica na caixa, não no botão: é ela que segura a altura
   quando o poster sai do DOM no fim do cross-fade. */
.vid-box{ position:relative; aspect-ratio:16/9; border-radius:var(--r-img); background:var(--ink); }
.vid{
  position:absolute; inset:0; z-index:1; margin:0; overflow:hidden; border-radius:var(--r-img);
  background:var(--ink); cursor:pointer; border:0; padding:0; width:100%; height:100%; display:block;
  opacity:1; transition:opacity .5s var(--ease);
}
.vid img{ width:100%; height:100%; object-fit:cover; transition:scale .8s var(--ease); }
/* A capa é um slide claro; sem este véu o rótulo branco some. */
.vid::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background:color-mix(in srgb, var(--ink) 46%, transparent);
  transition:background .8s var(--ease);
}
.vid:hover::after{ background:color-mix(in srgb, var(--ink) 30%, transparent); }
.vid:hover img{ scale:1.04; }
/* Entre o clique e o load do iframe: escurece um pouco e recolhe o play.
   Sem spinner — só o bastante para o clique não parecer ignorado. */
.vid.is-loading{ pointer-events:none; }
.vid.is-loading::after{ background:color-mix(in srgb, var(--ink) 64%, transparent); }
.vid.is-loading img{ scale:1; }
.vid.is-loading .vid-play{ opacity:.32; }
.vid.is-loading .vid-play .disc{ scale:.92; }
.vid.is-out{ opacity:0; }
/* O iframe entra por cima do poster com opacidade 0 e só aparece no load. */
.vid-frame{
  position:absolute; inset:0; z-index:2; width:100%; height:100%; border:0; display:block;
  border-radius:var(--r-img); opacity:0; transition:opacity .5s var(--ease);
}
.vid-frame.is-on{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .vid, .vid-frame, .vid-play, .vid-play .disc{ transition:none; }
}
.vid-play{
  position:absolute; inset:0; display:grid; place-content:center; gap:1.1rem; justify-items:center;
  pointer-events:none; text-align:center; padding:1.5rem; z-index:2;
  transition:opacity .45s var(--ease);
}
.vid-play .disc{
  width:clamp(64px,8vw,84px); aspect-ratio:1; border-radius:50%; background:var(--gold); color:var(--ink);
  display:grid; place-content:center; transition:scale .5s var(--ease);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 55%, transparent);
}
.vid:hover .vid-play .disc{ scale:1.09; }
.vid-play .lbl{ font-family:var(--f-label); font-size:var(--t-meta); letter-spacing:.16em; text-transform:uppercase; color:var(--white); }
.vid-meta{ margin-top:1rem; font-family:var(--f-label); font-size:var(--t-meta); letter-spacing:.12em; text-transform:uppercase; color:var(--sand); }

.stage-side figure{ margin:0; overflow:hidden; border-radius:var(--r-img); position:relative; }
.stage-side img{ width:100%; height:100%; min-height:180px; object-fit:cover; transition:scale .9s var(--ease); }
.stage-side figure:hover img{ scale:1.05; }
.stage-side figcaption{
  position:absolute; left:0; bottom:0; right:0; padding:1.6rem 1.25rem .95rem;
  background:linear-gradient(to top, color-mix(in srgb,var(--ink) 88%, transparent), transparent);
  font-family:var(--f-label); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sand);
}


/* ---------- Onde já esteve: grupos por tipo de contratante, só texto ---------- */
.onde{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:clamp(1.75rem,3vw,2.25rem);
  border-top:1px solid var(--line-dark);
  display:grid; gap:clamp(1.25rem,2.5vw,2rem);
}
.onde-head{ display:grid; gap:.8rem; }
.onde-head h3{ font-family:var(--f-display); font-size:var(--t-h3); font-weight:600; line-height:1.24; letter-spacing:-.015em; }
.onde-lista{ margin:0; display:grid; gap:clamp(1.25rem,2.5vw,2rem); }
@media (min-width:820px){ .onde-lista{ grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,3vw,2.25rem) clamp(1.5rem,3vw,2.5rem); } }
@media (min-width:1100px){ .onde-lista{ grid-template-columns:repeat(4,1fr); } }
.onde-lista dt{
  font-family:var(--f-label); font-size:var(--t-meta); font-weight:500; line-height:1.5;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gold); margin-bottom:.6rem;
}
.onde-lista dd{ margin:0; font-size:.93rem; line-height:1.6; color:var(--sand); }

/* ==========================================================================
   Bio
   ========================================================================== */

/* "Ler a biografia completa": o detalhe fica no DOM (indexável) mas fora do caminho */
.mais{ width:100%; }
.mais summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.65em;
  font-family:var(--f-label); font-size:var(--t-meta); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink);
  transition:color .35s var(--ease);
}
.mais summary::-webkit-details-marker{ display:none; }
.mais summary:hover{ color:var(--slate); }
.mais summary .ic{ position:relative; width:13px; height:13px; flex:none; }
.mais summary .ic::before,
.mais summary .ic::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:currentColor;
  transition:transform .4s var(--ease);
}
.mais summary .ic::after{ transform:rotate(90deg); }
.mais[open] summary .ic::after{ transform:rotate(0); }
.mais-corpo{ display:grid; gap:1rem; margin-top:1.3rem; max-width:54ch; justify-items:start; }
.mais-corpo p{ font-size:.94rem; line-height:1.62; color:var(--slate); }
@media (prefers-reduced-motion:no-preference){
  .mais[open] .mais-corpo{ animation:fade .5s var(--ease) both; }
}
.copy-bio{
  display:inline-flex; align-items:center; gap:.6em; justify-self:start;
  padding:.75em 1.15em; border:1px solid var(--line-strong); background:none; cursor:pointer;
  font-family:var(--f-label); font-size:var(--t-meta); letter-spacing:.13em; text-transform:uppercase; color:var(--slate);
  transition:border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.copy-bio:hover{ border-color:var(--ink); color:var(--ink); background:var(--white); }
.copy-bio.is-done{ border-color:#1FA855; color:#177E40; }

/* ---------- Home: "Quem é" — título à esquerda, texto em 1ª pessoa à direita ---------- */
.quem-in{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
.quem-head{ display:grid; gap:1.1rem; align-content:start; }
.quem-head h2{ max-width:14ch; text-wrap:balance; }
.quem-txt{ display:grid; gap:1.1rem; justify-items:start; max-width:60ch; }
.quem-txt p{ font-size:var(--t-lead); line-height:1.62; color:var(--slate); }
.quem-txt .link{ margin-top:.4rem; }
@media (min-width:900px){
  .quem-in{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2.5rem,6vw,6rem); align-items:start; }
}

/* ==========================================================================
   Página de biografia
   ========================================================================== */
.bio-ph-in{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.bio-ph .crumb{ margin-bottom:1.6rem; }
.bio-ph h1{ max-width:9ch; }
.bio-fig{ margin:0; }
.bio-fig picture{ display:block; overflow:hidden; border-radius:var(--r-img); }
.bio-fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 80%; }
.bio-fig figcaption,
.imprensa figcaption{ margin-top:.75rem; font-family:var(--f-label); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); line-height:1.5; }
@media (min-width:900px){
  .bio-ph-in{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
  .bio-fig{ max-width:440px; justify-self:end; width:100%; }
}
@media (max-width:899px){
  .bio-fig img{ aspect-ratio:4/3; object-position:center 30%; }
}

/* Biografia completa: texto corrido, largura de leitura. */
.bio-texto{ display:grid; gap:1.1rem; max-width:68ch; justify-items:start; }
.bio-texto p{ font-size:1.06rem; line-height:1.72; color:var(--ink); }
.bio-texto .copy-bio{ margin-top:.6rem; }

/* Trajetória: ano à esquerda, fato à direita, fio entre as linhas. */
.traj{ max-width:900px; border-top:1px solid var(--line); }
.traj li{ display:grid; gap:.35rem; padding-block:clamp(1rem,2vw,1.35rem); border-bottom:1px solid var(--line); }
.traj .ano{ font-family:var(--f-label); font-size:.8rem; font-weight:600; letter-spacing:.1em; color:var(--ink); font-variant-numeric:tabular-nums; }
.traj li p{ font-size:1rem; line-height:1.62; color:var(--slate); max-width:68ch; }
@media (min-width:700px){ .traj li{ grid-template-columns:8.5rem 1fr; gap:2rem; } .traj .ano{ padding-top:.2em; } }

/* Formação e cargos: dois blocos lado a lado. */
.fc-grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:760px){ .fc-grid{ grid-template-columns:1fr 1fr; } }
.fc{ background:var(--paper); padding:clamp(1.6rem,3vw,2.3rem); display:grid; gap:1rem; align-content:start; }
.fc h3{ font-family:var(--f-display); font-size:var(--t-h3); font-weight:600; letter-spacing:-.015em; line-height:1.24; }
.fc li{ padding-block:.6rem; border-top:1px solid var(--line); font-size:.98rem; line-height:1.55; color:var(--ink); }
.fc li:first-child{ border-top:0; padding-top:0; }

/* Fotos para imprensa: grade com legenda e link de download. */
.imprensa{ display:grid; gap:clamp(1.5rem,3vw,2.25rem); }
@media (min-width:760px){ .imprensa{ grid-template-columns:repeat(3,1fr); } }
.imprensa figure{ margin:0; display:grid; gap:.2rem; align-content:start; }
.imprensa picture{ display:block; overflow:hidden; border-radius:var(--r-img); }
.imprensa img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.imprensa .baixar{ margin-top:.5rem; justify-self:start; }

/* ==========================================================================
   Para quem / Formatos
   ========================================================================== */
.tiles{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:700px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px){ .tiles.is-4{ grid-template-columns:repeat(4,1fr); } }
.tile{ background:var(--paper); padding:clamp(1.75rem,3.2vw,2.4rem); display:grid; gap:.85rem; align-content:start; transition:background .5s var(--ease); }
.s-tint .tile{ background:var(--sand); }
.tile:hover{ background:var(--white); }
.tile .k{ font-family:var(--f-label); font-size:var(--t-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--slate); }
.tile h3{ font-family:var(--f-display); font-size:1.22rem; font-weight:600; line-height:1.28; letter-spacing:-.012em; }
.tile p{ font-size:.94rem; color:var(--slate); }
.tile .dur{ font-family:var(--f-label); font-size:.74rem; letter-spacing:.1em; color:var(--ink); padding-top:.6rem; margin-top:.2rem; border-top:1px solid var(--line); }


/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ max-width:900px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding-block:clamp(1.15rem,2.2vw,1.6rem);
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  font-family:var(--f-display); font-size:clamp(1.06rem,1.7vw,1.26rem); font-weight:600; line-height:1.35; letter-spacing:-.01em;
  transition:color .35s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--ink); }
.faq summary .ic{ flex:none; width:22px; height:22px; position:relative; margin-top:.3em; }
.faq summary .ic::before,.faq summary .ic::after{ content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:var(--gold); transition:transform .4s var(--ease); }
.faq summary .ic::after{ transform:rotate(90deg); }
.faq details[open] summary .ic::after{ transform:rotate(0); }
.faq .ans{ padding-bottom:clamp(1.15rem,2.2vw,1.6rem); max-width:70ch; color:var(--slate); }
.faq .ans p+p{ margin-top:.8rem; }
@media (prefers-reduced-motion:no-preference){
  .faq details[open] .ans{ animation:fade .5s var(--ease) both; }
  @keyframes fade{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
}

/* ==========================================================================
   Contratar
   ========================================================================== */
.book-grid{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
@media (min-width:960px){ .book-grid{ grid-template-columns:1.15fr .85fr; } }
.book-aside{ display:grid; gap:1.6rem; align-content:start; }
.book-aside .direct{ padding:clamp(1.5rem,3vw,2rem); border:1px solid var(--line-dark); display:grid; gap:1rem; }
.book-aside .direct p{ font-size:.94rem; color:var(--sand); }
/* 320px: o e-mail (sem espaço para quebrar) deixava a caixa 1px maior que a
   tela. Abaixo de 360 o respiro interno cai um pouco; o overflow-wrap é só a
   rede de segurança para telas ainda menores. */
.book-aside > *{ min-width:0; }
.contact-list a span:last-child{ min-width:0; overflow-wrap:anywhere; }
@media (max-width:359px){ .book-aside .direct{ padding:1.25rem; } }
.contact-list{ display:grid; gap:.9rem; }
.contact-list a{ display:flex; align-items:center; gap:.75rem; text-decoration:none; font-size:.94rem; color:var(--paper-2); transition:color .35s; }
.contact-list a:hover{ color:var(--gold); }
.contact-list .ic{ width:34px; height:34px; border:1px solid var(--line-dark); display:grid; place-content:center; flex:none; transition:border-color .35s, background .35s; }
.contact-list a:hover .ic{ border-color:var(--gold); background:color-mix(in srgb,var(--gold) 14%, transparent); }

.form{ display:grid; gap:1.05rem; grid-template-columns:minmax(0,1fr); }
.f-row{ display:grid; gap:1.05rem; grid-template-columns:minmax(0,1fr); }
/* Sem isto, a opção mais longa do select dava ao campo uma largura mínima
   maior que a tela de 320px (~321px). */
.f-row > *, .book-grid > *{ min-width:0; }
@media (min-width:620px){ .f-row.is-2{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.field{ display:grid; gap:.45rem; }
.field label{ font-family:var(--f-label); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--sand); }
.field label .opt{ color:var(--sand); font-weight:400; }
.field input,.field select,.field textarea{
  /* 16px no mínimo: abaixo disso o iPhone dá zoom na página ao focar o campo. */
  font:inherit; font-size:1rem; color:var(--white); background:color-mix(in srgb,var(--slate) 22%, transparent);
  border:1px solid var(--line-dark); padding:.9em 1em; width:100%; border-radius:0;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.field textarea{ min-height:110px; resize:vertical; }
.field select{ appearance:none; padding-right:2.6em; text-overflow:ellipsis; background-image:linear-gradient(45deg,transparent 50%,var(--sand) 50%),linear-gradient(135deg,var(--sand) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--gold); background:color-mix(in srgb,var(--slate) 34%, transparent); outline:none; }
/* Pelo teclado, além da borda dourada, o contorno areia das áreas escuras. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ outline:2px solid var(--sand); outline-offset:2px; }
.field input::placeholder,.field textarea::placeholder{ color:var(--sand); opacity:1; }
.field select option{ background:var(--ink); color:var(--white); }
.form .note{ font-size:.79rem; color:var(--sand); line-height:1.55; }
.form .note a{ color:var(--sand); }
/* Aviso curto antes dos campos: só nome e organização são obrigatórios. */
.form .f-intro{ margin:0; font-size:.88rem; color:var(--sand); line-height:1.55; }

/* Erro de campo obrigatório: mensagem curta embaixo do campo. Texto em areia
   (legível no escuro) com fio dourado; o campo ganha borda dourada. */
.f-erro{
  font-size:.8rem; line-height:1.45; color:var(--sand);
  padding-left:.65rem; border-left:2px solid var(--gold);
}
.f-erro[hidden]{ display:none; }
.field [aria-invalid="true"]{ border-color:var(--gold); border-width:1px 1px 1px 3px; }


/* Plano B do envio, logo abaixo do botão. */
/* Sem JavaScript o formulário não envia (o botão vem desabilitado no HTML e
   só o site.js o libera): o botão some e o <noscript> mostra o contato direto. */
html:not(.js) .form [type="submit"]{ display:none; }
.form .sem-js{
  font-size:.94rem; line-height:1.55; color:var(--mist);
  padding-left:.65rem; border-left:2px solid var(--gold);
}
.form .sem-js a{ color:var(--mist); }

/* ==========================================================================
   Rodapé
   ========================================================================== */
.ftr{ background:var(--ink); color:var(--paper-2); border-top:1px solid var(--line-dark); padding-block:var(--sect) 2rem; }
.ftr-top{ display:grid; gap:clamp(2rem,4vw,3rem); padding-bottom:clamp(2.5rem,5vw,3.5rem); border-bottom:1px solid var(--line-dark); }
@media (min-width:860px){ .ftr-top{ grid-template-columns:1.4fr 1fr 1fr; } }
.ftr .logo{ opacity:.92; }
.ftr h4{ font-family:var(--f-label); font-size:var(--t-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:1.2rem; }
.ftr ul{ display:grid; gap:.7rem; }
.ftr a{ text-decoration:none; font-size:.93rem; color:var(--mist); transition:color .35s; }
.ftr a:hover{ color:var(--gold); }
.ftr .tag{ margin-top:1.4rem; font-size:.94rem; color:var(--sand); max-width:34ch; line-height:1.6; }
.socials{ display:flex; gap:.6rem; margin-top:1.6rem; }
.socials a{ width:42px; height:42px; border:1px solid var(--line-dark); display:grid; place-content:center; transition:border-color .35s, background .35s, color .35s; }
.socials a:hover{ border-color:var(--gold); background:color-mix(in srgb,var(--gold) 14%, transparent); color:var(--gold); }
.ftr-btm{ padding-top:2rem; display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; font-family:var(--f-label); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sand); }

/* WhatsApp flutuante */
.wa-float{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:90;
  width:56px; height:56px; border-radius:50%; background:#1FA855; color:#fff;
  display:grid; place-content:center; text-decoration:none;
  box-shadow:0 14px 34px -10px rgba(31,168,85,.6);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  transform:translateY(220%) scale(.7);
}
.wa-float.is-on{ transform:none; }
/* Flutua sobre seções claras e escuras: contorno grafite com anel areia por
   dentro, para o foco aparecer nas duas. */
.wa-float:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; box-shadow:0 0 0 4px var(--sand); }
.wa-float:hover{ transform:scale(1.08); box-shadow:0 18px 42px -10px rgba(31,168,85,.72); }

/* Conversa flutuante: painel que o botão verde abre (montado pelo site.js) */
.wa-float.is-open{ transform:none; }
.chat{
  position:fixed; z-index:91;
  right:clamp(1rem,3vw,2rem); bottom:calc(clamp(1rem,3vw,2rem) + 56px + 12px);
  width:min(360px, calc(100vw - 32px));
  max-height:min(540px, calc(100dvh - 120px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--white); color:var(--ink);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 60px -18px rgba(28,44,57,.45), 0 4px 14px -6px rgba(28,44,57,.18);
  font-family:var(--f-sans); font-size:.95rem; line-height:1.5;
}
.chat[hidden]{ display:none; }
@media (max-width:480px){ .chat{ right:16px; } }
@media (prefers-reduced-motion:no-preference){
  .chat:not([hidden]){ animation:chat-in .32s var(--ease) both; }
  @keyframes chat-in{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
}
.chat-head{ display:flex; align-items:center; gap:.75rem; padding:.85rem .9rem .85rem 1rem; background:var(--ink); color:var(--white); }
.chat-av{ width:36px; height:36px; border-radius:50%; background:var(--white); border:1px solid var(--sand); flex:none; object-fit:cover; }
.chat-who{ flex:1; min-width:0; }
.chat-name{ margin:0; font-family:var(--f-display); font-weight:600; font-size:1.02rem; line-height:1.2; color:var(--white); }
.chat-sub{ margin:.1rem 0 0; font-size:.72rem; letter-spacing:.04em; color:var(--sand); }
.chat-x{
  flex:none; width:36px; height:36px; display:grid; place-content:center; border-radius:50%;
  border:0; background:transparent; color:var(--mist); cursor:pointer;
}
.chat-x:hover{ background:color-mix(in srgb,var(--sand) 18%, transparent); }
.chat-x:focus-visible{ outline-color:var(--sand); outline-offset:0; }
.chat-log{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:1rem; display:flex; flex-direction:column; gap:.55rem; background:var(--white); }
.chat-msg{ margin:0; max-width:85%; padding:.6rem .85rem; border-radius:12px; overflow-wrap:anywhere; }
.chat-msg.is-bot{ align-self:flex-start; background:var(--mist); color:var(--ink); border-bottom-left-radius:4px; }
.chat-msg.is-me{ align-self:flex-end; background:var(--ink); color:var(--mist); border-bottom-right-radius:4px; }
.chat-typing{ display:flex; gap:4px; padding:.8rem .9rem; }
.chat-typing i{ width:6px; height:6px; border-radius:50%; background:var(--slate); opacity:.35; animation:chat-dot 1s infinite ease-in-out; }
.chat-typing i:nth-child(2){ animation-delay:.15s; }
.chat-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes chat-dot{ 50%{ opacity:1; } }
.chat-opts{ display:flex; flex-direction:column; align-items:flex-end; gap:.45rem; margin-top:.15rem; }
.chat-opt{
  display:inline-block; max-width:100%; padding:.55rem .95rem; border-radius:999px;
  border:1px solid var(--ink); background:var(--white); color:var(--ink);
  font:inherit; font-size:.9rem; font-weight:500; line-height:1.3; text-align:right; text-decoration:none; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.chat-opt:hover{ background:var(--ink); color:var(--mist); }
.chat-opt.is-soft{ border-color:transparent; color:var(--slate); font-weight:400; font-size:.84rem; padding-block:.35rem; }
.chat-opt.is-soft:hover{ background:var(--mist); color:var(--ink); }
.chat-form{ margin-top:.15rem; }
.chat-row{ display:flex; gap:.45rem; }
.chat-in{
  flex:1; min-width:0; padding:.6rem .85rem; border:1px solid var(--line-strong); border-radius:999px;
  background:var(--white); color:var(--ink); font:inherit; font-size:1rem;
}
.chat-in:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.chat-in[aria-invalid="true"]{ border-color:var(--ink); border-width:2px; }
.chat-send{
  flex:none; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:var(--ink); color:var(--mist); display:grid; place-content:center;
}
.chat-send:hover{ background:var(--slate); }
.chat-err{ margin:.4rem 0 0 .85rem; font-size:.82rem; color:var(--ink); font-weight:500; }
@media (prefers-reduced-motion:reduce){ .chat-typing i{ animation:none; opacity:.6; } }

/* ==========================================================================
   Páginas internas de palestra
   ========================================================================== */
.ph{ padding-top:clamp(8.5rem,17vh,11.5rem); padding-bottom:var(--sect); position:relative; }
.ph .crumb{ font-family:var(--f-label); font-size:var(--t-meta); letter-spacing:.13em; text-transform:uppercase; color:var(--slate); margin-bottom:1.6rem; }
.ph .crumb a{ text-decoration:none; color:var(--slate); }
.ph .crumb a:hover{ text-decoration:underline; }
.ph h1{ font-size:clamp(2.3rem,5.2vw,4.2rem); max-width:17ch; margin-block:1.2rem 1.5rem; }
/* Abaixo de 360px, "Empreendedorismo:" no mínimo de 2.3rem media ~340px e
   estourava a tela de 320 (cada palavra vira um <span> no data-split e não
   quebra). O mínimo passa a acompanhar a largura; a partir de 360 nada muda. */
@media (max-width:359px){ .ph h1{ font-size:9.2vw; } }
.ph .lead{ max-width:56ch; }
.ph .btn-row{ margin-top:2.2rem; }
/* Botão de contratação logo abaixo da abertura. A linha de duração ao lado
   saiu em 29/09/2026, a pedido do Rodrigo. */
.ph-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1.4rem; margin-top:clamp(1.6rem,3vw,2.2rem); }
/* O rótulo é longo: no celular o botão pode encolher até a largura da coluna
   (o texto quebra em 320px) e perde um pouco do respiro lateral, para caber
   numa linha só em 390px. */
.ph-cta .btn{ max-width:100%; }
@media (max-width:420px){ .ph-cta .btn{ padding-inline:1.2em; } }
.ph-fig{ margin:clamp(2.5rem,5vw,4rem) 0 0; }
/* O arredondamento fica na foto, não na figure: assim a legenda (figcaption)
   fica abaixo da imagem sem ser recortada. */
.ph-fig picture{ display:block; overflow:hidden; border-radius:var(--r-img); }
.ph-fig figcaption{ margin-top:.75rem; font-family:var(--f-label); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); line-height:1.5; }
.ph-vid{ margin:clamp(2.5rem,5vw,4rem) 0 0; }

/* Faixa de destaque logo abaixo do teaser: a ponte de quem acabou de assistir
   para o formulário. Só texto e botão — sem cabeçalho de seção, senão ela
   volta a parecer mais um bloco de conteúdo em vez de um chamado. */
.cta-faixa{ padding-block:var(--sect); }
.cta-faixa-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1.5rem,4vw,3.5rem); flex-wrap:wrap;
}
.cta-faixa .lead{ margin:0; max-width:58ch; flex:1 1 30ch; }
/* O .btn padrão é tinta sobre tinta aqui; no escuro ele vira dourado. */
.cta-faixa .btn{
  flex:none;
  --bg:var(--gold); --fg:var(--ink); --bd:var(--gold);
  --bg-h:var(--white); --fg-h:var(--ink); --bd-h:var(--white);
}
.ph-fig img{ width:100%; aspect-ratio:21/9; object-fit:cover; object-position:center 32%; }

.takeaways{ display:grid; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); }
@media (min-width:800px){ .takeaways{ grid-template-columns:repeat(2,1fr); } }
.takeaway{ background:var(--ink); padding:clamp(1.6rem,3vw,2.2rem); display:grid; gap:.7rem; align-content:start; transition:background .5s var(--ease); }
.takeaway:hover{ background:color-mix(in srgb,var(--slate) 26%, transparent); }
.takeaway .k{ font-family:var(--f-label); font-size:var(--t-meta); letter-spacing:.14em; color:var(--gold); }
.takeaway h3{ font-family:var(--f-display); font-size:1.16rem; font-weight:600; line-height:1.32; }
.takeaway p{ font-size:.93rem; color:var(--sand); }

.agenda{ max-width:820px; counter-reset:a; }
.agenda li{ display:grid; grid-template-columns:auto 1fr; gap:1.4rem; padding-block:clamp(1.2rem,2.4vw,1.7rem); border-top:1px solid var(--line); }
.agenda li:first-child{ border-top:0; padding-top:0; }
.agenda li::before{ counter-increment:a; content:"0" counter(a); font-family:var(--f-label); font-size:var(--t-meta); letter-spacing:.13em; color:var(--slate); padding-top:.45em; }
.agenda h3{ font-family:var(--f-display); font-size:var(--t-h3); font-weight:600; letter-spacing:-.014em; line-height:1.28; margin-bottom:.5rem; }
.agenda p{ color:var(--slate); font-size:.97rem; max-width:62ch; }

.other-talks{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:760px){ .other-talks{ grid-template-columns:1fr 1fr; } }
/* Página 404: as três palestras. */
@media (min-width:900px){ .other-talks.is-3{ grid-template-columns:repeat(3,1fr); } }
.nf .other-talks{ margin-top:clamp(2rem,4vw,3rem); }

/* Vão sob o vídeo (plano 1.3). O .rv-mask revela a imagem de cima para baixo
   conforme ela entra na tela; no topo da página de palestra o vídeo nasce
   meio dentro da primeira dobra, e a parte ainda recortada aparecia como
   ~250 px de fundo vazio antes da faixa escura. É conteúdo da primeira tela:
   fica sempre inteiro, como o hero da home. */
.ph .rv-mask{ animation:none; clip-path:none; }

/* Linha datada logo abaixo do lead (marco legal e revisão). */
.ph .nota-neutra{ margin-top:1.4rem; max-width:62ch; }

/* Resumo para quem aprova: quatro linhas, rótulo à esquerda. */
.resumo-sec{ padding-block:var(--sect); }
.resumo{ margin:0; max-width:980px; border-top:1px solid var(--line); }
.resumo-item{ display:grid; gap:.4rem; padding-block:clamp(1rem,2vw,1.35rem); border-bottom:1px solid var(--line); }
.resumo dt{ font-family:var(--f-label); font-size:var(--t-meta); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); padding-top:.35em; }
.resumo dd{ margin:0; font-size:1.02rem; line-height:1.6; color:var(--ink); max-width:68ch; }
@media (min-width:760px){ .resumo-item{ grid-template-columns:13rem 1fr; gap:2rem; } }

/* Quem conduz: sem o bloco de prova, o s-head fecha a seção sozinho. */
.quem-conduz .s-head{ margin-bottom:0; max-width:68ch; }
.onde-lista > div{ min-width:0; }
@media (min-width:1100px){ .onde-lista.is-3{ grid-template-columns:repeat(3,1fr); } }

/* Página legal */
.legal{ padding-top:clamp(8.5rem,16vh,11rem); }
.legal-body{ max-width:75ch; display:grid; gap:1.15rem; }
.legal-body h2{ font-family:var(--f-display); font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:600; letter-spacing:-.015em; margin-top:1.6rem; }
.legal-body p,.legal-body li{ color:var(--slate); }
.legal-body ul{ display:grid; gap:.55rem; padding-left:1.2rem; list-style:disc; }

/* ==========================================================================
   Revelações no scroll
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js .rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0ms); }
  .js .rv.is-in{ opacity:1; transform:none; }
  .js .rv-w > *{ display:inline-block; opacity:0; transform:translateY(.26em) rotate(.9deg); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .js .rv-w.is-in > *{ opacity:1; transform:none; }
}

/* Máscara de revelação em imagens — animação de scroll nativa.
   Sem suporte a animation-timeline, a imagem simplesmente aparece: nunca fica oculta. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .rv-mask{ animation:mask-in linear both; animation-timeline:view(); animation-range:entry 4% entry 62%; }
    @keyframes mask-in{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0 0 0 0); } }
  }
}

/* Transições entre páginas */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){ animation:vt-out .28s var(--ease) both; }
  ::view-transition-new(root){ animation:vt-in .5s var(--ease) both; }
  @keyframes vt-out{ to{ opacity:0; transform:translateY(-10px);} }
  @keyframes vt-in{ from{ opacity:0; transform:translateY(14px);} }
}

/* ---------- Responsivo ---------- */
@media (max-width:880px){
  .burger{ display:grid; }
  /* O menu começa logo abaixo do cabeçalho e cabe na tela: em tela baixa
     (390×500, celular deitado) rola por dentro, e o "Contratar palestra"
     continua alcançável. Fechado, além do recorte, fica visibility:hidden
     (depois que o recorte termina), para o Tab não passar por links que não
     se veem. */
  .nav{
    position:fixed; inset:var(--hdr-h,clamp(76px,7vw,100px)) 0 auto 0; padding:1.5rem var(--gut) 2.5rem;
    max-height:calc(100vh - var(--hdr-h,clamp(76px,7vw,100px)));
    max-height:calc(100dvh - var(--hdr-h,clamp(76px,7vw,100px)));
    overflow-y:auto; overscroll-behavior:contain;
    background:var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0;
    clip-path:inset(0 0 100% 0); visibility:hidden;
    transition:clip-path .55s var(--ease), visibility 0s linear .55s; z-index:-1;
  }
  .nav.is-open{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .55s var(--ease), visibility 0s; }
  /* Com o menu aberto, o cabeçalho ganha fundo: o menu não passa mais por
     baixo dele. */
  .hdr:has(.nav.is-open){ background:var(--paper); border-bottom-color:var(--line); }
  .nav > *{ padding-block:.35rem; }
  .nav a:not(.btn){ font-size:1.05rem; padding-block:.75rem; border-bottom:1px solid var(--line); display:block; }
  .nav a:not(.btn)::after{ display:none; }
  .nav .btn{ justify-content:center; margin-top:1.25rem; padding:1em; font-size:.9rem; }
  /* inherit, não visible: um filho visible reapareceria no Tab com o menu fechado. */
  .sub{ position:static; translate:none; opacity:1; visibility:inherit; box-shadow:none; border:0; padding:0 0 0 1rem; background:none; min-width:0; }
  .sub a{ padding:.65rem 0; border-bottom:1px solid var(--line); font-size:.92rem; }
  .sub a:hover{ background:none; color:var(--ink); }
  .method-sticky{ position:static; }
  .step.is-on{ background:transparent; border-color:var(--line-dark); }
}

/* Âncoras não escondidas sob o cabeçalho fixo */
[id]{ scroll-margin-top:clamp(86px,13vh,118px); }

/* ---------- Depoimentos (prints de WhatsApp) ---------- */
.deps{
  display:grid; gap:clamp(1.25rem,2.6vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.dep{
  margin:0; background:var(--white); border:1px solid var(--line);
  border-radius:14px; padding:.7rem .7rem 1.15rem;
}
.dep img{
  width:100%; height:auto; display:block;
  border-radius:10px; border:1px solid var(--line);
}
.dep figcaption{ margin-top:.95rem; padding-inline:.4rem; line-height:1.45; }
.dep figcaption b{ display:block; font-size:.95rem; color:var(--ink); }
.dep figcaption span{ display:block; margin-top:.15rem; font-size:.85rem; color:var(--slate); }