/* ==================================================================
   LP das lives semanais · Advocacia de Impacto
   Mobile-first: a maioria chega pelo link da bio, no celular.
   As cores saem do banner aprovado pelo Guilherme, amostradas pixel a
   pixel — creme #FAF7F3, cartão #0D1520, dourado #B8935A.

   O sistema visual é o do banner. A ESTRUTURA não: banner é agenda,
   página é argumento. Promessa, prova e botão vêm antes da lista.
   ================================================================== */

:root{
  --cream:#FAF7F3; --cream2:#F6F1E8; --sand:#EFE7DC;
  --line:#E6DCCB; --line2:#EFE7DA;
  --ink:#0D1520; --ink2:#0F141A; --ink3:#55616E; --muted:#96A0AB;
  --gold:#B8935A; --gold2:#C9A46A; --gold3:#8E6F49; --goldsoft:#F4EBDB;
  --no:#B4472F;
  --r:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
/* `hidden` tem que vencer qualquer `display` declarado depois — é ele
   que segura a tela de obrigado, o bloco "já rolou" e as mensagens de
   erro fora do ar até a hora de aparecerem. */
[hidden]{display:none!important}
/* O botão do hero é uma âncora para #avisar: o scroll suave da rolagem
   até o formulário vem daqui, sem uma linha de JavaScript. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  background:var(--cream);color:var(--ink2);
  font-family:"Albert Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,.disp{font-family:Archivo,Georgia,serif;font-weight:800;line-height:1.04;letter-spacing:-.03em}
button,input{font:inherit;color:inherit}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px;width:100%}
.nar{max-width:640px}

/* fita dourada do topo do banner */
.topbar{height:5px;background:linear-gradient(90deg,var(--gold3),var(--gold2) 46%,var(--gold))}

.eb{display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em;
    text-transform:uppercase;color:var(--gold);margin-bottom:10px}

/* ============================ HERO ============================ */
.hero{padding:18px 0 6px}

.card{
  position:relative;
  border-radius:20px;
  overflow:hidden;                  /* no celular o retrato entra no fluxo */
  color:#fff;
  padding:24px 20px 0;
  background:
    radial-gradient(58% 62% at 66% 34%, rgba(200,163,104,.34) 0%, rgba(200,163,104,.09) 46%, transparent 72%),
    radial-gradient(135% 115% at 18% 0%, #18232F 0%, #0D1520 55%, #0A1017 100%);
  box-shadow:0 22px 48px -26px rgba(13,21,32,.55);
}

/* No celular a frase inteira não cabe numa linha só dentro do cartão
   (faltam ~50px em 390), e encolher a fonte até caber deixaria o texto
   ilegível. Então a pílula vira inline-block e quebra em duas linhas —
   com "ao vivo no @guischumann" preso por `nq`, para a quebra cair
   antes do arroba e não no meio dele. */
.chip{
  display:inline-block;max-width:100%;
  padding:7px 13px;border-radius:14px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  font-size:clamp(11px,3vw,13px);font-weight:500;
  color:rgba(255,255,255,.86);line-height:1.45;
}
.chip .nq{white-space:nowrap}
.chip b{color:var(--gold2);font-weight:700}
.chip i{color:rgba(255,255,255,.34);font-style:normal}

/* A promessa é uma frase longa: em caixa alta ela vira um paredão e
   perde a leitura. Mantém Archivo 800 e o acento dourado do banner —
   só a metade que carrega a promessa fica em ouro.
   `balance` evita a última linha com uma palavra sozinha. */
h1{
  margin-top:16px;
  font-size:clamp(27px,5.6vw,45px);
  line-height:1.06;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--gold2)}

.sub{
  margin-top:14px;max-width:54ch;
  font-size:clamp(14.5px,3.9vw,18px);line-height:1.55;
  color:rgba(255,255,255,.76);
}

/* botão na 1ª dobra, à esquerda, sob o texto */
.acoes{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:20px}
/* Um corpo menor que o do botão do formulário de propósito: "Quero ser
   avisado no WhatsApp" é a frase mais longa da página e, no cartão do
   celular, com 16.5px ela quebra em duas linhas dentro do botão. */
.acoes .btn{margin-top:0;font-size:15px;padding:15px 16px;gap:8px}
.acoes .btn .ar{width:20px;height:20px;font-size:12px}
/* iPhone SE e afins: mais um passo para a frase caber numa linha só */
@media (max-width:374px){
  .acoes .btn{font-size:13.8px;padding:14px 12px}
}
.link{
  color:rgba(255,255,255,.7);text-decoration:none;font-size:14px;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:2px;transition:color .15s,border-color .15s;
}
.link:hover{color:var(--gold2);border-bottom-color:var(--gold2)}

/* retrato: no celular ele fecha o cartão por baixo, colado na borda */
.gui{
  width:64%;max-width:270px;height:auto;
  margin:14px -20px -1px auto;
  filter:drop-shadow(-16px 12px 26px rgba(0,0,0,.34));
}

/* ====================== SEÇÕES DE ARGUMENTO ====================== */
.sec{padding:34px 0 8px}
.sec + .sec{padding-top:30px}

/* ---------- para quem é ---------- */
.lista-num{list-style:none;border-top:1px solid var(--line)}
.item{
  display:grid;grid-template-columns:40px 1fr;gap:0 14px;align-items:baseline;
  padding:15px 2px;border-bottom:1px solid var(--line);
}
.item .n{font-family:Archivo;font-weight:800;font-size:20px;letter-spacing:-.03em;color:var(--gold)}
.item p{font-size:clamp(15.5px,4.1vw,19px);font-weight:500;line-height:1.35;letter-spacing:-.01em}

.fecha{
  margin-top:16px;padding-left:14px;border-left:3px solid var(--gold);
  font-family:Archivo;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(16px,4.3vw,20px);line-height:1.3;
}

/* ---------- os temas ---------- */
.temas h2{font-size:clamp(19px,5vw,25px);letter-spacing:-.028em}
.grupo + .grupo{margin-top:32px}
.temalista{list-style:none;margin-top:12px;border-top:1px solid var(--line)}

.tema{padding:16px 2px;border-bottom:1px solid var(--line);transition:opacity .3s}
.cat{display:block;font-size:10px;font-weight:700;letter-spacing:.22em;
     text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.tema h3{font-family:Archivo;font-weight:700;font-size:clamp(16.5px,4.4vw,22px);
         line-height:1.24;letter-spacing:-.022em;color:var(--ink2)}

.tag{
  display:inline-block;margin-top:9px;padding:4px 10px;border-radius:99px;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--gold);background:var(--gold);color:#fff;
}
.tag.hoje{background:var(--ink);border-color:var(--ink)}

/* a da semana: é onde o olho tem que parar */
.tema.proxima{
  background:linear-gradient(94deg,var(--goldsoft),transparent 62%);
  border-radius:12px;padding-left:14px;padding-right:12px;
  box-shadow:inset 3px 0 0 var(--gold);
}

/* link da gravação, quando a live passada tiver uma */
.grav{
  display:inline-block;margin-top:9px;font-size:13px;font-weight:700;
  color:var(--gold3);text-decoration:none;border-bottom:1px solid rgba(142,111,73,.35);
}
.grav:hover{color:var(--ink2);border-bottom-color:var(--ink2)}

/* esqueleto enquanto a agenda não chega do banco. Só forma, sem texto
   falso: linha cinza ninguém tenta ler, "Carregando..." sim. */
.esq{pointer-events:none}
.esq .barra{
  display:block;height:11px;border-radius:6px;background:var(--sand);
  animation:pulsa 1.15s ease-in-out infinite;
}
.esq .b1{width:82px;height:8px;margin-bottom:12px}
.esq .b2{width:min(100%,420px)}
@keyframes pulsa{50%{opacity:.45}}

/* já rolou: continua legível, mas atrás da fila */
.grupo.passado h2{color:var(--ink3)}
.grupo.passado .tema{opacity:.5}
.grupo.passado .cat{color:var(--muted)}

.vazio,.gravacao{margin-top:12px;color:var(--ink3);font-size:15px}

/* ---------- como funciona ---------- */
.passos{list-style:none;display:grid;gap:10px}
.passo{
  display:flex;align-items:center;gap:13px;
  background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:14px 16px;font-size:15.5px;font-weight:500;line-height:1.3;
}
.passo b{
  flex:0 0 auto;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;
  background:var(--goldsoft);color:var(--gold3);
  font-family:Archivo;font-weight:800;font-size:14px;
}

/* ========================== CAPTAÇÃO ========================== */
.cta{padding:34px 0 46px;scroll-margin-top:12px}

.box{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 22px 24px;box-shadow:0 16px 40px -30px rgba(13,21,32,.5);
}
.tit{font-size:clamp(24px,6.4vw,34px);margin-bottom:10px;letter-spacing:-.03em}
.lede{color:var(--ink3);font-size:15.5px;margin-bottom:20px}

.campo{margin-bottom:14px}
.campo label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;
             color:var(--ink3);margin-bottom:6px}
