/* ============================================================
   Anísio Filho — Nutricionista
   Direção de arte: PRETO/MARROM QUASE PRETO dominante + DOURADO/ÂMBAR
   como cor de destaque + OFF-WHITE no texto. Editorial, médica,
   masculina — consultório premium, não template de nutricionista.

   Histórico: o site nasceu com paleta verde + creme + terracota, passou
   por uma fase verde-quase-preto + dourado (2026-09-07) e nesta revisão
   abandonou o verde de vez. A régua de acabamento é o site da Dra.
   Stephany Farfán (composição, luz, escala, hierarquia) — a paleta é
   irmã da dela, mas o conteúdo, a marca e a fotografia são do Anísio.

   Convenções desta folha:
   - fundo: --bg-primary é a base; --bg-secondary e --bg-elevated são
     variações sutis pro ritmo de banda em banda (nunca contraste forte,
     o site inteiro precisa parecer uma coisa só);
   - destaque: --gold-* em CTAs, links, ícones, números, hover e linhas;
   - texto: --text-primary (off-white) no corpo, --text-secondary em
     apoio, --text-muted em legendas/eyebrows;
   - --text-on-gold é o único texto escuro do site: só existe sobre
     fundo dourado sólido (botão primário, aba ativa, <option> nativa,
     que o navegador pinta com fundo branco de qualquer jeito).
   ============================================================ */

:root {
  /* Fundos — variação mínima de propósito (ver "Continuidade visual") */
  --bg-primary: #0D0906;
  --bg-secondary: #100B07;
  --bg-elevated: #150E09;
  --bg-raised: #1A120C;

  /* Dourado / âmbar — quente, nunca neon */
  --gold-primary: #D7A253;
  --gold-light: #E7BA70;
  --gold-lighter: #F2D19A;
  --gold-dark: #9D662E;
  --bronze: #A95E32;

  /* Texto */
  --text-primary: #F4EFE7;
  --text-secondary: #C8BEB2;
  --text-muted: #8E8175;
  --text-on-gold: #17100A;

  /* Superfícies e traços */
  --surface-card: rgba(244, 239, 231, 0.035);
  --surface-card-hover: rgba(244, 239, 231, 0.06);
  --border-gold: rgba(215, 162, 83, 0.28);
  --border-gold-faint: rgba(215, 162, 83, 0.14);
  --border-gold-strong: rgba(215, 162, 83, 0.45);
  --border-soft: rgba(244, 239, 231, 0.12);
  --gold-halo: rgba(215, 162, 83, 0.12);
  --shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.8);

  --font-title: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 18px;
  --radius-sm: 12px;

  /* Altura do header — o hero usa isso pra ocupar a viewport certinha */
  --header-h: 84px;
  /* Altura da faixa dourada no pé do hero — o painel da foto para em cima
     dela, pros pés dele não ficarem cortados pela faixa. */
  --ticker-h: 48px;

  /* Overlays do hero da bioimpedância (foto de ambiente, precisa de véu
     mais pesado que o hero principal, que é foto de estúdio em preto) */
  --hero-overlay-1: rgba(96, 55, 24, 0.4);
  --hero-overlay-2: rgba(13, 9, 6, 0.72);
  --hero-overlay-3: rgba(13, 9, 6, 0.86);
  --hero-overlay-4: rgba(8, 5, 3, 0.97);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--text-secondary);
  background: var(--bg-primary);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Foco visível em toda parte — o site é escuro, então o anel é dourado
   pra continuar legível sobre qualquer superfície. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ---------- Preloader ---------- */
/* Sem foto. As três imagens que ficavam aqui eram de banco (uma laranja,
   um par de pés numa balança com nervos vermelhos) e não conversavam com
   a direção de arte do site — e ainda entravam com fetchpriority="high",
   atrasando o primeiro paint por causa de uma tela que dura 400ms.

   No lugar, a mesma linguagem da abertura da aba Vídeos: preto, feixes
   verticais de luz dourada e a marca. Assim toda troca de tela do site
   pertence à mesma família de movimento, e o custo é zero byte. */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--bg-primary);
  /* 1050ms (era 780ms): a pedido do Anísio, a troca de página estava
     rápida demais pra ler. Casar com o setTimeout do main.js. */
  transition: transform 1050ms cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
/* A cortina SOBE em vez de desbotar: revelar por baixo lê como cortina de
   teatro, e desbotar lê como página que demorou. */
#preloader.is-done { transform: translateY(-100%); }
#preloader.is-hidden { visibility: hidden; pointer-events: none; }

/* O fio dourado que corre na borda da cortina enquanto ela sobe. */
#preloader::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--gold-light) 30%, var(--gold-lighter) 50%, var(--gold-light) 70%, transparent);
  box-shadow: 0 0 18px rgba(215, 162, 83, 0.55);
  transition: opacity 200ms ease;
}
#preloader.is-done::after { opacity: 1; }

.preloader-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130vmax;
  height: 130vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%, rgba(215, 162, 83, 0.15) 0%, rgba(215, 162, 83, 0.04) 32%, transparent 62%);
  animation: preloader-halo 3.4s ease-in-out infinite;
}
@keyframes preloader-halo {
  0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.94); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

/* Feixes verticais — o mesmo vocabulário do ident da aba Vídeos, em
   versão curta e discreta. */
.preloader-luz {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3.4vw, 46px);
  pointer-events: none;
}
.preloader-luz i {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(215, 162, 83, 0.42) 35%, rgba(242, 209, 154, 0.6) 50%, rgba(215, 162, 83, 0.42) 65%, transparent 100%);
  transform: scaleY(0.12);
  opacity: 0;
  animation: preloader-feixe 2.6s cubic-bezier(0.33, 0, 0.2, 1) infinite;
}
.preloader-luz i:nth-child(1) { animation-delay: 0.42s; }
.preloader-luz i:nth-child(2) { animation-delay: 0.14s; width: 2px; }
.preloader-luz i:nth-child(3) { animation-delay: 0.56s; }
.preloader-luz i:nth-child(4) { animation-delay: 0.08s; }
.preloader-luz i:nth-child(5) { animation-delay: 0s; width: 3px; }
.preloader-luz i:nth-child(6) { animation-delay: 0.2s; }
.preloader-luz i:nth-child(7) { animation-delay: 0.62s; width: 2px; }
.preloader-luz i:nth-child(8) { animation-delay: 0.3s; }
.preloader-luz i:nth-child(9) { animation-delay: 0.48s; }
@keyframes preloader-feixe {
  0%   { transform: scaleY(0.1); opacity: 0; }
  35%  { opacity: 1; }
  60%  { transform: scaleY(1); opacity: 0.9; }
  100% { transform: scaleY(1.15); opacity: 0; }
}

.preloader-grao {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0.1;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

.preloader-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  transition: opacity 520ms ease, transform 700ms cubic-bezier(0.76, 0, 0.24, 1);
}
#preloader.is-done .preloader-content { opacity: 0; transform: translateY(-14px); }

.preloader-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.preloader-marca {
  color: var(--gold-light);
  line-height: 0;
  opacity: 0;
  animation: preloader-entra 700ms cubic-bezier(0.22, 1, 0.36, 1) 60ms forwards;
}
.preloader-name {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.7rem, 4.4vw, 2.5rem);
  color: var(--text-primary);
  letter-spacing: 0.01em;
  opacity: 0;
  animation: preloader-entra 700ms cubic-bezier(0.22, 1, 0.36, 1) 160ms forwards;
}
.preloader-tag {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0;
  animation: preloader-entra 700ms cubic-bezier(0.22, 1, 0.36, 1) 260ms forwards;
}
@keyframes preloader-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.preloader-bar {
  width: min(190px, 46vw);
  height: 2px;
  border-radius: 999px;
  background: rgba(244, 239, 231, 0.12);
  overflow: hidden;
}
.preloader-bar-fill {
  display: block;
  height: 100%;
  width: 6%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-primary), var(--gold-lighter));
  box-shadow: 0 0 12px rgba(215, 162, 83, 0.6);
  animation: preloader-fill 1.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes preloader-fill {
  0%   { width: 6%; }
  65%  { width: 68%; }
  100% { width: 84%; }
}
#preloader.is-done .preloader-bar-fill {
  animation: none;
  width: 100%;
  transition: width 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .preloader-luz i,
  .preloader-halo { animation: none; }
  .preloader-luz i { opacity: 0.5; transform: scaleY(1); }
  .preloader-marca,
  .preloader-name,
  .preloader-tag { animation: none; opacity: 1; }
  .preloader-bar-fill { animation: none; width: 70%; }
  #preloader { transition-duration: 240ms; }
  #preloader.is-done .preloader-bar-fill { transition: none; width: 100%; }
}
/* ---------- Preloader fim ---------- */


.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}
.container-narrow { max-width: 820px; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: 12px 20px;
  z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; border-radius: 8px; }

/* ---------- Tipografia ---------- */

h1, h2, h3 {
  font-family: var(--font-title);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.012em;
}
/* A Fraunces usa algarismos old-style por padrão (o "3" e o "7" descem
   abaixo da linha de base e ficam menores que as letras). Em número de
   destaque — o número grande do "Sobre", total de calorias, nota do
   Google — isso lê como erro de fonte, então a gente força algarismo
   alinhado. */
.prato-total strong,
.testimonial-google-nota,
.dia-chip-kcal,
.bio-ring-label strong,
.step-num,
.bio-online-num { font-variant-numeric: lining-nums proportional-nums; }
h1 em, h2 em { font-style: normal; color: var(--gold-light); }

/* Eyebrow: filete dourado + versalete espaçado. É a assinatura tipográfica
   que amarra todas as seções (mesma ideia do .eyebrow-line da referência). */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-primary);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 1px;
  margin-right: 14px;
  vertical-align: middle;
  background: linear-gradient(90deg, transparent, var(--gold-primary));
}
.hero .eyebrow::before,
.bio-hero .eyebrow::before { background: linear-gradient(90deg, transparent, var(--gold-light)); }

.section-title {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  max-width: 24ch;
  margin-bottom: 22px;
}
.section-lead {
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: 1.03rem;
  line-height: 1.72;
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease,
              background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, filter 0.3s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
/* 1º nível — dourado sólido em degradê quente, texto escuro. */
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-primary) 55%, var(--gold-dark) 100%);
  color: var(--text-on-gold);
  box-shadow: 0 14px 30px -16px rgba(215, 162, 83, 0.55);
}
.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 18px 36px -16px rgba(215, 162, 83, 0.65);
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 35%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn-primary:hover::before { left: 130%; }
.btn-primary::after {
  content: '→';
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.25s ease;
}
.btn-primary:hover::after { transform: translateX(4px); }
/* 2º nível — contorno dourado sobre o fundo escuro. */
.btn-outline { background: transparent; border-color: var(--border-gold); color: var(--text-primary); }
.btn-outline:hover { border-color: var(--gold-primary); color: var(--gold-light); background: rgba(215, 162, 83, 0.07); }
.btn-gold {
  background: transparent;
  color: var(--gold-primary);
  border-color: var(--border-gold);
}
.btn-gold:hover {
  background: var(--gold-halo);
  border-color: var(--border-gold-strong);
}
/* 3º nível — quase só texto, o mais discreto da hierarquia. Sem moldura,
   o padding lateral também encolhe: é o que faz os três CTAs do hero
   caberem numa linha só. */
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn-ghost:hover { color: var(--gold-light); background: rgba(244, 239, 231, 0.04); }
.btn-ghost.btn-lg { padding-left: 14px; padding-right: 14px; }
.btn-ghost-light { background: transparent; color: var(--text-primary); border-color: var(--border-soft); }
.btn-ghost-light:hover { background: rgba(244,239,231,0.08); border-color: var(--border-gold); }
.btn-lg { padding: 17px 34px; font-size: 0.98rem; min-height: 56px; }
.btn-sm { padding: 10px 20px; font-size: 0.83rem; }

