/* =========================================================================
   VERDENZA — Estilos base e identidade visual
   As utilidades de layout ficam no HTML (Tailwind). Aqui ficam apenas
   variáveis de marca, tipografia, padrões gráficos e micro-interações.
   ========================================================================= */

:root {
  /* Paleta de marca */
  --vz-900: #07231A;   /* verde floresta profundo  */
  --vz-800: #0B2E22;   /* fundo escuro principal   */
  --vz-700: #123D2E;
  --vz-600: #1B5741;
  --vz-500: #2A7A5B;   /* verde institucional      */
  --vz-400: #46A37C;
  --vz-300: #8FD6AE;
  --vz-100: #DCEDE3;
  --vz-50:  #F0F6F2;

  --vz-latao: #B08D3F; /* acento latão / certificação */
  --vz-latao-claro: #D9BE7E;

  --vz-osso: #F7F5EF;  /* fundo claro (papel)      */
  --vz-osso-2: #EFEBE1;
  --vz-tinta: #14201B; /* texto principal          */
  --vz-tinta-2: #4A5A52;
  --vz-linha: rgba(20, 32, 27, .12);

  --vz-container: 1200px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background-color: var(--vz-osso);
  color: var(--vz-tinta);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.font-display {
  font-family: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
}

/* Rótulos de seção ------------------------------------------------------- */
.vz-sobretitulo {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Padrão topográfico ----------------------------------------------------- */
.vz-topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: currentColor;
  background-image: url('../images/topografia.svg');
  background-size: cover;
  background-position: center;
  opacity: .10;
}
.vz-topo--claro { opacity: .07; }

/* Botões ----------------------------------------------------------------- */
.vz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.2;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.vz-btn:hover { transform: translateY(-1px); }
.vz-btn:active { transform: translateY(0); }

.vz-btn--primario {
  background-color: var(--vz-500);
  color: #fff;
  box-shadow: 0 8px 24px -10px rgba(42, 122, 91, .8);
}
.vz-btn--primario:hover { background-color: var(--vz-600); }

.vz-btn--claro {
  background-color: var(--vz-300);
  color: var(--vz-900);
}
.vz-btn--claro:hover { background-color: #A9E2C3; }

.vz-btn--contorno {
  border: 1px solid var(--vz-linha);
  color: var(--vz-tinta);
  background-color: transparent;
}
.vz-btn--contorno:hover { border-color: var(--vz-500); color: var(--vz-600); }

.vz-btn--contorno-claro {
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  background-color: transparent;
}
.vz-btn--contorno-claro:hover { border-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .06); }

/* Acessibilidade de foco -------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--vz-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Acordeão (serviços detalhados e FAQ) ------------------------------------ */
.vz-acordeao-corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1);
}
.vz-acordeao-corpo > div { overflow: hidden; }
.vz-acordeao[data-aberto='true'] .vz-acordeao-corpo { grid-template-rows: 1fr; }
.vz-acordeao[data-aberto='true'] .vz-acordeao-icone { transform: rotate(45deg); }
.vz-acordeao-icone { transition: transform .32s cubic-bezier(.4, 0, .2, 1), background-color .32s ease, color .32s ease, border-color .32s ease; }

/* Estado aberto: o ícone vira um círculo preenchido... */
.vz-acordeao[data-aberto='true'] .vz-acordeao-icone {
  background-color: var(--vz-700);
  border-color: transparent;
  color: #fff;
}
/* ...e o card de serviço ganha borda verde e sombra. */
.vz-acordeao[data-grupo='servicos'][data-aberto='true'] {
  border-color: rgba(42, 122, 91, .35);
  box-shadow: 0 20px 40px -32px rgba(11, 46, 34, .5);
}

/* Revelação na rolagem ---------------------------------------------------- */
.vz-revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.vz-revelar.vz-visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .vz-revelar { opacity: 1; transform: none; transition: none; }
  .vz-btn:hover { transform: none; }
}

