/* ==========================================================================
   Grass Clínica — estilos comuns
   --------------------------------------------------------------------------
   Fonte única da paleta e da tipografia. O js/tailwind.config.js lê estas
   variáveis (formato "R G B" para permitir opacidade, ex.: bg-verde-900/90).
   Para mudar uma cor do site inteiro, altere-a só aqui.
   ========================================================================== */

:root {
  /* --- Paleta oficial da marca ------------------------------------------ */
  --verde-900: 10 36 16;      /* #0a2410  verde profundo — fundo principal   */
  --verde-700: 19 74 30;      /* #134a1e  verde esmeralda — cards / destaques */
  --dourado: 201 168 76;      /* #c9a84c  dourado — botões e acentos          */
  --dourado-claro: 232 204 122;   /* #e8cc7a  dourado claro — hover / textos  */
  --dourado-palido: 245 224 160;  /* #f5e0a0  dourado pálido — reflexos       */
  --creme: 253 248 238;       /* #fdf8ee  creme — seções claras de respiro    */

  /* --- Tons de apoio (derivados dos verdes da marca) --------------------- */
  --verde-950: 7 26 11;       /* #071a0b */
  --verde-850: 14 51 22;      /* #0e3316 */
  --verde-600: 26 90 39;      /* #1a5a27 */
  --verde-500: 34 101 47;     /* #22652f */
  --dourado-escuro: 184 150 61;   /* #b8963d  hover dos botões dourados       */
  --dourado-texto: 134 104 28;    /* #86681c  texto dourado sobre fundo claro (contraste AA) */

  /* --- Textos ------------------------------------------------------------ */
  --texto-claro: 231 226 216;     /* #e7e2d8  texto sobre fundo escuro        */
  --texto-claro-suave: 195 200 191; /* #c3c8bf texto secundário sobre escuro  */
  --texto-apagado: 141 146 138;   /* #8d928a  placeholders / microtexto       */
  --sage: 138 195 138;            /* #8ac38a  texto sobre verde-700           */

  /* --- Tipografia -------------------------------------------------------- */
  --fonte-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Movimento --------------------------------------------------------- */
  --transicao: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

[hidden] { display: none !important; } /* vence classes como "flex" do Tailwind */
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; } /* âncoras e foco não ficam sob o cabeçalho fixo */
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fonte-texto);
  background-color: rgb(var(--verde-900));
  color: rgb(var(--texto-claro));
  overscroll-behavior: none;
}
main > :first-child { margin-top: 0 !important; }
main > :last-child { margin-bottom: 0 !important; }

.material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24; }

:focus-visible { outline: 2px solid rgb(var(--dourado)); outline-offset: 3px; }

/* ==========================================================================
   Botões
   ========================================================================== */

/* Principal — dourado */
.btn-primario {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background-color: rgb(var(--dourado));
  color: rgb(var(--verde-900));
  font-family: var(--fonte-texto); font-weight: 500;
  border-radius: 0.25rem;
  transition: background-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.btn-primario:hover {
  background-color: rgb(var(--dourado-escuro));
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -4px rgb(var(--dourado) / 0.35);
}
.btn-primario:active { transform: translateY(0); box-shadow: 0 2px 6px -2px rgb(var(--dourado) / 0.25); }

/* Secundário — contorno dourado */
.btn-secundario {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background-color: transparent;
  color: rgb(var(--creme));
  border: 1px solid rgb(var(--dourado) / 0.6);
  font-family: var(--fonte-texto); font-weight: 500;
  border-radius: 0.25rem;
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}
.btn-secundario--claro { color: rgb(var(--verde-900)); }
.btn-secundario:hover {
  background-color: rgb(var(--dourado));
  border-color: rgb(var(--dourado));
  color: rgb(var(--verde-900));
}

/* Setinha que avança no hover (links "Saiba mais") */
.seta-avanca { transition: transform var(--transicao); }
a:hover > .seta-avanca, button:hover > .seta-avanca, .group:hover .seta-avanca { transform: translateX(4px); }

/* ==========================================================================
   Menu
   ========================================================================== */

.nav-link {
  position: relative;
  padding-block: 0.375rem;
  transition: color var(--transicao);
}
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background-color: rgb(var(--dourado));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover { color: rgb(var(--dourado-claro)); }
.nav-link:hover::after { transform: scaleX(1); }
/* Página atual (o build.py marca o link com aria-current="page") */
.nav-link[aria-current="page"] { color: rgb(var(--dourado-claro)); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.nav-link-mobile[aria-current="page"] {
  color: rgb(var(--dourado-claro));
  border-left-color: rgb(var(--dourado));
}

/* ==========================================================================
   Cards (tratamentos e blog)
   ========================================================================== */

.card-elevar {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card-elevar:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.35), 0 8px 32px -4px rgb(var(--dourado) / 0.12);
}
.card-sobre-claro.card-elevar:hover {
  box-shadow: 0 18px 40px -16px rgb(var(--verde-900) / 0.25);
}
/* A imagem cresce dentro da moldura; o card mantém o tamanho */
.card-capa { overflow: hidden; }
.card-capa img { transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1); }
.card-elevar:hover .card-capa img { transform: scale(1.05); }