/* ---------- Header ---------- */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(13, 9, 6, 0.62);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.header.is-scrolled {
  background: rgba(13, 9, 6, 0.9);
  border-bottom-color: var(--border-gold-faint);
  box-shadow: 0 16px 40px -30px rgba(0, 0, 0, 0.9);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: var(--header-h);
}
.logo { display: flex; align-items: center; gap: 11px; }
.logo-mark { color: var(--gold-primary); display: flex; }
.logo-text {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.logo-text small {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-primary);
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: clamp(11px, 1.15vw, 20px); }
.nav a {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--text-secondary);
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.nav a:hover { color: var(--text-primary); }
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold-primary);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav a:hover::after { width: 100%; }
.nav a.is-current { color: var(--gold-light); }
.nav a.is-current::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 16px; }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}
.menu-toggle span {
  width: 22px; height: 2px;
  background: var(--text-primary);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* São 9 itens de menu em versalete espaçado: só cabem junto com a logo e o
   CTA a partir de ~1360px. Abaixo disso o nav de desktop empurraria o botão
   "Agendar consulta" pra fora da tela, então entra o menu mobile. */
@media (max-width: 1360px) {
  .nav { display: none; }
  .menu-toggle { display: flex; }
}

.mobile-nav {
  position: fixed;
  inset: 0;
  top: var(--header-h);
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  z-index: 90;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav nav { display: flex; flex-direction: column; padding: 36px clamp(20px, 6vw, 40px) 48px; gap: 4px; }
.mobile-nav a {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-primary);
  padding: 12px 0;
  border-bottom: 1px solid rgba(244, 239, 231, 0.07);
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.mobile-nav a:hover { color: var(--gold-light); padding-left: 6px; }
.mobile-nav .btn { align-self: flex-start; margin-top: 26px; border-bottom: none; }
.mobile-nav .btn:hover { padding-left: 26px; }

/* ---------- Hero ---------- */

/* Base (mobile/tablet): a foto cobre o hero inteiro e o texto vem abaixo
   do rosto. O layout editorial de duas colunas entra a partir de 1025px,
   na media query "Hero desktop" mais adiante. */
.hero {
  position: relative;
  /* isolation prende o mix-blend-mode da luz (.hero::after) dentro do hero:
     sem isso o `screen` poderia somar com o que está atrás da seção. */
  isolation: isolate;
  padding: 190px 0 0;
  overflow: hidden;
  color: var(--text-primary);
  text-align: center;
  /* Luz de estúdio direto no fundo, ATRÁS dele. Isso só é possível porque
     a foto é recortada: enquanto ela era um painel retangular de fundo
     preto, o brilho aparecia só no pedaço de fundo ao lado e encostava na
     borda escura da imagem — era o que sujava a emenda, e por isso a luz
     precisava ficar por cima em `screen`. Sem retângulo, não há emenda: a
     luz volta pro lugar certo e vira halo por trás da figura. */
  background:
    radial-gradient(ellipse 44% 56% at 74% 46%, rgba(184, 112, 46, 0.34), transparent 70%),
    radial-gradient(ellipse 66% 52% at 88% 88%, rgba(120, 66, 28, 0.26), transparent 74%),
    radial-gradient(circle at 16% 22%, rgba(215, 162, 83, 0.06), transparent 58%),
    linear-gradient(155deg, #140D08 0%, var(--bg-primary) 52%, #070402 100%);
}
.hero-bg-photo { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-bg-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Véu do hero principal (mobile/tablet, onde a foto cobre a seção inteira).
   Não usa os --hero-overlay-*: aqueles são calibrados pro hero da
   bioimpedância, que é foto de ambiente cheia de cor e precisa de véu bem
   mais pesado. Aqui a foto é retrato de estúdio em fundo preto, então um
   véu daquele peso apagava o rosto dele. */
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 620px at 50% 4%, rgba(96, 55, 24, 0.3), transparent 62%),
    linear-gradient(180deg, rgba(13, 9, 6, 0.3) 0%, rgba(13, 9, 6, 0.42) 38%, rgba(13, 9, 6, 0.88) 100%);
}

/* Marca do Método SELF, equipe que o Anísio integra no mesmo Núcleo.

   Ela já foi marca d'água gigante por trás da figura (`right: -4%`,
   560px, opacidade 0.13). Não funcionava: o corpo dele cobria o miolo do
   emblema e sobravam só pedaços dos arcos "MÉTODO" e "EMAGRECIMENTO", que
   liam como borrão. Em tablet ela ainda estourava a borda direita e ficava
   cortada pela metade.

   Agora é uma marca pequena no canto superior direito do hero, abaixo do
   header fixo — a única área livre em toda a faixa de larguras, já que a
   figura ocupa o centro/direita no desktop e a tela inteira no mobile.
   Como não disputa mais espaço com ninguém, ela é menor e mais opaca: 0.13
   existia pra não brigar com o rosto dele; numa marca desse tamanho sobre
   fundo escuro, aquilo simplesmente sumiria. */
.hero-marca {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: calc(var(--header-h) + clamp(14px, 2.4vh, 40px));
  right: clamp(14px, 3.4vw, 40px);
  width: clamp(80px, 15vw, 150px);
  aspect-ratio: 1;
  opacity: 0.36;
}
.hero-marca img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Deixa a marca no mesmo âmbar do site, em vez do dourado rosado
     original dela, pra não abrir uma segunda família de cor no hero. */
  filter: sepia(0.5) saturate(1.5) hue-rotate(-8deg) brightness(1.1);
}

.hero-inner-v2 {
  position: relative;
  z-index: 3;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Nome, acima do eyebrow "Enfermeiro & Nutricionista" (pedido do Anísio,
   2026-09-12). Serifa (mesma família dos títulos) pra ler como
   assinatura, não como mais um rótulo em versalete. */
.hero-nome {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  letter-spacing: 0.01em;
  color: var(--gold-light);
  margin: 0 0 8px;
}
.hero .eyebrow { color: var(--gold-primary); margin-bottom: clamp(12px, 1.8vh, 20px); }
/* O tamanho olha pra largura E pra altura: em telas baixas (notebook
   1440x800) o título encolhe sozinho pra o hero continuar cabendo numa
   viewport. */
.hero h1 {
  font-size: clamp(2.5rem, min(4.6vw, 7.2vh), 5.2rem);
  line-height: 1.03;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  color: var(--text-primary);
}
.hero-title .word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px);
  animation: word-in 0.7s ease forwards;
  animation-delay: calc(var(--d) * 0.09s + 0.3s);
}
@keyframes word-in {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title .word { animation: none; opacity: 1; filter: none; transform: none; }
}
.hero-manifesto {
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--gold-light);
  max-width: 520px;
  margin: 0 auto clamp(12px, 1.8vh, 20px);
  text-align: center;
}
.hero-lead {
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--text-secondary);
  max-width: 58ch;
  margin: 0 auto clamp(20px, 3.4vh, 34px);
  text-align: center;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 46px; }
.hero-cta-v2 { justify-content: center; margin-bottom: clamp(24px, 4vh, 44px); align-items: center; }

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}
.hero-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(244, 239, 231, 0.08);
  border: 1px solid rgba(244, 239, 231, 0.18);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(244, 239, 231, 0.92);
}

/* ---------- Faixa de credenciais (rodapé do hero) ----------
   Faixa dourada sólida com texto escuro, fechando o hero como na
   referência. Fica colada na base do hero, ponta a ponta. */
.hero-ticker {
  position: relative;
  z-index: 4;
  margin-top: 56px;
  overflow: hidden;
  padding: 14px 0;
  background: linear-gradient(100deg, var(--gold-dark) 0%, var(--gold-primary) 38%, var(--gold-light) 62%, var(--gold-primary) 100%);
  border-top: 1px solid rgba(255, 240, 214, 0.28);
  border-bottom: 1px solid rgba(23, 16, 10, 0.22);
}
.hero-ticker-track {
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  white-space: nowrap;
  animation: hero-ticker-scroll 46s linear infinite;
}
.hero-ticker-track .item {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-on-gold);
}
.hero-ticker-track .dot {
  color: rgba(23, 16, 10, 0.55);
  font-size: 0.7rem;
  transform: translateY(-1px);
}
@keyframes hero-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(var(--marquee-distance, -50%)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ticker-track { animation: none; overflow-x: auto; }
}
@media (max-width: 600px) {
  .hero-ticker { margin-top: 40px; padding: 12px 0; }
  .hero-ticker-track { gap: 14px; }
  .hero-ticker-track .item { font-size: 0.66rem; letter-spacing: 0.12em; }
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--surface-card);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 4rem;
  border: 2px dashed var(--border-gold);
}

/* ---------- Seções gerais ---------- */

/* Respiro editorial: bastante ar entre as seções, como na referência. */
.section { position: relative; padding: clamp(70px, 9vw, 150px) 0; }

/* ---------- Divisor curvo dourado (componente reutilizável) ----------
   Fecha cada seção principal com uma linha dourada de 1px, quase reta:
   a curva tem ~14px de amplitude em 1440 de largura, então lê como um
   traço levemente orgânico, não como uma onda. É um SVG em data-URI
   (uma regra só, sem markup repetido e sem requisição extra) esticado
   pela largura da seção, com as pontas dissolvendo na máscara pra não
   bater seco na borda da tela.
   Uso: <div class="section-divider" aria-hidden="true"></div> como
   último filho de <section>, fora do .container (a linha atravessa a
   largura toda, não só a coluna de conteúdo). */
.section-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 26px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 26' preserveAspectRatio='none'%3E%3Cpath d='M0,15 C240,7 420,21 700,13 C940,6 1150,20 1440,11' fill='none' stroke='%23D7A253' stroke-opacity='0.4' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
/* Sobre fundo mais claro (faixa dourada, CTA final) a linha some — nessas
   a variante escura mantém o mesmo desenho com contraste invertido. */
.section-divider-dark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 26' preserveAspectRatio='none'%3E%3Cpath d='M0,15 C240,7 420,21 700,13 C940,6 1150,20 1440,11' fill='none' stroke='%2317100A' stroke-opacity='0.35' stroke-width='1'/%3E%3C/svg%3E");
}

/* Ritmo de banda em banda com variação MÍNIMA de tom (#0D0906 → #130D08).
   A intenção é profundidade, não contraste: o site inteiro tem que parecer
   uma coisa só, sem seção "clara" no meio do caminho. */
#sobre,
#como-funciona,
#depoimentos,
#localizacao { background: linear-gradient(180deg, #120C08 0%, var(--bg-primary) 100%); }

#especialidade,
.section-prato,
#servicos,
#faq { color: var(--text-primary); }
#especialidade { background: linear-gradient(170deg, #150E09 0%, #0E0906 100%); }
.section-prato { background: linear-gradient(155deg, #160F0A 0%, #100B07 100%); }
/* overflow-x: clip (e não hidden) por causa do carrossel de serviços, que
   sangra até as bordas com 100vw: o clip corta a sobra horizontal sem criar
   um contexto de rolagem, então o brilho dos cards continua vazando por
   cima e por baixo normalmente. */
#servicos { background: linear-gradient(160deg, #17100A 0%, #110C07 100%); overflow-x: clip; }
#faq { background: linear-gradient(200deg, #130D08 0%, var(--bg-primary) 100%); }

/* Seções sem foto (Especialidade, Monte seu prato): um brilho âmbar suave
   nas bordas de cima e de baixo pra cor sólida não ficar "seca". */
#especialidade, .section-prato { position: relative; overflow: hidden; }
#especialidade > .container, .section-prato > .container { position: relative; z-index: 1; }
#especialidade::before, .section-prato::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0; left: 0; right: 0;
  height: 220px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(215, 162, 83, 0.1), transparent 75%);
  pointer-events: none;
}
#especialidade::after, .section-prato::after {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: 0; left: 0; right: 0;
  height: 220px;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(169, 94, 50, 0.14), transparent 75%);
  pointer-events: none;
}

/* ---------- Sobre ----------
   Mesmo desenho da seção "Sobre mim" da referência: texto à esquerda,
   retrato à direita num quadro dourado deslocado, e no pé da coluna de
   texto um número grande ao lado da lista de credenciais. É a seção que
   recebeu o que saiu do hero (as 4 estatísticas e a nota do Google), pra o
   hero voltar a ser uma faixa horizontal em vez de uma pilha vertical. */
.sobre-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.sobre-copy .section-title { max-width: 16ch; }
.sobre-copy .section-lead { max-width: 54ch; }
.sobre-copy .section-lead + .section-lead { margin-top: 18px; }

.sobre-tagline {
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--gold-light);
  margin: 0 0 22px;
}

