/* ============================================================
   Cursos Vaportec — Landing Page
   Mobile-first. Tokens de marca nas variáveis abaixo.
   ============================================================ */

:root {
  --navy: #17162e;        /* fundo escuro principal (hero) */
  --navy-deep: #13112f;   /* rodapé */
  --dark: #1f2129;        /* textos escuros */
  --red: #df3a30;         /* vermelho principal (títulos e botões) */
  --red-dark: #bf271e;    /* vermelho hover */
  --red-solid: #c90909;   /* vermelho do botão do formulário */
  --gray-bg: #dedede;     /* fundo das seções claras */
  --white: #ffffff;

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --container: 1140px;
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

ul { list-style: none; }

a { color: inherit; }

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

/* ---------- Botões (pílula vermelha) ---------- */
.btn {
  display: inline-block;
  padding: 15px 34px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}

.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-dark); transform: translateY(-2px); }

/* ---------- Faixa divisória em degradê ---------- */
.divider {
  height: 12px;
  background: url('../img/bg-pattern.png') center/cover no-repeat;
}

/* ============================================================
   HERO — tudo centralizado sobre fundo navy com brilhos
   ============================================================ */
.hero {
  background: var(--navy) url('../img/bg-hero.png') center/cover no-repeat;
  color: var(--white);
  padding: 40px 0 64px;
  text-align: center;
}

.hero__logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 44px;
}

.hero__logo-vaportec { height: 36px; width: auto; }
.hero__logo-danfoss  { height: 42px; width: auto; }

.hero__icons {
  display: inline-block;
  width: 110px;
  padding: 5px 14px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  margin: 0 auto 20px;
}

.hero__30anos {
  width: 420px;
  margin: 0 auto 20px;
}

.hero h1 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  max-width: 660px;
  margin: 0 auto 32px;
}

.hero__collage {
  width: 800px;
  margin: 48px auto 32px;
}

.hero__proof {
  font-size: 1.25rem;
  max-width: 580px;
  margin: 0 auto 28px;
}

.hero__proof strong { font-weight: 800; }

/* ============================================================
   BENEFÍCIOS — fundo cinza claro, itens centralizados
   ============================================================ */
.features {
  background: var(--gray-bg);
  padding: 72px 0;
}

.features h2 {
  color: var(--dark);
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  margin-bottom: 60px;
}

.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 90px;
  row-gap: 56px;
  max-width: 1040px;
  margin-inline: auto;
}

.features__grid li { text-align: center; }

.features__grid img {
  height: 44px;
  width: auto;
  margin: 0 auto 18px;
  object-fit: contain;
}

.features__grid .features__danfoss { height: 48px; }

.features__grid p {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--dark);
  max-width: 320px;
  margin-inline: auto;
}

.features__grid strong {
  color: var(--red);
  font-weight: 700;
}

/* ============================================================
   CURSOS — fundo preto
   ============================================================ */
.cursos {
  background: #000000;
  color: var(--white);
  padding: 56px 0 64px;
  text-align: center;
}

.cursos h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 800;
  margin-bottom: 44px;
}

.cursos__gif {
  width: 1000px;
  margin: 0 auto 48px;
}

/* ============================================================
   PLATAFORMA — seção única (Biblioteca 3D + App) com um só bg
   ============================================================ */
.plataforma {
  background: var(--navy) url('../img/bg-hero.png') center / 100% 100% no-repeat;
  color: var(--white);
  padding: 80px 0;
}

.plataforma h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.25;
  max-width: 460px;
  margin-bottom: 24px;
}

.plataforma p {
  font-size: 1.15rem;
  max-width: 460px;
  margin-bottom: 36px;
}

/* --- Biblioteca 3D (metade de cima) --- */
.lib3d__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

.lib3d__content h2 { color: var(--red); }

.lib3d__docs { width: 410px; }

.lib3d__media { text-align: center; }
.lib3d__media img { width: 480px; margin: 0 auto 36px; }

/* --- App (metade de baixo) --- */
.app__grid {
  display: grid;
  gap: 48px;
  align-items: center;
  margin-top: 72px;
}

.app__media img { max-width: 340px; margin-inline: auto; }

.app__content h2 span { color: var(--red); }

.app__content p { margin-bottom: 32px; }