.campo label s{text-decoration:none;color:var(--muted);font-weight:500}
.campo input{
  width:100%;padding:14px 15px;border-radius:11px;
  border:1.5px solid var(--line);background:var(--cream);
  font-size:16px;color:var(--ink2);transition:border-color .15s,background .15s;
}
.campo input::placeholder{color:#A9B2BB}
.campo input:focus{outline:none;border-color:var(--gold);background:#fff;
                   box-shadow:0 0 0 4px rgba(184,147,90,.14)}
.campo input.ruim{border-color:var(--no);background:#FDF6F4}

.erro{display:block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--no)}
.erro.geral{margin:12px 0 0;padding:11px 13px;border-radius:10px;
            background:#FDF2EF;border:1px solid #F0D5CD}

/* botão dourado, texto escuro — como pedido no briefing */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  margin-top:8px;padding:16px 22px;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#181206;
  font-family:"Albert Sans",sans-serif;font-size:16.5px;font-weight:700;
  text-decoration:none;position:relative;overflow:hidden;
  transition:transform .16s,box-shadow .16s,filter .16s;
  box-shadow:0 10px 22px -12px rgba(142,111,73,.9);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04);
           box-shadow:0 14px 26px -12px rgba(142,111,73,.95)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.62;cursor:progress;transform:none}
