/* ============================================================
   SUNPERE — ESTILO DO SITE (vale para as 4 páginas)
   ------------------------------------------------------------
   As CORES estão logo abaixo, em ":root".
   Trocando o código de cor ali, muda no site inteiro.
   ============================================================ */

:root {
  --amarelo: #ffc416;         /* amarelo principal (botões) */
  --amarelo-hover: #e6ac00;   /* amarelo ao passar o mouse */
  --amarelo-menu: #fdc700;    /* amarelo do menu e do form */
  --amarelo-menu-hover: #f0b100;
  --preto: #000000;
  --preto-caixa: #1c1c1c;     /* fundo dos botões escuros */
  --texto: #171717;
  --branco: #ffffff;
  --azul-hero: #0F599A;       /* fundo atrás da foto do topo */
  --azul-manutencao: #1a5895; /* fundo da seção Manutenção no celular */
  --cinza-texto: #4a5565;
  --cinza-claro: #6a7282;
  --cinza-borda: #00000038;

  --fonte: 'Manrope', sans-serif;
  --fonte-menu: 'Poppins', sans-serif;
}

/* ===== Base (não precisa mexer) ===== */
*, *::before, *::after { box-sizing: border-box; border: 0 solid; }
html { line-height: 1.5; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--branco);
  color: var(--texto);
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p { margin: 0; font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: inherit; }
button { font: inherit; color: inherit; background: transparent; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; background: transparent; }
img, svg { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }
hr { border-top-width: 1px; margin: 0; }

.font-extralight { font-weight: 200; }
.font-light      { font-weight: 300; }
.font-normal     { font-weight: 400; }
.font-medium     { font-weight: 500; }
.font-semibold   { font-weight: 600; }

/* Largura central padrão (equivale ao "container") */
.container { width: 100%; margin-left: auto; margin-right: auto; }
@media (min-width: 640px)  { .container { max-width: 40rem; } }
@media (min-width: 768px)  { .container { max-width: 48rem; } }
@media (min-width: 1024px) { .container { max-width: 64rem; } }
@media (min-width: 1280px) { .container { max-width: 80rem; } }
@media (min-width: 1536px) { .container { max-width: 96rem; } }

/* ===== Botões reaproveitados ===== */
.btn {
  display: flex; align-items: center; gap: 0.5rem;
  border-radius: 9999px; cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.4,0,0.2,1), color 150ms cubic-bezier(0.4,0,0.2,1);
}
.btn--amarelo { background: var(--amarelo); color: var(--preto); padding: 0.75rem 1.5rem; font-size: 0.875rem; line-height: 1.4286; font-weight: 600; }
.btn--amarelo:hover { background: var(--amarelo-hover); }
.btn--escuro { background: var(--preto-caixa); color: var(--amarelo); padding: 0.75rem 1.5rem; font-size: 0.875rem; line-height: 1.4286; font-weight: 600; }
.btn--escuro:hover { background: var(--amarelo); color: var(--preto); }
.btn--largo { padding-left: 2rem; padding-right: 2rem; }
.w-fit { width: fit-content; }