/* Retrato num quadro dourado deslocado: o ::before é o segundo retângulo
   que aparece atrás, subindo pra direita, como na referência. */
.sobre-retrato {
  position: relative;
  margin: 0;
  border-radius: calc(var(--radius) + 6px);
  aspect-ratio: 4/5;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-gold-faint);
  isolation: isolate;
  /* Sem overflow:hidden de propósito: o quadro dourado abaixo é um
     ::before que sai pra fora das bordas, e recortar aqui o apagaria. O
     arredondamento é aplicado direto na imagem e na legenda. */
}
.sobre-retrato::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -22px -22px 22px 22px;
  border: 1px solid var(--border-gold);
  border-radius: calc(var(--radius) + 14px);
  pointer-events: none;
}
.sobre-retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
  border-radius: inherit;
}
/* A foto é de estúdio de fundo branco: sem véu ela vira um bloco claro no
   meio da página escura, e a legenda por cima some. */
.sobre-retrato figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 70px 26px 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(13, 9, 6, 0.62) 45%, rgba(13, 9, 6, 0.92) 100%);
  /* Acompanha o arredondamento da foto — sem overflow:hidden no pai, os
     cantos de baixo apareceriam quadrados. */
  border-radius: 0 0 calc(var(--radius) + 5px) calc(var(--radius) + 5px);
}
.sobre-retrato-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.sobre-retrato-nome {
  font-family: var(--font-title);
  font-size: 1.32rem;
  color: var(--text-primary);
}

/* Pé da coluna de texto: número grande + credenciais, separados do corpo
   por um filete. */
.sobre-provas {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(26px, 4vw, 54px);
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--border-gold-faint);
}
.sobre-destaque strong {
  display: block;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: lining-nums proportional-nums;
}
.sobre-destaque-label {
  display: block;
  margin: 10px 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-primary);
}
.sobre-destaque p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.sobre-destaque a { color: var(--gold-primary); }
.sobre-destaque a:hover { color: var(--gold-light); text-decoration: underline; }

.sobre-credenciais {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sobre-credenciais li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.sobre-credenciais strong {
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: lining-nums proportional-nums;
}
.sobre-cred-icone {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  background: var(--gold-halo);
  color: var(--gold-primary);
}
.sobre-cred-icone svg { width: 15px; height: 15px; }

/* ---------- Localização ---------- */
.local-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.local-visual { display: flex; flex-direction: column; gap: 18px; }
/* Com a foto do Núcleo em cima, o mapa fica mais baixo pra coluna não
   ficar desproporcional em relação ao texto ao lado. */
.local-visual .local-mapa { aspect-ratio: 16 / 10; }
.local-foto {
  position: relative;
  margin: 0;
  border-radius: calc(var(--radius) + 8px);
  overflow: hidden;
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow);
}
/* height:auto e necessario: o atributo height="500" do HTML vira altura
   usada e ganha do aspect-ratio se a gente nao zerar. */
.local-foto img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.local-foto figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 18px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  background: linear-gradient(180deg, transparent, rgba(13, 9, 6, 0.82));
}
.local-mapa {
  position: relative;
  padding: 12px;
  background: var(--surface-card);
  border-radius: calc(var(--radius) + 8px);
  aspect-ratio: 4/3;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-gold-faint);
}
.local-mapa iframe { width: 100%; height: 100%; border: 0; display: block; border-radius: var(--radius-sm); }
.mapa-corner {
  position: absolute;
  width: 26px; height: 26px;
  border: 3px solid var(--gold-light);
  z-index: 2;
  pointer-events: none;
}
.mapa-corner-tl { top: -3px; left: -3px; border-right: none; border-bottom: none; border-top-left-radius: 10px; }
.mapa-corner-tr { top: -3px; right: -3px; border-left: none; border-bottom: none; border-top-right-radius: 10px; }
.mapa-corner-bl { bottom: -3px; left: -3px; border-right: none; border-top: none; border-bottom-left-radius: 10px; }
.mapa-corner-br { bottom: -3px; right: -3px; border-left: none; border-top: none; border-bottom-right-radius: 10px; }
.local-copy .section-title { max-width: none; }
.local-copy .section-lead { max-width: none; color: rgba(244, 239, 231, 0.72); }
.local-endereco {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--border-gold-faint);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 24px 0 28px;
}
.local-endereco-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1.4; }
.local-endereco strong { display: block; margin-bottom: 2px; }
.local-endereco span { font-size: 0.85rem; color: rgba(244, 239, 231, 0.6); }

/* Selo discreto da logo do Método SELF — mesma linguagem visual do
   .local-endereco (mesmo card claro), mas mais baixo, sem chamar mais
   atenção do que o próprio endereço. */
.local-metodo-self {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  padding-left: 4px;
}
.local-metodo-self img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  flex-shrink: 0;
}
.local-metodo-self span { font-size: 0.82rem; color: rgba(244, 239, 231, 0.6); }
.local-metodo-self strong { color: var(--gold-primary); font-weight: 600; }
.local-info-grid { display: flex; gap: 32px; margin-bottom: 28px; }
.local-info-item strong { display: block; font-family: var(--font-title); font-size: 1.1rem; color: var(--text-primary); }
.local-info-item span { font-size: 0.8rem; color: rgba(244, 239, 231, 0.6); }
.local-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Textura decorativa de frutas/verduras ---------- */
.section-decor { position: relative; overflow: hidden; }
.section-decor > .container { position: relative; z-index: 1; }
.decor-frutas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* As frutas decorativas são fotos coloridas (abacate, laranja). Em cor
   original elas jogam verde de volta na página — exatamente o que esta
   direção de arte tirou. O filtro converte pra um monocromático âmbar,
   então elas viram textura dourada de fundo em vez de fruta verde. */
.decor-item {
  position: absolute;
  width: 420px;
  height: auto;
  opacity: 0.1;
  filter: blur(0.5px) grayscale(1) sepia(0.85) saturate(2.2) brightness(0.8);
}
.df-1 { top: -50px; left: -80px; transform: rotate(-10deg); }
.df-2 { bottom: -60px; right: -70px; transform: rotate(8deg); }
@media (max-width: 960px) {
  .decor-item { width: 260px; }
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
}
.cards-grid-4 { grid-template-columns: repeat(4, 1fr); }

.feature-card, .service-card, .testimonial-card {
  position: relative;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-gold-faint);
  border-radius: var(--radius);
  padding: 32px 26px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease,
              border-color 0.35s ease, background-color 0.35s ease;
}
.feature-card:hover, .service-card:hover {
  transform: translateY(-2px);
  background: var(--surface-card-hover);
  box-shadow: var(--shadow);
  border-color: var(--border-gold);
}
.feature-card::before, .service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(215, 162, 83, 0.14), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.feature-card:hover::before, .service-card:hover::before { opacity: 1; }
.feature-card > *, .service-card > * { position: relative; }
.feature-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(157, 102, 46, 0.16);
  border: 1px solid var(--border-gold);
  box-shadow: inset 0 0 0 1px rgba(244, 239, 231, 0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 18px;
}

/* Ícones em traço, herdando a cor da marca por currentColor.
   Até 2026-09-09 isso aqui eram emoji do sistema: cada SO desenha o seu,
   todos coloridos, e num site quase preto + dourado eles entravam como
   corpo estranho — no Android o ⚠️ vinha amarelo, o 🧍 azul. Em traço a
   família fica coerente e o desenho é o mesmo em qualquer aparelho. */
.feature-icon svg { width: 26px; height: 26px; color: var(--gold-light); }
.local-endereco-icon svg,
.perfil-meta-icon svg,
.prato-leitura-icon svg {
  width: 20px; height: 20px;
  display: block;
  color: var(--gold-primary);
}
.feature-card h3, .service-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.feature-card p, .service-card p { color: rgba(244, 239, 231, 0.72); font-size: 0.95rem; margin: 0; }

.cta-inline { text-align: center; margin-top: 48px; }

/* ---------- Cartões "brotando" (seção "Sobre") ----------
   Entrada com zoom + bounce suave (brota na tela), staggered por card via
   --sprout-i. No hover, o ícone gira de leve e um traço cresce da esquerda
   pra direita embaixo do texto — como uma raiz/sublinhado que nasce. */