/* ==========================================================================
   Formulários
   ========================================================================== */

.campo {
  width: 100%;
  padding: 0.625rem 1rem;
  border-radius: 0.25rem;
  background-color: rgb(var(--verde-600) / 0.45);
  color: rgb(var(--texto-claro));
  border: 1px solid rgb(var(--dourado) / 0.25);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  transition: border-color var(--transicao), box-shadow var(--transicao), background-color var(--transicao);
}
.campo::placeholder { color: rgb(var(--texto-claro-suave) / 0.6); }
.campo:hover { border-color: rgb(var(--dourado) / 0.45); }
.campo:focus {
  outline: none;
  border-color: rgb(var(--dourado));
  box-shadow: 0 0 0 3px rgb(var(--dourado) / 0.15);
}
select.campo {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9a84c'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.25rem;
  padding-right: 2.5rem;
}
select.campo option { background-color: rgb(var(--verde-700)); color: rgb(var(--texto-claro)); }
.campo[aria-invalid="true"] { border-color: #e8a07a; box-shadow: 0 0 0 3px rgb(232 160 122 / 0.15); }
.erro-campo { color: #f0b48f; font-size: 0.8125rem; line-height: 1.25rem; }

/* Armadilha para robôs: fora da tela, invisível para pessoas e leitores de tela */
.campo-armadilha { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Botão em envio */
.btn-primario:disabled, .btn-primario.enviando { cursor: progress; opacity: 0.85; transform: none; box-shadow: none; }
.btn-primario.enviando:hover { background-color: rgb(var(--dourado)); }
.girando { animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ==========================================================================
   Vídeo — botão de play
   ========================================================================== */

.btn-play { transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color var(--transicao); }
.video-capa:hover .btn-play, .btn-play:hover { transform: scale(1.08); background-color: rgb(var(--dourado-claro)); }
.video-capa img { transition: transform 900ms cubic-bezier(0.4, 0, 0.2, 1); }
.video-capa:hover img { transform: scale(1.03); }

/* Halo discreto atrás do play */
.halo-suave { animation: halo 3.2s ease-out infinite; }

/* ==========================================================================
   Botão flutuante do WhatsApp
   ========================================================================== */

.whatsapp-flutuante {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50;
  display: inline-flex; align-items: center;
  height: 3.5rem; padding: 0 1rem;
  border-radius: 9999px;
  background-color: rgb(var(--dourado));
  color: rgb(var(--verde-900));
  box-shadow: 0 8px 24px rgb(var(--dourado) / 0.3);
  transition: background-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
@media (min-width: 768px) { .whatsapp-flutuante { right: 2rem; bottom: 2rem; } }
.whatsapp-flutuante::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgb(var(--dourado) / 0.45);
  animation: pulso 2.8s ease-out infinite;
  pointer-events: none;
}
.whatsapp-flutuante svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.whatsapp-texto {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  font-family: var(--fonte-texto); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em;
  transition: max-width 350ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms ease, margin 350ms ease;
}
.whatsapp-flutuante:hover, .whatsapp-flutuante:focus-visible {
  background-color: rgb(var(--dourado-claro));
  box-shadow: 0 10px 28px rgb(var(--dourado) / 0.4);
}
.whatsapp-flutuante:hover .whatsapp-texto, .whatsapp-flutuante:focus-visible .whatsapp-texto {
  max-width: 14rem; opacity: 1; margin-left: 0.625rem;
}

/* ==========================================================================
   Revelar seções ao rolar (a classe .js é posta no <html> pelo script do head;
   sem JavaScript, tudo aparece normalmente)
   ========================================================================== */

.js .revelar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.js .revelar.visivel { opacity: 1; transform: none; }

/* ==========================================================================
   Animações
   ========================================================================== */

@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgb(var(--dourado) / 0.45); }
  70%  { box-shadow: 0 0 0 14px rgb(var(--dourado) / 0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--dourado) / 0); }
}
@keyframes halo {
  0%   { transform: scale(1);   opacity: 0.5; }
  80%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Quem pediu menos movimento no sistema não vê animações nem deslocamentos */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .btn-primario:hover, .card-elevar:hover { transform: none; }
  .card-elevar:hover .card-capa img, .video-capa:hover img, .video-capa:hover .btn-play, .btn-play:hover { transform: none; }
  .js .revelar { opacity: 1; transform: none; }
}

/* ==========================================================================
   Texto longo (artigo do blog e política de privacidade)
   ========================================================================== */

.texto-longo { color: #2d3a30; font-size: 1.0625rem; line-height: 1.85; }
.texto-longo > * + * { margin-top: 1.25rem; }
.texto-longo h2 {
  font-family: var(--fonte-titulo); font-weight: 500; color: rgb(var(--verde-900));
  font-size: 1.75rem; line-height: 2.25rem; margin-top: 2.75rem;
}
.texto-longo h3 {
  font-family: var(--fonte-titulo); font-weight: 500; color: rgb(var(--verde-900));
  font-size: 1.3rem; line-height: 1.8rem; margin-top: 2rem;
}
.texto-longo a { color: rgb(var(--verde-700)); text-decoration: underline; text-decoration-color: rgb(var(--dourado)); text-underline-offset: 3px; }
.texto-longo a:hover { color: rgb(var(--dourado-texto)); }
.texto-longo ul { list-style: none; padding-left: 0; }
.texto-longo ul li { position: relative; padding-left: 1.5rem; }
.texto-longo ul li + li { margin-top: 0.5rem; }
.texto-longo ul li::before {
  content: ""; position: absolute; left: 0.25rem; top: 0.8em;
  width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: rgb(var(--dourado));
}
.texto-longo blockquote {
  border-left: 2px solid rgb(var(--dourado));
  padding: 0.25rem 0 0.25rem 1.5rem;
  font-family: var(--fonte-titulo); font-style: italic; font-size: 1.35rem; line-height: 2rem;
  color: rgb(var(--verde-700));
}
.texto-longo strong { color: rgb(var(--verde-900)); font-weight: 600; }
.texto-longo ol { list-style: decimal; padding-left: 1.5rem; }
.texto-longo ol li + li { margin-top: 0.5rem; }
.texto-longo ol li::marker { color: rgb(var(--dourado-texto)); font-weight: 600; }

/* ==========================================================================
   Modo revisão — abra qualquer página com ?revisar no endereço para ver,
   contornados em laranja, todos os trechos que precisam de conteúdo real.
   ========================================================================== */

.modo-revisao [data-substituir] { outline: 2px dashed #f59e0b !important; outline-offset: 3px; }
.modo-revisao [data-substituir]::after {
  content: "SUBSTITUIR: " attr(data-substituir);
  display: inline-block; margin: 0.25rem 0 0 0.5rem; vertical-align: middle;
  background: #f59e0b; color: #1a1a1a;
  font: 600 10px/1.4 var(--fonte-texto); letter-spacing: 0.04em; font-style: normal; text-transform: none;
  padding: 1px 6px; border-radius: 2px; white-space: nowrap; pointer-events: none;
}

/* ==========================================================================
   Banner de cookies (criado por js/rastreamento.js)
   ========================================================================== */
.banner-cookies {
  position: fixed; z-index: 70; left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 34rem; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1rem 1.125rem;
  background: rgb(var(--verde-950) / 0.97); color: rgb(var(--texto-claro));
  border: 1px solid rgb(var(--dourado) / 0.35); border-radius: 0.5rem;
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.6);
  font-family: var(--fonte-texto); font-size: 0.875rem; line-height: 1.45;
  animation: banner-entra 260ms ease-out;
}
@media (min-width: 640px) {
  .banner-cookies { flex-direction: row; align-items: center; left: 1.5rem; right: auto; bottom: 1.5rem; margin: 0; }
}
.banner-cookies-texto { margin: 0; color: rgb(var(--texto-claro-suave)); }
.banner-cookies-texto a { color: rgb(var(--dourado-claro)); text-decoration: underline; text-underline-offset: 2px; }
.banner-cookies-acoes { display: flex; gap: 0.5rem; flex-shrink: 0; }
.banner-cookies-botao {
  flex: 1; min-height: 2.5rem; padding: 0 1rem; border-radius: 0.375rem;
  font: 500 0.875rem/1 var(--fonte-texto); cursor: pointer; white-space: nowrap;
  transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao);
}
.banner-cookies-botao--recusar { background: transparent; color: rgb(var(--texto-claro)); border: 1px solid rgb(var(--dourado) / 0.45); }
.banner-cookies-botao--recusar:hover { border-color: rgb(var(--dourado)); }
.banner-cookies-botao--aceitar { background: rgb(var(--dourado)); color: rgb(var(--verde-900)); border: 1px solid rgb(var(--dourado)); }
.banner-cookies-botao--aceitar:hover { background: rgb(var(--dourado-claro)); }
.banner-cookies-botao:focus-visible { outline: 2px solid rgb(var(--dourado-claro)); outline-offset: 2px; }
@keyframes banner-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .banner-cookies { animation: none; } }

/* Desempenho no celular: seções abaixo da primeira tela só têm o layout
   calculado quando chegam perto da área visível. "auto 900px" é só a altura
   estimada até a primeira renderização; depois o navegador lembra a real. */
main > section:not(:first-child) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.cv-desligado main > section { content-visibility: visible; }