/* ============================================================
   Neway Idiomas — Estilo principal
   Fonte: Montserrat | Responsivo mobile-first
   ============================================================ */

:root {
  --azul-escuro: #0f2c4c;      /* fundo sólido dos cursos */
  --azul-escuro-2: #1b3f63;
  --vermelho: #e0332d;         /* cor de destaque (botões, ícones) */
  --azul-claro: #eaf1f8;
  --texto: #22303f;
  --texto-suave: #5b6b7b;
  --branco: #ffffff;
  --verde-whatsapp: #25d366;
  --verde-whatsapp-escuro: #1db954;
  --borda: #dbe4ec;
  --sombra: 0 12px 30px rgba(15, 44, 76, 0.10);
  --raio-card: 22px;
  --raio-input: 12px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", Arial, sans-serif;
  color: var(--texto);
  background: var(--branco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   PARTE 1 — HERO (foto de fundo + formulário)
   O wallpaper sai do início do site até o fim da caixa do curso
   (envolve hero + seção de cursos no "fundo-entrada")
   ============================================================ */
.fundo-entrada {
  /* JPG primeiro (fallback para qualquer navegador) e depois image-set,
     que já entrega o WebP (~70% menor) para quem suporta. */
  background-color: var(--azul-escuro); /* fallback */
  background-image: url("../imagens/planowallpaper.jpg");
  background-image: image-set(
    url("../imagens/planowallpaper.webp") type("image/webp"),
    url("../imagens/planowallpaper-mobile.webp") type("image/webp") 640w,
    url("../imagens/planowallpaper.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-overlay {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: linear-gradient(180deg, rgba(15, 44, 76, 0.55) 0%, rgba(15, 44, 76, 0.85) 100%);
}

.hero-content {
  max-width: 480px;
  width: 100%;
  text-align: center;
  color: #fff;
}

.hero-titulo {
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.hero-subtitulo {
  margin-top: 10px;
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 500;
  opacity: 0.95;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* --- Box do formulário --- */
.form-card {
  margin: 36px auto 0;
  width: 100%;
  background: var(--branco);
  color: var(--texto);
  text-align: left;
  border-radius: var(--raio-card);
  padding: 26px 22px 24px;
  box-shadow: var(--sombra);
}

.form-card h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--azul-escuro);
}

.form-txt {
  margin: 6px 0 18px;
  font-size: 0.9rem;
  color: var(--texto-suave);
}

.campo {
  margin-bottom: 16px;
}

.campo label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 6px;
}

.campo input,
.campo select {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-input);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--texto);
  background: #fbfcfe;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.campo input:focus,
.campo select:focus {
  border-color: var(--azul-escuro-2);
  box-shadow: 0 0 0 4px rgba(27, 63, 99, 0.12);
  background: #fff;
}

.campo select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath fill='%235b6b7b' d='M7 8L0 1l1.4-1.4L7 5.2 12.6-.4 14 1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.btn-enviar {
  width: 100%;
  margin-top: 6px;
  padding: 15px;
  border: none;
  border-radius: 999px;
  background: var(--vermelho);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.btn-enviar:hover {
  background: #c42722;
}

.btn-enviar:active {
  transform: scale(0.98);
}

.btn-enviar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-status {
  margin-top: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  min-height: 1.2em;
}

.form-status.sucesso {
  color: #178a45;
}

.form-status.erro {
  color: #c0392b;
}

/* Honeypot — invisível para humanos, visível para robôs */
.hp-campo {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* ============================================================
   Seções comuns
   ============================================================ */
.section {
  padding: 64px 0;
}

.section-titulo {
  font-size: clamp(1.35rem, 5vw, 1.9rem);
  font-weight: 800;
  text-align: center;
  color: var(--azul-escuro);
  margin-bottom: 12px;
  padding: 0 6px;
  text-wrap: balance;
  overflow-wrap: normal;
}

.section-titulo::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: var(--vermelho);
}

/* ============================================================
   PARTE 2 — CURSOS (fundo sólido)
   ============================================================ */
.section-cursos {
  /* translúcido para o wallpaper continuar aparecendo ao fundo */
  background: rgba(15, 44, 76, 0.82);
}

.section-cursos .section-titulo {
  color: #fff;
}

.curso-card {
  margin-top: 28px;
  background: var(--branco);
  border-radius: var(--raio-card);
  padding: 30px 24px;
  box-shadow: var(--sombra);
  text-align: center;
}

.curso-nome {
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  font-weight: 800;
  color: var(--azul-escuro);
}

.curso-descricao {
  margin: 14px 0 24px;
  color: var(--texto-suave);
  font-size: 0.98rem;
}

/* --- Botão WhatsApp --- */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--verde-whatsapp);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: background 0.2s ease, transform 0.15s ease;
}

.btn-whatsapp:hover {
  background: var(--verde-whatsapp-escuro);
  transform: translateY(-2px);
}

.btn-whatsapp .ico {
  flex-shrink: 0;
}

/* ============================================================
   PARTE 3 — BENEFÍCIOS
   ============================================================ */
.section-beneficios {
  background: var(--branco);
}

.beneficios-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.beneficio-card {
  background: var(--azul-claro);
  border-radius: var(--raio-card);
  padding: 26px 22px;
  text-align: center;
  box-shadow: var(--sombra);
}

.beneficio-icone {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--vermelho);
  color: #fff;
}

.beneficio-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--azul-escuro);
  margin-bottom: 6px;
}

.beneficio-card p {
  font-size: 0.9rem;
  color: var(--texto-suave);
}

/* ============================================================
   PARTE 4 — HISTÓRIA
   ============================================================ */