.reveal-hidden.cards-sprout .card-sprout {
  opacity: 0;
  transform: scale(0.82) translateY(18px);
}
.reveal-hidden.cards-sprout.is-revealed .card-sprout {
  animation: sprout-in 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--sprout-i, 0) * 0.15s);
}
@keyframes sprout-in {
  0%   { opacity: 0; transform: scale(0.82) translateY(18px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.card-sprout .feature-icon { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.card-sprout:hover .feature-icon { transform: rotate(-8deg) scale(1.1); }
.card-sprout::after {
  content: '';
  position: absolute;
  left: 32px; right: 32px; bottom: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-light), var(--bronze));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-sprout:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .reveal-hidden.cards-sprout .card-sprout { opacity: 1; transform: none; }
  .reveal-hidden.cards-sprout.is-revealed .card-sprout { animation: none; }
}

/* ---------- Luz circulando a borda (Especialidade, Monte seu prato, Como funciona) ---------- */
@property --glow-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.glow-card { position: relative; }
.glow-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from var(--glow-angle), transparent 0deg, transparent 230deg, #8A5A18 260deg, var(--gold-light) 285deg, #F0CE8F 305deg, #FFF4E6 315deg, #F0CE8F 325deg, var(--gold-light) 345deg, transparent 360deg);
  filter: drop-shadow(0 0 7px rgba(215, 162, 83, 0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: glow-rotate 3.4s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes glow-rotate { to { --glow-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .glow-card::after { animation: none; }
}

/* ---------- Carrossel de serviços (coverflow) ----------
   Formato e animação pedidos pelo Anísio, no mesmo desenho do site da Dra.
   Stephany Farfán: a faixa desliza sozinha bem devagar, o card do centro
   fica em destaque (nítido, escala cheia, borda dourada e selo) e os
   laterais recuam com escala, rotação em Y e desfoque. A posição de cada
   card é calculada no JS (ver "Carrossel de serviços" em main.js) — aqui
   ficam só a aparência e a transição.

   As classes são .svc-* de propósito: .service-card já existe no projeto
   como card de grade (Especialidade, Monte seu prato) e não pode ser
   reaproveitada aqui. */

.svc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.svc-head-intro .section-title { margin-bottom: 0; }

.svc-nav { display: flex; gap: 12px; padding-bottom: 6px; }
.svc-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.svc-btn:hover { border-color: var(--gold-primary); color: var(--gold-light); background: rgba(215, 162, 83, 0.07); }
.svc-btn svg { width: 18px; height: 18px; }

/* Sangra até as bordas da tela: os cards laterais precisam de espaço pra
   escapar da coluna de conteúdo, senão o coverflow fica espremido. */
.svc-carousel {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-top: 56px;
  padding: 0 4vw;
  /* O .svc-track cria contexto de empilhamento (por causa do perspective),
     então o z-index dos cards fica preso lá dentro e o carrossel inteiro
     disputa como um bloco só. Sem este z-index, o bloco seguinte da seção
     (que tem transform vindo do reveal-on-scroll) passa por cima e come o
     clique dos botões do card. */
  z-index: 1;
}
.svc-track {
  position: relative;
  perspective: 1800px;
  touch-action: pan-y;
}

/* Estado sem JS (padrão): os cards ficam empilhados numa coluna normal e os
   detalhes já vêm abertos, então o conteúdo continua legível se o script
   falhar. O coverflow só entra quando o JS marca a faixa com .is-ready —
   mesmo princípio do reveal-on-scroll do resto do site. */
.svc-card {
  position: relative;
  width: min(400px, 84vw);
  margin: 0 auto 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.5s ease, border-color 0.5s ease;
}

.svc-track.is-ready { cursor: grab; }
.svc-track.is-ready:active { cursor: grabbing; }
.svc-track.is-ready .svc-card {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  cursor: pointer;
  will-change: transform, opacity, filter;
}
.svc-card.is-active {
  cursor: default;
  border-color: var(--border-gold-strong);
  box-shadow:
    0 0 0 1px rgba(215, 162, 83, 0.2),
    0 0 70px 8px rgba(169, 94, 50, 0.4),
    0 40px 90px rgba(0, 0, 0, 0.6);
}

.svc-media { position: relative; }
/* Parte das fotos dos serviços foi feita em fundo claro (parede branca,
   estúdio cinza) e, sem tratamento, o topo do card vira um bloco claro no
   meio da página escura. A vinheta escurece só as bordas e a base — o
   centro, onde está o rosto dele, fica intacto — e ainda dá contraste pro
   selo "Destaque" no canto. Mesmo tratamento da foto do "Sobre". */
.svc-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 82% 76% at 50% 42%, transparent 48%, rgba(13, 9, 6, 0.4) 100%),
    linear-gradient(180deg, rgba(13, 9, 6, 0.28) 0%, transparent 26%, transparent 62%, rgba(13, 9, 6, 0.5) 100%);
}
/* height:auto é obrigatório: o atributo height="500" do HTML vale como
   altura declarada e ganha do aspect-ratio se a gente não zerar. */
.svc-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

/* Selo e botão de expandir só aparecem no card do centro. */
/* z-index acima da vinheta: o ::after do .svc-media é o último filho dele,
   então sem isso ele pinta por cima do selo e do botão — o botão, que fica
   metade dentro e metade fora da foto, aparecia com a metade de cima
   escurecida, como se estivesse cortado ao meio. */
.svc-badge {
  position: absolute;
  z-index: 2;
  top: 16px; right: 16px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(13, 9, 6, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border-gold-strong);
  color: var(--gold-light);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.svc-badge svg { width: 12px; height: 12px; }
.svc-card.is-active .svc-badge { opacity: 1; }

.svc-expand {
  position: absolute;
  z-index: 2;
  right: 16px; bottom: -18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-primary));
  color: var(--text-on-gold);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.svc-expand svg { width: 16px; height: 16px; }
.svc-card.is-active .svc-expand { opacity: 1; transform: scale(1); }

.svc-body { padding: 30px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.svc-tag {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-primary);
  margin-bottom: 10px;
}
.svc-body h3 { font-size: 1.4rem; color: var(--text-primary); margin-bottom: 14px; }
.svc-label {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--gold-light);
  margin-bottom: 6px;
}
.svc-desc { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 18px; }

.svc-details {
  list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 0.82rem; color: var(--text-secondary);
  margin: 0; padding: 0;
}
.svc-details li { display: flex; gap: 8px; }
.svc-details li::before { content: '—'; color: var(--gold-primary); flex-shrink: 0; }
/* Só recolhe quando o JS assumiu — sem ele o botão não funcionaria e a
   lista ficaria inacessível. */
.svc-track.is-ready .svc-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.svc-track.is-ready .svc-card.is-open .svc-details { max-height: 300px; }
/* No modal a lista é sempre aberta, mesmo com a faixa em modo coverflow. */
.svc-modal .svc-details { max-height: none; overflow: visible; }

/* O botão só aparece quando há JS pra abrir/fechar — sem ele a lista já
   está visível e o botão seria um controle morto. O `display` fica só nas
   duas regras abaixo, senão a declaração daqui sobrescreveria o none. */
.svc-toggle {
  display: none;
  margin-top: auto;
  padding: 16px 0 0;
  background: none; border: none;
  color: var(--gold-light);
  font-size: 0.82rem; font-weight: 600; text-align: left;
  cursor: pointer;
  align-items: center; gap: 6px;
}
.svc-track.is-ready .svc-toggle { display: flex; }
.svc-toggle:hover { color: var(--gold-lighter); }
.svc-toggle svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
.svc-card.is-open .svc-toggle svg { transform: rotate(180deg); }

@media (max-width: 640px) {
  .svc-track { height: 600px; }
}

/* ---------- Modal de detalhes do serviço (telas grandes) ----------
   No card do carrossel a lista inteira não cabe sem estourar a altura da
   faixa, então em tela grande o "Ver detalhes" abre esse painel. Abaixo de
   900px o mesmo botão abre o accordion dentro do card. */

.svc-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 5, 3, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.svc-modal.is-open { opacity: 1; pointer-events: auto; }

.svc-modal-panel {
  position: relative;
  width: 100%;
  max-width: 660px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  border: 1px solid var(--border-gold);
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.65);
  transform: translateX(36px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s ease;
}
.svc-modal.is-open .svc-modal-panel { transform: translateX(0); opacity: 1; }

.svc-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(13, 9, 6, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.svc-modal-close:hover { background: rgba(215, 162, 83, 0.3); border-color: var(--border-gold-strong); }
.svc-modal-close svg { width: 18px; height: 18px; }

.svc-modal-media { position: relative; }
.svc-modal-media img { width: 100%; height: 290px; object-fit: cover; display: block; }
.svc-modal-media .svc-tag {
  position: absolute;
  left: 26px; bottom: -14px;
  margin: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  padding: 8px 16px;
  border-radius: 999px;
}

.svc-modal-body { padding: 34px 32px 30px; }
.svc-modal-body h3 { font-size: 1.85rem; color: var(--text-primary); margin-bottom: 24px; }
.svc-modal-body .svc-label { display: block; margin-top: 22px; }
.svc-modal-body .svc-label:first-of-type { margin-top: 0; }
.svc-modal-body .svc-desc { font-size: 0.98rem; color: var(--text-secondary); margin-bottom: 0; }
.svc-modal-body .svc-details {
  max-height: none;
  overflow: visible;
  gap: 11px;
  font-size: 0.9rem;
  margin-top: 10px;
}

.svc-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(244, 239, 231, 0.1);
}
.svc-modal-link { color: var(--gold-light); font-size: 0.88rem; font-weight: 600; }
.svc-modal-link:hover { color: var(--gold-lighter); }

body.svc-modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .svc-modal-media img { height: 220px; }
  .svc-modal-body { padding: 30px 22px 26px; }
}

/* ---------- Steps ----------
   Já foi um "scroll stack" com position:sticky, mas o sticky junto com a
   animação do glow-card (@property + conic-gradient) travava a luz —
   ela parava de girar assim que o card ficava fixo. Virou uma lista
   normal, igual às outras seções com glow-card. */

.steps {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 48px auto 0;
}
.step {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--surface-card);
  border: 1px solid var(--border-gold-faint);
  border-radius: var(--radius);
  padding: 30px 34px;
  box-shadow: 0 24px 44px -28px rgba(0, 0, 0, 0.7);
  margin-bottom: 22px;
  transition: border-color 0.35s ease, background-color 0.35s ease;
}
.step:hover { border-color: var(--border-gold); background: var(--surface-card-hover); }
.step-num {
  font-family: var(--font-title);
  font-size: 2.8rem;
  font-weight: 500;
  color: var(--gold-primary);
  flex-shrink: 0;
}
.step h3 { font-size: 1.2rem; margin-bottom: 6px; }
.step p { color: rgba(244, 239, 231, 0.72); margin: 0; font-size: 0.95rem; }
.step-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.step-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-primary);
}
.step-link:hover { color: var(--gold-lighter); text-decoration: underline; }

/* ---------- Monte seu prato ---------- */

.voltar-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.voltar-link:hover { color: var(--text-primary); }

/* ---------- Perfil (estimativa de meta calórica) ---------- */

.perfil-card {
  margin-top: 44px;
  background: rgba(244, 239, 231, 0.05);
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  padding: 28px;
}
.perfil-card h3 { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 18px; }
.perfil-card-sub { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: rgba(244, 239, 231, 0.6); }

.perfil-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.6fr;
  gap: 14px;
}
.perfil-field { display: flex; flex-direction: column; gap: 6px; }
.perfil-field span { font-size: 0.76rem; color: rgba(244, 239, 231, 0.65); }
.perfil-field input, .perfil-field select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: rgba(244, 239, 231, 0.08);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.88rem;
}
.perfil-field input::placeholder { color: rgba(244, 239, 231, 0.4); }
/* <option> nativa: o navegador renderiza a lista com fundo claro
   independente do tema da página, então o texto continua escuro aqui de
   propósito (ver nota em --text-on-gold no :root). */
.perfil-field select option { color: var(--text-on-gold); }

.perfil-meta {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.perfil-meta-icon { font-size: 1.2rem; }
.perfil-meta p { margin: 0; font-size: 0.88rem; color: rgba(244, 239, 231, 0.82); }
.perfil-meta strong { color: var(--gold-primary); }

/* ---------- Seletor de refeição ---------- */

.refeicao-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.refeicao-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(244, 239, 231, 0.05);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.refeicao-tab.is-active { background: var(--gold-light); border-color: var(--gold-light); color: var(--text-on-gold); }

.prato-app {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
  background: rgba(244, 239, 231, 0.05);
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  padding: 28px;
}

.prato-busca {
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(244, 239, 231, 0.08);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.88rem;
  margin-bottom: 16px;
}
.prato-busca::placeholder { color: rgba(244, 239, 231, 0.45); }

.prato-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.prato-tab {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.prato-tab.is-active { background: var(--gold-light); border-color: var(--gold-light); color: var(--text-on-gold); }

.prato-foods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 6px;
}
.prato-food-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(244, 239, 231, 0.06);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.prato-food-card:hover { background: rgba(244, 239, 231, 0.12); transform: translateY(-2px); }
.prato-food-card .icone { font-size: 1.4rem; }
.prato-food-card .info { display: flex; flex-direction: column; gap: 2px; }
.prato-food-card .nome { font-size: 0.85rem; font-weight: 600; }
.prato-food-card .kcal { font-size: 0.72rem; color: var(--gold-primary); }
.prato-foods-vazio { grid-column: 1 / -1; font-size: 0.85rem; color: rgba(244, 239, 231, 0.6); text-align: center; padding: 24px 0; }

.prato-resumo {
  background: var(--surface-card);
  color: var(--text-primary);
  border-radius: 18px;
  padding: 26px;
}
.prato-resumo h3 {
  font-size: 1.1rem;
  margin-bottom: 14px;
}

/* ---------- Prato visual (a louça se montando) ---------- */

.prato-visual {
  position: relative;
  width: 190px;
  height: 190px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, #FBF7EA 55%, #EFE8CF 100%);
  box-shadow:
    inset 0 0 0 7px rgba(26, 18, 12, 0.05),
    inset 0 2px 10px rgba(26, 18, 12, 0.08),
    0 16px 30px -18px rgba(13, 9, 6, 0.45);
}
.prato-visual::before {
  content: '';
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  border: 1px dashed rgba(26, 18, 12, 0.14);
}
.prato-visual-empty {
  position: absolute;
  inset: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.4;
  color: #9A8F82;
}
.prato-visual-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)));
  font-size: var(--icon-size, 1.7rem);
  line-height: 1;
}
.prato-visual-item .pop {
  display: inline-block;
  filter: drop-shadow(0 4px 6px rgba(13, 9, 6, 0.3));
  animation: plate-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes plate-pop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .prato-visual-item .pop { animation: none; }
}
.prato-lista { display: flex; flex-direction: column; gap: 8px; max-height: 190px; overflow-y: auto; margin-bottom: 18px; }
.prato-vazio { font-size: 0.85rem; color: rgba(244, 239, 231, 0.6); }
.prato-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(244, 239, 231, 0.07);
  border-radius: 10px;
  padding: 8px 10px;
  animation: item-pop 0.25s ease;
}
@keyframes item-pop {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.prato-item .icone { font-size: 1.1rem; }
.prato-item .nome { flex: 1; font-size: 0.85rem; font-weight: 500; color: var(--text-primary); }
.prato-item input[type="number"] {
  width: 56px;
  padding: 5px 6px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: rgba(244, 239, 231, 0.08);
  color: var(--text-primary);
  font-size: 0.8rem;
  text-align: center;
  font-family: inherit;
  /* Sem as setinhas nativas: o navegador as pinta com fundo claro e elas
     viram dois blocos brancos dentro de um campo escuro. */
  appearance: textfield;
  -moz-appearance: textfield;
}
.prato-item input[type="number"]::-webkit-inner-spin-button,
.prato-item input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.prato-item .unidade { font-size: 0.72rem; color: rgba(244, 239, 231, 0.6); }
.prato-item select.prato-unidade {
  max-width: 92px;
  padding: 5px 6px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  font-size: 0.72rem;
  font-family: inherit;
  color: rgba(244, 239, 231, 0.75);
  background: rgba(244, 239, 231, 0.08);
}
.prato-item .remover {
  background: none;
  border: none;
  color: var(--gold-primary);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 4px;
}

.prato-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 0;
  margin-bottom: 18px;
}
.prato-total span { font-size: 0.85rem; color: rgba(244, 239, 231, 0.65); }
.prato-total strong { font-family: var(--font-title); font-size: 1.8rem; color: var(--text-primary); }

