/* ==========================================================================
   VIP HANDS-ON — Curso de Lifting Facial Endoscópico
   Dr. Laertes Thomaz Jr. / Endoface Brazil

   TODOS os valores deste arquivo foram extraídos do CSS do site original
   (post-406.css / post-575.css), elemento por elemento, nos 4 breakpoints.
   A especificação completa está em docs/spec-original.txt — o comentário
   [id] em cada bloco aponta para o elemento correspondente lá.

   Não substituir valor por "olhômetro": conferir na spec antes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Fundos */
  --preto:          #010103;
  --preto-quente:   #130D0F;
  --preto-2:        #1D1415;
  --azul-noite:     #020A16;

  /* Dourados */
  --dourado:        #E7BD6D;
  --dourado-claro:  #F3D595;
  --dourado-palido: #FDEAC3;
  --dourado-medio:  #C4AC79;
  --dourado-escuro: #866A33;

  /* Bordas — no original são sempre #BE9648 com alpha variável */
  --borda-14: #BE964814;   /* cards da grade      */
  --borda-1f: #BE96481F;   /* moldura do vídeo    */
  --borda-33: #BE964833;   /* cards de conteúdo   */
  --borda-38: #BE964838;   /* faixa do topo       */
  --borda-40: #BE964840;   /* card do mentor      */
  --borda-popup: #C4AC7942;
  --borda-clara: #F3D5955E;

  /* Texto */
  --branco:     #FFFFFF;
  --cinza-claro:#EBEBEB;
  --azul-cinza: #B3C4D8;   /* cor dos ícones das listas */
  --verde:      #38DB95;

  /* Gradientes recorrentes */
  --grad-botao:  linear-gradient(-120deg, #866A33 0%, #C4AC79 100%);
  --grad-card-a: linear-gradient(145deg, #1D1415 0%, #130D0F 100%);
  --grad-card-b: linear-gradient(145deg, #130D0F 0%, #1D1415 100%);
  --brilho-inset: 0 -2px 0 2px rgba(243, 213, 149, .45) inset;

  --fonte-titulo: "Fahkwang", sans-serif;
  --fonte-texto:  "Poppins", sans-serif;

  --largura-max: 1140px;   /* --container-max-width do Elementor */
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; }
/* No original os parágrafos são separados por <br><br>, ou seja uma linha
   vazia inteira. Com line-height 1.5em isso equivale a 1.5em de margem. */
p { margin: 0 0 1.5em; }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   3. Títulos e texto
   Fahkwang 700 / uppercase / line-height 1.3em / letter-spacing -1.5px
   -------------------------------------------------------------------------- */
.titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3em;
  letter-spacing: -1.5px;
  color: var(--branco);
}

.texto {
  font-family: var(--fonte-texto);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
  color: var(--branco);
}
.texto strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   4. .ti — texto com gradiente dourado animado
   Este é o efeito de assinatura da página: o trecho destacado de cada
   título é preenchido por um gradiente que desliza continuamente.
   Regra idêntica à do original (custom CSS do heading 28144476).
   -------------------------------------------------------------------------- */
.ti {
  animation: brilho 3.4s linear infinite;
  background-image: linear-gradient(45deg, #E7BD6D, #F3D595, #E7BD6D, #F3D595);
  background-size: 400% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  transition: all .8s;
}
/* O hero usa a variante mais clara do gradiente */
.hero .ti {
  background-image: linear-gradient(45deg, #E7BD6D, #FDEAC3, #E7BD6D, #FDEAC3);
}

@keyframes brilho {
  0%   { background-position: 0 0; }
  100% { background-position: 100% 0; }
}

@keyframes moverBaixo {
  0%   { transform: translateY(0);    opacity: 1;  }
  50%  { transform: translateY(10px); opacity: .5; }
  100% { transform: translateY(0);    opacity: 1;  }
}

/* --------------------------------------------------------------------------
   5. Layout base
   As seções do original usam padding 80px 0 no desktop, caindo para
   60px/20px em 1366, e 45px/15-20px no mobile.
   -------------------------------------------------------------------------- */
.secao {
  padding: 80px 0;
  background: var(--preto);
  position: relative;
}
.secao--quente { background: var(--preto-quente); }   /* [23d72534] [764dffae] */

/* Antes eram estilos inline no HTML. Viraram classe para a media query do
   mobile conseguir alcançá-los — inline vence media query. Os valores de
   desktop são exatamente os que estavam lá. */
.secao--continua { padding-top: 0; }        /* mentor e grade colam na anterior */
.secao--grade    { padding-bottom: 72px; }
.apresentacao__texto  { margin-top: 20px; }
.fechamento__texto    { margin-top: 16px; }

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
}

.duas-colunas {
  display: flex;
  gap: 40px;
  align-items: center;
}
.duas-colunas > * { flex: 1 1 0; min-width: 0; }
/* Containers do Elementor têm gap de 20px entre widgets */
.duas-colunas > * > * + * { margin-top: 20px; }

.centro { text-align: center; }

/* --------------------------------------------------------------------------
   6. Botão  [1e857a1f, e7e80be, b371024, 3f817cc2, 4cfcad81, 77801cd5]
   Todos os 6 botões da página compartilham exatamente estes valores.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-direction: row-reverse;
  font-family: var(--fonte-titulo);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--cinza-claro);
  fill: var(--cinza-claro);
  background-color: transparent;
  background-image: var(--grad-botao);
  background-size: 200% auto;
  box-shadow: var(--brilho-inset);
  border: 0;
  border-radius: 5px;
  padding: 25px 55px;
  cursor: pointer;
  animation: brilho 3.4s linear infinite;
  transition: transform .25s ease;
}
/* [1e857a1f, e7e80be, b371024] têm ícone; os outros três não.
   O row-reverse do wrapper original põe o ícone depois do texto. */
.btn__ico { height: 20px; width: auto; order: -1; }

.btn:hover  { transform: scale(.97); }
.btn:active { transform: scale(.94); }

/* --------------------------------------------------------------------------
   7. Faixas "Vagas limitadas"  [4a40db33 / 0e41edc / 4b9b4d6f]
   Sem fundo dourado: fundo escuro, borda dourada translúcida e texto
   branco em Poppins 12px com letter-spacing 4.4px.
   -------------------------------------------------------------------------- */
.faixa {
  background: var(--preto);
  padding: 5px;
  text-align: center;
}
/* [4a40db33] --margin-bottom: -50px — a faixa não é um bloco separado:
   o hero sobe 50px e passa por trás dela, que tem fundo transparente. */
.faixa--topo {
  position: relative;
  z-index: 2;
  margin-bottom: -50px;
  background: transparent;
  border-top: 1px solid var(--borda-38);
}
.faixa--dupla   { border-top: 1px solid var(--borda-33);
                  border-bottom: 1px solid var(--borda-33); }

.faixa__texto {
  font-family: var(--fonte-texto);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 4.4px;
  line-height: 1.5em;
  color: var(--branco);
  padding: 12px;
  margin: 0;
}


/* --------------------------------------------------------------------------
   Elementos exclusivos do mobile
   No mobile o hero é [64392c8d]: um bloco escuro só com texto, sem imagem.
   O vídeo fica num container separado de 44vh logo abaixo [4f9b99d].
   A faixa do topo [4a40db33] some e reaparece dentro do hero [0e4e767].
   -------------------------------------------------------------------------- */
.faixa-no-hero { display: none; }
.faixa-video   { display: none; }

/* --------------------------------------------------------------------------
   8. Hero  [64392c8d / 29db0020]
   min-height 850px; véu #020A16 a 20% de opacidade (não um degradê forte).
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 800px;   /* [a9d42c9] hero desktop */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* [a9d42c9] a imagem é o fundo do container.
     Atenção à ordem: um `background:` shorthand depois daqui zera a imagem. */
  background-color: var(--preto);
  background-image: url("../img/BG-DESK-HANDS-ON-IMAGEM.avif");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
/* No desktop o hero do original [a9d42c9] tem as DUAS camadas: a imagem
   BG-DESK-HANDS-ON-IMAGEM.avif no fundo do container e, por cima dela,
   o background video BANNER-HANDS-ON-1920-x-800-px.webm em loop, que o
   Elementor injeta por JS (por isso não aparece no HTML da página).
   O nosso vídeo é o mesmo arquivo, byte a byte.

   Estava com display:none aqui — era esse o motivo de o hero parecer
   uma foto parada. A imagem continua como poster, cobrindo o intervalo
   até o vídeo carregar. Abaixo de 768px ele some, porque no mobile o
   vídeo vive no bloco separado [4f9b99d]. */
.hero__video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__veu {                     /* --overlay-opacity: 0.2 */
  position: absolute;
  inset: 0;
  background: var(--azul-noite);
  opacity: .2;
  z-index: 1;
}
.hero__conteudo {
  position: relative;
  z-index: 2;
  width: 61%;                    /* [e84cd21] 61% de 1140 = 695px */
  max-width: 695px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
/* [902a75b] 46% da largura natural do arquivo (556px) = 256px.
   A coluna usa align-items:flex-start, então o widget encolhe ao conteúdo. */
.hero__logo { width: 256px; margin-bottom: 10px; }

.hero__titulo {                  /* [28144476] */
  font-family: var(--fonte-titulo);
  font-size: 35px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3em;
  letter-spacing: -1.5px;
  color: var(--branco);
}
.hero__sub {                     /* [117056e6] */
  width: 97%;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
  color: var(--branco);
  margin: 0;
}
.hero .btn { margin-top: 10px; }

/* --------------------------------------------------------------------------
   9. Seção "Muito além da observação"  [146dee94]
   -------------------------------------------------------------------------- */
.apresentacao .titulo { font-size: 30px; text-align: left; }   /* [ea3d4bb]  */
.apresentacao .texto  { font-size: 16px; text-align: left; }   /* [6e705d9d] */
.apresentacao__midia img { width: 100%; }

/* --------------------------------------------------------------------------
   10. Mentor  [d64ad83 / 79615af / 35b3cd2 / 085fc5e]
   -------------------------------------------------------------------------- */
.mentor__titulo {                /* [debd02d] */
  font-size: 35px;
  width: 61%;
  margin-inline: auto;
  text-align: center;
}
.mentor__card {                  /* [79615af] --width: 92% */
  width: 92%;
  margin-inline: auto;
  display: flex;
  align-items: flex-start;       /* no original as duas colunas alinham pelo topo */
  gap: 20px;
  margin-top: 25px;
  padding: 60px 0;
  border: 1px solid var(--borda-40);
  background-image: linear-gradient(145deg, #130D0F 0%, #1D141580 100%);
}
/* A foto entra no flex com sua largura natural (417px) e encolhe junto com
   a coluna de texto (65%), resolvendo em ~390px — como no original.
   Fixar 28,6% deixava a foto pequena demais. */
.mentor__card > :first-child { flex: 0 1 417px; min-width: 0; }
.mentor__card > :last-child  { flex: 0 1 65%;   min-width: 0; }  /* [2352a0d] */

.mentor__foto {                  /* [35b3cd2] */
  width: 100%;
  margin-left: -30px;
  border-top: 1px solid var(--dourado-claro);
  border-bottom: 1px solid var(--dourado-claro);
  border-radius: 15px;
}
/* [085fc5e] O uppercase vale só para o TÍTULO do image-box.
   A descrição é Poppins 16px em caixa normal. */
.mentor__texto { padding: 0 20px; }

.mentor__nome {
  font-family: var(--fonte-titulo);
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3em;
  letter-spacing: -.8px;
  color: var(--branco);
  margin: 0 0 20px;
}
.mentor__desc {
  font-family: var(--fonte-texto);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
  color: var(--branco);
}
.mentor__desc strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   11. Seta de rolagem  [caba45]
   -------------------------------------------------------------------------- */
/* [caba45] SVG próprio 21x40, caixa de 56px, 65px até o título */
.seta {
  display: block;
  width: auto;
  height: 56px;
  margin: 0 auto 65px;
  animation: moverBaixo 1.5s infinite;
}

/* --------------------------------------------------------------------------
   12. Grade de cards  [5e534506 + ba6b76f...11778a7]
   5 cards de 32%, gap 15px, radius 20px, borda #BE964814.
   -------------------------------------------------------------------------- */
.cards {                         /* [5e534506] --width: 93% */
  width: 93%;
  margin: 30px auto 40px;        /* 30px do título, 40px até o botão */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
.card {
  flex: 0 1 32%;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 15px 20px;
  background-image: var(--grad-card-a);
  border: 1px solid var(--borda-14);
  border-radius: 20px;
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.5;
  color: var(--branco);
  text-align: left;
  /* No original as duas linhas de cards se igualam: todos medem 104px.
     Sem altura definida o flex-wrap deixaria a primeira linha mais baixa. */
  min-height: 104px;
}
.card svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; fill: var(--azul-cinza); }
/* No original o SVG renderiza numa caixa de 40x40 e o span do ícone ocupa
   52px, deixando 239px para o texto — é isso que define a quebra de linha. */
.card .ico {
  flex: 0 0 52px;
  width: 52px;
  height: 40px;
  object-fit: contain;
  object-position: left center;
  margin: 0;
}

.grade-titulo { font-size: 35px; width: 74%; margin-inline: auto; }  /* [78fd6797] */

/* --------------------------------------------------------------------------
   13. Listas com ícone  [547daf49 / c1917a0 / 5fb1d47]
   Ícone em #B3C4D8, texto branco, Poppins 15–16px.
   -------------------------------------------------------------------------- */
.lista li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4.5px 0;   /* [547daf49] espaçamento de 9px */
  font-family: var(--fonte-texto);
  font-size: 15px;
  line-height: 1.5;
  color: var(--branco);
}
.lista svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 4px; fill: var(--azul-cinza); }

/* Ícones originais: SVGs próprios do projeto, com degradês.
   Usados como <img> para não colidirem os ids dos gradientes. */
.ico { flex: 0 0 auto; height: 20px; width: auto; margin-top: 2px; }
.lista .ico { height: 18px; }
.lista--16 li { font-size: 16px; }

/* Listas com separador — no original só [4548b068], [c1917a0] e [5fb1d47].
   Elementor divide o espaçamento: metade abaixo de um item, metade acima do
   próximo, e desenha a linha no ::after. */
.lista--separada li { position: relative; }
.lista--separada li:not(:last-child) { padding-bottom: 16px; }
.lista--separada li:not(:first-child) { margin-top: 16px; }
.lista--separada li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid var(--borda-33);
}
/* [4548b068] usa espaçamento de 36px (18px de cada lado) */
.lista--moldura.lista--separada li:not(:last-child) { padding-bottom: 18px; }
.lista--moldura.lista--separada li:not(:first-child) { margin-top: 18px; }

/* Lista dentro de moldura  [4548b068] — borda de 2px */
.lista--moldura {
  padding: 20px;
  border: 2px solid var(--borda-33);
  border-radius: 20px;
  text-align: left;
}

/* --------------------------------------------------------------------------
   14. Seção "Uma experiência" + vídeo  [23d72534 / 1ed6a9b9 / 5bbaf58]
   -------------------------------------------------------------------------- */
.experiencia__titulo { font-size: 36px; width: 67%; margin-inline: auto; }  /* [118098d2] */

.experiencia__bloco {            /* [1ed6a9b9] */
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px 40px;
  margin-top: 30px;
  padding: 40px 20px 40px 0;
  border: 1px solid var(--borda-1f);
  border-radius: 35px;                 /* [1ed6a9b9] --border-radius: 35px */
  background-image: linear-gradient(145deg, #130D0F 0%, #010103 100%);
  overflow: hidden;
}
.experiencia__bloco > * { flex: 1 1 0; min-width: 0; }

/* A imagem de fundo entra a 14% de opacidade, como no original */
/* A palavra "experiência" fica no canto inferior direito, contida —
   não centralizada e esticada. [1ed6a9b9]::before */
.experiencia__bloco::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/experiencia.webp");
  background-position: 100% 491px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .14;
  pointer-events: none;
}
.experiencia__bloco > * { position: relative; z-index: 1; }

.experiencia__video {            /* [5bbaf58] — mede 565x565 no original */
  aspect-ratio: 1 / 1;
  margin-left: -35px;
  border: 1px solid var(--borda-1f);
  border-radius: 15px;
  overflow: hidden;
}
.experiencia__lista-titulo {     /* [6db52e10] — peso 400, não 700 */
  font-family: var(--fonte-titulo);
  font-size: 26px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.4em;
  letter-spacing: -.8px;
  color: var(--branco);
}

/* --------------------------------------------------------------------------
   15. "O que torna o Curso VIP diferente"  [119e81e7 / 7921bb0c / 6bb12407]
   -------------------------------------------------------------------------- */
/* [6f56f20e] 55% e [5307f210] 50% — somam mais de 100%, o flex encolhe
   proporcionalmente e resulta em 576px / 524px dentro dos 1140. */
/* [5307f210] tem --order:-99999 no original: o título fica em segundo no
   HTML mas é exibido primeiro. Aqui já está na ordem visual correta. */
.diferente .duas-colunas > :first-child { flex: 0 1 50%; }   /* título */
.diferente .duas-colunas > :last-child  { flex: 0 1 55%; }   /* texto  */
.diferente__titulo { font-size: 39px; text-align: left; }
.diferente__texto  { font-size: 17px; text-align: left; }

/* --------------------------------------------------------------------------
   16. Investimento  [3cc82d7b / 193c633c / 37eda86c]
   -------------------------------------------------------------------------- */
.investimento {
  border-top: 1px solid var(--borda-clara);
  border-bottom: 1px solid var(--borda-clara);
}
.investimento__grade { display: flex; gap: 20px; align-items: flex-start; }
.investimento__grade > * { flex: 1 1 0; min-width: 0; }

/* [17980588] e [6e10cce] — cada coluna empilha dois painéis */
.coluna-paineis { display: flex; flex-direction: column; gap: 20px; }
.investimento__grade > :first-child { flex: 0 1 50%; }   /* [17980588] */
.investimento__grade > :last-child  { flex: 0 1 48%; }   /* [6e10cce]  */

.painel {                        /* [193c633c] */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;   /* center encolhia os filhos à largura do texto */
  gap: 20px;
  padding: 40px;
  border: 1px solid var(--borda-33);
  border-radius: 20px;          /* todos os painéis do original */
  background-image: linear-gradient(140deg, #1D1415 0%, #130D0F 100%);
  text-align: center;
}
.painel--b {                     /* [37eda86c] */
  background-image: var(--grad-card-b);
  justify-content: flex-start;
}

.painel__titulo  { font-size: 35px; }                     /* [14a0750a] */
/* A largura de 86% é só do texto do painel de investimento [13fd3889];
   os textos dos outros painéis ([8125a9f], [d628588]) ocupam 100%. */
.painel__texto { font-size: 16px; margin-top: -5px; }
.investimento__grade > :first-child .painel:first-child .painel__texto { width: 86%; margin-inline: auto; }

.rotulo {                        /* [adc3700] — ls positivo, 0.8px */
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3em;
  letter-spacing: .8px;
}
.preco {                         /* [1a77ddd] */
  font-family: var(--fonte-titulo);
  font-size: 58px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3em;
  letter-spacing: -1.5px;
  margin: -10px 0 0;
}
.condicao {                      /* [46a88e6] */
  font-family: var(--fonte-titulo);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3em;
  letter-spacing: .8px;
  width: 84%;
  margin: -10px auto 0;
}
.nota {                          /* [5d98940] */
  font-family: var(--fonte-texto);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5em;
  width: 77%;
  margin: -5px auto 0;
}

.divisor {                       /* [7c03dff4 / 45ec4e61] — largura 84% */
  width: 84%;
  height: 1px;
  border: 0;
  background: var(--borda-33);
  margin: 22px auto;
}

.painel__subtitulo { font-size: 25px; }   /* [26ea5cad / be40bc9 / c8aeb57] */

/* --------------------------------------------------------------------------
   17. Modalidades  [dcafca6 / 7a54e6d]
   -------------------------------------------------------------------------- */
.modalidades { display: flex; gap: 20px; align-items: stretch; }
.modalidades > * { flex: 1 1 0; min-width: 0; }

/* [4902f77] viewBox 94x24 — três círculos, centralizado */
.painel__icone { width: 94px; height: 24px; margin: 0 auto 20px; display: block; }

/* --------------------------------------------------------------------------
   18. Carrossel + fechamento  [764dffae / 5315cc2 / 22515047]
   -------------------------------------------------------------------------- */
.fechamento { display: flex; align-items: center; gap: 40px; }
.fechamento > * { flex: 1 1 0; min-width: 0; }
.fechamento > .carrossel { flex: 0 0 50%; }   /* [5315cc2] --width: 50% */

/* [5315cc2] Carrossel — 2 slides visíveis, gap 10px, setas e bullets.
   Reproduz o comportamento do nested-carousel do Elementor (Swiper). */
.carrossel { position: relative; }

.carrossel__janela { overflow: hidden; border-radius: 15px; }

.carrossel__trilha {
  display: flex;
  gap: 10px;
  align-items: flex-start;          /* sem stretch: a altura sai da proporção */
  transition: transform .5s ease;   /* speed: 500 no original */
}

/* A altura vem de um ::before com padding percentual, não de aspect-ratio.
   O item é um flex item, e flex item esticado que depende de aspect-ratio
   para ter altura é justamente onde o Safari diverge do Chrome — ele resolve
   a altura pelo conteúdo e o vídeo sai achatado, quase quadrado, no celular.
   padding-top percentual sempre se mede pela LARGURA do elemento, em qualquer
   motor, então a proporção 9:16 fica garantida. */
.carrossel__item {
  position: relative;
  flex: 0 0 calc((100% - 10px) / 2);   /* slides_to_show: 2 */
  border-radius: 15px;
  overflow: hidden;
}
.carrossel__item::before {
  content: "";
  display: block;
  padding-top: 177.7778%;              /* 16/9 — vídeos são 720x1280 */
}
.carrossel__item video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carrossel__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 1, 3, .55);
  border: 1px solid var(--borda-33);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease;
}
.carrossel__seta:hover { background: rgba(1, 1, 3, .85); }
.carrossel__seta svg   { width: 18px; height: 18px; fill: var(--dourado); }
.carrossel__seta--ant  { left: -14px; }
.carrossel__seta--prox { right: -14px; }