.section-historia {
  background: var(--branco);
  border-top: 2px solid var(--azul-claro);
  text-align: center;
}

.historia-texto {
  max-width: 680px;
  margin: 20px auto 32px;
  font-size: 0.98rem;
  color: var(--texto-suave);
}

/* ============================================================
   PARTE 5 — PERGUNTAS FREQUENTES (FAQ) — lista compacta
   Accordion nativo (<details>), sem JavaScript.
   ============================================================ */
.section-faq {
  background: var(--branco);
  border-top: 2px solid var(--azul-claro);
}

.faq-lista {
  max-width: 760px;
  margin: 16px auto 0;
  border-top: 1px solid var(--borda);
}

.faq-item {
  border-bottom: 1px solid var(--borda);
}

.faq-pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--azul-escuro);
  transition: color 0.2s ease;
}

.faq-pergunta::-webkit-details-marker {
  display: none;
}

.faq-pergunta:hover {
  color: var(--vermelho);
}

.faq-icone {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-right: 2px solid var(--vermelho);
  border-bottom: 2px solid var(--vermelho);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.faq-item[open] .faq-icone {
  transform: rotate(-135deg);
}

.faq-resposta {
  padding: 0 2px 14px;
}

.faq-resposta p {
  max-width: 680px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--texto-suave);
}

/* ============================================================
   PARTE 6 — LOCALIZAÇÃO (Google Maps)
   ============================================================ */
.section-localizacao {
  background: var(--branco);
}

.mapa-box {
  position: relative;
  margin-top: 28px;
  border-radius: var(--raio-card);
  overflow: hidden;
  box-shadow: var(--sombra);
}

/* Mapa padrão do Google (iframe) */
.mapa-iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* Cartão de endereço sobre o mapa — temática Neway */
.mapa-card {
  position: absolute;
  left: 16px;
  bottom: 16px;
  max-width: 250px;
  padding: 14px 16px;
  background: var(--branco);
  border-radius: 16px;
  border-left: 4px solid var(--vermelho);
  box-shadow: 0 14px 34px rgba(15, 44, 76, 0.28);
}

.mapa-card-titulo {
  font-weight: 800;
  color: var(--azul-escuro);
}

.mapa-card-end {
  margin: 2px 0 10px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--texto-suave);
}

.btn-mapa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--azul-escuro);
  color: var(--branco);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-mapa:hover {
  background: var(--azul-escuro-2);
  transform: translateY(-1px);
}

.btn-mapa svg {
  flex-shrink: 0;
}

/* No celular o mapa fica mais baixo e o cartão vai para baixo dele */
@media (max-width: 560px) {
  .mapa-iframe {
    height: 320px;
  }

  .mapa-card {
    position: static;
    max-width: none;
    margin: 12px;
    border: 1px solid var(--borda);
    border-left: 4px solid var(--vermelho);
    box-shadow: none;
  }
}

/* ============================================================
   PARTE 7 — RODAPÉ
   ============================================================ */
.rodape {
  background: #0b2138;
  color: #cdd9e4;
  padding: 52px 0 20px;
}

.rodape-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  text-align: center;
}

.rodape-nome {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}

.rodape-coluna h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.rodape-local,
.rodape-contato {
  font-size: 0.92rem;
}

.redes-sociais {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.rede-link {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff; /* fundo neutro */
  color: #000;      /* ícone preto */
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.rede-link:hover {
  background: #e8e8e8;
  transform: translateY(-3px);
}

/* Ícones das redes sociais sem cores de marca — somente preto/branco */
.rede-instagram,
.rede-whatsapp,
.rede-facebook {
  background: #fff;
  color: #000;
}

.rodape-dev {
  margin-top: 44px;
  text-align: center;
  font-size: 0.78rem;
  color: #6f8498;
}

/* ============================================================
   Animações sutis ao rolar (ativadas apenas com JS)
   ============================================================ */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Botão flutuante de ajuda (canto inferior direito)
   ============================================================ */
.btn-ajuda {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--verde-whatsapp);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  z-index: 1000;
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn-ajuda:hover {
  background: var(--verde-whatsapp-escuro);
  transform: translateY(-3px);
}

.btn-ajuda .ico-fechar {
  display: none;
}

.btn-ajuda.aberto .ico-ajuda {
  display: none;
}

.btn-ajuda.aberto .ico-fechar {
  display: block;
}

.caixa-ajuda {
  position: fixed;
  right: 20px;
  bottom: 90px;
  width: 290px;
  max-width: calc(100vw - 40px);
  background: #fff;
  border-radius: var(--raio-card);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
  padding: 20px 18px;
  z-index: 1000;
  text-align: center;
  border: 1px solid var(--borda);
}

.ajuda-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--azul-escuro);
  margin-bottom: 16px;
}

.ajuda-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--verde-whatsapp);
  color: #fff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 13px 18px;
  transition: background 0.2s ease, transform 0.15s ease;
}

.ajuda-whatsapp:hover {
  background: var(--verde-whatsapp-escuro);
  transform: translateY(-2px);
}

.ajuda-whatsapp svg {
  flex-shrink: 0;
}

/* ============================================================
   Responsivo — tablets e telas maiores
   ============================================================ */
@media (min-width: 640px) {
  .beneficios-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rodape-grid {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
  }

  .redes-sociais {
    justify-content: flex-start;
  }
}

/* ============================================================
   VELOCIDADE — o navegador não desenha o que ainda não apareceu
   (o Google mede a primeira pintura: isso deixa a página mais leve)
   ============================================================ */
@supports (content-visibility: auto) {
    .section-beneficios,
    .section-historia {
      content-visibility: auto;
      contain-intrinsic-size: auto 640px;
    }
}