.macro-bars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.macro-bar-row { display: grid; grid-template-columns: 78px 1fr 46px; align-items: center; gap: 10px; }
.macro-label { font-size: 0.78rem; color: rgba(244, 239, 231, 0.72); }
.macro-track { height: 8px; border-radius: 999px; background: rgba(244, 239, 231, 0.12); overflow: hidden; }
.macro-fill { height: 100%; width: 0%; border-radius: 999px; transition: width 0.5s ease; }
/* Três macros, três degraus da mesma escala âmbar — dá pra diferenciar as
   barras sem inventar cor fora da paleta. */
.macro-proteina { background: var(--gold-lighter); }
.macro-carbo { background: var(--gold-primary); }
.macro-gordura { background: var(--gold-dark); }
.macro-value { font-size: 0.78rem; text-align: right; color: rgba(244, 239, 231, 0.72); }

.prato-leitura {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(244, 239, 231, 0.07);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}
.prato-leitura-icon { font-size: 1.3rem; }
.prato-leitura p { margin: 0; font-size: 0.86rem; color: rgba(244, 239, 231, 0.85); }

.prato-disclaimer {
  font-size: 0.74rem;
  color: rgba(244, 239, 231, 0.6);
  margin: 14px 0 0;
}
.prato-disclaimer a { color: var(--gold-primary); text-decoration: underline; }

/* ---------- Resumo do dia (todas as refeições) ---------- */

.dia-resumo {
  margin-top: 24px;
  background: rgba(244, 239, 231, 0.05);
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  padding: 28px;
}
.dia-resumo h3 { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 16px; }

.dia-resumo-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(244, 239, 231, 0.12);
  overflow: hidden;
}
.dia-resumo-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--bronze);
  transition: width 0.4s ease, background-color 0.3s ease;
}
.dia-resumo-fill.over { background: var(--gold-light); }

.dia-resumo-legenda {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 20px;
  font-size: 0.82rem;
  color: rgba(244, 239, 231, 0.75);
}
.dia-resumo-legenda strong { color: var(--text-primary); font-family: var(--font-title); font-size: 1.05rem; }

.dia-resumo-refeicoes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.dia-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  text-align: center;
}
.dia-chip.is-active { border-color: var(--gold-light); background: rgba(215, 162, 83, 0.12); }
.dia-chip-icone { font-size: 1.3rem; }
.dia-chip-nome { font-size: 0.78rem; color: rgba(244, 239, 231, 0.75); }
.dia-chip-kcal { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); }

/* ---------- Depoimentos: carrossel horizontal automático ---------- */
.testimonial-marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  margin-top: 44px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
}
.testimonial-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: testimonial-scroll 30s linear infinite;
}
.testimonial-marquee:hover .testimonial-track,
.testimonial-marquee:focus-within .testimonial-track { animation-play-state: paused; }
.testimonial-track { padding: 6px 0 22px; }
.testimonial-track .testimonial-card { flex: 0 0 360px; min-height: 250px; justify-content: center; }
@keyframes testimonial-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(var(--marquee-distance, -50%)); }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-track { animation: none; overflow-x: auto; }
}
@media (max-width: 960px) {
  .testimonial-track .testimonial-card { flex-basis: 280px; min-height: 220px; }
}

/* ---------- Depoimentos ---------- */

.testimonial-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  border-style: dashed;
}
.testimonial-placeholder .avatar-placeholder {
  width: 72px; height: 72px;
  font-size: 1.7rem;
  border-width: 2px;
}
.testimonial-placeholder-stars { color: var(--gold-primary); letter-spacing: 2px; font-size: 1.05rem; opacity: 0.6; }
.testimonial-placeholder p { color: rgba(244, 239, 231, 0.6); font-size: 0.92rem; margin: 0; }

/* Cartão da nota real do Google (4,9 / 214 avaliacoes) — o dado ja existia
   no hero e no schema da pagina, aqui ele vira prova social no carrossel. */
.testimonial-google {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  border-color: var(--border-gold);
}
.testimonial-google-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-primary);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  padding: 3px 12px;
}
.testimonial-google-nota {
  font-family: var(--font-title);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--text-primary);
}
.testimonial-google p { margin: 0; font-size: 0.88rem; color: rgba(244, 239, 231, 0.65); }
.testimonial-google p strong { color: var(--text-primary); }

/* Espaco reservado pra depoimento real ainda nao enviado — sem texto
   fabricado e sem nome de paciente. */
.testimonial-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  border-style: dashed;
  border-color: var(--border-gold);
  background: transparent;
}
.testimonial-vazio-selo {
  font-family: var(--font-title);
  font-size: 3.4rem;
  line-height: 0.6;
  color: var(--border-gold-strong);
}
.testimonial-vazio p { margin: 0; font-size: 0.9rem; color: rgba(244, 239, 231, 0.6); max-width: 240px; }

/* Convite pra avaliar no Google — o botao de verdade fica fora do
   carrossel (o marquee clona os cards, entao link dentro dele duplicaria
   o destino pra leitores de tela). */
.testimonial-convite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  border-color: var(--border-gold-strong);
  background: linear-gradient(160deg, var(--gold-halo), transparent 70%), var(--surface-card);
}
/* Cinco estrelas, não uma. Uma estrela solta, num card dentro da faixa de
   depoimentos, lê como avaliação de 1 — é a leitura errada logo na
   primeira impressão. Mesma métrica das outras faixas de estrela da
   seção, pra as três lerem como uma família. */
.testimonial-convite-icone {
  font-size: 1.1rem;
  letter-spacing: 2px;
  color: var(--gold-light);
}
.testimonial-convite p { margin: 0; font-size: 0.92rem; color: var(--text-primary); max-width: 250px; }
.testimonial-convite-cta { font-size: 0.85rem; font-weight: 700; color: var(--gold-primary); }

.testimonial-real {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.testimonial-real-stars { color: var(--gold-light); letter-spacing: 2px; font-size: 1.1rem; }
.testimonial-real-quote { font-style: italic; font-size: 0.95rem; color: var(--text-primary); margin: 0; }
.testimonial-real-result { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.testimonial-real-result strong { font-family: var(--font-title); font-size: 1.3rem; color: var(--text-primary); }
.testimonial-real-result span { font-size: 0.78rem; color: rgba(244, 239, 231, 0.65); }

/* ---------- Galeria ---------- */

.gallery-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  grid-auto-flow: dense;
  gap: 18px;
}
.gallery-item-lg { grid-column: span 2; grid-row: span 2; }
.gallery-item-wide { grid-column: span 2; }
.gallery-item-tall { grid-row: span 2; }

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--surface-card);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.gallery-item:not(.is-placeholder):hover img { transform: scale(1.06); }
.gallery-item:not(.is-placeholder)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(13, 9, 6, 0.45) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-item:not(.is-placeholder):hover::after { opacity: 1; }

.gallery-item.is-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px dashed var(--border-gold);
  cursor: default;
}
.gallery-placeholder-icon { font-size: 1.8rem; opacity: 0.55; }
.gallery-placeholder-text { font-size: 0.78rem; color: rgba(244, 239, 231, 0.6); }

.gallery-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(13, 9, 6, 0.55);
  border: 1px solid rgba(244, 239, 231, 0.4);
  color: var(--text-primary);
  backdrop-filter: blur(2px);
  transition: transform 0.25s ease, background 0.25s ease;
}
.gallery-item-video:hover .gallery-play-icon { transform: translate(-50%, -50%) scale(1.08); background: rgba(215, 162, 83, 0.85); }

@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 14px; }
  .gallery-item-lg { grid-column: span 2; grid-row: span 2; }
  .gallery-item-wide { grid-column: span 2; grid-row: span 1; }
  .gallery-item-tall { grid-column: span 1; grid-row: span 2; }
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 7, 4, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-img {
  max-width: min(90vw, 900px);
  max-height: 86vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lightbox.is-open .lightbox-img { opacity: 1; transform: scale(1); }
.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 239, 231, 0.1);
  border: 1px solid rgba(244, 239, 231, 0.25);
  color: var(--text-primary);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(244, 239, 231, 0.22); }
.lightbox-close { top: 22px; right: 22px; width: 44px; height: 44px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }

/* Botão de som do vídeo da galeria */
.lightbox-sound {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(13, 9, 6, 0.62);
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
  z-index: 3;
}
.lightbox-sound:hover { background: rgba(13, 9, 6, 0.82); border-color: var(--border-gold-strong); }
.lightbox-sound .icon-som-off { display: none; }
.lightbox-sound.is-mudo .icon-som-off { display: block; }
.lightbox-sound.is-mudo .icon-som-on { display: none; }
/* Quando o autoplay com som é bloqueado, o rótulo vira um convite claro */
.lightbox-sound.is-mudo .lightbox-sound-texto { font-size: 0; }
.lightbox-sound.is-mudo .lightbox-sound-texto::after {
  content: 'Ativar som';
  font-size: 0.85rem;
}
@media (max-width: 640px) {
  .lightbox-nav { width: 42px; height: 42px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; }
}

/* ---------- Bioimpedância ---------- */

.section-band { background: linear-gradient(180deg, #120C08 0%, var(--bg-primary) 100%); }

.bio-compare-list {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bio-compare-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-gold-faint);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  font-weight: 600;
  color: var(--text-primary);
}
.bio-compare-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
}
.bio-arrow-down { background: rgba(157, 102, 46, 0.2); color: var(--gold-lighter); }
.bio-arrow-up { background: rgba(215, 162, 83, 0.16); color: var(--gold-primary); }
.bio-arrow-side { background: rgba(244, 239, 231, 0.08); color: rgba(244, 239, 231, 0.65); }

.bio-quote-section { position: relative; overflow: hidden; padding: 72px 0; background: var(--bg-elevated); }
.bio-quote-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(480px 320px at 50% 42%, rgba(215, 162, 83, 0.24), transparent 70%);
  animation: bio-breathe 4.5s ease-in-out infinite;
}
@keyframes bio-breathe {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.18); opacity: 1; }
}
.bio-quote-section .container { position: relative; z-index: 1; }
.bio-quote {
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.5;
  color: var(--text-primary);
  text-align: center;
  margin: 0;
}

/* ---------- Bioimpedância — Hero ---------- */

.bio-hero {
  position: relative;
  padding: 190px 0 90px;
  overflow: hidden;
  color: var(--text-primary);
  text-align: center;
}
.bio-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Foto de ambiente cheia de cor (azul do notebook, objetos vermelhos). Sem
   graduação ela briga com o âmbar do resto do site e come o contraste do
   texto por cima. Dessaturar + aquecer resolve os dois de uma vez. */
.bio-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 26%;
  filter: saturate(0.5) sepia(0.22) brightness(0.62);
}
.bio-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 620px at 50% 0%, var(--hero-overlay-1), transparent 62%),
    linear-gradient(180deg, var(--hero-overlay-2) 0%, var(--hero-overlay-3) 55%, var(--hero-overlay-4) 100%);
}
.bio-hero-scan {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(180deg, transparent 0%, rgba(199, 154, 92, 0.35) 48%, transparent 100%);
  background-size: 100% 260px;
  background-repeat: no-repeat;
  background-position: 0 -260px;
  animation: bio-scan-sweep 5.5s ease-in-out infinite;
}
@keyframes bio-scan-sweep {
  0%   { background-position: 0 -260px; opacity: 0; }
  10%  { opacity: 1; }
  55%  { background-position: 0 100%; opacity: 1; }
  70%  { opacity: 0; }
  100% { background-position: 0 100%; opacity: 0; }
}
.bio-hero-inner { position: relative; z-index: 2; }
.bio-hero .eyebrow { color: var(--gold-primary); }
.bio-hero .section-title { color: var(--text-primary); }
.bio-hero .section-lead { color: rgba(244, 239, 231, 0.8); margin: 0 auto; }
.voltar-link-light { color: rgba(244, 239, 231, 0.78); }
.voltar-link-light:hover { color: var(--text-primary); }

