/* Aulas ao vivo - Tatiane Dib (clone da LP da Elaine)
   Design system espelhado da referencia: fundo #161F24, dourado #FBD19E,
   Playfair Display nos titulos e Lato no corpo. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #161F24; font-family: Lato, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
main { overflow: hidden; }

.pula-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #FBD19E; color: #141C21; padding: 12px 20px; font-weight: 900; border-radius: 0 0 8px 0;
}
.pula-para-conteudo:focus { left: 0; }

/* ---------- TOPO ---------- */
.topo {
  width: 100%; min-height: 760px; padding: 0 20px; position: relative; overflow: hidden;
  background: linear-gradient(270deg, #161F24 24.29%, #273740 47.91%, #161F24 100%);
}
/* O bloco claro que sustenta a foto. A mascara existe porque a borda direita
   dele cai no meio da foto e, sem o esmaecimento, vira uma linha vertical dura
   atras das pernas da Elaine. */
.topo::before {
  content: ''; position: absolute; left: 7px; bottom: 0; width: 1010px; height: 100%;
  border-radius: 0 345px 0 0;
  background: linear-gradient(270deg, #927E66 0%, #2C261F 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 99%);
  mask-image: linear-gradient(90deg, #000 62%, transparent 99%);
}
.topo .centro {
  display: flex; width: 100%; max-width: 1280px; margin: 0 auto; position: relative; z-index: 3;
}
/* O padding de cima reserva a faixa do contador, que e absoluta. Sem ele o
   titulo sobe por baixo do relogio. */
.topo .centro .texto { max-width: 520px; padding: 92px 0 72px; align-content: center; }

/* O balance existe para o titulo nao terminar com uma palavra sozinha na
   ultima linha. Sem ele, no desktop a quebra deixa "consultorio" orfa e parte
   o destaque dourado no meio. */
.topo .texto h1 {
  color: #F4F4F4; font-family: "Playfair Display", serif; font-size: 40px; font-weight: 600;
  line-height: 42px; letter-spacing: -0.4px; margin: 0 0 24px; text-wrap: balance;
}
.topo .texto h1 b { color: #FBD19E; font-style: italic; font-weight: 900; }
/* Balance nos dois: no celular a linha sem ele deixava "aula:" sozinha embaixo
   e partia o link da politica entre "Politica" e "de Privacidade". */
.topo .texto > span {
  color: #F4F4F4; font-size: 18px; font-weight: 700; line-height: 24px; display: block; margin-bottom: 12px;
  text-wrap: balance;
}
.topo .texto > p { color: #BABABA; font-size: 12px; line-height: 24px; margin: 0 0 24px; text-wrap: balance; }
.topo .texto p a { color: #BABABA; text-decoration: underline; transition: color .5s ease; }
.topo .texto p a:hover { color: #fff; }

/* contador */
.topo .contador { display: flex; gap: 16px; position: absolute; align-items: center; top: 0; padding: 10px 0 8px; }
.topo .contador::before {
  content: ''; position: absolute; right: -130px; left: -312px; height: 100%;
  border-bottom: .683px solid #1E1E1E;
  background: linear-gradient(90deg, #31617E 40.13%, rgba(49, 97, 126, 0) 65.23%);
}
.topo .contador h2 {
  position: relative; color: #BFBFBF; text-align: center; font-size: 10.24px; font-weight: 700;
  line-height: 10.93px; letter-spacing: .82px; text-transform: uppercase; max-width: max-content; margin: 0;
}
.topo ul.relogio { display: flex; align-items: center; gap: 10px; position: relative; max-width: 288px; margin: 0; padding: 0; list-style: none; }
.topo ul.relogio li { display: flex; align-items: center; gap: 4px; }
.topo ul.relogio li:first-child { margin-right: 4px; }
.topo ul.relogio li.separador {
  margin-top: -4px; color: #fff; font-size: 21.85px; font-weight: 700; line-height: 22.38px;
  letter-spacing: -.437px; opacity: .2;
}
.topo ul.relogio li span {
  width: 25px; color: #FBD19E; text-align: center; font-size: 21.85px; font-weight: 900;
  line-height: 100%; letter-spacing: -.437px; display: block;
}
.topo ul.relogio li p {
  margin: 1px 0 0; color: #BFBFBF; text-align: center; font-size: 9.56px; font-weight: 700;
  line-height: 10.93px; text-transform: uppercase; opacity: .4;
}

/* Foto do topo.
   Sem recorte, de proposito: a foto original tem cadeira, planta e parede
   clara, e recortar isso a mao ou por modelo deixa borda serrilhada e movel
   cortado pela metade. Aqui ela entra inteira, sangra ate a borda direita da
   tela e some no fundo por duas mascaras, uma lateral e uma de base. */
.topo > .retrato {
  position: absolute; right: 0; top: 0; bottom: 0; width: 54%; max-width: 780px; margin: 0; z-index: 2;
}
.topo > .retrato img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(0deg, transparent 0%, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(0deg, transparent 0%, #000 14%);
  mask-composite: intersect;
}

/* ---------- ESTEIRA DE TEMAS ---------- */
/* Anda na horizontal, logo abaixo do topo. A lista aparece DUAS vezes no HTML e
   a animacao anda exatamente a largura de um conjunto (6 x 300 + 6 x 24 =
   1944px): e o que faz o loop nao ter buraco. Mudou a quantidade ou a largura
   dos cards, muda os 1944px junto. */
.temas { background: #141C21; padding: 28px 0; overflow: hidden; border-block: 1px solid #1E272D; }
@keyframes anda { 0% { transform: translateX(0); } 100% { transform: translateX(-1944px); } }
.temas .esteira { display: flex; gap: 24px; width: max-content; animation: anda 60s infinite linear; }
.temas .tema {
  position: relative; width: 300px; flex: 0 0 300px; border-radius: 14px; padding: 38px 18px 20px;
  background: linear-gradient(200deg, #2C261F 0%, #121A1F 100%); border: 1px solid #2E3B43;
}
.temas .tema .assunto {
  color: #F4F4F4; font-family: "Playfair Display", serif; font-size: 18px; font-style: italic;
  line-height: 24px; display: block;
}
.temas .tema span.tag {
  position: absolute; left: 18px; top: 14px; border-radius: 49px; background: #fff;
  padding: 2px 8px 2px 18px; color: #181818; font-size: 10px; font-weight: 800; text-transform: uppercase;
}
.temas .tema span.tag::before {
  content: ''; position: absolute; width: 10px; height: 10px; background: #F00; border-radius: 50%;
  left: 4px; top: 50%; transform: translateY(-50%);
}

/* ---------- FORMULARIO ---------- */
.topo form { margin: 0 0 24px; }
.topo form label { position: absolute; left: -9999px; }
.topo form .campo { position: relative; }
.topo form input {
  width: 100%; padding: 14px 23px 16px; border-radius: 8px; border: 1px solid #DFDFDF; background: #F3F3F3;
  box-shadow: 0 4px 20px 0 rgba(0,0,0,.08); color: #424242; font-family: Lato, sans-serif; font-size: 18px;
  line-height: 14px; letter-spacing: .18px; margin-bottom: 12px; transition: all .5s ease;
}
.topo form input:hover, .topo form input:focus {
  border: 1px solid #FBD19E; box-shadow: 0 0 10px 1px #FBD19EC7; outline: none;
}
.topo form input::placeholder { color: #A6A6A6; font-size: 17px; transition: color .5s ease; }
.topo form input:hover::placeholder, .topo form input:focus::placeholder { color: #424242; }
.topo form .isca { position: absolute; left: -9999px; opacity: 0; height: 0; }
.topo form button {
  display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; padding: 17px 0 19px;
  border: 0; cursor: pointer; border-radius: 8px; background: #FBD19E;
  box-shadow: 0 -2px 0 0 rgba(0,0,0,.16) inset, 0 6px 22.3px 0 rgba(0,0,0,.2); transition: all .5s ease;
}
.topo form button:hover { background: #ffe2be; }
.topo form button svg, a.botao svg { flex: 0 0 auto; transition: transform .4s ease; }
.topo form button:hover svg, a.botao:hover svg { transform: translate(3px, -3px); }
.topo form button:disabled { opacity: .6; cursor: progress; }
.topo form button b {
  text-transform: uppercase; text-align: center; color: #141C21; font-size: 18px; font-weight: 900;
  line-height: 18px; letter-spacing: .36px;
}
.topo form .erro { color: #FFB4A9; font-size: 13px; line-height: 18px; margin: 4px 0 0; display: none; }
.topo form .erro.aparece { display: block; }

.obrigado {
  display: none; border-radius: 8px; border: 1px solid #FBD19E; background: rgba(251,209,158,.08);
  padding: 20px; margin-bottom: 24px;
}
.obrigado.aparece { display: block; }
.obrigado b {
  display: block; color: #FBD19E; font-family: "Playfair Display", serif; font-size: 24px; font-style: italic;
  font-weight: 600; line-height: 30px; margin-bottom: 8px;
}
.obrigado p { color: #F4F4F4; font-size: 15px; line-height: 22px; margin: 0; }

/* ---------- AULAS ---------- */
.aulas { background: #121A1F; padding: 90px 20px; }
.aulas .centro { width: 100%; max-width: 732px; margin: 0 auto; padding: 40px; background: #1D282F; }
.aulas h2 {
  color: #FBD19E; font-size: 12px; font-weight: 900; line-height: 18px; letter-spacing: 1.2px;
  text-transform: uppercase; margin: 0 0 34px;
}
.aulas h2 b {
  margin-top: 6px; display: block; color: #FBD19E; font-family: "Playfair Display", serif; font-size: 40px;
  font-style: italic; font-weight: 600; line-height: 42px; position: relative; text-transform: initial;
}
.aulas h2 b::before {
  content: ''; position: absolute; bottom: -10px; left: 0; width: 281px; height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='281' height='6' viewBox='0 0 281 6' fill='none'%3E%3Cpath d='M1 5C36.998 3.77706 72.8606 1.82435 108.917 1.37471C165.954 0.663444 222.976 1.05106 280 1.81682' stroke='%23B18E72' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.aulas p { color: #D8D8D8; font-size: 16px; line-height: 22px; max-width: 651px; margin: 0 auto 24px; }
.aulas p b { font-weight: 700; color: #fff; }
/* Pretty, nao balance: aqui a frase e alinhada a esquerda e o balance estragava
   a quebra natural no ponto final em telas de 414px e 430px. O pretty so evita
   a ultima linha com uma palavra so ("teve." sozinha em telas de 360 e 390). */
.aulas .frase {
  color: #FBD19E; font-size: 16px; font-style: italic; line-height: 22px; display: block; margin-bottom: 24px;
  text-wrap: pretty;
}
a.botao {
  display: flex; border-radius: 8px; background: #FBD19E; max-width: 620px; margin: 0 auto; padding: 17px;
  align-items: center; gap: 16px; justify-content: center; text-decoration: none; transition: all .5s ease;
  box-shadow: 0 -2px 0 0 rgba(0,0,0,.16) inset, 0 6px 22.3px 0 rgba(0,0,0,.2);
}
a.botao:hover { background: #ffe2be; }
a.botao b {
  color: #141C21; font-size: 18px; font-weight: 900; line-height: 18px; letter-spacing: .36px; display: block;
}

/* ---------- BIO ---------- */
.bio { background: linear-gradient(270deg, #161F24 0%, #364C59 47.91%, #161F24 100%); padding: 0 40px; }
.bio .centro {
  max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.bio h2 { max-width: 290px; margin: 0; }
.bio h2 b {
  display: block; color: #FBD19E; font-size: 12px; font-weight: 900; line-height: 18px; letter-spacing: 1.2px;
  text-transform: uppercase; text-align: center; margin-bottom: 18px;
}
.bio h2 em {
  display: block; color: #FBD19E; text-align: center; font-family: "Playfair Display", serif; font-size: 38px;
  font-style: italic; font-weight: 400; line-height: 48px; text-transform: initial; letter-spacing: .01em;
}
/* A foto da bio tambem entra inteira. A moldura arredondada e a borda dourada
   discreta sao o que separa ela do fundo, no lugar do recorte. */
.bio figure {
  width: 100%; max-width: 560px; margin: 40px 0; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(251, 209, 158, .25); box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.bio figure img { width: 100%; height: 420px; object-fit: cover; object-position: 62% 30%; }
.bio .texto { max-width: 290px; color: #EFEFEF; font-size: 16px; line-height: 26px; padding: 40px 0; }
.bio .texto p { margin: 0 0 18px; }
.bio .texto p:last-child { margin-bottom: 0; }

/* ---------- RODAPE ---------- */
footer { width: 100%; background: #252525; }
footer .centro {
  display: flex; justify-content: space-between; align-items: baseline; width: 100%; max-width: 1174px;
  padding: 17px 20px 20px; margin: 0 auto;
}
footer .termos { display: flex; align-items: baseline; gap: 41px; }
footer p, footer a b { display: block; font-size: 12px; line-height: 12px; letter-spacing: .01em; color: #C3C3C3; margin: 0; }
footer .aviso { font-size: 12px; font-style: italic; color: #C3C3C3; }
footer a { text-decoration: none; }
footer a b::after {
  content: ""; display: block; width: 5%; height: 1px; background: transparent; margin: 0 auto; transition: all .5s ease;
}
footer a:hover b::after { width: 100%; background: #C3C3C3; }

/* ---------- MOBILE ---------- */
/* O celular segue a ordem da referencia: foto com a esteira passando atras,
   depois o bloco claro com titulo e formulario, e o contador por ultimo, numa
   faixa escura de ponta a ponta. */
@media (max-width: 1000px) {
  main { position: relative; }

  .topo::before { display: none; }
  .topo { padding: 0; display: flex; flex-direction: column; min-height: 0; }
  .topo .centro { max-width: 440px; margin: 0 auto; flex-direction: column; }

  /* A foto vira um bloco central, estreito, que some nas tres bordas. E a
     mascara lateral que deixa a esteira aparecer atras dela, como na
     referencia, sem precisar recortar a foto. */
  .topo > .retrato {
    position: relative; order: -1; z-index: 2; width: 74%; max-width: 300px; height: 330px; margin: 0 auto -18px;
  }
  .topo > .retrato img {
    height: 330px; object-position: 50% 10%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 18%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 18%);
    mask-composite: intersect;
  }

  /* A esteira sai do fluxo e passa por tras da foto, no alto do topo. */
  .temas {
    position: absolute; top: 86px; left: 0; right: 0; z-index: 1;
    background: none; border: 0; padding: 0; opacity: .42; pointer-events: none;
  }
  .temas .tema { border-color: rgba(46, 59, 67, .6); }
  .temas .tema { width: 200px; flex: 0 0 200px; padding: 30px 12px 14px; }
  .temas .tema .assunto { font-size: 14px; line-height: 19px; }
  .temas .tema span.tag { left: 12px; top: 10px; font-size: 9px; }
  .temas .esteira { gap: 20px; }
  @keyframes anda { 0% { transform: translateX(0); } 100% { transform: translateX(-1320px); } }

  .topo .centro .texto {
    position: relative; z-index: 3; display: flex; flex-direction: column;
    padding: 28px 24px 0; border-radius: 0 40px 0 0; max-width: none;
    background: linear-gradient(90deg, #927E66 0%, #2C261F 100%);
  }
  .topo .texto h1 { font-size: 25px; line-height: 32px; text-align: center; margin-bottom: 18px; }
  .topo .texto > span { font-size: 14px; line-height: 22px; text-align: center; margin-bottom: 16px; }
  .topo .texto > p { text-align: center; margin-bottom: 28px; }
  .topo form input { padding: 18px 22px 20px; font-size: 17px; }
  .topo form button { padding: 20px 0 22px; }

  /* O contador e o ultimo bloco do topo, numa faixa que sangra dos dois lados. */
  .topo .contador {
    order: 10; position: relative; display: block; width: calc(100% + 48px); margin-left: -24px;
    padding: 30px 20px 26px; background: #121212; border-top: 1px solid #353535; border-bottom: 1px solid #353535;
  }
  .topo .contador::before { display: none; }
  .topo .contador h2 { max-width: none; margin-bottom: 12px; font-size: 12px; letter-spacing: 1px; }
  .topo ul.relogio { justify-content: center; margin: 0 auto; gap: 9px; max-width: none; }
  .topo ul.relogio li { display: block; }
  .topo ul.relogio li.separador { margin-top: -19px; font-size: 32px; line-height: 32.78px; }
  .topo ul.relogio li span { font-size: 30px; width: 44px; }
  .topo ul.relogio li p { font-size: 13px; line-height: 12px; margin-top: 6px; opacity: .55; }

  .aulas { padding: 40px 20px; }
  .aulas .centro { padding: 0; background: none; }
  .aulas h2 b { font-size: 32px; line-height: 36px; }
  .aulas h2 b::before { width: 100%; background-size: 100% 6px; background-repeat: no-repeat; }
  a.botao b { text-align: center; text-wrap: balance; max-width: 260px; }

  /* Ordem no celular: nome, foto, texto. O column-reverse do desktop aqui
     jogaria a foto para depois do texto e o nome para o fim. */
  .bio { background: linear-gradient(180deg, #161F24 53.33%, #22313A 75.78%, #161F24 100%); padding: 0; }
  .bio .centro { flex-direction: column; padding: 40px 20px 0; gap: 24px; }
  .bio h2 { max-width: none; }
  .bio h2 em { font-size: 34px; line-height: 44px; }
  .bio figure { max-width: 282px; margin: 0 auto; }
  /* No quadro estreito do celular o corte padrao joga a Elaine para o canto.
     Este object-position traz o rosto para o meio da moldura. */
  .bio figure img { object-position: 82% 22%; }
  .bio .texto { max-width: none; text-align: center; padding: 0 0 8px; }

  footer .centro { flex-direction: column; justify-content: center; gap: 16px; padding: 22px 20px 18px; text-align: center; align-items: center; }
  footer .termos { gap: 24px; }
}

/* ---------- BLOCOS DA TATIANE ---------- */
/* A faixa do contador agora so carrega texto: data da aula e local. */
.topo .contador h2.local { color: #FBD19E; }
.topo .texto .assinatura {
  color: #FBD19E; font-size: 12px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase;
  margin-bottom: 14px;
}
.topo form .consentimento { color: #BABABA; font-size: 12px; line-height: 18px; margin: 0 0 14px; text-wrap: pretty; }
.topo .selos { display: flex; gap: 18px; list-style: none; margin: 0 0 24px; padding: 0; }
.topo .selos li { color: #F4F4F4; font-size: 14px; font-weight: 700; }
.topo .selos li::before { content: '\2713'; color: #FBD19E; margin-right: 6px; font-weight: 900; }

.aulas h2 b { font-size: 34px; line-height: 40px; text-wrap: balance; }
.aulas .pergunta { color: #fff; font-size: 18px; font-weight: 700; margin-top: 24px; }
.aulas ol.situacoes { list-style: none; margin: 0 auto 28px; padding: 0; max-width: 651px; }
.aulas ol.situacoes li {
  display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid #2E3B43;
  color: #D8D8D8; font-size: 16px; line-height: 22px;
}
.aulas ol.situacoes li:last-child { border-bottom: 0; }
.aulas ol.situacoes .num {
  flex: 0 0 auto; color: #FBD19E; font-family: "Playfair Display", serif; font-style: italic; font-size: 22px; line-height: 22px;
}
.aulas ol.situacoes b { color: #fff; display: block; margin-bottom: 2px; }

.bio h2 small {
  display: block; color: #EFEFEF; text-align: center; font-size: 13px; line-height: 20px; margin-top: 10px; letter-spacing: .02em;
}
.bio .texto { max-width: 340px; }
.bio .texto .citacao { color: #FBD19E; font-family: "Playfair Display", serif; font-style: italic; font-size: 19px; line-height: 28px; }
.bio .texto a.botao { margin-top: 24px; padding: 17px 12px; }
.bio .texto a.botao b { font-size: 15px; text-transform: uppercase; text-align: center; }
.aulas a.botao b { text-transform: uppercase; text-align: center; }

@media (max-width: 1000px) {
  .topo .texto .assinatura { text-align: center; }
  .topo .selos { justify-content: center; order: 9; margin-top: 4px; }
  /* Na copy a data vem antes de tudo: no celular a faixa sobe para o inicio
     do bloco, em vez de fechar o topo como o contador da Elaine. */
  .topo .contador { order: -1; margin-top: -28px; margin-bottom: 20px; padding: 18px 20px 16px; }
  .topo .contador h2 + h2 { margin-top: 8px; }
  .aulas h2 b { font-size: 26px; line-height: 32px; }
}

/* Fotos da Tatiane. A do topo e de palco: o foco sobe para o rosto. A da bio e
   um retrato vertical, entao a moldura fica mais alta e centrada no rosto. */
.topo > .retrato img { object-position: 50% 20%; }
/* Bio mais aberta (zoom out): no desktop a foto entra inteira, na proporcao
   dela (2:3), no desktop e no celular, com o espaco acima da cabeca. A altura
   fixa de antes cortava tanto que o rosto enchia o quadro e o selo +250
   cobria a mao. */
.bio figure { max-width: 420px; }
.bio figure img { height: auto; aspect-ratio: 2 / 3; object-position: 50% 30%; }
@media (max-width: 1000px) {
  .topo > .retrato img { object-position: 50% 12%; }
  .bio figure img { height: auto; aspect-ratio: 2 / 3; }
}

/* ---------- PRIMEIRA DOBRA NO CELULAR ----------
   Meta: o botao de inscricao aparecer sem rolar num iPhone de 390x844 com as
   barras do Safari (sobra uns 660px uteis). O que encolheu: a foto, o titulo,
   o espaco entre campos e o padding dos campos e do botao. A fonte do campo
   fica em 16px de proposito: abaixo disso o iPhone da zoom ao tocar no campo. */
.topo .contador h2.local { color: #FBD19E; }
@media (max-width: 1000px) {
  .topo > .retrato { height: 190px; width: 58%; margin-bottom: -10px; }
  .topo > .retrato img { height: 190px; object-position: 50% 8%; }

  .topo .contador {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 14px; row-gap: 6px;
    margin-top: -18px; margin-bottom: 14px; padding: 10px 12px 9px;
  }
  .topo .contador h2 { margin: 0; font-size: 11px; }
  .topo .contador h2.local { flex-basis: 100%; font-size: 10px; letter-spacing: .8px; }
  .topo .contador h2 + h2 { margin-top: 0; }
  .topo ul.relogio { margin: 0; gap: 6px; }
  .topo ul.relogio li { display: flex; align-items: baseline; gap: 3px; }
  .topo ul.relogio li span { font-size: 20px; width: auto; }
  .topo ul.relogio li p { font-size: 9px; margin: 0; }
  .topo ul.relogio li.separador { margin-top: 0; font-size: 18px; line-height: 20px; }

  .topo .centro .texto { padding-top: 18px; }
  .topo .texto .assinatura { margin-bottom: 6px; font-size: 11px; }
  .topo .texto h1 { font-size: 22px; line-height: 27px; margin-bottom: 10px; }
  .topo .texto > span { font-size: 13px; line-height: 18px; margin-bottom: 12px; }
  .topo form { margin-bottom: 14px; }
  .topo form input { padding: 11px 16px 12px; font-size: 16px; margin-bottom: 8px; border-radius: 7px; }
  .topo form input::placeholder { font-size: 16px; }
  .topo form .consentimento { font-size: 11px; line-height: 15px; margin-bottom: 10px; }
  .topo form button { padding: 15px 0 16px; }
  .topo form button b { font-size: 16px; }
  .topo .selos { margin-bottom: 18px; }
}

/* Ajuste fino da dobra: Nome e WhatsApp na mesma linha, consentimento colado
   embaixo do botao, foto mais baixa. */
.topo form .consentimento { margin: 10px 0 0; }
@media (max-width: 1000px) {
  .topo form .linha { display: flex; gap: 8px; }
  .topo form .linha .campo { flex: 1 1 0; min-width: 0; }
  .topo > .retrato { height: 208px; width: 64%; }
  .topo > .retrato img { height: 208px; object-position: 50% 6%; }
  .topo form .consentimento { margin: 8px 0 0; }
}
@media (max-width: 370px) {
  .topo > .retrato { height: 165px; }
  .topo > .retrato img { height: 165px; }
  .topo .texto h1 { font-size: 20px; line-height: 25px; }
  .topo .texto > span { font-size: 12.5px; line-height: 17px; }
}

/* DDI + WhatsApp na mesma linha, em qualquer tela. O select imita o campo:
   mesma borda, fundo e altura, com a setinha desenhada no fundo. */
.topo form .linha.telefone { display: flex; gap: 8px; align-items: flex-start; }
.topo form .linha.telefone .campo { flex: 1 1 auto; min-width: 0; }
.topo form .linha.telefone .campo.ddi { flex: 0 0 112px; }
.topo form select {
  width: 100%; height: 54px; margin-bottom: 12px; padding: 0 28px 0 14px; border-radius: 8px; border: 1px solid #DFDFDF;
  background: #F3F3F3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23424242' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none; appearance: none; color: #424242; font-family: Lato, sans-serif; font-size: 16px;
  box-shadow: 0 4px 20px 0 rgba(0,0,0,.08); cursor: pointer; transition: all .5s ease;
}
.topo form select:hover, .topo form select:focus { border: 1px solid #FBD19E; box-shadow: 0 0 10px 1px #FBD19EC7; outline: none; }
@media (max-width: 1000px) {
  .topo form .linha.telefone .campo.ddi { flex-basis: 100px; }
  .topo form select { height: 44px; margin-bottom: 8px; padding-left: 12px; border-radius: 7px; }
}

/* ---------- FAIXA DO CONTADOR ----------
   Desktop: por cima da coluna do texto, como antes. Celular: primeira coisa da
   tela, acima da foto, de ponta a ponta. */
.topo .faixa { position: absolute; top: 0; left: 0; right: 0; z-index: 4; padding: 0 20px; pointer-events: none; }
.topo .faixa .dentro { max-width: 1280px; margin: 0 auto; }
.topo .contador { position: relative; top: auto; display: inline-flex; }
@media (max-width: 1000px) {
  .topo .faixa { position: relative; order: -2; padding: 0; pointer-events: auto; }
  .topo .contador {
    display: flex; width: 100%; margin: 0; padding: 10px 12px 9px;
    background: #121212; border-top: 0; border-bottom: 1px solid #353535;
  }
  .topo > .retrato { margin-top: 0; }
  .topo .centro .texto { padding-top: 20px; }
}

/* Destaque no subtitulo: mesmo dourado do destaque do titulo. */
.topo .texto > span b { color: #FBD19E; font-weight: 900; }

/* Botao de inscricao no verde do WhatsApp: e para o grupo que ele leva. */
.topo form button { background: #25D366; }
.topo form button:hover { background: #4ADE80; }

/* ---------- QUEBRA DE LINHA ----------
   Pretty no texto corrido: o navegador evita terminar paragrafo com uma
   palavra sozinha. Balance no que e curto (titulos, frases de destaque,
   botoes): as linhas saem com tamanho parecido em vez de uma cheia e outra
   com uma palavra. */
.aulas p, .aulas ol.situacoes li div, .bio .texto p, .topo .texto > span, .topo form .consentimento { text-wrap: pretty; }
.aulas h2 b, .aulas .pergunta, .aulas .frase, .bio .texto .citacao, a.botao b, .topo form button b { text-wrap: balance; }
.bio h2 small span { display: block; }
.bio h2 small .ponto { display: none; }

/* Todos os botoes no verde do WhatsApp. */
a.botao { background: #25D366; }
a.botao:hover { background: #4ADE80; }
/* Paragrafos curtos (bio e situacoes): balance, para as linhas terem tamanho
   parecido e nao sobrar um final curto. */
.bio .texto p, .aulas ol.situacoes li div { text-wrap: balance; }

/* ---------- FAIXA DE TEMAS (12/10/2026) ---------- */
/* Esteira horizontal entre o topo e o bloco 2. Anda sempre, inclusive com
   "reduzir movimento" ligado: e lenta, e um toque ou o mouse por cima pausa. */
.faixa-temas { background: #141C21; border-block: 1px solid #1E272D; overflow: hidden; padding: 16px 0; cursor: pointer; }
.faixa-temas .esteira { display: flex; width: max-content; animation: esteira-temas 44s linear infinite; }
.faixa-temas ul { display: flex; margin: 0; padding: 0; list-style: none; }
.faixa-temas li {
  display: flex; align-items: center; white-space: nowrap; color: #FBD19E;
  font-family: "Playfair Display", serif; font-style: italic; font-weight: 600; font-size: 18px; line-height: 1.2;
}
.faixa-temas li::after { content: '\2726'; font-style: normal; font-size: 11px; color: #B18E72; margin: 0 22px; }
.faixa-temas:hover .esteira, .faixa-temas.pausada .esteira { animation-play-state: paused; }
@keyframes esteira-temas { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 900px) { .faixa-temas { padding: 20px 0; } .faixa-temas li { font-size: 21px; } .faixa-temas li::after { margin: 0 30px; } }

/* ---------- SELO +250 NA FOTO DA BIO ---------- */
.bio figure { position: relative; }
.bio .numero {
  position: absolute; left: 14px; bottom: 14px; margin: 0; display: flex; align-items: center; gap: 10px;
  background: #FBD19E; color: #141C21; border-radius: 12px; padding: 10px 16px 10px 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.bio .numero b { font-family: "Playfair Display", serif; font-style: italic; font-weight: 900; font-size: 38px; line-height: 1; }
.bio .numero span { font-size: 12px; line-height: 1.2; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; max-width: 80px; text-align: left; }

/* ---------- ANIMACOES ----------
   So valem com .anima no <html>, que o anima.js coloca quando o aparelho nao
   pede "reduzir movimento". Sem a classe, tudo aparece parado e visivel.
   O topo e o formulario nao animam. */
.anima .surge { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.anima .surge.visivel { opacity: 1; transform: none; }
.aulas .frase.acendendo .palavra { opacity: .2; transition: opacity .25s ease; }
.aulas .frase.acendendo .palavra.acesa { opacity: 1; }


/* ---------- BLOCO 2 EM ITENS (12/10/2026) ---------- */
.aulas .lead { color: #fff; font-weight: 700; font-size: 17px; margin-bottom: 12px; }
.aulas .ao-vivo { list-style: none; margin: 0 auto 22px; padding: 0; max-width: 651px; display: grid; gap: 8px; }
.aulas .ao-vivo li {
  position: relative; padding: 12px 14px 12px 44px; border-radius: 10px; background: rgba(251,209,158,.06);
  border: 1px solid rgba(251,209,158,.18); color: #D8D8D8; font-size: 16px; line-height: 1.4; text-wrap: balance;
}
.aulas .ao-vivo li::before {
  content: '\2713'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: #FBD19E; color: #141C21;
  display: grid; place-items: center; font-size: 12px; font-weight: 900;
}
.aulas .ao-vivo b { color: #FBD19E; }
.aulas .sem-replay {
  border-left: 3px solid #FBD19E; padding: 4px 0 4px 14px; color: #F4F4F4; font-size: 16px; margin-bottom: 30px;
}
.aulas .sem-replay b { color: #FBD19E; }
.aulas .como { list-style: none; margin: 0 auto 28px; padding: 0; max-width: 651px; display: grid; gap: 10px; }
.aulas .como li { display: flex; align-items: center; gap: 12px; color: #F4F4F4; font-size: 16px; font-weight: 700; line-height: 1.35; }
.aulas .como .icone {
  flex: 0 0 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(251,209,158,.35);
  color: #FBD19E; display: grid; place-items: center;
}
.aulas .como .icone svg { width: 19px; height: 19px; }

/* foto do bloco 2: so no desktop, numa coluna ao lado do texto */
.aulas .foto-aula { display: none; }
@media (min-width: 1001px) {
  .aulas .centro { max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 56px; align-items: start; }
  .aulas .centro > * { grid-column: 1; }
  .aulas .foto-aula {
    display: block; grid-column: 2; grid-row: 1 / span 30; position: sticky; top: 40px; margin: 0;
    border-radius: 16px; overflow: hidden; border: 1px solid rgba(251,209,158,.25); box-shadow: 0 24px 60px rgba(0,0,0,.45);
  }
  .aulas .foto-aula img { width: 100%; height: auto; }
  .aulas .como { grid-template-columns: repeat(3, 1fr); }
  .aulas .como li { font-size: 15px; }
  /* Com a foto ao lado, a coluna de texto alinha tudo a esquerda: centralizado
     numa coluna so, os blocos ficavam desencontrados. */
  .aulas .pergunta, .aulas .lead { text-align: left; }
  .aulas ol.situacoes, .aulas .ao-vivo, .aulas .como, .aulas p { margin-left: 0; max-width: none; }
  .aulas a.botao { margin-left: 0; }
}

/* ---------- BIO MAIS LEVE ---------- */
.bio .texto .historia { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; text-align: left; }
.bio .texto .historia li {
  padding: 10px 14px; border-left: 3px solid #FBD19E; background: rgba(251,209,158,.06); border-radius: 0 8px 8px 0;
  font-size: 15px; line-height: 1.45; text-wrap: balance;
}
.bio .texto .virada { color: #FBD19E; font-family: "Playfair Display", serif; font-style: italic; font-size: 20px; line-height: 1.35; }
.bio .texto .familia { font-size: 14px; color: #BFBFBF; }


/* ---------- CARD "AO VIVO" ----------
   Secao propria logo depois das situacoes. Herda .aulas (cores, botao, frase)
   e vira um card centralizado, com a frase de virada como titulo. */
.aulas.ao-vivo-bloco { padding-top: 0; }
.aulas.ao-vivo-bloco .centro {
  display: block; max-width: 860px; margin: 0 auto; padding: 36px 22px 32px; text-align: center;
  background: linear-gradient(160deg, #24333C 0%, #1A242A 100%); border: 1px solid rgba(251,209,158,.22);
  border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.aulas.ao-vivo-bloco .frase {
  font-family: "Playfair Display", serif; font-style: italic; font-weight: 600; font-size: 27px; line-height: 1.25;
  text-align: center; margin: 0 0 26px; text-wrap: balance;
}
.aulas.ao-vivo-bloco .lead { text-align: center; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: #FBD19E; margin: 0 0 14px; }
.aulas.ao-vivo-bloco .ao-vivo { max-width: 560px; margin: 0 auto 18px; text-align: left; }
.aulas.ao-vivo-bloco .sem-replay {
  display: inline-block; max-width: 560px; margin: 0 auto 30px; text-align: left;
  border-left: 0; padding: 10px 16px; border-radius: 99px; background: rgba(251,209,158,.1); font-size: 15px;
}
.aulas.ao-vivo-bloco .como { max-width: 560px; margin: 0 auto 28px; text-align: left; }
.aulas.ao-vivo-bloco a.botao { margin: 0 auto; }

@media (max-width: 1000px) {
  .aulas.ao-vivo-bloco { padding: 0 20px 48px; }
  .aulas.ao-vivo-bloco .centro { padding: 30px 18px 24px; background: linear-gradient(160deg, #24333C 0%, #1A242A 100%); }
  .aulas.ao-vivo-bloco .sem-replay { border-radius: 14px; }
}
@media (min-width: 1001px) {
  .aulas.ao-vivo-bloco .centro { padding: 48px 48px 44px; }
  .aulas.ao-vivo-bloco .frase { font-size: 38px; }
  /* os 3 itens do que acontece na aula viram 3 cards lado a lado */
  .aulas.ao-vivo-bloco .ao-vivo { max-width: none; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .aulas.ao-vivo-bloco .ao-vivo li { padding: 44px 16px 16px; text-align: center; }
  .aulas.ao-vivo-bloco .ao-vivo li::before { left: 50%; top: 14px; transform: translateX(-50%); }
  .aulas.ao-vivo-bloco .como { max-width: none; }
  .aulas.ao-vivo-bloco .sem-replay, .aulas.ao-vivo-bloco .lead { margin-left: auto; margin-right: auto; }
}