/* ==========================================================
   ECOINF ENERGIA SOLAR | CSS ÚNICO
   Índice:
   1. Variáveis (cores, fontes, tamanhos)
   2. Base e botões
   3. Header e menu
   4. Hero
   5. Galeria (Nossos Últimos Projetos)
   6. Avaliações (Google)
   7. Processo (Seu Caminho para a Energia Solar)
   8. O Futuro da Energia (cards de benefícios)
   9. Simulação (formulário)
   10. Sua Casa Com os Gastos Reduzidos
   11. Veja Outros Benefícios (fundo escuro)
   12. FAQ (Ainda Tem Alguma Dúvida)
   13. Fechamento (faixa laranja)
   14. Rodapé
   15. WhatsApp flutuante
   ========================================================== */


/* ==========================================================
   1. VARIÁVEIS
   Para mudar cores, fontes ou tamanhos do site inteiro,
   altere somente este bloco.
   ========================================================== */
:root {
  /* Cores da marca (extraídas da logo) */
  --color-blue: #2F678B;
  --color-green: #599A7E;

  /* Cores do site (iguais ao site atual) */
  --color-dark: #1b2537;
  --color-dark-overlay: rgba(10, 18, 34, .55);
  --color-yellow: #fdc700;   /* links do menu */
  --color-amber: #ffb900;    /* destaques do texto, Saiba Mais */
  --color-orange: #ff9500;   /* "Em Brasília" */
  --color-logo-bg: #f3f3f4;
  --color-white: #ffffff;
  --color-whatsapp: #25d366;

  /* Tipografia */
  --font-main: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-menu: 1.2rem;
  --fs-hero-title: clamp(2.25rem, 6vw, 4.5rem);
  --fs-hero-text: clamp(1rem, 1.6vw, 1.25rem);

  /* Layout */
  --header-height: 88px;
  --radius: 8px;
  --container: 1200px;
}


/* ==========================================================
   2. BASE E BOTÕES
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

.icon { width: 1.1em; height: 1.1em; fill: currentColor; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }

.btn--primary { background: linear-gradient(90deg, #f0b000, #d28900); color: #1b1b1b; }
.btn--cta     { background: linear-gradient(90deg, #ff6b00, #fe9800); color: var(--color-white); }
.btn--outline { border-color: var(--color-amber); color: var(--color-amber); background: transparent; }
.btn--outline:hover { background: rgba(255, 185, 0, .12); }


/* ==========================================================
   3. HEADER E MENU
   Os itens do menu ficam no index.html (lista .menu).
   ========================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-right: 2rem;
  background: var(--color-dark);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.header__logo {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  background: var(--color-logo-bg);
  border-bottom-right-radius: 28px;
}
.header__logo img { height: 56px; width: auto; }

.header__nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.menu {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}
.menu a {
  white-space: nowrap;
  font-size: var(--fs-menu);
  font-weight: 600;
  color: var(--color-yellow);
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.menu a:hover,
.menu a[aria-current="page"] { color: var(--color-white); border-color: var(--color-yellow); }

.header__cta { white-space: nowrap; font-size: 1.2rem; padding: .7rem 1.5rem; }

/* Botão hambúrguer (mobile) */
.header__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: .6rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.header__toggle span {
  width: 26px; height: 3px;
  background: var(--color-yellow);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1024px) {
  .header { padding-right: 1rem; }
  .header__toggle { display: flex; }

  .header__nav {
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem 1.5rem 1.75rem;
    background: var(--color-dark);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .4);
    transform: translateY(-120%);
    visibility: hidden;
    transition: transform .25s ease, visibility .25s;
  }
  .header__nav.is-open { transform: translateY(0); visibility: visible; }

  .menu { flex-direction: column; gap: .25rem; text-align: center; }
  .menu a { display: block; padding: .8rem 0; }
  .header__cta { justify-content: center; }
}


/* ==========================================================
   4. HERO
   Uma só imagem para desktop e celular (images/hero.webp).
   Para trocar a foto, substitua o arquivo ou altere
   --hero-image. O enquadramento no celular é ajustado
   em --hero-position.
   ========================================================== */