.bio-rings {
  display: flex;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.bio-ring-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bio-ring-svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.ring-track {
  fill: none;
  stroke: rgba(244, 239, 231, 0.16);
  stroke-width: 9;
}
.ring-fill {
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Os três anéis precisam continuar distinguíveis entre si (são dados
   diferentes), mas dentro da paleta: dois tons de âmbar + um azul-aço
   dessaturado, que dá pra diferenciar sem gritar no meio do dourado. */
.ring-fill-musculo { stroke: var(--gold-lighter); }
.ring-fill-agua { stroke: #7E97A8; }
.reveal-hidden.bio-rings.is-revealed .ring-fill { stroke-dashoffset: var(--ring-offset); }
.bio-rings:not(.reveal-hidden) .ring-fill { stroke-dashoffset: var(--ring-offset); }
.bio-ring-label strong {
  display: block;
  font-family: var(--font-title);
  font-size: 1.3rem;
  color: var(--text-primary);
}
.bio-ring-label span { font-size: 0.78rem; color: rgba(244, 239, 231, 0.68); }
.bio-rings-disclaimer {
  margin: 18px 0 0;
  font-size: 0.76rem;
  color: rgba(244, 239, 231, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .bio-hero-scan { animation: none; display: none; }
  .ring-fill { transition: none; stroke-dashoffset: var(--ring-offset); }
  .bio-quote-glow { animation: none; }
}
@media (max-width: 640px) {
  .bio-hero { padding: 170px 0 70px; }
  /* Os três anéis viram grade de colunas iguais. Em flex, o item crescia
     até a largura do próprio rótulo ("Massa livre de gordura" não quebra
     sozinho), a linha estourava a tela e o texto saía cortado na borda. */
  .bio-rings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
  }
  .bio-ring-item { min-width: 0; }
  .bio-ring-label { text-align: center; }
  .bio-ring-label strong { font-size: 1.05rem; }
  .bio-ring-label span { font-size: 0.7rem; line-height: 1.3; display: block; }
  .bio-ring-svg { width: 78px; height: 78px; }
}

/* ---------- Bioimpedância — seções com foto ---------- */

.bio-section-photo { position: relative; overflow: hidden; }
.bio-section-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 30%;
  filter: blur(3px) saturate(0.9);
  opacity: 0.1;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 22%, black 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, black 22%, black 78%, transparent);
}
.bio-section-photo > .container { position: relative; z-index: 1; }

.bio-split-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}
.bio-split-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.bio-split-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.bio-split-photo:hover img { transform: scale(1.045); }
@media (max-width: 860px) {
  .bio-split-inner { grid-template-columns: 1fr; gap: 28px; }
  .bio-split-reverse .bio-split-photo { order: -1; }
}

/* ---------- Bioimpedância — faixa de fotos ---------- */

.bio-strip {
  overflow: hidden;
  padding: 30px 0;
  background: var(--bg-elevated);
}
.bio-strip-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: hero-ticker-scroll 42s linear infinite;
}
.bio-strip-track .item {
  width: 230px;
  height: 156px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.bio-strip-track .item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
  .bio-strip-track { animation: none; overflow-x: auto; }
}
@media (max-width: 600px) {
  .bio-strip-track .item { width: 168px; height: 114px; }
}

/* ---------- Bioimpedância — setas com leve flutuação ---------- */
.bio-compare-arrow { animation: bio-arrow-float 2.6s ease-in-out infinite; }
.bio-compare-item:nth-child(2) .bio-compare-arrow { animation-delay: 0.15s; }
.bio-compare-item:nth-child(3) .bio-compare-arrow { animation-delay: 0.3s; }
.bio-compare-item:nth-child(4) .bio-compare-arrow { animation-delay: 0.45s; }
.bio-compare-item:nth-child(5) .bio-compare-arrow { animation-delay: 0.6s; }
@keyframes bio-arrow-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .bio-compare-arrow { animation: none; }
}

/* ---------- FAQ ---------- */

.faq-list { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--surface-card);
  border: 1px solid var(--border-gold-faint);
  border-radius: 14px;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  text-align: left;
  padding: 18px 20px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}
.faq-icon { font-size: 1.2rem; color: var(--gold-primary); transition: transform 0.25s ease; flex-shrink: 0; }
.faq-item:hover { border-color: var(--border-gold); }
.faq-item.is-open { border-color: var(--border-gold-strong); }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
/* 460px cobre as respostas mais longas do FAQ ampliado (preparo da
   bioimpedância, DietBox) sem cortar no mobile, onde o texto quebra mais. */
.faq-item.is-open .faq-answer { max-height: 460px; }
.faq-answer p { margin: 0 20px 18px; color: rgba(244, 239, 231, 0.72); font-size: 0.92rem; }

/* ---------- CTA final ---------- */

.cta-final {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 120% at 50% 0%, rgba(169, 94, 50, 0.22), transparent 68%),
    linear-gradient(160deg, #1A120C 0%, #100B07 100%);
  color: var(--text-primary);
  text-align: center;
  padding: clamp(76px, 8vw, 130px) 0;
  border-top: 1px solid var(--border-gold-faint);
  border-bottom: 1px solid var(--border-gold-faint);
}
.cta-final h2 {
  font-family: var(--font-title);
  color: var(--text-primary);
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  margin-bottom: 14px;
}
.cta-final p { color: rgba(244,239,231,0.75); margin-bottom: 32px; }
.cta-final-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */

.footer {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  padding: 56px 0 28px;
  border-top: 1px solid var(--border-gold-faint);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(244, 239, 231, 0.07);
}
.logo-footer .logo-text { color: var(--text-primary); }
.footer-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-nav a, .footer-social a { font-size: 0.88rem; transition: color 0.2s ease; }
.footer-nav a:hover, .footer-social a:hover { color: var(--gold-lighter); }

/* No dedo, os links do rodapé tinham 23px de altura — abaixo do mínimo
   confortável de toque. O padding cresce a área clicável sem mudar o
   desenho, e a margem negativa impede que a lista fique mais espaçada. */
@media (pointer: coarse), (max-width: 700px) {
  .footer-nav { gap: 10px 20px; }
  .footer-nav a, .footer-social a,
  .voltar-link, .svc-modal-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 4px 0;
  }
}
.footer-social { display: flex; gap: 18px; }
.footer-social a { display: inline-flex; align-items: center; gap: 7px; }
.footer-social svg { flex-shrink: 0; }
.footer-bottom { padding-top: 18px; font-size: 0.78rem; }

/* ---------- WhatsApp flutuante ---------- */

.whatsapp-float {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px -10px rgba(0,0,0,0.4);
  z-index: 80;
  animation: wa-pulse 2.6s ease-in-out infinite;
}
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 12px 24px -10px rgba(0,0,0,0.4), 0 0 0 0 rgba(37,211,102,0.5); }
  50% { box-shadow: 0 12px 24px -10px rgba(0,0,0,0.4), 0 0 0 10px rgba(37,211,102,0); }
}

/* ---------- Reveal on scroll ----------
   .reveal-up/.reveal-on-scroll são só marcadores. O estado escondido só é
   aplicado via JS (classe .reveal-hidden) pra quem já está fora da tela no
   carregamento — assim, sem JS (ou se o script falhar), o conteúdo continua
   visível por padrão em vez de sumir pra sempre. */

.reveal-hidden {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-hidden.is-revealed { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-hidden { opacity: 1; transform: none; transition: none; }
  .whatsapp-float { animation: none; }
}

/* ---------- Hero desktop: foto nítida à direita, texto à esquerda ----------
   Revisão com o Anísio em 2026-09-04: no desktop a headline caía em cima
   do rosto dele ("isso aí tem que sair da minha cara"). No mobile isso já
   tinha sido resolvido com padding-top grande; no desktop a mesma solução
   deixaria o hero alto demais, então o texto foi pro lado esquerdo.

   Revisão de 2026-09-07: a primeira versão desse layout usava um recorte
   (anisio-hero-cutout.webp) com blur na foto de fundo por trás. O Anísio
   pediu pra usar a FOTO em si, nítida, no mesmo tratamento do hero da
   Dra. Stephany Farfán — painel de foto real (não recorte/silhueta)
   ancorado numa lateral, se fundindo no fundo escuro por uma única
   borda em degradê, sem desfoque. Isso trocou:
   - .hero-bg-photo: de "cobre o hero inteiro, borrada" pra "painel
     retangular nítido, ancorado à direita, ponta a ponta (topo a
     baixo)";
   - o fundo do restante do hero (onde ficam eyebrow/título/CTA) deixa
     de ser a mesma foto borrada e passa a ser um degrade verde-escuro
     próprio, com um brilho dourado sutil, no mesmo espírito das outras
     seções escuras do site (Especialidade, FAQ etc).
   O recorte .hero-figure não é mais usado (ver seções antigas removidas);
   o arquivo .webp continua no projeto, sem uso, caso sirva depois.
   Abaixo de 1025px nada muda: continua a composição centralizada com a
   foto cheia (sem recorte, sem painel), como já era. */

@media (min-width: 1025px) {
  .hero {
    text-align: left;
    /* Ocupa a primeira viewport inteira, descontando o header fixo. */
    min-height: calc(100svh - var(--header-h));
    display: flex;
    flex-direction: column;
    /* O conteúdo começa por volta de 30% da altura útil — deliberadamente
       editorial, não colado no topo. O clamp em vh é o que segura o hero
       dentro de uma viewport em notebook baixo (1440x900). */
    padding: calc(var(--header-h) + clamp(36px, 9vh, 130px)) 0 0;
  }
  /* A foto é o elemento dominante da direita: alta, ancorada na base
     (os pés param em cima da faixa dourada) e integrada ao fundo pelo
     degradê do .hero-bg-overlay, sem recorte e sem blur — pedido
     explícito do Anísio, a foto tem que ser ela mesma, nítida. */
  /* Figura recortada ancorada na base, à direita. Sem máscara e sem painel:
     o recorte já tem fundo transparente, então ele encosta direto no fundo
     da seção. A foto original termina na cintura, então deixar a base
     passar por trás da faixa dourada corta ele exatamente onde a foto já
     acabava — e ainda dá pra ampliar a figura sem encostar na cabeça. */
  /* Onde a coluna de texto termina: início do container + padding + largura
     máxima do texto. A figura é ancorada A PARTIR daí, pela ESQUERDA, e não
     pela lateral direita da tela.

     Duas coisas quebravam quando ela era ancorada à direita: em monitor
     largo o vão entre o texto e ele crescia junto com a tela (369px em 1920
     contra 216px em 1440) e ele ficava largado no canto; e em tela alta a
     figura crescia (o clamp de altura) e comia o vão pro outro lado, até
     encostar no texto. Ancorada pela esquerda, o vão é sempre o mesmo,
     independente da largura E da altura da tela. */
  .hero {
    --hero-texto-w: min(560px, 44vw);
    --hero-texto-fim: calc(50% - min(640px, 50vw) + clamp(20px, 4vw, 56px) + var(--hero-texto-w));
  }

  .hero-bg-photo {
    inset: auto auto 0 auto;
    left: calc(var(--hero-texto-fim) + clamp(40px, 7vw, 110px));
    width: auto;
    /* 87% e não 100%: a 100% o topo da cabeça dele encostava na borda de
       cima do hero e ficava cortado pelo header fixo. */
    height: clamp(440px, 87%, 820px);
    aspect-ratio: 813 / 1157;
  }

  /* No desktop sobra mais canto livre à direita da cabeça dele, então a
     marca cresce um pouco. O posicionamento em si vem da regra base. */
  .hero-marca {
    top: calc(var(--header-h) + clamp(24px, 3.5vh, 54px));
    right: clamp(20px, 2.6vw, 52px);
    width: clamp(104px, 11vw, 186px);
  }
  .hero-bg-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
  }
  /* No desktop o véu sai de cena: ele existia pra dissolver o retângulo da
     foto e pra dar contraste ao texto por cima dela. Com a figura recortada
     o texto fica sobre o fundo escuro puro, então qualquer véu aqui só
     serviria pra escurecer o rosto dele à toa. */
  .hero-bg-overlay { display: none; }

  /* width:100% é obrigatório aqui: o .hero é flex column e o .container tem
     `margin: 0 auto`, e margem automática no eixo cruzado impede o stretch
     — a coluna encolhia pro tamanho do conteúdo e ficava centralizada na
     tela, jogando o texto pra cima da figura em vez de alinhá-lo à
     esquerda. */
  .hero-inner-v2 { align-items: flex-start; max-width: 1280px; width: 100%; }
  /* A coluna de texto para antes da figura, nada de headline encostando
     nele (foi exatamente a reclamação dele na revisão de 2026-09-04). É a
     mesma medida que alimenta o --hero-texto-fim, por isso vem do token:
     se a coluna encolhe num breakpoint, a figura acompanha sozinha. */
  .hero-inner-v2 > * { max-width: var(--hero-texto-w); }
  .hero-manifesto,
  .hero-lead { margin-left: 0; margin-right: 0; text-align: left; }
  /* Os três CTAs somam mais que a largura da coluna de texto, mas cabem
     folgados antes da figura — então essa linha específica não usa o
     max-width da coluna, senão "Sobre mim" cai sozinho pra linha de baixo. */
  .hero-cta-v2 { justify-content: flex-start; max-width: none; }

  /* A faixa dourada fecha o hero colada na base da viewport. */
  .hero-ticker { margin-top: auto; }
}