.btn .ar{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;
         background:rgba(24,18,6,.14);font-size:13px;flex:0 0 auto}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:45%;height:100%;pointer-events:none;
            background:linear-gradient(118deg,transparent,rgba(255,255,255,.5),transparent);
            transform:skewX(-22deg)}
.btn:hover::after{animation:brilho .78s ease-out}
@keyframes brilho{to{left:135%}}

.btn.ghost{background:#fff;color:var(--ink2);border:1.5px solid var(--line);
           box-shadow:none;font-weight:600}
.btn.ghost:hover{border-color:var(--gold);background:var(--cream)}
.btn.ghost .ar{background:var(--goldsoft);color:var(--gold3)}

.lgpd{margin-top:14px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.45}

/* ------- tela de obrigado ------- */
.obg{text-align:center}
.obg .ok{
  display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;
  border-radius:50%;background:var(--goldsoft);color:var(--gold3);
}
.obg .ok svg{width:26px;height:26px}
.obg .lede{margin-bottom:22px}
.obg .sob{margin:9px 0 20px;font-size:12.5px;color:var(--muted);line-height:1.45}
.obg .sob:last-child{margin-bottom:0}

/* =========================== RODAPÉ =========================== */
footer{border-top:1px solid var(--line);background:var(--cream2);padding:22px 0 30px}
.fbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ig{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink2);
    font-weight:700;font-size:16px;letter-spacing:-.01em}
.ig svg{width:21px;height:21px;flex:0 0 auto}
.ig:hover{color:var(--gold3)}
.marca{width:150px;height:auto;opacity:.94}

/* ==================== barra fixa do celular ==================== */
.barra-mob{
  position:fixed;inset-inline:0;bottom:0;z-index:40;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(250,247,243,.9);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(120%);transition:transform .28s ease;
}
.barra-mob.aparece{transform:translateY(0)}
.barra-mob .btn{margin:0}
body.convertido .barra-mob{display:none}