/* Badges das lojas de app */
.app__stores {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.app__stores img {
  height: 56px;
  width: auto;
  transition: transform .15s ease;
}

.app__stores a:hover img { transform: translateY(-2px); }

/* ============================================================
   3 PASSOS — fundo cinza claro, título vermelho
   ============================================================ */
.passos {
  background: var(--gray-bg);
  padding: 72px 0;
  text-align: center;
}

.passos h2 {
  color: var(--red);
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 52px;
}

.passos img {
  width: 560px;
  margin: 0 auto 52px;
}

/* ============================================================
   FORMULÁRIO / CADASTRO — fundo cinza claro, título vermelho
   ============================================================ */
.cadastro {
  background: var(--gray-bg);
  padding: 72px 0 80px;
  text-align: center;
}

.cadastro h2 {
  color: var(--red);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 20px;
}

.cadastro__sub {
  font-size: 1.2rem;
  color: var(--dark);
  margin-bottom: 36px;
}

.cadastro__sub strong { font-weight: 800; }

.form {
  max-width: 460px;
  margin-inline: auto;
  text-align: left;
}

/* Honeypot anti-bot: fora da tela, invisível para humanos */
.form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form input,
.form select {
  width: 100%;
  min-width: 0;
  padding: 11px 14px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  background: transparent;
  border: 1.5px solid var(--dark);
  border-radius: 3px;
  outline: none;
  margin-bottom: 20px;
}

.form__row input { margin-bottom: 0; }

.form input::placeholder { color: var(--dark); font-weight: 700; opacity: .95; }

.form input:focus,
.form select:focus { border-color: var(--red); }

.form input.is-invalid { border-color: var(--red-solid); background: #ffdddd; }

/* Telefone com prefixo +55 */
.form__phone {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--dark);
  border-radius: 3px;
  margin-bottom: 20px;
}

.form__phone-prefix {
  padding: 11px 0 11px 14px;
  font-weight: 700;
  white-space: nowrap;
}

.form__phone input {
  border: 0;
  margin-bottom: 0;
  background: transparent;
}

.form__label {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}

.form select {
  height: 42px;
  cursor: pointer;
}

.form__error {
  color: var(--red-solid);
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.form__submit {
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  border: 0;
  border-radius: 4px;
  background: var(--red-solid);
  color: var(--white);
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background-color .2s ease;
}

.form__submit:hover { background: #a30707; }

/* ============================================================
   EMPRESA — foto do prédio, texto à esquerda, mapa à direita
   ============================================================ */
.empresa {
  background: var(--navy) url('../img/bg-empresa.png') center/cover no-repeat;
  color: var(--white);
  padding: 88px 0 64px;
}

.empresa__grid {
  display: grid;
  gap: 48px;
  align-items: center;
  max-width: 1000px;
  margin-inline: auto;
}

.empresa h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 24px;
}

.empresa h3 span { color: var(--red); }

.empresa__content p {
  font-size: 1.1rem;
  max-width: 470px;
}

.empresa__map {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 28px;
  padding: 44px;
  max-width: 370px;
  margin-inline: auto;
}

.empresa__badge {
  width: 270px;
  margin: 56px auto 0;
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.footer {
  background: var(--navy-deep);
  color: var(--white);
  padding: 40px 0 24px;
}

.footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footer__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
}

.footer__whatsapp:hover span { text-decoration: underline; }

.footer__social { display: flex; gap: 14px; }

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-deep);
  transition: opacity .2s ease;
}

.footer__social a:hover { opacity: .8; }

.footer__rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .25);
  margin: 28px 0;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footer__logo-vaportec { width: 210px; height: auto; }
.footer__logo-danfoss  { width: 145px; height: auto; }

.footer__copy {
  text-align: center;
  font-size: .85rem;
  opacity: .8;
  margin-top: 28px;
}

/* ============================================================
   DESKTOP (≥ 768px)
   ============================================================ */
@media (min-width: 768px) {
  .hero__logos {
    flex-direction: row;
    gap: 110px;
  }

  .features__grid { grid-template-columns: repeat(3, 1fr); }

  .lib3d__grid { grid-template-columns: 1.05fr 1fr; }

  .app__grid { grid-template-columns: 1fr 1.2fr; }
  .app__media img { max-width: 380px; }

  .empresa__grid { grid-template-columns: 1.1fr 1fr; }

  .footer__top {
    flex-direction: row;
    justify-content: space-between;
  }

  .footer__brand {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Ajustes só para telas pequenas */
@media (max-width: 767px) {
  .hero__30anos { width: 300px; }
  .hero h1 { font-size: 1.15rem; }
  .hero__proof { font-size: 1.05rem; }
  .plataforma h2, .plataforma p { max-width: none; }
  .lib3d__docs, .lib3d__media img { width: 100%; max-width: 440px; }
  .cursos__gif, .passos img { width: 100%; }
}