/* =============================================================
   Página de Captação 01 — Viver do Mercado Americano
   Réplica em código da página originalmente feita em Elementor.

   Breakpoints (iguais aos do original):
     desktop  -> base
     tablet   -> max-width: 1024px
     mobile   -> max-width: 767px
   ============================================================= */

/* -------------------------------------------------------------
   1. FONTES (auto-hospedadas — nada de CDN externo)
   ------------------------------------------------------------- */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fontes/roboto-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fontes/roboto-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fontes/montserrat-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fontes/montserrat-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../fontes/poppins-normal-latin-ext-200.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../fontes/poppins-normal-latin-200.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fontes/poppins-normal-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fontes/poppins-normal-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------
   2. TOKENS
   ------------------------------------------------------------- */
:root {
  --cor-acao:            #FF8200;   /* cor dos botões — o tema verde troca isto */
  --cor-acao-hover:  #E77600;
  --cor-acao-hover-form: #F17B00;  /* hover do botão do formulário */
  --cor-fundo:          #000000;
  --cor-branco:         #FFFFFF;
  --cor-borda:          #4A4A4A;
  --cor-texto:          #7A7A7A;
  --cor-lgpd:           #A3BAC6;
  --cor-modal-titulo:   #002856;
  --cor-modal-campo-bg: #F3F3F3;
  --cor-modal-campo-tx: #3B3838;

  --fonte: 'Roboto', sans-serif;

  /* espaçamento padrão entre blocos (equivale ao gap de 20px do Elementor) */
  --espaco: 20px;
}

