/* ==========================================================================
   GESCONT — ESTILOS BÁSICOS (compartilhados pelas 3 opções)
   Você não precisa editar este arquivo. As cores e fontes de cada opção
   ficam no arquivo estilo.css dentro da pasta de cada opção.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

section[id] { scroll-margin-top: 76px; }

.container {
  width: 100%;
  min-width: 0;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}
/* Evita que algum item "estoure" a largura da tela no celular */
.container > *, [class*="-grade"] > * { min-width: 0; }
.topo .logo, .topo-cta, .menu-botao { flex: none; }

/* ---------- Acessibilidade ---------- */
.pular-conteudo {
  position: absolute; left: 12px; top: -80px; z-index: 300;
  padding: 10px 18px; border-radius: 8px;
  background: #111; color: #fff; text-decoration: none; font-weight: 600;
  transition: top .2s;
}
.pular-conteudo:focus { top: 12px; }

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

:focus-visible { outline: 3px solid var(--cor-foco, #2563eb); outline-offset: 3px; }

/* ---------- Animações ao rolar (suaves) ---------- */
.js [data-anim]:not(.visivel) { opacity: 0; }
.js [data-anim].visivel { animation: gc-surgir .8s cubic-bezier(.2, .7, .2, 1) var(--atraso, 0ms) backwards; }
.js [data-anim="esquerda"].visivel { animation-name: gc-surgir-esquerda; }
.js [data-anim="direita"].visivel { animation-name: gc-surgir-direita; }
.js [data-anim="zoom"].visivel { animation-name: gc-surgir-zoom; }

@keyframes gc-surgir          { from { opacity: 0; transform: translateY(28px); } }
@keyframes gc-surgir-esquerda { from { opacity: 0; transform: translateX(-36px); } }
@keyframes gc-surgir-direita  { from { opacity: 0; transform: translateX(36px); } }
@keyframes gc-surgir-zoom     { from { opacity: 0; transform: scale(.95); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-anim]:not(.visivel) { opacity: 1; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- Menu do celular (mecânica; as cores ficam em cada opção) ---------- */
.menu-botao { display: none; }

@media (max-width: 920px) {
  .menu-botao { display: inline-flex; align-items: center; justify-content: center; }
  .menu {
    position: fixed; left: 0; right: 0; top: var(--altura-topo, 72px);
    max-height: calc(100vh - var(--altura-topo, 72px)); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .menu.aberto { opacity: 1; visibility: visible; transform: none; }
  .menu-lista { flex-direction: column; align-items: stretch !important; }
  .menu-lista a { display: block; }
  .topo-cta { display: none !important; }
  .menu-botao .fa-xmark { display: none; }
  .menu-aberto .menu-botao .fa-bars { display: none; }
  .menu-aberto .menu-botao .fa-xmark { display: inline-block; }
}

/* ---------- Perguntas frequentes ---------- */
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }

/* ---------- Formulário ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo input, .campo select, .campo textarea { width: 100%; }
.campo textarea { resize: vertical; min-height: 120px; }
.form-aviso:empty { display: none; }

/* ---------- Nome desfocado (depoimentos em sigilo) ---------- */
.nome-sigilo { filter: blur(5px); user-select: none; pointer-events: none; }

/* ---------- Espaço reservado para foto ---------- */
.foto-reservada {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 100%; min-height: 320px; text-align: center; padding: 20px;
}
.foto-reservada i { font-size: 2.5rem; opacity: .7; }

/* ---------- Mapa ---------- */
.mapa iframe { width: 100%; height: 100%; min-height: 300px; border: 0; }

/* ---------- Botão flutuante do WhatsApp ---------- */
.whatsapp-flutuante {
  position: fixed; right: 20px; bottom: 20px; z-index: 150;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff; font-size: 32px; text-decoration: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  transition: transform .25s;
}
.whatsapp-flutuante:hover { transform: scale(1.08); }
.whatsapp-flutuante::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: #25d366; animation: gc-pulso 2.6s ease-out infinite;
}
@keyframes gc-pulso { from { transform: scale(1); opacity: .55; } to { transform: scale(1.7); opacity: 0; } }

@media (max-width: 600px) {
  .container { padding-inline: 16px; }
  .whatsapp-flutuante { right: 16px; bottom: 16px; width: 56px; height: 56px; font-size: 30px; }
}