/* Aulas Semanais - Elaine Santo
   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; }

.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;
}
.topo .texto h1 b { color: #FBD19E; font-style: italic; font-weight: 900; }
.topo .texto > span {
  color: #F4F4F4; font-size: 18px; font-weight: 700; line-height: 24px; display: block; margin-bottom: 12px;
}
.topo .texto > p { color: #BABABA; font-size: 12px; line-height: 24px; margin: 0 0 24px; }
.topo .texto p a { color: #BABABA; text-decoration: underline; transition: color .5s ease; }
.topo .texto p a:hover { color: #fff; }

/* contador */
.topo .texto .contador { display: flex; gap: 16px; position: absolute; align-items: center; top: 0; padding: 10px 0 8px; }
.topo .texto .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 .texto .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 .texto ul.relogio { display: flex; align-items: center; gap: 10px; position: relative; max-width: 288px; margin: 0; padding: 0; list-style: none; }
.topo .texto ul.relogio li { display: flex; align-items: center; gap: 4px; }
.topo .texto ul.relogio li:first-child { margin-right: 4px; }
.topo .texto 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 .texto 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 .texto 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, .aulas a.botao svg { flex: 0 0 auto; transition: transform .4s ease; }
.topo form button:hover svg, .aulas 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; }
.aulas .frase {
  color: #FBD19E; font-size: 16px; font-style: italic; line-height: 22px; display: block; margin-bottom: 24px;
}
.aulas 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);
}
.aulas a.botao:hover { background: #ffe2be; }
.aulas 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; text-wrap: balance; 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 .texto .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 .texto .contador::before { display: none; }
  .topo .texto .contador h2 { max-width: none; margin-bottom: 12px; font-size: 12px; letter-spacing: 1px; }
  .topo .texto ul.relogio { justify-content: center; margin: 0 auto; gap: 9px; max-width: none; }
  .topo .texto ul.relogio li { display: block; }
  .topo .texto ul.relogio li.separador { margin-top: -19px; font-size: 32px; line-height: 32.78px; }
  .topo .texto ul.relogio li span { font-size: 30px; width: 44px; }
  .topo .texto 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; }
  .aulas 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; }
}