/* Entre 601 e 1024px continua a composição centralizada (a figura lateral
   não cabe), então vale a mesma solução do mobile: empurrar o texto pra
   baixo até depois do rosto. Sem isso o eyebrow encosta no queixo dele. */
@media (min-width: 601px) and (max-width: 1024px) {
  .hero { padding: 290px 0 0; }
}

/* Abaixo de 1025px o texto fica por cima do blazer branco da foto. Sem um
   véu extra a partir do começo do texto, o eyebrow e o manifesto (dourados)
   somem no claro. O véu começa transparente em cima — é onde está o rosto
   dele, que precisa aparecer — e só fecha da altura do texto pra baixo. */
@media (max-width: 1024px) {
  .hero-bg-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      transparent 0%,
      transparent 18%,
      rgba(15, 10, 6, 0.45) 34%,
      rgba(13, 9, 6, 0.78) 50%,
      rgba(13, 9, 6, 0.9) 100%);
  }
  /* O header é fixo e fica por cima do topo do hero: sem descer a foto, o
     alto da cabeça dele some atrás dele. */
  .hero-bg-photo { top: var(--header-h); }
  /* Em tela estreita, `cover` ampliava tanto o retrato que o rosto dele
     tomava metade da tela e a headline caía em cima do queixo. Com
     `contain` o retrato inteiro cabe na largura, ocupa só a faixa de cima
     e sobra fundo limpo pro texto — a máscara dissolve a base do recorte
     (que termina reto, na cintura) no fundo da seção. */
  .hero-bg-photo img {
    object-fit: contain;
    object-position: center top;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 96%);
    mask-image: linear-gradient(180deg, #000 58%, transparent 96%);
  }
}

/* Entre 1025 e 1240px o texto e o painel de foto ficam justos — o painel
   encolhe pra não encostar na headline. */
/* Faixa apertada do desktop: texto e figura dividem pouca largura, então a
   coluna de texto encolhe pra sobrar vão. O `width: 40%` que existia aqui
   era do tempo do painel retangular e sobrescrevia o `width: auto` da
   figura recortada, achatando ela. */
@media (min-width: 1025px) and (max-width: 1240px) {
  .hero { --hero-texto-w: min(460px, 43vw); }
  .hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.2rem); }
}

/* ---------- Mídia dentro dos cards ----------
   Pedido do Anísio (2026-09-04): "todos esses cardzinhos têm que ter
   imagem". Componente único usado em Sobre, Especialidade, Como funciona
   e Serviços, pra manter proporção, lazy loading e zoom no hover iguais
   em toda a página. */

.card-media {
  position: relative;
  display: block;
  margin: -32px -26px 20px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(157, 102, 46, 0.1);
  border-bottom: 1px solid var(--border-gold);
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-card:hover .card-media img,
.service-card:hover .card-media img { transform: scale(1.06); }
/* Véu de baixo pro título nunca disputar com a foto */
.card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(13, 9, 6, 0.28) 100%);
  pointer-events: none;
}
/* Com foto, o ícone vira selo dourado sobreposto na borda da imagem — fica
   metade sobre a foto, metade sobre o card, então precisa de um fundo
   com opacidade própria (mais sólido que o overlay translúcido normal
   dos cards) pra continuar legível em cima de qualquer foto. */
.card-media + .feature-icon {
  margin-top: -44px;
  margin-bottom: 14px;
  background: rgba(13, 9, 6, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-color: var(--border-gold-strong);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.6);
}
.step .card-media {
  margin: 0;
  width: 216px;
  flex-shrink: 0;
  /* Mesma proporção dos arquivos gerados (800x500), pra não recortar de
     novo e cortar o rosto de lado. */
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-gold);
  border-bottom-color: var(--border-gold);
}
.step .card-media img { border-radius: inherit; }
.step:hover .card-media img { transform: scale(1.06); }
/* No layout dos steps o número fica menor pra abrir espaço pra foto */
.step .step-num { font-size: 2.2rem; line-height: 1; }

/* Variante ilustrada: os três cards de gastroenterologia tratam de
   conceitos clínicos (trânsito intestinal, flora, supercrescimento
   bacteriano) e não existe foto real desses temas nos assets do projeto.
   Em vez de usar banco de imagem genérico, entram ilustrações em traço
   dourado sobre verde, no mesmo desenho do resto do site.
   PENDENTE: se o Anísio enviar fotos clínicas reais desses temas, é só
   trocar o <svg> por um <img> igual aos outros cards. */
.card-media-illus {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(215, 162, 83, 0.14), transparent 60%),
    linear-gradient(150deg, #1A110B 0%, #110B07 100%);
}
.card-media-illus::after { display: none; }
.card-media-illus svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-card:hover .card-media-illus svg { transform: scale(1.05); }
.illus-line {
  fill: none;
  stroke: var(--gold-lighter);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.illus-line-soft { stroke: rgba(215, 162, 83, 0.35); stroke-width: 1.6; }
.illus-dot { fill: var(--gold-lighter); }
.illus-dot-soft { fill: rgba(215, 162, 83, 0.45); }

/* ---------- Exame em destaque (teste respiratório) ---------- */
.exame-destaque {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0;
  margin-top: 28px;
  background: rgba(244, 239, 231, 0.05);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 44px -28px rgba(0, 0, 0, 0.55);
}
.exame-foto { position: relative; min-height: 240px; }
/* Foto clínica de ambiente hospitalar (azul forte de touca/luva). Um leve
   aquecimento e menos saturação bastam pra ela conversar com o âmbar do
   resto da página — sem alterar o que a imagem mostra. */
.exame-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.72) sepia(0.14) brightness(0.94);
}
.exame-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 55%, rgba(13, 9, 6, 0.5) 100%);
}
.exame-texto { padding: 32px 34px; align-self: center; }
.exame-texto h3 { font-size: 1.35rem; margin-bottom: 12px; }
.exame-texto p:not(.eyebrow) { color: rgba(244, 239, 231, 0.75); font-size: 0.97rem; margin: 0 0 20px; }
@media (max-width: 780px) {
  .exame-destaque { grid-template-columns: 1fr; }
  .exame-foto { aspect-ratio: 16 / 10; min-height: 0; }
  .exame-texto { padding: 26px 22px; }
}

/* ---------- Bioimpedância Online (seção da página de bioimpedância) ---------- */
.bio-online-head { max-width: 720px; }
.bio-online-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  margin-top: 44px;
  align-items: start;
}
.bio-online-passos { display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; }
.bio-online-passos li { display: flex; gap: 20px; align-items: flex-start; }
.bio-online-num {
  flex-shrink: 0;
  font-family: var(--font-title);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--gold-primary);
  padding-top: 2px;
  min-width: 46px;
  border-right: 1px solid var(--border-gold);
}
.bio-online-passos h3 { font-size: 1.05rem; margin-bottom: 5px; }
.bio-online-passos p { margin: 0; color: rgba(244, 239, 231, 0.72); font-size: 0.94rem; }
.bio-online-aside { display: flex; flex-direction: column; gap: 18px; }
.bio-online-foto {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-gold);
}
.bio-online-foto img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.bio-online-privacidade {
  background: var(--surface-card);
  border: 1px solid var(--border-gold-faint);
  border-left: 3px solid var(--border-gold-strong);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
}
.bio-online-privacidade h3 { font-size: 1rem; margin-bottom: 8px; }
.bio-online-privacidade p { margin: 0 0 10px; font-size: 0.9rem; color: rgba(244, 239, 231, 0.72); }
.bio-online-nota { font-size: 0.82rem !important; color: rgba(244, 239, 231, 0.6) !important; margin-bottom: 0 !important; }
.bio-online-aside .btn { align-self: flex-start; }

/* Exemplo real (relatório DB360 anonimizado) — imagem larga, abaixo do
   grid de passos, com um selo indicando que é um exemplo real e a
   legenda explicando a anonimização. */
.bio-online-exemplo {
  margin: 48px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow);
  background: rgba(244, 239, 231, 0.05);
}
.bio-online-exemplo img { width: 100%; height: auto; display: block; }
.bio-online-exemplo figcaption {
  position: relative;
  padding: 16px 22px;
  font-size: 0.85rem;
  color: rgba(244, 239, 231, 0.75);
  border-top: 1px solid var(--border-soft);
}
.bio-online-exemplo-selo {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--gold-halo);
  border: 1px solid var(--border-gold-strong);
  color: var(--gold-primary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

@media (max-width: 900px) {
  .bio-online-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .bio-online-passos li { gap: 14px; }
  .bio-online-num { min-width: 38px; font-size: 1.4rem; }
  .bio-online-exemplo figcaption { font-size: 0.8rem; }
}

/* ---------- Serviço em destaque (Bioimpedância Online) ---------- */
.servico-destaque {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  margin-top: 28px;
  background: rgba(244, 239, 231, 0.05);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 44px -28px rgba(0, 0, 0, 0.55);
}
.servico-destaque-foto { position: relative; min-height: 280px; }
.servico-destaque-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Mesma vinheta dos cards do carrossel: essa foto também é de fundo claro
   e encostava direto no texto sobre fundo escuro do lado. */
.servico-destaque-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 84% 78% at 46% 42%, transparent 46%, rgba(13, 9, 6, 0.38) 100%),
    linear-gradient(90deg, transparent 58%, rgba(13, 9, 6, 0.45) 100%);
}
.servico-destaque-texto { padding: 34px 36px; }
.servico-destaque-texto h3 { font-size: 1.4rem; margin-bottom: 12px; }
.servico-destaque-lead { color: rgba(244, 239, 231, 0.75); margin: 0 0 18px; font-size: 0.98rem; }
.servico-passos { display: flex; flex-direction: column; gap: 12px; margin: 0 0 18px; padding: 0; counter-reset: none; }
.servico-passos li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.93rem;
  color: rgba(244, 239, 231, 0.75);
  line-height: 1.5;
}
.servico-passos li span {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-title);
  font-size: 0.85rem;
  color: var(--gold-primary);
  background: var(--gold-halo);
  border: 1px solid var(--border-gold);
}
.servico-destaque-nota {
  font-size: 0.82rem;
  color: rgba(244, 239, 231, 0.6);
  border-left: 2px solid var(--border-gold-strong);
  padding-left: 12px;
  margin: 0 0 22px;
}
.servico-destaque-acoes { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .servico-destaque { grid-template-columns: 1fr; }
  .servico-destaque-foto { aspect-ratio: 16 / 10; min-height: 0; }
  .servico-destaque-texto { padding: 26px 22px; }
}

/* Legenda opcional embaixo da imagem do card (usada no teste
   respiratório) */