.hero {
  --hero-image: url("../images/hero.webp");
  --hero-position: center;

  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-height) + 2rem) 1.5rem 4rem;
  text-align: center;
  background:
    linear-gradient(var(--color-dark-overlay), var(--color-dark-overlay)),
    var(--hero-image) var(--hero-position) / cover no-repeat,
    linear-gradient(160deg, #1b3555, #0e1a2e);
}

/* No celular a tela fica em pé: mostra mais o lado esquerdo da foto */
@media (max-width: 768px) {
  .hero { --hero-position: 22% center; }
}

.hero__content { max-width: 700px; }

.hero__title {
  margin: 0 0 1.5rem;
  font-size: var(--fs-hero-title);
  line-height: 1.25;
  font-weight: 800;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
}
.hero__highlight { display: block; color: var(--color-orange); }

.hero__text {
  margin: 0 auto 2.25rem;
  max-width: 620px;
  font-size: var(--fs-hero-text);
  line-height: 1.65;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.hero__text strong { color: var(--color-amber); font-weight: 600; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.hero__scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  width: 32px; height: 32px;
  margin-left: -16px;
  color: var(--color-amber);
  animation: hero-bounce 1.8s ease-in-out infinite;
}
.hero__scroll svg { width: 100%; height: 100%; }

@keyframes hero-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) { .hero__scroll { animation: none; } }


/* ==========================================================
   5. GALERIA (NOSSOS ÚLTIMOS PROJETOS)
   Fotos ficam em images/galeria/. Para mudar o número de
   colunas ou o espaço entre as fotos, altere --galeria-*.
   ========================================================== */
.galeria {
  --galeria-bg: #fffaf0;
  --galeria-title: #101828;
  --galeria-accent: #ff6900;
  --galeria-text: #4a5565;
  --galeria-cols: 3;
  --galeria-gap: 24px;

  scroll-margin-top: var(--header-height);
  padding: 4rem 1.5rem 5rem;
  background: var(--galeria-bg);
  color: var(--galeria-text);
  text-align: center;
}

.galeria__container { max-width: 1232px; margin: 0 auto; }

.galeria__titulo {
  margin: 0 0 .75rem;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.2;
  font-weight: 800;
  color: var(--galeria-title);
}
.galeria__titulo span { color: var(--galeria-accent); }

.galeria__sub {
  margin: 0 0 3rem;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.galeria__grid {
  display: grid;
  grid-template-columns: repeat(var(--galeria-cols), 1fr);
  gap: var(--galeria-gap);
}

/* Tamanho das fotos: a largura vem das colunas e a altura da
   proporção abaixo (4 / 3). Para fotos mais altas, use 1 / 1 ou 3 / 4. */
.galeria__grid li {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: #e8e2d4;
  box-shadow: 0 4px 14px rgba(16, 24, 40, .12);
}

.galeria__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.galeria__grid li:hover img { transform: scale(1.05); }

/* Botão "Mostrar mais projetos" */
.galeria__mais {
  margin-top: 2.5rem;
  padding: .8rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--galeria-accent);
  color: var(--color-white);
  font: 700 .95rem/1.2 var(--font-main);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 105, 0, .3);
  transition: transform .15s ease, filter .15s ease;
}
.galeria__mais:hover { transform: translateY(-2px); filter: brightness(1.08); }
.galeria__mais:focus-visible { outline: 3px solid var(--color-dark); outline-offset: 3px; }
.galeria [hidden] { display: none; }