/* ========================= DESKTOP ========================= */
@media (min-width:820px){
  body{font-size:17px}
  .hero{padding:32px 0 10px}

  .card{
    overflow:visible;                 /* a cabeça passa por cima da borda */
    border-radius:26px;
    padding:44px 52px 46px;
    min-height:clamp(340px,32vw,420px);
    display:flex;align-items:center;
  }
  /* 52%: o retrato ocupa 40% da largura e a coluna de texto não pode
     encostar nele — a promessa é longa e ia correr por baixo do ombro.
     z-index só por garantia: quem sobrepõe é sempre o texto. */
  .card-txt{max-width:58%;position:relative;z-index:2}

  /* fora do celular sobra largura: volta a ser a pílula de uma linha só
     do banner */
  .chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
        border-radius:99px;line-height:1.3}

  /* Fora do celular o H1 volta a crescer com a largura, mas devagar: a
     frase tem 89 caracteres e numa coluna de 52% um corpo grande demais
     vira paredão de cinco linhas e empurra o botão para fora da dobra. */
  h1{font-size:clamp(30px,4.1vw,45px)}

  .acoes{flex-direction:row;align-items:center;gap:22px;margin-top:26px}
  /* fora do celular o botão volta ao corpo dos outros e para de ocupar
     a largura toda: ele fica à esquerda, do tamanho da frase */
  .btn.inline{width:auto}
  .acoes .btn{font-size:16px;padding:16px 26px;gap:10px}
  .acoes .btn .ar{width:22px;height:22px;font-size:13px}

  /* Ancorado pela LARGURA do cartão, não pela altura. A versão antiga
     media a foto em % da altura, e agora o cartão cresce com o texto:
     qualquer palavra a mais na promessa inflava o retrato até ele
     invadir a coluna da esquerda. Com 40% de largura a foto é estável
     em qualquer viewport, e a cabeça continua rompendo a borda de cima
     onde o cartão é mais baixo que ela — que é o efeito do banner.

     `right:0` e não um valor negativo: no banner o retrato rompe só a
     borda de CIMA — à direita ele encosta no limite do cartão e para.
     Com margem negativa o ombro atravessava o canto arredondado e ia
     parar em cima do creme, que é o único lugar onde a foto não pode
     estar. Recortar pelo `overflow` não resolveria: overflow em um eixo
     só não existe em CSS (fixar um deles força `auto` no outro), e o
     `hidden` cortaria justamente a cabeça. */
  .gui{
    position:absolute;right:0;bottom:0;
    width:min(40%,440px);height:auto;max-width:none;
    /* Cinto de segurança: se um dia o cartão ficar mais baixo que o
       retrato, `contain` encolhe a foto em vez de deixá-la furar a
       borda de cima — e `bottom right` mantém os pés no rodapé. */
    max-height:100%;object-fit:contain;object-position:bottom right;
    margin:0;
    /* o recorte não tem margem transparente: o paletó é cortado na
       borda do arquivo. Encostado no canto inferior direito, ele
       passaria por fora da curva do cartão — o mesmo raio aqui faz a
       foto acompanhar o arredondamento em vez de furá-lo. */
    border-bottom-right-radius:26px;
    filter:drop-shadow(-26px 16px 34px rgba(0,0,0,.3));
  }

  .sec{padding:46px 0 10px}
  .sec + .sec{padding-top:40px}
  .item{grid-template-columns:64px 1fr;gap:0 20px;padding:19px 4px}
  .item .n{font-size:24px}
  .fecha{margin-top:22px}

  .temalista{margin-top:16px}
  .tema{padding:20px 4px}
  .tema h3{max-width:56ch}
  .tema.proxima{padding-left:18px;padding-right:16px}
  .grupo + .grupo{margin-top:40px}

  .passos{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
  .passo{align-items:flex-start;flex-direction:column;gap:11px;padding:20px 20px 22px;font-size:16.5px}

  .cta{padding:52px 0 64px}
  .box{padding:38px 40px 34px;border-radius:20px}
  .btn{margin-top:12px}

  .barra-mob{display:none}
}

@media (min-width:1024px){
  .card{padding:52px 60px 54px}
}