.card-media-tag {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 2;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: rgba(13, 9, 6, 0.62);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  padding: 4px 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

@media (max-width: 960px) {
  .step .card-media { width: 100%; max-width: 320px; margin: 0 auto; aspect-ratio: 16 / 10; }
}

/* ---------- Responsivo ---------- */

@media (max-width: 960px) {
  .nav { display: none; }
  .menu-toggle { display: flex; }
  /* Empilhado: o retrato vai pra cima do texto, que é a ordem que lê melhor
     quando não há duas colunas. */
  .sobre-intro { grid-template-columns: 1fr; gap: 36px; }
  .sobre-retrato { order: -1; max-width: 420px; margin: 0 auto; }
  .sobre-retrato::before { inset: -14px -14px 14px 14px; }
  .sobre-copy .section-title { max-width: none; }
  .local-intro { grid-template-columns: 1fr; gap: 28px; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .step { flex-direction: column; text-align: center; gap: 12px; }
  .prato-app { grid-template-columns: 1fr; }
  .prato-foods { max-height: none; }
  .perfil-grid { grid-template-columns: repeat(2, 1fr); }
  .perfil-field-atividade { grid-column: 1 / -1; }
  .dia-resumo-refeicoes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  :root { --header-h: 68px; }
  /* O padding-top precisa ser grande o bastante pra o texto começar só
     depois do rosto dele, não em cima. Com o retrato de meio corpo o rosto
     fica mais alto do que ficava na foto de corpo inteiro, então dá pra
     subir o texto em relação à versão anterior. */
  .hero { padding: 280px 0 0; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  /* Número grande e credenciais empilham: lado a lado em 375px o número
     serifado quebra no meio. */
  .sobre-provas { grid-template-columns: 1fr; gap: 30px; }
  .section { padding: 64px 0; }
  .cards-grid, .cards-grid-4 { grid-template-columns: 1fr; }
  .prato-foods { grid-template-columns: 1fr; }
  .perfil-grid { grid-template-columns: 1fr 1fr; }
  .refeicao-tabs { gap: 8px; }
  .refeicao-tab { padding: 9px 14px; font-size: 0.82rem; flex: 1 1 calc(50% - 8px); justify-content: center; }
  .dia-resumo-refeicoes { grid-template-columns: repeat(2, 1fr); }
  .header-actions .btn { display: none; }
  .cta-final-actions { flex-direction: column; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .prato-item { flex-wrap: wrap; }
  .prato-item .nome { flex-basis: 100%; }
  .prato-item input[type="number"] { width: 64px; }
  .prato-item select.prato-unidade { max-width: 108px; }
  .prato-lista { max-height: 260px; }
}

/* ---------- Card de chamada pra aba Vídeos (fim da galeria) ---------- */
/* Ocupa duas colunas e duas linhas da grade: entre fotos, um bloco de luz
   em movimento se destaca justamente por não ser foto. Os feixes são os
   mesmos da abertura da aba — clicar aqui leva pra exatamente aquilo. */
.gallery-cta {
  position: relative;
  grid-column: span 2;
  grid-row: span 2;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border-gold);
  background: linear-gradient(155deg, rgba(30, 21, 13, 0.98), rgba(13, 9, 6, 1));
  color: var(--text-primary);
  text-decoration: none;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 320ms ease, box-shadow 420ms ease;
}

/* Os feixes atravessam a largura INTEIRA. Antes ficavam num tufo de
   200px no meio e o resto do card lia como buraco preto. */
.gallery-cta-luz {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  opacity: 0.75;
  transition: opacity 420ms ease;
}
.gallery-cta-luz i {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(215, 162, 83, 0.5) 30%, rgba(242, 209, 154, 0.75) 50%, rgba(215, 162, 83, 0.5) 70%, transparent);
  transform: scaleY(0.25);
  animation: gallery-cta-feixe 3.4s cubic-bezier(0.33, 0, 0.2, 1) infinite;
}
.gallery-cta-luz i:nth-child(3n)   { width: 2px; }
.gallery-cta-luz i:nth-child(5n)   { width: 3px; opacity: 0.75; }
.gallery-cta-luz i:nth-child(1)  { animation-delay: 0.9s; }
.gallery-cta-luz i:nth-child(2)  { animation-delay: 0.25s; }
.gallery-cta-luz i:nth-child(3)  { animation-delay: 1.35s; }
.gallery-cta-luz i:nth-child(4)  { animation-delay: 0.6s; }
.gallery-cta-luz i:nth-child(5)  { animation-delay: 0s; }
.gallery-cta-luz i:nth-child(6)  { animation-delay: 1.1s; }
.gallery-cta-luz i:nth-child(7)  { animation-delay: 0.4s; }
.gallery-cta-luz i:nth-child(8)  { animation-delay: 1.6s; }
.gallery-cta-luz i:nth-child(9)  { animation-delay: 0.75s; }
.gallery-cta-luz i:nth-child(10) { animation-delay: 0.15s; }
.gallery-cta-luz i:nth-child(11) { animation-delay: 1.2s; }
.gallery-cta-luz i:nth-child(12) { animation-delay: 0.5s; }
.gallery-cta-luz i:nth-child(13) { animation-delay: 1s; }
@keyframes gallery-cta-feixe {
  0%   { transform: scaleY(0.2); opacity: 0.25; }
  50%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.2); opacity: 0.25; }
}

/* Brilho quente por trás do conteúdo: dá centro ao card e faz o texto
   descolar dos feixes. */
.gallery-cta-aura {
  position: absolute;
  left: 12%;
  top: 40%;
  width: 78%;
  height: 78%;
  transform: translateY(-30%);
  background: radial-gradient(ellipse at 30% 50%, rgba(215, 162, 83, 0.22), rgba(169, 94, 50, 0.08) 42%, transparent 70%);
  transition: opacity 420ms ease;
}

/* Clarão que atravessa no hover — o mesmo especular da palavra ANÍSIO. */
.gallery-cta-brilho {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  left: -60%;
  background: linear-gradient(90deg, transparent, rgba(242, 209, 154, 0.14), transparent);
  transition: left 900ms cubic-bezier(0.33, 0, 0.2, 1);
}

.gallery-cta-corpo {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 2.4vw, 30px);
  background: linear-gradient(180deg, rgba(6, 4, 3, 0.55) 0%, rgba(6, 4, 3, 0.18) 45%, rgba(6, 4, 3, 0.82) 100%);
}
.gallery-cta-topo {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-primary);
}
.gallery-cta-meio { display: block; }
.gallery-cta-play {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border-radius: 50%;
  color: var(--text-on-gold);
  background: linear-gradient(135deg, var(--gold-lighter), var(--gold-primary));
  box-shadow: 0 0 0 0 rgba(215, 162, 83, 0.45), 0 10px 30px -12px rgba(215, 162, 83, 0.7);
  animation: gallery-cta-pulso 2.8s ease-out infinite;
}
.gallery-cta-play svg { margin-left: 3px; }
@keyframes gallery-cta-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(215, 162, 83, 0.5), 0 10px 30px -12px rgba(215, 162, 83, 0.7); }
  70%  { box-shadow: 0 0 0 20px rgba(215, 162, 83, 0), 0 10px 30px -12px rgba(215, 162, 83, 0.7); }
  100% { box-shadow: 0 0 0 0 rgba(215, 162, 83, 0), 0 10px 30px -12px rgba(215, 162, 83, 0.7); }
}
.gallery-cta-meio strong {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.2vw, 1.95rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--text-primary);
}
.gallery-cta-meio small {
  display: block;
  margin-top: 8px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 32ch;
}
.gallery-cta-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.gallery-cta-rotulo {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: lining-nums;
}
.gallery-cta-seta {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  color: var(--gold-light);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 320ms ease, border-color 320ms ease, color 320ms ease;
}

@media (hover: hover) {
  .gallery-cta:hover {
    transform: translateY(-6px);
    border-color: var(--border-gold-strong);
    box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.95),
                0 16px 46px -26px rgba(215, 162, 83, 0.5);
  }
  .gallery-cta:hover .gallery-cta-luz { opacity: 1; }
  .gallery-cta:hover .gallery-cta-brilho { left: 120%; }
  .gallery-cta:hover .gallery-cta-seta {
    transform: translateX(5px);
    background: var(--gold-primary);
    border-color: var(--gold-primary);
    color: var(--text-on-gold);
  }
}
.gallery-cta:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }

@media (max-width: 640px) {
  .gallery-cta-meio small { display: none; }
  .gallery-cta-play { width: 46px; height: 46px; margin-bottom: 12px; }
  .gallery-cta-rotulo { font-size: 0.66rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-cta-luz i,
  .gallery-cta-play { animation: none; }
  .gallery-cta-luz i { transform: scaleY(1); opacity: 0.6; }
  .gallery-cta,
  .gallery-cta-brilho,
  .gallery-cta-seta { transition: none; }
}

/* ============================================================
   Header: menu "Mais" (2026-09-11)
   Com 10 itens o header já estourava: em 1440 o botão de agendar passava
   124px do container e o nome da logo quebrava em duas linhas. As três
   âncoras menos usadas da home (Como funciona, Depoimentos, FAQ) foram
   pro "Mais ▾". No celular nada muda: tudo continua no menu.
   (O "Gasto Energético Total" chegou a ficar aqui como pílula dourada;
   saiu no mesmo dia e mora só no convite do monte-seu-prato.html.)
   ============================================================ */
.nav { gap: clamp(14px, 1.4vw, 26px); }
.logo { flex-shrink: 0; }
.logo-text { white-space: nowrap; }

.nav-mais { position: relative; }
.nav-mais-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color 0.3s ease;
}
.nav-mais-btn svg { transition: transform 0.3s ease; }
.nav-mais:hover .nav-mais-btn,
.nav-mais.is-open .nav-mais-btn { color: var(--text-primary); }
.nav-mais:hover .nav-mais-btn svg,
.nav-mais.is-open .nav-mais-btn svg { transform: rotate(180deg); }
.nav-mais-lista {
  position: absolute;
  top: calc(100% + 14px);
  right: -14px;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--border-gold-faint);
  background: rgba(16, 11, 7, 0.97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s;
}
/* ponte invisível entre o botão e a lista: sem ela o hover se perde no
   vão de 14px e a lista fecha antes de o mouse chegar */
.nav-mais-lista::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-mais:hover .nav-mais-lista,
.nav-mais.is-open .nav-mais-lista {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.nav .nav-mais-lista a { padding: 11px 12px; border-radius: 9px; }
.nav .nav-mais-lista a::after { display: none; }
.nav .nav-mais-lista a:hover { background: rgba(244, 239, 231, 0.05); color: var(--gold-light); }

/* ---------- Monte seu prato: convite pros vídeos ---------- */
.get-convite {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
  margin: 0 0 28px;
  padding: 18px clamp(18px, 3vw, 28px) 18px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border-gold);
  background: linear-gradient(120deg, rgba(215, 162, 83, 0.1), rgba(215, 162, 83, 0.02) 60%);
  color: inherit;
  text-align: left;
  width: 100%;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.get-convite:hover { border-color: var(--gold-primary); transform: translateY(-2px); box-shadow: 0 20px 40px -24px rgba(215, 162, 83, 0.45); }
.get-convite-capas { position: relative; flex: none; width: 96px; height: 96px; }
.get-convite-capas img {
  position: absolute;
  top: 0;
  width: 54px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-gold);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.8);
}
.get-convite-capas img:first-of-type { left: 0; transform: rotate(-6deg); }
.get-convite-capas img:last-of-type { right: 0; transform: rotate(6deg) translateY(4px); }
.get-convite-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: var(--text-on-gold);
  box-shadow: 0 0 0 6px rgba(215, 162, 83, 0.18);
  animation: get-convite-pulso 2.4s ease-out infinite;
}
@keyframes get-convite-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(215, 162, 83, 0.4); }
  100% { box-shadow: 0 0 0 14px rgba(215, 162, 83, 0); }
}
.get-convite-texto { flex: 1; min-width: 0; }
.get-convite-texto small {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-primary);
  margin-bottom: 6px;
}
.get-convite-texto strong {
  display: block;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 4px;
}
.get-convite-texto span { font-size: 0.9rem; color: var(--text-secondary); }
.get-convite-seta { flex: none; color: var(--gold-light); font-size: 1.3rem; transition: transform 0.3s ease; }
.get-convite:hover .get-convite-seta { transform: translateX(4px); }
@media (max-width: 600px) {
  .get-convite { align-items: flex-start; }
  .get-convite-capas { width: 74px; height: 80px; }
  .get-convite-capas img { width: 44px; height: 78px; }
  .get-convite-play { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .get-convite-seta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .get-convite-play { animation: none; }
}