/* Cabeçalho --------------------------------------------------------------- */
.vz-header { transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
.vz-header[data-rolado='true'] {
  background-color: rgba(11, 46, 34, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 12px 32px -20px rgba(0, 0, 0, .8);
}

/* Menu mobile ------------------------------------------------------------- */
.vz-menu-mobile {
  transition: opacity .25s ease, visibility .25s ease;
  opacity: 0;
  visibility: hidden;
}
.vz-menu-mobile[data-aberto='true'] { opacity: 1; visibility: visible; }
body.vz-sem-rolagem { overflow: hidden; }

/* Botão flutuante do WhatsApp --------------------------------------------
   Fica abaixo do menu mobile (z-40 no HTML) e acima do conteúdo. A
   visibilidade é controlada pelo main.js via data-visivel.              */
.vz-flutuante {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: flex;
  align-items: center;
  gap: .625rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.92);
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility .28s ease;
}
.vz-flutuante[data-visivel='true'] {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* Com o menu mobile aberto o botão sairia por cima do overlay. */
body.vz-sem-rolagem .vz-flutuante[data-visivel='true'] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.92);
}

.vz-flutuante-circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 9999px;
  background-color: #128C50;
  color: #fff;
  box-shadow: 0 14px 30px -10px rgba(7, 35, 26, .6);
  transition: background-color .2s ease, transform .2s ease;
}
.vz-flutuante:hover .vz-flutuante-circulo { background-color: #0E7443; transform: translateY(-2px); }
.vz-flutuante:active .vz-flutuante-circulo { transform: translateY(0); }

/* O rótulo é uma etiqueta que só aparece no hover, e só em telas largas. */
.vz-flutuante-rotulo {
  display: none;
  border-radius: 9999px;
  background-color: #fff;
  color: var(--vz-tinta);
  padding: .5rem .875rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 12px 26px -14px rgba(20, 32, 27, .55);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .2s ease, transform .2s ease;
}
@media (min-width: 1024px) {
  .vz-flutuante-rotulo { display: block; }
  .vz-flutuante:hover .vz-flutuante-rotulo,
  .vz-flutuante:focus-visible .vz-flutuante-rotulo { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vz-flutuante { transition: opacity .2s ease, visibility .2s ease; transform: none; }
  .vz-flutuante[data-visivel='true'] { transform: none; }
  body.vz-sem-rolagem .vz-flutuante[data-visivel='true'] { transform: none; }
  .vz-flutuante:hover .vz-flutuante-circulo { transform: none; }
  .vz-flutuante-rotulo { transform: none; transition: opacity .2s ease; }
}

/* Campos de formulário ---------------------------------------------------- */
.vz-campo {
  width: 100%;
  border: 1px solid var(--vz-linha);
  background-color: #fff;
  border-radius: .75rem;
  padding: .8125rem 1rem;
  font-size: .9375rem;
  color: var(--vz-tinta);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.vz-campo::placeholder { color: #9AA8A1; }
.vz-campo:focus {
  border-color: var(--vz-400);
  box-shadow: 0 0 0 4px rgba(70, 163, 124, .14);
  outline: none;
}
.vz-rotulo {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--vz-tinta-2);
  margin-bottom: .4375rem;
}

/* Linha do tempo da metodologia ------------------------------------------- */
.vz-etapa-linha {
  position: absolute;
  top: 3.25rem;
  bottom: -0.5rem;
  width: 1px;
  background: linear-gradient(to bottom, rgba(42, 122, 91, .45), rgba(42, 122, 91, .1));
}
.vz-etapa:last-child .vz-etapa-linha { display: none; }

/* Divisor pontilhado das listas editoriais -------------------------------- */
.vz-lista-editorial > * + * { border-top: 1px solid var(--vz-linha); }

/* Aviso de erro ao carregar o conteúdo ------------------------------------ */
.vz-aviso-json {
  position: fixed;
  inset-inline: 1rem;
  bottom: 1rem;
  z-index: 90;
  margin-inline: auto;
  max-width: 40rem;
  border-radius: 1rem;
  background-color: #7A2E2E;
  color: #fff;
  padding: 1rem 1.25rem;
  font-size: .875rem;
  line-height: 1.5;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6);
}
.vz-aviso-json code {
  background: rgba(255, 255, 255, .16);
  padding: .1rem .35rem;
  border-radius: .25rem;
}

/* Impressão --------------------------------------------------------------- */
@media print {
  .vz-header, .vz-menu-mobile, .vz-topo, .vz-flutuante { display: none !important; }
  .vz-revelar { opacity: 1 !important; transform: none !important; }
}