@media (max-width: 900px) {
  .galeria { --galeria-cols: 2; --galeria-gap: 16px; }
}
@media (max-width: 520px) {
  .galeria { --galeria-cols: 1; padding: 3rem 1rem 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .galeria__grid img { transition: none; }
}


/* ==========================================================
   6. AVALIAÇÕES (GOOGLE)
   Cores, espaços e número de colunas ficam nas variáveis
   --av-* logo abaixo.
   ========================================================== */
.avaliacoes {
  --av-accent: #ff6900;
  --av-title: #101828;
  --av-text: #364153;
  --av-blue: #006dff;
  --av-star: #fcbf02;
  --av-card-bg: #f6f6f8;
  --av-card-border: #eaeaec;
  --av-gap: 12px;

  scroll-margin-top: var(--header-height);
  padding: 5rem 1.5rem 5.5rem;
  background: linear-gradient(135deg, #fffaed, #fef2d7);
  color: var(--av-text);
  text-align: center;
}

.avaliacoes__container { max-width: 1232px; margin: 0 auto; }

.avaliacoes__titulo {
  margin: 0 0 .75rem;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.2;
  font-weight: 800;
  color: var(--av-title);
}
.avaliacoes__titulo span { color: var(--av-accent); }

.avaliacoes__sub {
  margin: 0 0 3.5rem;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

/* Caixa branca que envolve nota e avaliações */
/* Caixa branca que envolve o widget de avaliações */
.avaliacoes__painel {
  padding: 2rem;
  background: var(--color-white);
  border: 1px solid #ffedd4;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(16, 24, 40, .06);
  text-align: left;
}
/* Reserva a altura do widget para a página não "pular" quando ele carrega */
.avaliacoes__widget { min-height: 420px; }

@media (max-width: 520px) {
  .avaliacoes { padding: 3.5rem 1rem 4rem; }
  .avaliacoes__painel { padding: 1rem; }
}


/* ==========================================================
   7. PROCESSO (SEU CAMINHO PARA A ENERGIA SOLAR)
   Cores de cada etapa: --et-icone-bg, --et-icone, --et-ponto
   (classes etapa--laranja / --azul / --verde).
   ========================================================== */
.processo {
  --pr-bg: #f9fafb;
  --pr-title: #101828;
  --pr-text: #4a5565;
  --pr-accent: #ff6900;
  --pr-line: #e5e7eb;
  --pr-gap: 96px;        /* espaço entre uma etapa e outra */
  --pr-center: 42px;     /* espaço entre o card e a linha do meio */

  scroll-margin-top: var(--header-height);
  padding: 6rem 1.5rem;
  background:
    radial-gradient(ellipse 45% 30% at 100% 0, rgba(255, 105, 0, .05), transparent 70%),
    radial-gradient(ellipse 25% 35% at 0 100%, rgba(253, 199, 0, .08), transparent 75%),
    var(--pr-bg);
  color: var(--pr-text);
  text-align: center;
}
.processo__container { max-width: 1100px; margin: 0 auto; }

.processo__selo {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: #ffedd4;
  color: #9f2d00;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
}
.processo__titulo {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.15;
  font-weight: 800;
  color: var(--pr-title);
}
.processo__titulo span { color: var(--pr-accent); }
.processo__sub {
  max-width: 660px;
  margin: 0 auto 5rem;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.55;
}

/* Linha do tempo */
.processo__etapas {
  display: flex;
  flex-direction: column;
  gap: var(--pr-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right; /* card à esquerda: texto alinhado à direita */
}

.etapa {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  column-gap: var(--pr-center);
  align-items: start;
  --et-icone-bg: #ffedd4;
  --et-icone: #f54900;
  --et-ponto: #ff8904;
}
.etapa--azul  { --et-icone-bg: #dbeafe; --et-icone: #155dfc; --et-ponto: #50a2ff; }
.etapa--verde { --et-icone-bg: #dcfce7; --et-icone: #00a63e; --et-ponto: #05df72; }

/* Fio vertical que liga este número ao próximo */
.etapa::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 24px;
  bottom: calc(var(--pr-gap) * -1);
  width: 2px;
  margin-left: -1px;
  background: var(--pr-line);
}
.etapa:last-child::before { bottom: 0; }

/* Posição: card | número | imagem  (etapas pares invertem) */
.etapa__card   { grid-column: 1; grid-row: 1; }
.etapa__numero { grid-column: 2; grid-row: 1; }
.etapa__imagem { grid-column: 3; grid-row: 1; }
.etapa:nth-child(even) .etapa__card   { grid-column: 3; text-align: left; }
.etapa:nth-child(even) .etapa__imagem { grid-column: 1; }

.etapa__numero {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  border: 4px solid #ffedd4;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--pr-accent);
  font-size: .875rem;
  font-weight: 700;
  transition: border-color .3s;
}
.etapa.is-ativa .etapa__numero { border-color: #ffaa73; }

/* Card de texto */
.etapa__card {
  box-sizing: border-box;
  padding: 2rem;
  background: var(--color-white);
  border: 1px solid #f3f4f6;
  border-radius: 24px;
  box-shadow: 0 6px 24px rgba(16, 24, 40, .06);
}
.etapa__icone {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-left: auto;
  border-radius: 12px;
  background: var(--et-icone-bg);
  color: var(--et-icone);
}
.etapa__icone svg { width: 24px; height: 24px; }
.etapa:nth-child(even) .etapa__icone { margin-left: 0; }

.etapa__titulo {
  margin: 1.5rem 0 .75rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: var(--pr-title);
}
.etapa__texto { margin: 0; font-size: 1rem; line-height: 1.5rem; }

.etapa__lista {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.etapa__lista li {
  display: flex;
  flex-direction: row-reverse; /* ponto depois do texto (card à esquerda) */
  justify-content: flex-start;
  align-items: center;
  gap: .75rem;
  line-height: 1.5rem;
}
.etapa__lista li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--et-ponto);
}
.etapa:nth-child(even) .etapa__lista li { flex-direction: row; }

/* Imagem inclinada */
.etapa__imagem {
  box-sizing: border-box;
  width: 94%;
  aspect-ratio: 1;
  justify-self: center;
  overflow: hidden;
  border-radius: 24px;
  background: var(--color-white);
  box-shadow: 0 18px 40px rgba(16, 24, 40, .14);
  transform: rotate(1.8deg);
}
.etapa:nth-child(even) .etapa__imagem { transform: rotate(-2deg); }
.etapa__imagem img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Chamada final (dentro da seção do processo) */
.cta {
  margin-top: 4.5rem;
  padding: 3rem 2.5rem;
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 72%, rgba(190, 60, 0, .2), transparent 26%),
    radial-gradient(circle at 92% 8%, rgba(255, 200, 30, .22), transparent 30%),
    linear-gradient(135deg, #ff6900, #fe9a00);
  box-shadow: 0 25px 50px rgba(16, 24, 40, .18);
  color: var(--color-white);
  text-align: center;
}
.cta__titulo { margin: 0 0 1rem; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; font-weight: 800; }
.cta__texto {
  max-width: 980px;
  margin: 0 auto 1.75rem;
  color: #fff7ed;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.55;
}
.cta__pagamentos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.cta__pagamentos li { display: flex; padding: 3px 7px; border-radius: 10px; background: var(--color-white); }
.cta__pagamentos img { display: block; height: 36px; width: auto; }

.cta__botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.cta__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 0 2.5rem;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  transition: transform .15s ease, background .15s ease;
}
.cta__botao:hover { transform: translateY(-2px); }
.cta__botao--branco { background: var(--color-white); color: #ca3500; box-shadow: 0 10px 25px rgba(0, 0, 0, .15); }
.cta__botao--vidro { background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .4); color: var(--color-white); }
.cta__botao--vidro:hover { background: rgba(255, 255, 255, .3); }

@media (max-width: 520px) {
  .cta { padding: 2rem 1.25rem; }
  .cta__botao { flex: 1 1 100%; }
}

/* Tablet e celular: uma coluna, linha do tempo à esquerda */
@media (max-width: 900px) {
  .processo { --pr-gap: 56px; padding: 4rem 1rem 5rem; }
  .processo__sub { margin-bottom: 3rem; }
  .processo__etapas { text-align: left; }

  .etapa { grid-template-columns: 48px 1fr; column-gap: 1rem; row-gap: 1.5rem; }
  .etapa::before { left: 24px; }
  .etapa__numero,
  .etapa:nth-child(even) .etapa__numero { grid-column: 1; grid-row: 1; }
  .etapa__card,
  .etapa:nth-child(even) .etapa__card { grid-column: 2; grid-row: 1; text-align: left; }
  .etapa__imagem,
  .etapa:nth-child(even) .etapa__imagem { grid-column: 2; grid-row: 2; width: 92%; }

  .etapa__icone { margin-left: 0; }
  .etapa__lista li { flex-direction: row; }
  .etapa__card { padding: 1.5rem; }
}
@media (max-width: 520px) {
  .etapa { grid-template-columns: 40px 1fr; column-gap: .75rem; }
  .etapa__numero { width: 40px; height: 40px; }
  .etapa::before { left: 20px; top: 20px; }
  .etapa__titulo { font-size: 1.25rem; line-height: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .etapa__numero { transition: none; }
}


/* ==========================================================
   8. O FUTURO DA ENERGIA (CARDS DE BENEFÍCIOS)
   ========================================================== */
.futuro {
  --fu-bg: #f9fafb;
  --fu-title: #1e2939;
  --fu-accent: #ca3500;
  --fu-text: #4a5565;
  --fu-gap: 32px;

  scroll-margin-top: var(--header-height);
  padding: 6rem 1.5rem 7rem;
  background: var(--fu-bg);
  color: var(--fu-text);
  text-align: center;
}
.futuro__container { max-width: 1232px; margin: 0 auto; }

.futuro__titulo {
  margin: 0 0 .75rem;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.15;
  font-weight: 800;
  color: var(--fu-title);
}
.futuro__titulo span { color: var(--fu-accent); }
.futuro__sub { margin: 0 0 4rem; font-size: 1.125rem; }

.futuro__lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fu-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.beneficio {
  padding: 2rem;
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 6px 22px rgba(16, 24, 40, .08);
}
.beneficio__icone {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ff8e00, #ff6900);
  color: var(--color-white);
}
.beneficio__icone svg { width: 32px; height: 32px; }
.beneficio__titulo {
  margin: 1.5rem 0 1rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: var(--fu-title);
  transition: color .2s ease;
}
.beneficio:hover .beneficio__titulo { color: var(--fu-accent); }
.beneficio__texto { margin: 0; font-size: 1rem; line-height: 1.625rem; }

@media (max-width: 1100px) {
  .futuro__lista { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .futuro { padding: 4rem 1rem 5rem; }
  .futuro__sub { margin-bottom: 2.5rem; }
  .futuro__lista { grid-template-columns: 1fr; gap: 1.25rem; }
}


/* ==========================================================
   9. SIMULAÇÃO (FORMULÁRIO EM 3 PASSOS)
   ========================================================== */
.simulacao {
  --si-bg: #f9fafb;
  --si-title: #1e2939;
  --si-accent: #ca3500;
  --si-orange: #ff6900;
  --si-border: #d1d5dc;
  --si-muted: #6a7282;

  scroll-margin-top: var(--header-height);
  padding: 4rem 1.5rem 6rem;
  background: var(--si-bg);
  color: var(--si-title);
}
.simulacao__container { max-width: 603px; margin: 0 auto; }

.simulacao__titulo {
  width: max-content;
  max-width: 100vw;
  margin: 0 0 3.5rem 50%;
  transform: translateX(-50%);
  font-size: clamp(1.75rem, 4.2vw, 2.8rem);
  line-height: 1;
  font-weight: 800;
  text-align: center;
  color: var(--si-title);
}
.simulacao__titulo span { color: var(--si-accent); }

.simulacao__card {
  padding: 2.25rem;
  background: var(--color-white);
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(16, 24, 40, .1);
}

.passo { margin: 0 0 2.25rem; padding: 0; border: 0; min-width: 0; }
.passo__titulo {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.35rem;
  padding: 0;
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 700;
  color: var(--si-title);
}
.passo__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff8904, #ff6900);
  color: var(--color-white);
  font-size: .8rem;
  font-weight: 700;
}

/* Opções do telhado */
.passo__opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.opcao {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  min-height: 69px;
  padding: .5rem;
  border: 1px solid var(--si-border);
  border-radius: 12px;
  background: var(--color-white);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.opcao:hover { border-color: #ffb86a; }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao__nome { font-size: .8125rem; font-weight: 500; line-height: 1.2; color: #364153; }
.opcao__sub  { font-size: .6875rem; line-height: 1.2; color: var(--si-muted); }
.opcao:has(input:checked) { border-color: var(--si-orange); background: #fff7ed; box-shadow: 0 0 0 1px var(--si-orange); }
.opcao:has(input:focus-visible) { outline: 2px solid var(--si-orange); outline-offset: 2px; }

/* Campos */
.campo {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 64px;
  padding: 0 1.1rem;
  border: 1px solid var(--si-border);
  border-radius: 12px;
  background: #fafbfc;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo:focus-within { border-color: var(--si-orange); box-shadow: 0 0 0 3px rgba(255, 105, 0, .15); }
.campo__icone { flex: none; width: 16px; height: 16px; color: #ff8904; }
.campo__icone--fim { margin-left: auto; }
.campo__prefixo { flex: none; font-size: .95rem; font-weight: 700; color: #ff8904; }
.campo__input {
  flex: 1;
  min-width: 0;
  padding: 1rem 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: 400 1rem/1.5 var(--font-main);
  color: var(--si-title);
}
.campo__input::placeholder { color: var(--si-muted); opacity: 1; }

.passo__dica {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .75rem 0 0;
  font-size: .75rem;
  font-style: italic;
  color: var(--si-muted);
}
.passo__dica svg { flex: none; width: 12px; height: 12px; color: #fdc700; }

/* Botão (fica claro até o formulário estar completo) */
.simulacao__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  min-height: 68px;
  margin-top: 2.25rem;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #ff8904, #f54900);
  color: var(--color-white);
  font: 700 1.125rem/1.2 var(--font-main);
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(245, 73, 0, .25);
  transition: transform .15s ease, opacity .2s ease;
}
.simulacao__botao svg { width: 16px; height: 16px; }
.simulacao__botao:hover:not(:disabled) { transform: translateY(-2px); }
.simulacao__botao:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

@media (max-width: 520px) {
  .simulacao { padding: 3rem 1rem 4rem; }
  .simulacao__titulo { margin-bottom: 2.5rem; font-size: 1.6rem; }
  .simulacao__card { padding: 1.5rem 1.1rem; }
  .passo__titulo { font-size: 1rem; align-items: flex-start; }
  .passo__opcoes { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}


/* ==========================================================
   10. SUA CASA COM OS GASTOS REDUZIDOS
   ========================================================== */
.reducao {
  --re-title: #1e2939;
  --re-accent: #ff6900;
  --re-text: #4a5565;
  --re-item: #364153;

  scroll-margin-top: var(--header-height);
  padding: 5.5rem 1.5rem;
  overflow-x: clip;
  background: var(--color-white);
}
.reducao__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 57px;
  align-items: center;
  max-width: 1112px;
  margin: 0 auto;
}

/* Foto com os dois círculos decorativos atrás */
.reducao__foto { position: relative; }
.reducao__foto::before,
.reducao__foto::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.reducao__foto::before { top: -29px; left: -29px; width: 112px; height: 112px; background: #fff4e3; }
.reducao__foto::after  { right: -29px; bottom: -29px; width: 88px; height: 88px; background: #fef3d0; }
.reducao__foto img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}
.reducao__selo {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  padding: .55rem .9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff6b00, #fe9900);
  color: var(--color-white);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(255, 105, 0, .3);
}

/* Texto */
.reducao__titulo {
  margin: 0 0 1.25rem;
  font-size: clamp(1.85rem, 3.8vw, 2.65rem);
  line-height: 1.2;
  font-weight: 800;
  color: var(--re-title);
}
.reducao__titulo span { color: var(--re-accent); }
.reducao__intro { margin: 0 0 2rem; font-size: 1rem; line-height: 1.625; color: var(--re-text); }

.reducao__lista { display: flex; flex-direction: column; gap: .95rem; margin: 0; padding: 0; list-style: none; }
.reducao__lista li {
  position: relative;
  padding-left: 2.1rem;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--re-item);
}
.reducao__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat,
    linear-gradient(135deg, #ff6900, #ff8e00);
}

.reducao__botao,
.beneficios__botao,
.faq__botao {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.85rem;
  padding: 0 1.9rem;
  min-height: 50px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ff6a00, #fd9800);
  color: var(--color-white);
  font-size: .875rem;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
  transition: transform .15s ease;
}
.reducao__botao:hover,
.beneficios__botao:hover,
.faq__botao:hover { transform: translateY(-2px); }
.reducao__botao svg,
.beneficios__botao svg,
.faq__botao svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .reducao { padding: 4rem 1.5rem; }
  .reducao__container { grid-template-columns: 1fr; gap: 3rem; }
  .reducao__foto { max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 520px) {
  .reducao { padding: 3.5rem 1.25rem; }
  .reducao__foto::before { left: -14px; top: -14px; width: 80px; height: 80px; }
  .reducao__foto::after  { right: -14px; bottom: -14px; width: 64px; height: 64px; }
}


/* ==========================================================
   11. VEJA OUTROS BENEFÍCIOS (FUNDO ESCURO)
   ========================================================== */
.beneficios {
  --be-accent: #ff9800;
  --be-text: #d1d5dc;
  --be-border: #ff6900;

  position: relative;
  scroll-margin-top: var(--header-height);
  padding: 7.5rem 1.5rem;
  overflow: hidden;
  background: linear-gradient(135deg, #1c283c, #0f172b 50%, #1c283c);
  color: var(--be-text);
}
/* Dois brilhos laranja desfocados no fundo */
.beneficios::before,
.beneficios::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(22px);
  pointer-events: none;
}
.beneficios::before { top: 13%; left: 77%; width: 130px; height: 130px; margin: -65px 0 0 -65px; background: rgba(255, 150, 0, .16); }
.beneficios::after  { top: 87%; left: 52%; width: 100px; height: 100px; margin: -50px 0 0 -50px; background: rgba(255, 170, 0, .3); }

.beneficios__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 81px;
  align-items: center;
  max-width: 1105px;
  margin: 0 auto;
}
.beneficios__titulo {
  margin: 0 0 1.5rem;
  font-size: clamp(1.85rem, 3.8vw, 2.65rem);
  line-height: 1.2;
  font-weight: 800;
  color: var(--color-white);
}
.beneficios__titulo span { color: var(--be-accent); }
.beneficios__texto p { margin: 0 0 1.3rem; font-size: 1rem; line-height: 1.65; }
.beneficios__botao { margin-top: .7rem; }

.beneficios__faixas { display: flex; flex-direction: column; gap: 48px; margin: 0; padding: 0; list-style: none; }
.beneficios__faixas li {
  overflow: hidden;
  border: 3px solid var(--be-border);
  border-radius: 10px;
  background: var(--color-white);
}
.beneficios__faixas img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .beneficios { padding: 4.5rem 1.5rem; }
  .beneficios__container { grid-template-columns: 1fr; gap: 3rem; }
  .beneficios__faixas { gap: 24px; max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 520px) {
  .beneficios { padding: 3.5rem 1.25rem; }
}


/* ==========================================================
   12. FAQ (AINDA TEM ALGUMA DÚVIDA)
   ========================================================== */
.faq {
  --fa-bg: #fffaeb;
  --fa-title: #1e2939;
  --fa-accent: #ff6900;
  --fa-text: #4a5565;

  scroll-margin-top: var(--header-height);
  padding: 5.5rem 1.5rem 5rem;
  background: var(--fa-bg);
  color: var(--fa-text);
  text-align: center;
}
.faq__container { max-width: 761px; margin: 0 auto; }

.faq__titulo {
  margin: 0 0 3.5rem;
  font-size: clamp(1.75rem, 3.8vw, 2.65rem);
  line-height: 1.2;
  font-weight: 800;
  color: var(--fa-title);
}
.faq__titulo span { color: #ff8c00; }

.faq__lista { display: flex; flex-direction: column; gap: 15px; margin-bottom: 3.5rem; text-align: left; }

.faq__item {
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(120, 90, 20, .1);
}
.faq__pergunta {
  position: relative;
  display: block;
  padding: 22px 56px 22px 22px;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--fa-title);
  cursor: pointer;
  list-style: none;
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta:focus-visible { outline: 2px solid var(--fa-accent); outline-offset: -2px; border-radius: 16px; }

/* Ícone "+" que vira "×" quando abre */
.faq__pergunta::before,
.faq__pergunta::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  width: 15px;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--fa-accent);
  transition: transform .2s ease;
}
.faq__pergunta::after { transform: rotate(90deg); }
.faq__item[open] .faq__pergunta::before { transform: rotate(45deg); }
.faq__item[open] .faq__pergunta::after  { transform: rotate(-45deg); }

.faq__resposta { padding: 16px 22px 22px; border-top: 1px solid #ffedd4; }
.faq__resposta p { margin: 0; font-size: .84rem; line-height: 1.75; }

.faq__chamada { margin: 0 0 1.25rem; font-size: 1rem; }
.faq__botao { margin-top: 0; padding: 0 2rem; }
.faq__botao svg { fill: currentColor; }

@media (max-width: 520px) {
  .faq { padding: 3.5rem 1rem 4rem; }
  .faq__titulo { margin-bottom: 2.25rem; }
  .faq__titulo br { display: none; }
  .faq__pergunta { padding: 18px 48px 18px 18px; font-size: 1rem; }
  .faq__pergunta::before, .faq__pergunta::after { right: 18px; }
  .faq__resposta { padding: 14px 18px 18px; }
  .faq__botao { width: 100%; justify-content: center; padding: 0 1rem; font-size: .8rem; }
}


/* ==========================================================
   13. FECHAMENTO (FAIXA LARANJA)
   ========================================================== */
.fechamento {
  padding: 5.5rem 1.5rem;
  background: linear-gradient(90deg, #ff8904, #ff6900 50%, #fe9a00);
  color: var(--color-white);
  text-align: center;
}
.fechamento__titulo {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.2;
  font-weight: 800;
}
.fechamento__sub { margin: 0 0 2rem; font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 500; }
.fechamento__sub strong { font-weight: 800; }
.fechamento__botao {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 54px;
  padding: 0 2rem;
  border-radius: 8px;
  background: var(--color-white);
  color: #ca3500;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
  transition: transform .15s ease;
}
.fechamento__botao:hover { transform: translateY(-2px); }
.fechamento__botao svg { width: 20px; height: 20px; }


/* ==========================================================
   14. RODAPÉ
   ========================================================== */
.rodape {
  --ro-bg: #101828;
  --ro-accent: #ff8904;
  --ro-text: #d1d5dc;
  --ro-muted: #99a1af;

  background: var(--ro-bg);
  color: var(--ro-text);
  font-size: .875rem;
  line-height: 1.65;
}
.rodape a { color: inherit; }
.rodape__container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 58px;
  max-width: 1109px;
  margin: 0 auto;
  padding: 3.6rem 1.5rem 3.75rem;
  box-sizing: content-box;
}

.rodape__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  border-radius: 16px 0 16px 0;
  background: var(--color-logo-bg);
}
.rodape__logo img { display: block; width: 148px; height: auto; }
.rodape__marca p { margin: 1.3rem 0 0; }
.rodape__marca hr { margin: 1.3rem 0; border: 0; border-top: 1px solid var(--color-white); }
.rodape__marca .rodape__legal { margin: 0; }
.rodape__destaque { color: var(--ro-accent); }
.rodape__legal a { color: var(--ro-accent); text-decoration: underline; }

.rodape__titulo { margin: 0 0 1.3rem; font-size: 1.125rem; line-height: 1.55; font-weight: 700; color: var(--ro-accent); }
.rodape__contato ul { display: flex; flex-direction: column; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.rodape__contato li { display: flex; align-items: flex-start; gap: .75rem; line-height: 1.55; }
.rodape__contato svg { fill: currentColor; flex: none; width: 16px; height: 16px; margin-top: .2rem; color: var(--ro-accent); }
.rodape__contato address { font-style: normal; }
.rodape__contato a:hover { color: var(--color-white); }

.rodape__mapa { position: relative; aspect-ratio: 331 / 135; overflow: hidden; border-radius: 8px; background: #e5e7eb; }
.rodape__mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

.rodape__base { border-top: 1px solid #1e2939; }
.rodape__base-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
  max-width: 1109px;
  margin: 0 auto;
  padding: 1.15rem 1.5rem;
  box-sizing: content-box;
  font-size: .75rem;
  color: var(--ro-muted);
}
.rodape__base p { margin: 0; }
.rodape__base strong { color: var(--ro-accent); font-weight: 700; }

@media (max-width: 900px) {
  .rodape__container { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 3rem; padding-bottom: 3rem; }
  .rodape__mapa { max-width: 480px; }
}
@media (max-width: 520px) {
  .fechamento { padding: 4rem 1.25rem; }
  .rodape__base-container { flex-direction: column; text-align: center; }
}


/* ==========================================================
   15. WHATSAPP FLUTUANTE
   ========================================================== */
.whatsapp-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-whatsapp);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  transition: transform .15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 36px; height: 36px; }