/* Círculo amarelo com ícone (aparece em várias seções) */
.circulo {
  background: var(--amarelo); border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.circulo--16 { width: 4rem; height: 4rem; }
.circulo--12 { width: 3rem; height: 3rem; }
.circulo--20 { width: 5rem; height: 5rem; cursor: pointer; transition: background-color 150ms; }
.circulo--20:hover { background: var(--amarelo-hover); }
.circulo--25 { width: 6.25rem; height: 6.25rem; cursor: pointer; transition: background-color 150ms; }
.circulo--25:hover { background: var(--amarelo-hover); }
.icone-8 { width: 2rem; height: 2rem; }
.icone-10 { width: 2.5rem; height: 2.5rem; }
.icone-6 { width: 1.5rem; height: 1.5rem; }
/* Tamanhos dos ícones (equivalem ao size={...} do site original) */
.ico      { width: 1em; height: 1em; flex-shrink: 0; }
.ico-16   { width: 16px; height: 16px; flex-shrink: 0; }
.ico-20   { width: 20px; height: 20px; flex-shrink: 0; }
.ico-22   { width: 22px; height: 22px; flex-shrink: 0; }
.ico-36   { width: 36px; height: 36px; flex-shrink: 0; }
.ico-8    { width: 2rem; height: 2rem; flex-shrink: 0; }
.ico-10   { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
.ico-6    { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.gira45 { transform: rotate(45deg); }


/* ============================================================
   SEÇÃO: MENU DO TOPO (aparece nas 4 páginas)
   ============================================================ */
.menu-area {
  width: 100%; margin: 2.5rem auto 0;
  padding-left: 2.5rem; padding-right: 2.5rem;
  position: relative;
  font-family: var(--fonte-menu); font-weight: 400;
}
@media (min-width: 640px)  { .menu-area { max-width: 40rem; } }
@media (min-width: 768px)  { .menu-area { max-width: 48rem; } }
@media (min-width: 1024px) { .menu-area { max-width: 64rem; } }
@media (min-width: 1280px) { .menu-area { max-width: 80rem; } }
@media (min-width: 1536px) { .menu-area { max-width: 96rem; } }

.menu-barra {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 2rem; border-radius: 9999px;
  background: rgb(255 255 255 / 0.03);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgb(255 255 255 / 0.2);
  position: relative; z-index: 50;
}
.menu-logo { flex-shrink: 0; }
.menu-logo img { width: 120px; height: auto; cursor: pointer; }

.menu-desktop { display: none; align-items: center; gap: 2rem; }
.menu-desktop ul { display: flex; align-items: center; }
.menu-desktop li + li { margin-left: 2rem; }
.menu-desktop a { color: var(--branco); font-weight: 300; transition: color 150ms; }
.menu-desktop a:hover { color: var(--amarelo-menu); }
.menu-desktop a.ativo { color: var(--amarelo-menu); font-weight: 500; }

.menu-btn-orcamento {
  background: var(--amarelo-menu); color: var(--preto); font-weight: 500;
  padding: 0.5rem 1.5rem; border-radius: 9999px; cursor: pointer;
  transition: background-color 150ms;
}
.menu-btn-orcamento:hover { background: var(--amarelo-menu-hover); }

.menu-hamburguer { color: var(--branco); font-size: 1.5rem; line-height: 1.3333; }
.menu-hamburguer svg { width: 1em; height: 1em; }
.menu-hamburguer .icone-fechar { display: none; }
.menu-hamburguer.aberto .icone-abrir { display: none; }
.menu-hamburguer.aberto .icone-fechar { display: block; }

.menu-mobile {
  position: absolute; top: 100%; margin-top: 0.5rem; left: 0; width: 100%; z-index: 40;
  opacity: 0; visibility: hidden; transform: translateY(-1rem);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-mobile.aberto { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-mobile__caixa {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  background: rgb(0 0 0 / 0.8);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 1rem; padding: 1.5rem;
}
.menu-mobile__caixa ul { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.menu-mobile__caixa a { font-size: 1.125rem; line-height: 1.5556; color: var(--branco); font-weight: 300; transition: color 150ms; }
.menu-mobile__caixa a:hover { color: var(--amarelo-menu); }
.menu-mobile__caixa a.ativo { color: var(--amarelo-menu); font-weight: 500; }
.menu-mobile__caixa hr { width: 100%; border-color: rgb(255 255 255 / 0.2); margin: 0.5rem 0; }
.menu-mobile__caixa .menu-btn-orcamento { width: 100%; }
.menu-mobile__link-botao { width: 100%; }

@media (min-width: 768px) {
  .menu-desktop { display: flex; }
  .menu-hamburguer, .menu-mobile { display: none; }
}


/* ============================================================
   SEÇÃO: TOPO DA PÁGINA (hero) — usado nas 3 páginas com foto
   ============================================================ */
.hero {
  position: relative; min-height: 62rem;
  background-color: var(--azul-hero);
  background-image: url('imagens/background-hero.webp');
  background-size: cover; background-position: center;
}
.hero__sombra { position: absolute; inset: 0; background: rgb(0 0 0 / 0.3); }
.hero__cabecalho { position: absolute; top: 0; left: 0; right: 0; z-index: 50; }
.hero__conteudo {
  max-width: 80rem; margin: 0 auto; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: space-around;
  padding-left: 1rem; padding-right: 1rem;
}
.hero__titulo-area { align-self: flex-start; margin-top: 2.5rem; }
.hero__titulo {
  font-size: 2.25rem; line-height: 1.25; font-weight: 400;
  max-width: 51rem; color: var(--branco);
}
.hero__grid {
  display: grid; grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem; align-items: center; width: 100%;
  padding-bottom: 4rem; padding-top: 6rem;
}
.hero__coluna {
  margin-top: 2.5rem; display: flex; flex-direction: column; gap: 2rem;
  color: var(--branco); position: relative; z-index: 10; text-align: center;
}
.hero__texto { font-size: 1.125rem; line-height: 190%; font-weight: 300; max-width: 550px; margin: 0 auto; }
.hero__numeros { display: flex; gap: 4rem; margin-top: 1.5rem; justify-content: center; }
.hero__numero { display: flex; flex-direction: column; gap: 0.5rem; }
.hero__numero-valor { font-size: 1.875rem; line-height: 1.2; font-weight: 400; }
.hero__numero-rotulo { font-size: 1.125rem; line-height: 1.5556; text-transform: uppercase; letter-spacing: 0.05em; }
.hero__botao {
  margin-top: 1.5rem; gap: 0.75rem; background: var(--amarelo); color: var(--preto);
  font-weight: 400; padding: 0.75rem 2rem; border-radius: 9999px;
  font-size: 0.875rem; line-height: 1.4286; text-transform: uppercase;
  display: flex; align-items: center; width: fit-content; margin-left: auto; margin-right: auto;
  transition: background-color 150ms;
}
.hero__botao:hover { background: var(--amarelo-hover); }
.hero__card { display: none; }

@media (min-width: 640px) { .hero__conteudo { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 768px) {
  .hero__conteudo { padding-top: 4rem; padding-bottom: 4rem; }
  .hero__titulo { font-size: 3.25rem; }
  .hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; }
  .hero__coluna { text-align: left; }
  .hero__texto { font-size: 1.5rem; margin-left: 0; margin-right: 0; }
  .hero__numeros { justify-content: flex-start; }
  .hero__numero-valor { font-size: 2rem; }
  .hero__botao { margin-left: 0; margin-right: 0; }
  .hero__card { display: flex; justify-content: flex-end; align-items: flex-end; height: 100%; position: relative; z-index: 10; }
}
@media (min-width: 1024px) {
  .hero__conteudo { padding-left: 2.5rem; padding-right: 2.5rem; }
  .hero__grid { gap: 4rem; }
}

/* Cartão "Descubra a energia solar" (canto direito do topo) */
.descubra {
  position: relative; padding: 3.5rem; color: var(--branco);
  width: 435px; height: 310px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  clip-path: path('M0 28.2846C0 12.8014 13.7672 0.249817 30.75 0.249817H332.25C349.233 0.249817 363 12.8014 363 28.2846V37.8574C363 52.963 376.431 65.2084 393 65.2084H404.25C421.233 65.2084 435 77.76 435 93.2432V281.965C435 297.448 421.233 310 404.25 310H233.439C217.407 310 202.032 293.589 186 293.589H30.75C13.7672 293.589 0 281.038 0 265.554V28.2846Z');
}
.descubra__borda {
  position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(255,255,255,0.1);
  clip-path: path('M0 28.2846C0 12.8014 13.7672 0.249817 30.75 0.249817H332.25C349.233 0.249817 363 12.8014 363 28.2846V37.8574C363 52.963 376.431 65.2084 393 65.2084H404.25C421.233 65.2084 435 77.76 435 93.2432V281.965C435 297.448 421.233 310 404.25 310H233.439C217.407 310 202.032 293.589 186 293.589H30.75C13.7672 293.589 0 281.038 0 265.554V28.2846Z');
  transform: scale(0.999);
}
.descubra__conteudo { display: flex; flex-direction: column; height: 100%; position: relative; z-index: 10; }
.descubra__titulo { font-size: 30px; line-height: 1.3; font-weight: 300; }
.descubra__botao-area { margin-top: 2rem; }
.descubra__botao {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--amarelo); color: var(--preto);
  padding: 0.75rem 1.5rem; border-radius: 9999px;
  font-size: 0.875rem; line-height: 1.4286; text-transform: uppercase; letter-spacing: 0.05em;
  transition: background-color 150ms;
}
.descubra__botao:hover { background: var(--amarelo-hover); }
.descubra__sol {
  position: absolute; bottom: 2.25rem; right: 2.25rem;
  background: var(--amarelo); width: 76px; height: 76px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
}


/* ============================================================
   SEÇÃO: SOBRE A SUNPERE
   ============================================================ */
.sobre { max-width: 1280px; margin: 0 auto; padding: 6rem 1rem; }
.sobre__topo { display: flex; flex-direction: column; gap: 2rem; margin-bottom: 8rem; }
.sobre__titulo { font-size: 52px; line-height: 1.2; font-weight: 300; max-width: 700px; }
.sobre__botoes { display: flex; gap: 1rem; flex-shrink: 0; }
.sobre__grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2rem; }
.sobre__coluna-texto { display: flex; flex-direction: column; gap: 5rem; }
.sobre__numero { font-size: 3rem; line-height: 1; font-weight: 300; color: var(--preto); }
.sobre__numero-rotulo { font-size: 1rem; line-height: 1.5; color: var(--preto); margin-top: 1.5rem; }
.sobre__bloco { display: flex; flex-direction: column; gap: 1.5rem; }
.sobre__subtitulo { font-size: 1.875rem; line-height: 1.2; font-weight: 500; }
.sobre__paragrafos { display: flex; flex-direction: column; gap: 1rem; color: #000000CC; font-weight: 500; line-height: 1.9; }
.sobre__imagens-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.sobre__imagens { display: none; grid-column: span 12 / span 12; }

@media (min-width: 640px) { .sobre { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 768px) {
  .sobre__imagens { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: end; }
  .sobre__img-a { grid-column: span 5 / span 5; }
  .sobre__img-b { grid-column: span 7 / span 7; }
  .sobre__imagens img { border-radius: 1.5rem; object-fit: cover; width: 100%; }
}
@media (min-width: 1024px) {
  .sobre { padding-left: 2rem; padding-right: 2rem; }
  .sobre__topo { flex-direction: row; justify-content: space-between; align-items: center; }
  .sobre__botoes { margin-top: 0.5rem; }
  .sobre__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4rem; }
  .sobre__coluna-texto { grid-column: span 4 / span 4; }
  .sobre__coluna-imagens { grid-column: span 8 / span 8; margin-top: 4.5rem; }
  .sobre__botao-circulo { display: block; position: absolute; top: 6rem; left: 1.5rem; transform: translateX(-50%); }
}
.sobre__botao-circulo { display: none; }


/* ============================================================
   SEÇÃO: ENERGIA SOLAR FOTOVOLTAICA
   ============================================================ */
.fotovoltaica {
  position: relative; color: var(--branco);
  background-image: url('imagens/solar-energy-background.png');
  background-size: cover; background-position: center;
}
.fotovoltaica__interno { max-width: 1280px; margin: 0 auto; padding: 8rem 1rem; }
.fotovoltaica__grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 4rem; align-items: center; }
.fotovoltaica__coluna { display: flex; flex-direction: column; gap: 2rem; }
.fotovoltaica__bloco { display: flex; flex-direction: column; gap: 1.5rem; }
.fotovoltaica__titulo { font-size: 3.25rem; line-height: 1.25; }
.fotovoltaica__textos { display: flex; flex-direction: column; gap: 1.5rem; color: #FFFFFFCC; line-height: 1.9; }
.fotovoltaica__botao { margin-top: 1rem; width: fit-content; }
.fotovoltaica__imagem { display: none; }
@media (min-width: 640px) { .fotovoltaica__interno { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 768px) { .fotovoltaica__imagem { display: flex; position: relative; } .fotovoltaica__imagem img { border-radius: 1.5rem; object-fit: cover; } }
@media (min-width: 1024px) {
  .fotovoltaica__interno { padding-left: 2rem; padding-right: 2rem; }
  .fotovoltaica__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ============================================================
   SEÇÃO: SERVIÇOS
   ============================================================ */
.servicos { padding-top: 6rem; padding-bottom: 6rem; }
.servicos__interno { padding-left: 1rem; padding-right: 1rem; }
.servicos__titulo {
  font-size: 52px; line-height: 1.2; font-weight: 300;
  max-width: 1280px; margin: 0 auto; padding: 0 1rem;
}
.servicos__lista { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 640px) { .servicos__titulo { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .servicos__titulo { padding: 0 2rem; } }

/* --- Cartão de serviço: versão celular --- */
.servico-mobile { display: block; margin: 3rem 1rem; }
.servico-mobile__card { background: var(--branco); border-radius: 1.5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0/0.1), 0 4px 6px -4px rgb(0 0 0/0.1); overflow: hidden; }
.servico-mobile__foto { position: relative; width: 100%; height: 16rem; }
.servico-mobile__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.servico-mobile__corpo { padding: 1.5rem; }
.servico-mobile__cabecalho { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.servico-mobile__titulo { font-size: 1.5rem; line-height: 1.25; font-weight: 300; color: var(--preto); }
.servico-mobile__desc { color: var(--cinza-texto); margin-bottom: 1.5rem; }
.servico-mobile__botao {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--preto-caixa); color: var(--branco);
  padding: 0.75rem 1.5rem; border-radius: 9999px;
  font-size: 0.875rem; line-height: 1.4286; text-transform: uppercase; letter-spacing: 0.05em;
  width: 100%; transition: background-color 150ms, color 150ms;
}
.servico-mobile__botao:hover { background: var(--amarelo); color: var(--preto); }

/* --- Cartão de serviço: versão computador --- */
.servico-desktop { display: none; }
@media (min-width: 1280px) {
  .servico-mobile { display: none; }
  .servico-desktop { display: block; }
  .servico-desktop__area { position: relative; width: 100%; max-width: 80rem; margin: 6rem auto; min-height: 550px; }
  .servico-desktop__painel {
    position: absolute; top: 6rem; left: 2.5rem; padding: 3rem;
    width: 532px; height: 672px; z-index: 0;
    background-image: url('imagens/Subtract-2.svg');
    background-size: 100% 100%; background-repeat: no-repeat;
  }
  .servico-desktop__interno { display: flex; flex-direction: column; height: 100%; padding-top: 3rem; padding-left: 2rem; }
  .servico-desktop__topo { display: flex; flex-direction: column; gap: 1.5rem; flex-grow: 1; }
  .servico-desktop__titulo { font-size: 44px; line-height: 1.25; font-weight: 300; color: var(--preto); }
  .servico-desktop__desc { color: var(--cinza-texto); max-width: 60%; }
  .servico-desktop__botao {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--preto-caixa); color: var(--amarelo);
    padding: 0.75rem 1.5rem; border-radius: 9999px;
    font-size: 0.875rem; line-height: 1.4286; text-transform: uppercase; letter-spacing: 0.05em;
    width: fit-content; margin-bottom: 9rem; transition: background-color 150ms, color 150ms;
  }
  .servico-desktop__botao:hover { background: var(--amarelo); color: var(--preto); }
  .servico-desktop__circulo { position: absolute; bottom: 8.5rem; right: -2rem; transform: translateX(-50%); }
  .servico-desktop__foto { position: absolute; top: 0; width: 850px; right: 0; }
  .servico-desktop__foto img { width: 653px; border-radius: 1.5rem; object-fit: cover; }
}


/* ============================================================
   SEÇÃO: MANUTENÇÃO E PÓS-VENDA
   ============================================================ */
.manutencao-desktop { display: none; }
.manutencao-mobile { background: var(--azul-manutencao); padding: 4rem 1rem; }
.manutencao-mobile__interno { display: flex; flex-direction: column; align-items: center; max-width: 28rem; margin: 0 auto; text-align: center; }
.manutencao-mobile__foto { width: 100%; padding: 0 2rem; margin-bottom: 2rem; }
.manutencao-mobile__foto img { border-radius: 1.5rem; object-fit: cover; }
.manutencao-mobile__texto { color: var(--branco); }
.manutencao-mobile__titulo { font-size: 2.25rem; line-height: 1.25; font-weight: 300; margin-bottom: 1.5rem; }
.manutencao-mobile__desc { font-size: 1rem; line-height: 1.5; font-weight: 300; color: #d1d5dc; }
.manutencao-mobile__circulo-area { margin-top: 2.5rem; }

@media (min-width: 1024px) {
  .manutencao-mobile { display: none; }
  .manutencao-desktop { background: var(--preto); min-height: 100vh; display: flex; align-items: center; padding: 6rem 0; }
  .manutencao-desktop__interno { display: flex; width: 100%; max-width: 80rem; margin: 0 auto; align-items: center; }
  .manutencao-desktop__foto { width: 50%; padding: 1rem; display: flex; justify-content: flex-end; }
  .manutencao-desktop__foto img { border-radius: 1.5rem; object-fit: cover; }
  .manutencao-desktop__lado { width: 50%; padding: 1rem; display: flex; justify-content: flex-start; position: relative; }
  .manutencao-desktop__painel {
    width: 520px; height: 595px; display: flex; flex-direction: column; justify-content: flex-start;
    padding: 3.5rem; gap: 3.5rem;
    background-image: url('imagens/Subtract-3.svg');
    background-size: contain; background-position: center; background-repeat: no-repeat;
  }
  .manutencao-desktop__titulo { font-size: 52px; line-height: 1.375; margin-bottom: 1rem; margin-top: 0.75rem; }
  .manutencao-desktop__desc { font-size: 18px; font-weight: 500; line-height: 1.9; }
  .manutencao-desktop__circulo { position: absolute; top: 0; right: 3.5rem; transform: translateX(-50%); }
}


/* ============================================================
   SEÇÃO: RODAPÉ (aparece nas 4 páginas)
   ============================================================ */
.rodape-desktop { display: none; }
.rodape-mobile { background: var(--preto); color: #FFFFFFCC; padding: 3rem 1rem; }
.rodape-mobile__interno { max-width: 80rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rodape-mobile__topo { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; }
/* O site original envolve a logo num bloco interno; isso cria ~6px de
   espaço abaixo da imagem. Mantido igual para o rodapé ficar idêntico. */
.rodape-mobile__logo-inner { display: inline-block; cursor: pointer; }
.rodape-mobile__logo img { width: 180px; height: auto; }
.rodape-mobile__redes { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding-top: 0.5rem; }
.rodape__rede { transition: color 150ms; }
.rodape__rede:hover { color: var(--branco); }
.rodape-mobile__bloco { margin-bottom: 2.5rem; }
.rodape__titulo { font-size: 1.125rem; line-height: 1.5556; font-weight: 600; color: var(--branco); letter-spacing: 0.05em; }
.rodape-mobile__bloco .rodape__titulo { margin-bottom: 1rem; }
.rodape-mobile__menu { display: flex; flex-direction: column; gap: 0.75rem; font-weight: 300; }
.rodape-mobile__contatos { display: flex; flex-direction: column; gap: 1rem; font-weight: 300; align-items: center; }
.rodape__link { transition: color 150ms; }
.rodape__link:hover { color: var(--branco); }
.rodape__contato { display: flex; align-items: center; gap: 0.75rem; transition: color 150ms; }
.rodape__contato:hover { color: var(--branco); }
.rodape-mobile hr { border-color: #1e2939; width: 100%; }
.rodape-mobile__base { display: flex; flex-direction: column; align-items: center; margin-top: 2rem; font-size: 0.875rem; line-height: 1.4286; color: var(--cinza-claro); gap: 1rem; }
.rodape__assinatura { display: flex; align-items: center; gap: 0.5rem; }

@media (min-width: 768px) {
  .rodape-mobile { display: none; }
  .rodape-desktop { display: block; background: var(--preto); color: #FFFFFFCC; padding: 3rem 1rem; }
  .rodape-desktop__interno { max-width: 64rem; margin: 0 auto; }
  .rodape-desktop__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; margin-bottom: 2rem; }
  .rodape-desktop__marca { display: flex; flex-direction: column; gap: 2.5rem; }
  .rodape-desktop__marca img { width: 180px; height: auto; cursor: pointer; }
  .rodape-desktop__redes { display: flex; align-items: center; gap: 1rem; padding-top: 0.5rem; }
  .rodape-desktop__coluna { margin-left: auto; margin-right: auto; }
  .rodape-desktop__coluna .rodape__titulo { margin-bottom: 2.5rem; }
  .rodape-desktop__menu, .rodape-desktop__contatos { display: flex; flex-direction: column; gap: 0.625rem; font-weight: 300; }
  .rodape-desktop__base {
    display: flex; flex-direction: row; justify-content: space-between; align-items: center;
    margin-top: 4.5rem; font-size: 0.875rem; line-height: 1.4286; color: var(--branco); gap: 1rem;
  }
}


/* ============================================================
   TOPO das páginas Orçamento e Projetos
   ============================================================ */
.topo-interno { position: relative; height: 100vh; background-size: cover; background-position: center; display: flex; flex-direction: column; }
.topo-interno--orcamento { background-image: url('imagens/background-contact-hero.webp'); }
.topo-interno--projetos { background-image: url('imagens/background-project-hero.png'); }
.topo-interno__cabecalho { position: relative; z-index: 10; }
.topo-interno__main { flex-grow: 1; display: flex; align-items: flex-end; position: relative; z-index: 10; }
.topo-interno__area { max-width: 1280px; margin: 0 auto; width: 100%; padding: 0 1rem 5rem; }
.topo-interno__titulo { color: var(--branco); font-size: 3rem; line-height: 1; max-width: 48rem; }
.topo-interno__titulo--projetos { font-weight: 300; line-height: 1.5; }
@media (min-width: 640px) { .topo-interno__area { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 768px) {
  .topo-interno__area { padding-bottom: 8rem; }
  .topo-interno__titulo { font-size: 52px; }
  .topo-interno__titulo--projetos { font-size: 56px; }
}
@media (min-width: 1024px) { .topo-interno { height: 730px; } .topo-interno__area { padding-left: 2rem; padding-right: 2rem; } }


/* ============================================================
   SEÇÃO: FORMULÁRIO DE ORÇAMENTO
   ============================================================ */
.orcamento { background: var(--branco); color: var(--preto); padding: 5rem 1rem; }
.orcamento__interno { max-width: 80rem; margin: 0 auto; }
.orcamento__colunas { display: flex; flex-direction: column; }
.orcamento__form-area { width: 100%; margin-bottom: 4rem; }
.orcamento__titulo { font-size: 3.25rem; line-height: 1.5; margin-bottom: 2rem; }
.orcamento__form > * + * { margin-top: 1.5rem; }
.orcamento__campo { width: 100%; padding: 1rem; border: 1px solid var(--cinza-borda); border-radius: 0.75rem; }
.orcamento__campo::placeholder { color: var(--cinza-claro); }
select.orcamento__campo { color: var(--cinza-claro); }
.orcamento__politica { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; line-height: 1.4286; }
.orcamento__politica input { margin-top: 0.25rem; accent-color: var(--amarelo-menu); }
.orcamento__politica span { color: #364153; }
.orcamento__politica a { text-decoration: underline; }
.orcamento__politica a:hover { color: var(--preto); }
.orcamento__enviar {
  background: var(--amarelo-menu); color: var(--preto); font-weight: 600;
  padding: 0.75rem 2rem; border-radius: 9999px;
  font-size: 0.875rem; line-height: 1.4286; letter-spacing: 0.05em;
  transition: background-color 150ms;
}
.orcamento__enviar:hover { background: var(--amarelo-menu-hover); }
.orcamento__aviso { font-weight: 600; }
.orcamento__aviso--erro { color: #e7000b; }
.orcamento__aviso--ok { color: #00a63e; }
/* Campo-armadilha anti-spam: some da tela sem sumir do formulário. */
.orcamento__armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.orcamento__contato-area { width: 100%; display: flex; justify-content: center; }
.orcamento__contato-titulo { font-size: 1.875rem; line-height: 1.2; font-weight: 500; margin-bottom: 1.5rem; }
.orcamento__contatos { font-size: 1.125rem; line-height: 1.5556; font-weight: 500; }
.orcamento__contatos > * + * { margin-top: 1.25rem; }
.orcamento__contatos a { display: flex; align-items: center; gap: 0.5rem; transition: color 150ms; }
.orcamento__contatos a:hover { color: #364153; }
@media (min-width: 640px) { .orcamento { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) {
  .orcamento { padding-left: 2rem; padding-right: 2rem; }
  .orcamento__colunas { flex-direction: row; gap: 6rem; }
  .orcamento__form-area { width: 50%; margin-bottom: 0; }
  .orcamento__contato-area { width: 50%; padding-left: 2.5rem; }
  .orcamento__contato-bloco { margin-top: 5rem; }
}


/* ============================================================
   SEÇÃO: GALERIA DE PROJETOS
   ============================================================ */
.galeria { padding: 3rem 1rem; }
.galeria__interno { max-width: 80rem; margin: 0 auto; }
.galeria__cabecalho { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2rem; margin-bottom: 2rem; }
.galeria__identificacao { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.galeria__titulo { font-size: 2.25rem; line-height: 1.1111; font-weight: 500; margin-top: 1rem; }
.galeria__botao {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 0.75rem;
  background: var(--amarelo); color: var(--preto); font-weight: 600;
  padding: 0.75rem 1.5rem; border-radius: 9999px;
  font-size: 0.75rem; line-height: 1.3333; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap; transition: background-color 150ms;
}
.galeria__botao:hover { background: var(--amarelo-hover); }
.galeria__desc { color: var(--preto); font-size: 1.25rem; line-height: 1.36; margin-bottom: 2.5rem; max-width: 72rem; text-align: center; margin-left: auto; margin-right: auto; }
.galeria__principal { margin-bottom: 2rem; }
.galeria__principal--dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.galeria__principal--dupla img { width: 100%; height: 10rem; object-fit: cover; border-radius: 1.5rem; }
.galeria__principal--unica img { width: 100%; height: auto; object-fit: cover; border-radius: 1.5rem; }
.galeria__miniaturas { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; }
.galeria__miniatura { position: relative; aspect-ratio: 16 / 9; border-radius: 1.5rem; overflow: hidden; }
.galeria__miniatura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 640px) {
  .galeria { padding-left: 1.5rem; padding-right: 1.5rem; }
  .galeria__titulo { font-size: 3rem; line-height: 1; }
  .galeria__miniaturas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .galeria { padding-top: 5rem; padding-bottom: 5rem; }
  .galeria__cabecalho { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
  .galeria__identificacao { flex-direction: row; }
  .galeria__titulo { margin-top: 0; }
  .galeria__botao { width: auto; }
  .galeria__desc { text-align: left; margin-left: 0; margin-right: 0; }
  .galeria__principal--dupla img { height: 20rem; }
  .galeria__miniaturas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (min-width: 1024px) {
  .galeria { padding-left: 6rem; padding-right: 6rem; }
  .galeria__principal--dupla img { height: 31.1875rem; }
}


/* ============================================================
   PÁGINA: POLÍTICA DE PRIVACIDADE
   ============================================================ */
.politica { background: var(--branco); color: var(--preto); }
.politica__topo { width: 100%; padding: 8rem 1.5rem; border-bottom: 1px solid #e5e7eb; }
.politica__topo-area { max-width: 64rem; margin: 0 auto; }
.politica__voltar { font-size: 0.875rem; line-height: 1.4286; color: var(--cinza-claro); transition: color 150ms; }
.politica__voltar:hover { color: var(--preto); }
.politica__titulo { font-size: 3rem; line-height: 1; font-weight: 300; margin-top: 1.5rem; margin-bottom: 1rem; }
.politica__data { color: var(--cinza-texto); }
.politica__conteudo { padding: 5rem 1.5rem; }
.politica__area { max-width: 64rem; margin: 0 auto; color: #1e2939; line-height: 1.625; }
.politica__area > * + * { margin-top: 3rem; }
.politica__area h2 { font-size: 1.5rem; line-height: 1.3333; font-weight: 300; margin-bottom: 1rem; }
.politica__area h3 { font-weight: 500; margin-bottom: 0.5rem; }
.politica__area h3.espaco { margin-top: 1.5rem; }
.politica__area ul { list-style: disc; padding-left: 1.5rem; }
.politica__area ul > li + li { margin-top: 0.5rem; }
.politica__area p.espaco { margin-bottom: 1rem; }
.politica__area a { text-decoration: underline; }
@media (min-width: 1024px) { .politica__topo, .politica__conteudo { padding-left: 5rem; padding-right: 5rem; } }