.carrossel__bullets {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.carrossel__bullets button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--borda-40);
  cursor: pointer;
  transition: background .2s ease;
}
.carrossel__bullets button[aria-current="true"] { background: var(--dourado); }

.fechamento__titulo { font-size: 34px; text-align: left; }   /* [22515047] */
.fechamento__texto  { font-size: 17px; text-align: left; }   /* [1e207c68] */

/* Vídeo com capa clicável */
.video-capa { position: relative; cursor: pointer; border-radius: 15px; overflow: hidden; }
.video-capa img { width: 100%; height: 100%; object-fit: cover; }
.video-capa__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.25);
  transition: background .25s ease;
}
.video-capa:hover .video-capa__play { background: rgba(0,0,0,.1); }
/* Play do original: círculo vazado com anel branco */
.video-capa__play svg { width: 26px; height: 26px; fill: #fff; }
.video-capa__play::before {
  content: "";
  position: absolute;
  width: 92px;
  height: 92px;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   19. Rodapé  [4b9b4d6f / 69bb85a]
   -------------------------------------------------------------------------- */
.rodape { background: var(--preto); padding: 5px; text-align: center; }
.rodape p {
  font-family: var(--fonte-texto);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.7px;
  line-height: 1.5em;
  color: var(--branco);
  padding: 20px;
  margin: 0;
}

/* Botão de WhatsApp — só na página de obrigado.
   A landing NÃO tem WhatsApp: o original também não tem, e antes da
   inscrição não existe conversa para puxar.

   Original (medido no site ao vivo, /obrigado-hands-on/):
     background  linear-gradient(-120deg, #338678 0%, #79C4AE 100%)
     box-shadow  0 -2px 0 2px rgba(149,243,190,.45) inset
     radius 5px · padding 25px 55px · Fahkwang 15px/400 · ls 2.5px
     cor #EBEBEB · sem animação · ícone à direita do texto

   Aqui é DEPARTURE deliberada (pedido da Mari, "um pouco mais bonito"):
   mantém o gradiente -120deg e o brilho inset do original, mas com verde
   mais vivo, formato pílula, ícone à esquerda num disco translúcido e
   elevação no hover. */
.btn--zap {
  flex-direction: row;
  gap: 14px;
  padding: 19px 42px;
  border-radius: 999px;
  color: var(--branco);
  background-image: linear-gradient(-120deg, #0E7A52 0%, #38DB95 100%);
  box-shadow:
    0 -2px 0 2px rgba(168, 245, 211, .40) inset,
    0 14px 34px -14px rgba(56, 219, 149, .55);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn--zap:hover {
  transform: translateY(-2px) scale(1);
  box-shadow:
    0 -2px 0 2px rgba(168, 245, 211, .55) inset,
    0 18px 40px -12px rgba(56, 219, 149, .75);
}
.btn--zap:active { transform: translateY(0) scale(.98); }

/* O glifo ganha um disco branco translúcido para separar do gradiente. */
.btn--zap .btn__zap {
  order: 0;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  fill: var(--branco);
}

/* --------------------------------------------------------------------------
   19b. Página de obrigado  — medido no ao vivo em /obrigado-hands-on/

   É um bloco único, não uma seção de altura de tela: gradiente 145deg,
   padding 80px 0, coluna de 618px centrada dentro do container de 1140.
   Logo 185px · título Fahkwang 35px/700 lh 1.3em ls -1.5px
   texto Poppins 17px/400 lh 1.5em, com <b> nos dois trechos destacados
   parágrafos separados por uma linha em branco (1.5em)
   botão a 30px do texto, com 10px de margem embaixo

   O rodapé aqui NÃO é o .rodape da landing: é uma faixa #130D0F com
   borda dourada em cima e embaixo. O original não traz aviso de
   direitos reservados nesta página — conferido no HTML.
   -------------------------------------------------------------------------- */
.obrigado {
  /* 90px no topo: os 80px do container + os 10px de gap entre widgets do
     Elementor, que no original empurram a logo para y=91. */
  padding: 90px 20px 90px;
  background-image: linear-gradient(145deg, #010103 0%, #130D0F 100%);
  text-align: center;
}
.obrigado__col {
  width: 100%;
  max-width: 618px;
  margin-inline: auto;
}
.obrigado__logo   { display: block; width: 185px; margin: 0 auto 30px; }
.obrigado__titulo { font-size: 35px; margin: 0; }
.obrigado__texto  { margin: 20px 0 0; font-size: 17px; }
.obrigado__texto p          { margin: 0; }
.obrigado__texto p + p      { margin-top: 1.5em; }
.obrigado__texto b          { font-weight: 700; }
.obrigado__acao   { margin: 30px 0 10px; }

.faixa--rodape { background: var(--preto-quente); }
/* A faixa do rodapé tem 48px no original: 12px de texto + 12px de
   padding em cima e embaixo + 5px da faixa + as duas bordas.
   O .ti precisa entrar junto, senão o span reabre a linha em 18px. */
.faixa--rodape .faixa__texto,
.faixa--rodape .faixa__texto .ti { line-height: 1em; }

/* --------------------------------------------------------------------------
   20. Popup do formulário  [968a929 / 7158b13 / 2be1f71 / 57b87c9]
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.8);
  overflow-y: auto;
}
.modal[aria-hidden="false"] { display: flex; }

.modal__caixa {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: auto;
  padding: 45px;
  background: var(--preto);
  border: 1px solid var(--borda-popup);
  text-align: center;
}
.modal__fechar {
  position: absolute; top: 10px; right: 14px;
  background: none; border: 0;
  color: var(--branco); font-size: 28px; line-height: 1;
  cursor: pointer; padding: 6px;
}
.modal__fechar:hover { color: var(--dourado); }
.modal__logo   { width: 32%; margin: 0 auto 16px; }
.modal__titulo { font-size: 31px; }
.modal__texto  { font-size: 16px; line-height: 1.5em; margin-top: 10px; }

/* Formulário — campos com fundo branco e borda #C4AC79, como no original */
.form { margin-top: 20px; text-align: left; }
.form__campo { margin-bottom: 12px; }
.form__rotulo {
  display: block;
  font-family: var(--fonte-texto);
  font-size: 14px;
  line-height: 1.4;
  color: var(--branco);
  margin-bottom: 6px;
}
.form input,
.form select {
  width: 100%;
  font-family: var(--fonte-texto);
  font-size: 14px;
  line-height: 1.2em;
  color: #333;
  background-color: #ffffff;
  border: 1px solid var(--dourado-medio);
  border-radius: 3px;
  padding: 14px 16px;
  appearance: none;
}
.form input::placeholder { color: #8a8a8a; }
.form input:focus,
.form select:focus { outline: 2px solid var(--dourado); outline-offset: -2px; }

.form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 571 571'%3E%3Cpath fill='%23866A33' d='M571 393q0 14-10 25L311 668q-11 11-25 11t-25-11L11 418Q0 407 0 393t11-25 25-11h500q14 0 25 11t10 25z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 38px;
}

/* Botão do formulário: fundo chapado #866A33, padding 20px */
.form .btn {
  width: 100%;
  margin-top: 6px;
  padding: 20px;
  background-image: none;
  background-color: var(--dourado-escuro);
  color: #ffffff;
  fill: #ffffff;
  animation: none;
  box-shadow: none;
}

.form__aviso { margin-top: 12px; font-size: 13px; line-height: 1.5; text-align: center; min-height: 18px; }
.form__aviso--erro { color: #ff8888; }
.form__aviso--ok   { color: var(--verde); }

/* --------------------------------------------------------------------------
   21. Animações de entrada (equivalem ao elementor-invisible + fadeIn)
   -------------------------------------------------------------------------- */
.revelar { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.revelar.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  .btn, .ti, .seta { animation: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   22. Responsivo — os 3 breakpoints do original: 1366 / 1024 / 767
   ========================================================================== */

/* -------------------------------- 1366px -------------------------------- */
@media (max-width: 1366px) {
  .secao { padding: 60px 0; }
  .container { padding-inline: 20px; }

  .hero { min-height: 768px; }
  .hero__titulo { font-size: 30px; }
  .hero__sub    { font-size: 16px; }

  .apresentacao .titulo { font-size: 28px; }
  .apresentacao .texto  { font-size: 15px; }

  .mentor__titulo      { font-size: 28px; }
  .grade-titulo        { font-size: 28px; }
  .experiencia__titulo { font-size: 28px; }
  .experiencia__lista-titulo { font-size: 18px; }
  .diferente__titulo   { font-size: 32px; }
  .diferente__texto    { font-size: 15px; }
  .painel__titulo      { font-size: 31px; }
  .painel__subtitulo   { font-size: 20px; }
  .preco               { font-size: 44px; }
  .condicao            { font-size: 17px; }
  .nota                { font-size: 12px; width: 87%; }
  .investimento__grade > :first-child .painel:first-child .painel__texto { width: 94%; }
  .fechamento__titulo  { font-size: 29px; }
  .fechamento__texto   { font-size: 15px; }

  .card  { padding: 12px 20px; font-size: 15px; }
  .lista li { font-size: 15px; }
  .lista--16 li { font-size: 15px; }
}

/* -------------------------------- 1024px -------------------------------- */
@media (max-width: 1024px) {
  :root { --largura-max: 1024px; }
  .secao { padding: 60px 0; }
  .container { padding-inline: 20px; }

  .hero { min-height: 638px; }
  .hero__conteudo { width: 85%; max-width: 870px; }
  .hero__titulo { font-size: 28px; }
  .hero__sub    { font-size: 15px; }
  .btn { padding: 25px; }

  .apresentacao .titulo { font-size: 26px; }

  .mentor__titulo      { font-size: 28px; width: 83%; }
  .grade-titulo        { font-size: 28px; width: 84%; }
  .experiencia__titulo { font-size: 28px; width: 83%; }
  .experiencia__lista-titulo { font-size: 21px; }
  .diferente__titulo   { font-size: 28px; }
  .painel__titulo      { font-size: 22px; }
  .painel__subtitulo   { font-size: 19px; }
  .preco               { font-size: 48px; }
  .rotulo              { font-size: 19px; }
  .condicao            { font-size: 14px; width: 100%; }
  .fechamento__titulo  { font-size: 26px; width: 100%; }

  .card  { flex-basis: 48%; font-size: 14px; }
  .lista li, .lista--16 li { font-size: 14px; }

  .painel, .painel--b { padding: 30px; }
  .experiencia__bloco { gap: 10px; padding: 30px 20px 30px 0; }
  .experiencia__bloco::before { background-position: 0 441px; }
  .experiencia__video { margin-left: -8px; }
  .fechamento { gap: 30px; }
}

/* -------------------------------- 767px --------------------------------- */
@media (max-width: 767px) {
  :root { --largura-max: 767px; }
  .secao { padding: 45px 0; }
  .container { padding-inline: 20px; }
  .investimento__grade { flex-direction: column; }

  .faixa { padding: 15px; }
  .faixa--topo { padding: 5px; }
  .faixa__texto { font-size: 11px; padding: 10px; }

  /* [4a40db33] a faixa do topo é elementor-hidden-mobile */
  .faixa--topo { display: none; }

  /* [64392c8d] hero mobile: bloco escuro só com texto, altura pelo conteúdo */
  .hero {
    min-height: 0;
    align-items: flex-end;
    padding: 10px 18px;
    background-image: none;
    background-color: var(--preto);
  }
  .hero__video { display: none; }        /* o vídeo vive no bloco separado */
  .hero__veu   { opacity: .6; }
  .hero__conteudo { width: 100%; gap: 10px; }
  .hero__logo   { width: 60%; }
  .hero__titulo { font-size: 21px; }
  .hero__sub    { font-size: 14px; width: 100%; margin-top: -5px; }

  /* [0e4e767] faixa dentro do hero, com borda embaixo */
  .faixa-no-hero {
    display: block;
    width: 100%;
    align-self: center;
    padding: 10px;
    margin: 0;
    font-size: 10px;
    border-bottom: 1px solid var(--borda-38);
  }

  /* [4f9b99d] bloco de vídeo de 44vh abaixo do hero */
  .faixa-video {
    display: block;
    position: relative;
    min-height: 44vh;
    overflow: hidden;
    background: var(--preto);
  }
  .faixa-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .9;
  }

  .btn { width: 100%; font-size: 13px; padding: 22px 15px; letter-spacing: 2px; }

  .duas-colunas,
  .investimento__grade,
  .modalidades,
  .fechamento,
  .mentor__card,
  .experiencia__bloco { flex-direction: column; gap: 20px; }

  /* Em coluna, flex-basis 0 colapsa a altura dos itens (o vídeo do box
     "Uma experiência" sumia). Cada item volta a ter altura de conteúdo. */
  .duas-colunas > *,
  .investimento__grade > *,
  .modalidades > *,
  .fechamento > *,
  .mentor__card > *,
  .experiencia__bloco > * { flex: 0 0 auto; width: 100%; }

  .apresentacao .titulo,
  .apresentacao .texto,
  .diferente__titulo,
  .diferente__texto,
  .fechamento__titulo,
  .fechamento__texto,
  .mentor__texto { text-align: center; }

  .apresentacao .titulo { font-size: 24px; }
  .apresentacao .texto  { font-size: 15px; }

  .mentor__titulo { font-size: 24px; width: 100%; }
  /* ------------------------------------------------------------------
     Ritmo vertical do mobile.

     Medido antes: o respiro entre seções ia de 45px a 117px, e o vão
     título->conteúdo de 0,67x a 1,67x o corpo do título. Não era falta
     de espaço, era falta de MEDIDA — cada seção tinha a sua, herdada do
     Elementor. É o que faz a página parecer apertada em umas partes e
     solta em outras sem que se saiba dizer por quê.

     Aqui vale uma medida só para cada coisa, na grade de 8px:
     56px de respiro por seção (112px entre duas) e 24px do título para
     o conteúdo — 1x o corpo do título, que é o de sempre em tipografia.
     ------------------------------------------------------------------ */
  .secao           { padding: 56px 0; }
  .secao--continua { padding-top: 56px; }   /* no mobile nada cola na anterior */
  .secao--grade    { padding-bottom: 56px; }
  .container       { padding-inline: 24px; }

  .apresentacao__texto,
  .mentor__card,
  .cards,
  .experiencia__bloco,
  .fechamento__texto { margin-top: 24px; }

  .mentor__card   { padding: 0 0 40px; }
  .mentor__foto   { width: 91%; margin: -25px auto 0; }
  .mentor__nome   { font-size: 22px; margin-bottom: 20px; }
  .mentor__desc   { font-size: 15px; }

  .seta { margin-bottom: 20px; }

  .grade-titulo        { font-size: 24px; width: 100%; }
  .card                { flex-basis: 100%; font-size: 14px; }
  .experiencia__titulo { font-size: 24px; width: 100%; }
  .experiencia__bloco  { margin-top: 24px; padding: 0 20px 30px; }   /* ritmo: 24px */
  .experiencia__bloco::before { background-position: 0 102%; }
  .experiencia__video  { margin: -10px 0 0; }
  .experiencia__lista-titulo { font-size: 22px; line-height: 1.3em; letter-spacing: -1.3px; text-align: center; }

  .diferente__titulo { font-size: 24px; }
  .diferente__texto  { font-size: 15px; }

  .painel, .painel--b { padding: 60px 25px; }
  .painel--b          { padding: 40px 25px; }
  .painel__titulo     { font-size: 22px; line-height: 1.2em; }
  .painel__subtitulo  { font-size: 18px; line-height: 1.2em; }
  /* O -5px herdado do original deixa o vão em 15px; +4 leva aos mesmos 24px
     das demais, sem mexer no desktop. */
  .painel__texto      { font-size: 15px; margin-top: 4px; }
  .rotulo             { font-size: 17px; line-height: 1.2em; }
  .preco              { font-size: 46px; line-height: 1.2em; }
  .condicao           { font-size: 14px; width: 100%; }
  .nota               { font-size: 12px; width: 100%; }

  .carrossel__item { flex: 0 0 100%; }   /* slides_to_show_mobile: 1 */
  .carrossel__seta--ant  { left: 4px; }
  .carrossel__seta--prox { right: 4px; }
  .fechamento__titulo { font-size: 24px; }
  .fechamento__texto  { font-size: 15px; }

  .rodape p { font-size: 10px; padding: 10px; }

  .obrigado { padding: 54px 0; }
  .obrigado__logo   { width: 140px; margin-bottom: 24px; }
  .obrigado__titulo { font-size: 24px; }
  .obrigado__texto  { font-size: 15px; }

  .btn--zap { padding: 16px 26px; font-size: 13px; letter-spacing: 1.8px; gap: 10px; }
  .btn--zap .btn__zap { width: 26px; height: 26px; }

  .modal__caixa { padding: 30px 30px 60px; }
  .modal__logo   { width: 42%; }
  .modal__titulo { font-size: 23px; }
  .modal__texto  { font-size: 15px; }
}