/* -------------------------------------------------------------
   3. RESET
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

h1, h2, h3, ul { margin: 0; }
/* 0.9rem = 14.4px — mesma margem que o tema aplicava em todo parágrafo */
p { margin: 0 0 .9rem; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------
   4. LISTA COM ÍCONES (reproduz o widget icon-list)
   ------------------------------------------------------------- */
.lista-icones__item {
  display: flex;
  align-items: center;
}
.lista-icones__item:not(:last-child)  { padding-block-end: 5px; }
.lista-icones__item:not(:first-child) { margin-block-start: 5px; }

.lista-icones__icone {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 17.5px;         /* 14px * 1.25, como no original */
  flex: 0 0 17.5px;
}
.lista-icones__icone svg {
  width: 14px;
  height: 14px;
  fill: var(--cor-texto);
  transition: fill .3s;
}
.lista-icones__texto {
  padding-inline-start: 5px;
  color: var(--cor-texto);
  transition: color .3s;
}

.lista-icones--hero .lista-icones__texto {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}
.lista-icones--aula .lista-icones__texto {
  font-size: 18px;
  font-weight: 400;
}

/* -------------------------------------------------------------
   5. BOTÕES
   ------------------------------------------------------------- */
.botao {
  display: inline-block;
  background-color: var(--cor-acao);
  color: var(--cor-branco);
  text-align: center;
  border-radius: 3px;
  line-height: 1;
  transition: background-color .3s, color .3s;
}

/* botão largo dentro do formulário */
.botao--formulario {
  width: 100%;
  min-height: 40px;   /* mesma altura mínima dos campos */
  font-size: 20px;
  font-weight: 400;
  padding: 2.5% 0;
}
.botao--formulario:hover,
.botao--formulario:focus-visible { background-color: var(--cor-acao-hover-form); }

/* botão de chamada no meio da página (abre o modal) */
.botao--cta {
  font-size: 25px;
  font-weight: 400;
  padding: 1.5% 11%;
}
.botao--cta:hover,
.botao--cta:focus-visible { background-color: var(--cor-acao-hover); }

/* -------------------------------------------------------------
   6. FORMULÁRIO
   ------------------------------------------------------------- */
.formulario__campos {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px -10px;
}
.formulario__grupo {
  width: 100%;
  padding: 0 5px;
  margin-bottom: 10px;
}

.formulario__campo {
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid #69727d;
  border-radius: 3px;
  background-color: var(--cor-branco);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: 23px;
  font-weight: 300;
  line-height: 1.4;
}
.formulario__campo::placeholder { color: var(--cor-texto); opacity: 1; }
.formulario__campo:focus-visible { outline: 2px solid var(--cor-acao); outline-offset: 2px; }
.formulario__campo[aria-invalid="true"] { border-color: #D8000C; }

/* --- seletor de país (intl-tel-input) -------------------------
   Só os ajustes para o widget encaixar no visual da página; o
   resto vem de vendor/intl-tel-input/css/intlTelInput.css.
   ------------------------------------------------------------- */
.iti { display: block; width: 100%; }

/* a lib herda a fonte do container, mas o dropdown fica fora
   do campo — garantimos Roboto e o tamanho certo */
.iti__dropdown-content { font-family: var(--fonte); }

.iti__selected-country { border-radius: 3px 0 0 3px; }

.iti__search-input {
  font-family: var(--fonte);
  font-size: 15px;
}

.iti__country-name  { color: #3B3838; }
.iti__dial-code     { color: #8a8a8a; }

/* o campo do modal é cinza e sem borda: o botão de DDI acompanha */
.formulario--modal .iti__selected-country { border-radius: 3px 0 0 3px; }

/* dropdown por cima de tudo, inclusive do modal */
.iti__dropdown-content { z-index: 30; }

.formulario__aviso {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--cor-branco);
}
.formulario__aviso--erro { color: #FF6B6B; }

/* -------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------- */
.hero {
  padding: 0 5%;
  background-color: #000;
  background-image: url('../img/hero-desktop.webp');
  background-position: center center;
  background-size: cover;
  border-bottom: 1px solid var(--cor-borda);
}
.hero__interno {
  max-width: 1600px;
  margin-inline: auto;
  padding-block: 12%;
  display: flex;
}
.hero__coluna {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--espaco);
}

.hero__titulo {
  font-size: 60px;
  font-weight: 600;
  line-height: 63px;
  color: var(--cor-branco);
}

.formulario--hero { margin-top: 2%; }

.hero__termos {
  font-size: 11px;
  font-weight: 400;
  color: var(--cor-texto);
}

/* -------------------------------------------------------------
   8. SEÇÃO DAS AULAS
   ------------------------------------------------------------- */
.aulas { padding: 0 10px; }
.aulas__interno {
  max-width: 75%;
  margin-inline: auto;
  padding-block: 10px;
  /* flex evita o colapso de margens entre os blocos (igual ao original) */
  display: flex;
  flex-direction: column;
}

.aulas__bloco {
  padding: 10px;
  margin: 6% 0 4%;
  display: flex;
  flex-direction: column;
  gap: var(--espaco);
}

.aulas__titulo {
  font-size: 60px;
  font-weight: 600;
  line-height: 72px;
  color: var(--cor-branco);
  text-align: start;
  margin-bottom: 5%;
}
.aulas__subtitulo {
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  color: var(--cor-texto);
}

.aulas__grade {
  width: 98.398%;
  padding: 10px;
  display: flex;
  gap: var(--espaco);
}

.aula {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco);
  padding: 30px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
}
.aula__numero {
  text-align: center;
  font-size: 37px;
  font-weight: 600;
  line-height: 43px;
  color: var(--cor-branco);
}
.aula__tema {
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  color: var(--cor-branco);
}

/* -------------------------------------------------------------
   9. CHAMADAS (CTA)
   ------------------------------------------------------------- */
.cta {
  padding: 10px;
  text-align: center;   /* botão é inline-block, como no original */
}
.cta--aulas { margin-bottom: 5%; }
.cta--quem  { margin-bottom: 6%; }

/* -------------------------------------------------------------
   10. QUEM É GIOVANNI
   ------------------------------------------------------------- */
.quem {
  padding: 10px;
  margin: 6% 0 4%;
  display: flex;
  gap: var(--espaco);
}
.quem__foto {
  flex: 0 0 40%;
  min-height: 55vh;
  border-radius: 12px;
  background-image: url('../img/giovanni.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.quem__texto {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--espaco);
}
.quem__titulo {
  font-size: 60px;
  font-weight: 600;
  line-height: 72px;
  color: var(--cor-branco);
  text-align: start;
  margin-bottom: 5%;
}
.quem__bio {
  text-align: start;
  font-size: 18px;
  font-weight: 400;
  line-height: 37px;
  color: var(--cor-branco);
}

/* -------------------------------------------------------------
   11. RODAPÉ
   ------------------------------------------------------------- */
.rodape { padding: 0 10px; }
.rodape__interno {
  max-width: 90%;
  margin-inline: auto;
  padding-block: 10px;
  display: flex;
  flex-direction: column;
  gap: var(--espaco);
}

.rodape__linha {
  padding: 10px;
  margin: 2% 0 -2%;
  display: flex;
  gap: var(--espaco);
}
.rodape__coluna {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* 30% / 40% / 30% do espaço restante depois dos gaps */
.rodape__coluna--marca { flex: 3 1 0; min-width: 0; }
.rodape__coluna--lgpd  { flex: 4 1 0; min-width: 0; }
.rodape__coluna--links { flex: 3 1 0; min-width: 0; }

.rodape__marca {
  text-align: center;
  font-weight: 400;
  color: var(--cor-branco);
}
.rodape__lgpd {
  text-align: center;
  font-weight: 300;
  color: var(--cor-lgpd);
}
.rodape__links {
  text-align: center;
  font-weight: 400;
  color: var(--cor-branco);
}
.rodape__links a { text-decoration: none; }
.rodape__links a:hover { text-decoration: underline; }

.rodape__copyright {
  padding: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  color: var(--cor-texto);
}

/* -------------------------------------------------------------
   12. MODAL DE INSCRIÇÃO
   ------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  background-color: rgba(0, 0, 0, .8);
  overflow-y: auto;
}
.modal[hidden] { display: none; }

.modal__caixa {
  position: relative;
  width: 640px;
  max-width: 100%;
  background-color: var(--cor-branco);
  box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
}
/* wrapper só para que os % de padding sejam calculados
   sobre a largura da caixa, e não sobre a da viewport */
.modal__area { padding-inline: 2%; }
.modal__interno {
  max-width: 90%;
  margin-inline: auto;
  padding-block: 7% 5%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* O popup original não tinha botão de fechar visível.
   Mantido aqui por acessibilidade — para removê-lo, basta
   trocar o display por "none". */
.modal__fechar {
  position: absolute;
  top: 10px;
  inset-inline-end: 14px;
  display: block;
  padding: 4px 8px;
  font-size: 26px;
  line-height: 1;
  color: #333;
  opacity: .55;
}
.modal__fechar:hover { opacity: 1; }

.modal__titulo {
  margin-bottom: 0;   /* no original este título não é <p>, não tem a margem de 14.4px */
  padding-bottom: 5%;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 33px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cor-modal-titulo);
}
.modal__titulo strong { font-weight: 700; }

.formulario--modal .formulario__campo {
  min-height: 59px;
  padding: 7px 20px;
  border: 0;
  border-radius: 3px;
  background-color: var(--cor-modal-campo-bg);
  color: var(--cor-modal-campo-tx);
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 500;
}
.formulario--modal .formulario__campo::placeholder { color: var(--cor-modal-campo-tx); opacity: .7; }

.botao--modal {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 500;
  border-radius: 0;
  padding: 20px 0;
}

.formulario--modal .formulario__aviso { color: #B00020; }

.modal__seguro {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 200;
  letter-spacing: 2px;
  color: #000;
}

body.modal-aberto { overflow: hidden; }

/* =============================================================
   TABLET — max-width: 1024px
   ============================================================= */
@media (max-width: 1024px) {

  .hero { background-image: url('../img/hero-tablet.webp'); }
  .hero__titulo { font-size: 45px; line-height: 1.2em; }
  .lista-icones--hero .lista-icones__texto { line-height: 1.4em; }

  .aulas__interno { max-width: 95%; }
  .aulas__titulo  { font-size: 42px; }

  .aula {
    justify-content: center;
    padding: 10% 2%;
  }
  .aula__numero { font-size: 32px; }
  .aula__tema   { font-size: 18px; }
  .aula__tema--03 { font-size: 16px; }
  .lista-icones--aula .lista-icones__texto { line-height: 1.2em; }

  .botao--cta { padding: 2% 7%; }

  .quem__foto   { flex-basis: 50%; }
  .quem__texto  { flex: 1 1 50%; }
  .quem__titulo { font-size: 42px; }
  .quem__bio    { line-height: 1.7em; }

  .rodape__interno { max-width: 95%; }
  .rodape__linha   { padding: 0; }
  .rodape__marca   { max-width: 174.198px; margin-inline: auto; }
}

/* =============================================================
   MOBILE — max-width: 767px
   ============================================================= */
@media (max-width: 767px) {

  /* HERO: imagem encostada embaixo, texto por cima */
  .hero {
    background-image: url('../img/hero-mobile.webp');
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .hero__interno  { padding-block: 12% 110%; }
  .hero__coluna   { width: 100%; }
  .hero__titulo   { font-size: 45px; line-height: 1.4em; text-align: center; }
  .hero__termos   { text-align: center; }

  .lista-icones--hero { text-align: center; }
  .lista-icones--hero .lista-icones__item { justify-content: center; }
  .lista-icones--hero .lista-icones__texto { font-size: 19px; }

  .formulario--hero .formulario__campo { font-size: 21px; }
  .formulario--hero .botao--formulario  { font-size: 17px; }

  /* AULAS */
  .aulas__interno { max-width: 100%; }
  .aulas__titulo  { font-size: 36px; line-height: 1.3em; text-align: center; }
  .aulas__subtitulo { font-size: 18px; }

  .aulas__grade { width: 100%; flex-wrap: wrap; }
  .aula { flex: 1 1 100%; }
  .aula__numero { font-size: 30px; }
  .aula__tema, .aula__tema--03 { font-size: 18px; }
  .lista-icones--aula .lista-icones__texto { font-size: 18px; line-height: 1.5em; }

  .botao--cta { font-size: 15px; padding: 5% 7% 4%; }
  .cta--quem  { width: 100%; }

  /* QUEM É */
  .quem { flex-wrap: wrap; }
  .quem__foto  { flex: 1 1 100%; min-height: 40vh; }
  .quem__texto { flex: 1 1 100%; }
  .quem__titulo { font-size: 36px; line-height: 1.3em; text-align: center; }
  .quem__bio    { text-align: center; }

  /* RODAPÉ */
  .rodape { padding-inline: 0; }
  .rodape__interno { max-width: 100%; padding-block: 10%; }
  .rodape__linha {
    flex-direction: column;
    gap: 0;
    margin: 0;
  }
  /* empilhado: as colunas voltam a ter altura própria */
  .rodape__coluna { flex: none; align-items: center; }
  .rodape__marca, .rodape__lgpd, .rodape__links { font-size: 15px; }
  .rodape__marca  { max-width: none; }
  .rodape__copyright { font-size: 12px; }

  /* MODAL */
  .modal { padding: 12px; }
  .modal__area    { padding-inline: 5%; }
  .modal__interno { max-width: 100%; padding-block: 5%; }
  .modal__titulo  { font-size: 19px; letter-spacing: 0; }
  .modal__seguro  { font-size: 8px; margin-bottom: 0; }
}