/* ==========================================================================
   Marcella Moreira — Veterinária em Domicílio
   Design system: floresta profunda + terracota dourado, serifa editorial
   Lora (display) + Public Sans (texto). Mobile-first, CSS nativo.
   ========================================================================== */

/* ---------- Fontes (embutidas no site — sem chamadas ao Google) ----------
   Lora (títulos): variável de peso, com itálico.
   Public Sans (texto): variável de peso. Subconjunto latino cobre todo o
   português. Caminhos relativos ao CSS, então valem na raiz e nas subpáginas. */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/lora-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/lora-latin-wght-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/public-sans-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Tokens ---------- */
:root {
  /* Cor — verde floresta como protagonista, terracota dourado como acento raro */
  --forest-900: #16241b;
  --forest-800: #1f3423;
  --forest-700: #2c4732;
  --forest-600: #3b593f;   /* verde da marca (logo) */
  --forest-500: #4a6b4e;

  --tan-600:   #b87a45;    /* acento interativo — contraste garantido sobre creme */
  --tan-500:   #cf9a63;    /* acento decorativo — próximo ao logo */
  --tan-100:   #f1e2cd;

  --cream-50:  #faf7f1;
  --cream-100: #f3ece0;
  --cream-200: #eae0cf;

  --ink-900:   #1c241d;
  --ink-700:   #3a4438;
  --ink-500:   #5b6659;

  --white:     #ffffff;

  --success-line: #7fa27f;
  --google-star: #F9AB00;
  --header-h: 76px;

  /* Tipografia */
  --font-display: 'Lora', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-xs:   clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --fs-sm:   clamp(0.9rem, 0.87rem + 0.16vw, 1rem);
  --fs-base: clamp(1rem, 0.97rem + 0.18vw, 1.125rem);
  --fs-lg:   clamp(1.15rem, 1.08rem + 0.35vw, 1.4rem);
  --fs-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-2xl:  clamp(1.9rem, 1.55rem + 1.75vw, 2.75rem);
  --fs-3xl:  clamp(2.3rem, 1.8rem + 2.5vw, 3.6rem);

  /* Layout */
  --container-w: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(3.5rem, 7vw, 7rem);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 32px;
  --radius-organic: 42% 58% 63% 37% / 41% 44% 56% 59%;

  --shadow-soft: 0 20px 45px -25px rgba(22, 36, 27, 0.35);
  --shadow-card: 0 12px 30px -18px rgba(22, 36, 27, 0.25);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
body {
  font-family: var(--font-body);
  background: var(--cream-50);
  color: var(--ink-900);
  font-size: var(--fs-base);
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Previne "blowout" de grid: itens com texto/botões em nowrap não podem
   forçar a track (coluna implícita) a crescer além da viewport no mobile. */
.hero .container,
.why,
.about,
.how,
.footer-grid {
  min-width: 0;
}
.hero__content,
.hero__media,
.why__intro,
.why__body,
.about__media,
.about__body,
.how__body,
.how__media,
.footer-col {
  min-width: 0;
}
/* Mesma proteção para itens de grids explícitos (repeat(N, 1fr)) que contêm
   links/badges em nowrap — "1fr" ainda respeita min-content por padrão. */
.benefit-card,
.service-card,
.review-card,
.area-card,
.pillar-card,
.cta-final__text-col,
.cta-final__actions {
  min-width: 0;
}

:focus-visible {
  outline: 3px solid var(--tan-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--forest-900);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Tipografia utilitária ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tan-600);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: currentColor;
  display: inline-block;
}

.section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: 1.12;
  color: var(--forest-900);
  margin-top: 0.6em;
  max-width: 24ch;
}
.section--dark .section__title { color: var(--cream-50); }

/* Larguras individuais por seção — cada título foi revisado para quebrar em
   ~2 linhas de forma equilibrada, em vez de uma largura genérica única. */
#titulo-beneficios { max-width: 34ch; }
#titulo-servicos { max-width: 34ch; }
#titulo-como-funciona { max-width: 22ch; }
#titulo-areas.section__title--areas { max-width: 30ch; }
#titulo-compromisso { max-width: 46ch; }
#titulo-faq { max-width: 26ch; }
#titulo-avaliacoes { max-width: 22ch; }
#titulo-sobre { max-width: 22ch; }

.section__intro {
  margin-top: 1.1rem;
  max-width: 62ch;
  color: var(--ink-700);
  font-size: var(--fs-lg);
  line-height: 1.55;
}
.section--dark .section__intro { color: var(--cream-100); }

.section__header {
  max-width: 46rem;
}
/* Áreas de atendimento: a intro lista 7 serviços em negrito e fica bem
   mais longa que as outras seções — na largura padrão (46rem) ela quebra
   em 5 linhas estreitas e sobra um vão enorme à direita. Alargando, o
   texto ocupa melhor o espaço e a coluna vazia praticamente some. */
.section__header--areas {
  max-width: 62rem;
}
.section__header--center {
  margin-inline: auto;
  text-align: center;
}
.section__header--center .eyebrow::before,
.section__header--center .eyebrow::after { content: ''; }
.section__header--center .section__title { margin-inline: auto; }
.section__header--center .section__intro { margin-inline: auto; }

em.accent {
  font-style: italic;
  color: var(--tan-600);
}

/* Destaque dentro do H1 — só visual (span, não <em>: não altera a ênfase
   semântica lida por leitores de tela nem o texto indexado). */
.title-accent {
  font-style: italic;
  color: var(--tan-500);
}

/* Negrito estratégico — realça termos-chave (serviços, sintomas, locais,
   CTAs) sem alterar nenhuma palavra do texto original. */
.section p strong,
.hero__lead strong,
.why__body strong,
.service-card p strong,
.benefit-card p strong,
.pillar-card p strong,
.faq-item__answer strong,
.area-card p strong,
.step p strong,
.about__body strong,
.cta-final__text strong {
  color: var(--forest-800);
  font-weight: 700;
}
.section--dark .pillar-card p strong,
.cta-final .cta-final__text strong {
  color: var(--tan-500);
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  max-width: 100%;
  text-align: center;
}
.btn svg { width: 1.3em; height: 1.3em; flex-shrink: 0; }

/* Rótulos curtos (nav, chips) ficam numa linha só; rótulos longos (CTAs
   como "Agendar Atendimento pelo WhatsApp") podem quebrar em telas
   estreitas em vez de forçar overflow horizontal na página inteira. */
.nav__cta.btn,
.btn--sm {
  white-space: nowrap;
}

.btn--whatsapp {
  background: var(--forest-600);
  color: var(--cream-50);
  box-shadow: var(--shadow-soft);
}
.btn--whatsapp:hover { background: var(--forest-700); transform: translateY(-2px); }
.btn--whatsapp:active { transform: translateY(0); }

.section--dark .btn--whatsapp,
.cta-final .btn--whatsapp {
  background: var(--tan-500);
  color: var(--forest-900);
}
.section--dark .btn--whatsapp:hover,
.cta-final .btn--whatsapp:hover { background: var(--tan-100); }

.btn--ghost {
  background: transparent;
  color: var(--forest-800);
  border-color: var(--forest-600);
}
.btn--ghost:hover { background: var(--forest-600); color: var(--cream-50); }

.btn--sm { padding: 0.65rem 1.15rem; font-size: var(--fs-xs); }

/* ==========================================================================
   Header / Navegação
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 241, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(28, 36, 29, 0.08);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.75rem;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.nav__brand img { width: 44px; height: 44px; border-radius: 50%; }
.nav__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.nav__brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--forest-900);
}
.nav__brand-role {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-500);
}

.nav__list {
  display: none;
  align-items: center;
  gap: 1.9rem;
}
.nav__link {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-700);
  position: relative;
  padding-block: 0.3rem;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--tan-600);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Dropdown de navegação (multi-página) — só CSS, sem JS ---------- */
.nav__item--dropdown { position: relative; }
.nav__link--dropdown {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}
.nav__link--dropdown svg { width: 0.7rem; height: 0.7rem; transition: transform 0.2s var(--ease); }
.nav__dropdown {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 0.6rem;
  min-width: 15.5rem;
  display: grid;
  gap: 0.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  z-index: 50;
}
.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__item--dropdown:hover .nav__link--dropdown svg,
.nav__item--dropdown:focus-within .nav__link--dropdown svg { transform: rotate(180deg); }
.nav__dropdown a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--ink-700);
  line-height: 1.3;
}
.nav__dropdown a:hover { background: var(--cream-100); color: var(--forest-800); }
.nav__dropdown a strong { display: block; color: var(--forest-900); font-weight: 600; }
.nav__dropdown a span { display: block; font-size: 0.74rem; color: var(--ink-500); margin-top: 0.1rem; }
.nav__dropdown-divider { height: 1px; background: var(--cream-200); margin: 0.35rem 0.5rem; }

.nav__mobile-group { margin-top: 0.4rem; }
.nav__mobile-group__label {
  padding: 0.5rem 0.25rem 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tan-600);
}
.nav__mobile-group a { padding-left: 1rem; }

.nav__cta { display: none; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--forest-600);
  background: transparent;
  cursor: pointer;
}
.nav__toggle svg { width: 20px; height: 20px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem var(--gutter) 1.5rem;
  background: var(--cream-50);
  border-bottom: 1px solid rgba(28, 36, 29, 0.08);
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a {
  padding: 0.85rem 0.25rem;
  font-size: var(--fs-base);
  font-weight: 500;
  border-bottom: 1px solid rgba(28, 36, 29, 0.07);
  color: var(--ink-700);
}
.nav__mobile .btn { margin-top: 1rem; }

@media (min-width: 960px) {
  .nav__list { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__mobile { display: none !important; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--forest-900);
  color: var(--cream-50);
  /* Sem overflow:hidden aqui: isso desativaria position:sticky da foto.
     A trilha decorativa é clipada só nela mesma (ver .hero__path-wrap). */
  padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3.5rem, 8vw, 6rem);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 85% 10%, rgba(207, 154, 99, 0.16), transparent 60%),
    radial-gradient(50% 50% at 5% 95%, rgba(207, 154, 99, 0.1), transparent 60%);
  pointer-events: none;
}
.hero .container {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: start;
}
@media (min-width: 960px) {
  .hero .container {
    grid-template-columns: 1.12fr 0.88fr;
  }
}

.hero__content { position: relative; z-index: 2; }

.hero .eyebrow { color: var(--tan-500); }

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: 1.06;
  margin-top: 0.7rem;
  color: var(--white);
  max-width: 21ch;
}

.hero__lead {
  margin-top: 1.4rem;
  font-size: var(--fs-lg);
  color: var(--cream-100);
  max-width: 46ch;
  line-height: 1.5;
}

.hero__credentials {
  margin-top: 1.15rem;
  color: rgba(243, 236, 224, 0.82);
  max-width: 52ch;
  font-size: var(--fs-sm);
  line-height: 1.65;
}
.hero__credentials strong { color: var(--cream-50); font-weight: 600; }

.hero__plans {
  margin-top: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  color: var(--tan-500);
  background: rgba(207, 154, 99, 0.12);
  border: 1px solid rgba(207, 154, 99, 0.35);
  padding: 0.55rem 1rem;
  border-radius: 999px;
}

.hero__actions { margin-top: 2rem; }
.hero__actions .btn { font-size: var(--fs-base); padding: 1.05rem 1.9rem; }

.hero__checklist {
  margin-top: 2.1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1.5rem;
  max-width: 34rem;
}
.hero__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: var(--fs-xs);
  color: var(--cream-100);
}
.hero__checklist svg {
  width: 1.05rem; height: 1.05rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--tan-500);
}

/* Faixa de diferenciais na base do hero (antes ficava empilhada na coluna
   do texto, esticando o hero além da dobra). */
.hero__strip {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.hero__strip .hero__checklist {
  margin-top: 0;
  max-width: none;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 247, 241, 0.14);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
@media (min-width: 600px) {
  .hero__strip .hero__checklist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 2rem;
  }
}
@media (min-width: 1080px) {
  .hero__strip .hero__checklist {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem 1.75rem;
  }
}

.hero__media {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: min(100%, 440px);
}
/* Foto acompanha a rolagem enquanto o texto (mais longo) desce ao lado —
   evita o efeito de "card órfão" flutuando em espaço vazio. Só no desktop:
   em coluna única não faz sentido prender a foto. */
@media (min-width: 960px) {
  .hero__media {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}
.hero__photo-wrap {
  position: relative;
  border-radius: var(--radius-organic);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-soft);
  border: 6px solid rgba(250, 247, 241, 0.08);
}
.hero__photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__card {
  position: absolute;
  left: -8%;
  bottom: -8%;
  background: var(--cream-50);
  color: var(--forest-900);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.15rem;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 15.5rem;
}
.hero__card svg { width: 2rem; height: 2rem; color: var(--tan-600); flex-shrink: 0; }
.hero__card strong { display: block; font-size: var(--fs-sm); font-family: var(--font-display); }
.hero__card span { font-size: 0.72rem; color: var(--ink-500); }

/* Trilha ilustrativa — elemento de assinatura.
   O clip fica só neste wrapper (não em .hero inteiro), para não desativar
   o position:sticky da foto na coluna ao lado. */
.hero__path-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero__path {
  position: absolute;
  top: -4%;
  right: -12%;
  width: 46%;
  opacity: 0.55;
}
.hero__path path {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: draw-path 2.6s var(--ease) 0.4s forwards;
}
@keyframes draw-path {
  to { stroke-dashoffset: 0; }
}

/* ==========================================================================
   Breadcrumbs — páginas internas (Home > Página)
   ========================================================================== */
.breadcrumbs {
  background: var(--cream-100);
  border-bottom: 1px solid rgba(28, 36, 29, 0.06);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding-block: 0.85rem;
  font-size: 0.78rem;
  color: var(--ink-500);
}
.breadcrumbs a { color: var(--ink-500); }
.breadcrumbs a:hover { color: var(--tan-600); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs li:not(:last-child)::after {
  content: '/';
  margin-left: 0.4rem;
  color: var(--tan-500);
}
.breadcrumbs li[aria-current] { color: var(--forest-800); font-weight: 600; }

/* ==========================================================================
   Hero de página interna — mais enxuto que o Hero da Home, mesma família
   visual (fundo floresta, mesmo tratamento de foto), para localidade/serviço
   ========================================================================== */
.page-hero {
  position: relative;
  background: var(--forest-900);
  color: var(--cream-50);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 90% 0%, rgba(207, 154, 99, 0.16), transparent 65%);
  pointer-events: none;
}
.page-hero .container {
  position: relative;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .page-hero .container { grid-template-columns: 1.15fr 0.85fr; }
}
.page-hero__eyebrow { color: var(--tan-500); }
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: 1.1;
  margin-top: 0.6rem;
  color: var(--white);
  max-width: 19ch;
}
.page-hero__lead {
  margin-top: 1.1rem;
  font-size: var(--fs-lg);
  color: var(--cream-100);
  max-width: 46ch;
  line-height: 1.55;
}
.page-hero__actions { margin-top: 1.75rem; }
.page-hero__media {
  border-radius: var(--radius-organic);
  overflow: hidden;
  aspect-ratio: 4/4.6;
  box-shadow: var(--shadow-soft);
  border: 6px solid rgba(250, 247, 241, 0.08);
  min-width: 0;
}
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

/* ==========================================================================
   Links relacionados — linkagem interna entre páginas (localidade ⇄ serviço)
   ========================================================================== */
.related-links {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .related-links { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}
.related-links a {
  display: block;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  min-width: 0;
}
.related-links a:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.related-links strong {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--forest-900);
}
.related-links strong svg { width: 1.1rem; height: 1.1rem; color: var(--tan-600); flex-shrink: 0; }
.related-links span {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  line-height: 1.55;
}

/* ==========================================================================
   Seções — genérico
   ========================================================================== */
.section {
  padding-block: var(--section-pad);
  position: relative;
}
.section--alt { background: var(--cream-100); }
.section--dark {
  background: var(--forest-800);
  color: var(--cream-100);
}

/* Conteúdo sempre visível por padrão (sem JS = sem risco de conteúdo oculto).
   Só entra em estado "oculto para revelar" depois que o JS confirma que vai
   controlar a animação — evitando FOUC e garantindo acesso sem JavaScript. */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.divider-path {
  display: block;
  width: 100%;
  height: 28px;
  color: var(--tan-500);
  opacity: 0.55;
}

/* ==========================================================================
   Por que domicílio
   ========================================================================== */
.why {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .why { grid-template-columns: 0.72fr 1.28fr; }
  .why__intro { max-width: 20rem; }
}
.why__body p {
  margin-top: 1.15rem;
  color: var(--ink-700);
  line-height: 1.7;
  max-width: 58ch;
}
.why__body p:first-of-type { margin-top: 1.4rem; }
.why__highlight {
  margin-top: 1.75rem;
  padding: 1.3rem 1.5rem;
  border-left: 3px solid var(--tan-600);
  background: var(--white);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--forest-800);
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   Benefícios
   ========================================================================== */
.benefits-grid {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  /* 3+3 — evita o card órfão sozinho numa terceira linha */
  .benefits-grid { grid-template-columns: repeat(3, 1fr); }
}
.benefit-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 1.9rem 1.6rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.benefit-card__icon {
  width: 3rem; height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tan-100);
  color: var(--tan-600);
  margin-bottom: 1.1rem;
}
.benefit-card__icon svg { width: 1.5rem; height: 1.5rem; }
.benefit-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--forest-900);
}
.benefit-card p {
  margin-top: 0.55rem;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  line-height: 1.6;
}

/* ==========================================================================
   Avaliações
   ========================================================================== */
.reviews-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Bloco de confiança — substitui o antigo badge "5,0 Google" isolado por
   três linhas de contexto rápido (avaliação, especialidade, cobertura). */
.trust-block {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 0.65rem;
  align-content: center;
  min-width: 0;
  max-width: 22rem;
}
.trust-block p {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  line-height: 1.4;
}
.trust-block p span[aria-hidden] { font-size: 1.1em; flex-shrink: 0; }
.trust-block strong { color: var(--forest-900); font-weight: 700; }

.reviews-grid {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 3 avaliações → 3 colunas simétricas no desktop, em vez de 2+1 órfã */
@media (min-width: 960px) {
  .reviews-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.review-card {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.review-card cite {
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--forest-800);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}
.review-card__stars {
  display: inline-flex;
  gap: 0.15rem;
  color: var(--google-star);
}
.review-card__stars svg { width: 0.85rem; height: 0.85rem; }
.review-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex-grow: 1;
  margin-top: 0.2rem;
}
.review-card__text p {
  font-size: 0.82rem;
  color: var(--ink-700);
  line-height: 1.55;
}
.review-card__text strong { color: var(--forest-800); font-weight: 700; }

/* Botão "ver todas no Google" — único ponto do site que foge do ícone
   monocromático de propósito: aqui o objetivo é reconhecimento imediato
   da marca Google, não discrição. */
.btn--google svg { width: 1.1em; height: 1.1em; }

.reviews-more { margin-top: 2.25rem; text-align: center; }

/* ==========================================================================
   Serviços
   ========================================================================== */
.services-grid {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  /* 6 serviços → grade 3x2 perfeita, sem card órfão */
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}
.service-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-card);
  border-top: 3px solid var(--forest-600);
  display: flex;
  flex-direction: column;
}
.service-card__icon {
  width: 3.1rem; height: 3.1rem;
  border-radius: 50%;
  background: var(--forest-600);
  color: var(--cream-50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}
.service-card__icon svg { width: 1.55rem; height: 1.55rem; }
.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--forest-900);
}
.service-card p {
  margin-top: 0.65rem;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  line-height: 1.65;
  flex-grow: 1;
}
.service-card__list {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.service-card__list li {
  font-size: 0.72rem;
  background: var(--cream-100);
  color: var(--forest-800);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}
/* Variante para itens mais longos (ex.: Microchipagem) — lista vertical
   em vez de pílulas, para não forçar quebra estranha de frases inteiras. */
.service-card__list--wrap {
  flex-direction: column;
  gap: 0.5rem;
}
.service-card__list--wrap li {
  background: transparent;
  color: var(--ink-700);
  padding: 0;
  border-radius: 0;
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.5;
}
.service-card__list--wrap li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tan-600);
}
.service-card__link {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--tan-600);
}
.service-card__link svg { width: 0.9rem; height: 0.9rem; transition: transform 0.25s var(--ease); }
.service-card__link:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Sobre a Dra. Marcella
   ========================================================================== */
.about {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .about { grid-template-columns: 0.85fr 1.15fr; }
}
.about__media { position: relative; }
/* Foto acompanha a rolagem do texto — mesmo padrão do Hero, só no desktop */
@media (min-width: 900px) {
  .about__media {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}
.about__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/4.6;
  box-shadow: var(--shadow-soft);
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.about__credential {
  position: absolute;
  bottom: -1.25rem;
  right: -1rem;
  background: var(--forest-700);
  color: var(--cream-50);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  box-shadow: var(--shadow-card);
}
.about__body p {
  margin-top: 1.1rem;
  color: var(--ink-700);
  line-height: 1.7;
  max-width: 58ch;
}
.about__body p:first-of-type { margin-top: 1.3rem; }

.diff-list {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.65rem;
}
.diff-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--fs-sm);
  color: var(--ink-900);
}
.diff-list svg {
  width: 1.1rem; height: 1.1rem;
  color: var(--tan-600);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

/* Variante para listas usadas sozinhas numa seção de largura total (não ao
   lado de uma foto) — 2 colunas no desktop em vez de ficar tudo colado à
   esquerda com a metade direita da seção vazia. */
.diff-list--wide {
  max-width: 56rem;
}
@media (min-width: 640px) {
  .diff-list--wide { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; }
}

/* ==========================================================================
   Como funciona
   ========================================================================== */
.how {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .how { grid-template-columns: 1.3fr 0.7fr; }
}
/* Variante sem foto (Home) — conteúdo centralizado, usando a largura toda
   da seção em vez de ficar espremido numa coluna com vão vazio ao lado. */
.how__body--centered {
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}
.how__body--centered .eyebrow { justify-content: center; }
.how__body--centered .how__actions { display: flex; justify-content: center; }

.steps {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 1.5rem;
}
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  position: relative;
  text-align: left;
}
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1.35rem;
  top: 3rem;
  bottom: -1.5rem;
  width: 1.5px;
  background: repeating-linear-gradient(to bottom, var(--tan-500) 0 6px, transparent 6px 12px);
}
.step__num {
  width: 2.7rem; height: 2.7rem;
  border-radius: 50%;
  background: var(--forest-600);
  color: var(--cream-50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.step h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--forest-900);
}
.step p {
  margin-top: 0.4rem;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  line-height: 1.6;
  max-width: 46ch;
}

/* Timeline horizontal no desktop — usada quando os passos não dividem
   espaço com uma foto ao lado (evita 3 linhas empilhadas com metade da
   tela vazia). No mobile continua como lista vertical numerada. */
@media (min-width: 860px) {
  .steps--timeline {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    position: relative;
  }
  .steps--timeline::before {
    content: '';
    position: absolute;
    top: 1.35rem;
    left: calc(100% / 6);
    right: calc(100% / 6);
    height: 1.5px;
    background: repeating-linear-gradient(to right, var(--tan-500) 0 6px, transparent 6px 12px);
  }
  .steps--timeline .step {
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    text-align: center;
  }
  .steps--timeline .step:not(:last-child)::after { display: none; }
  .steps--timeline .step p { max-width: 26ch; }
}

.how__actions { margin-top: 2.25rem; }

.how__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-soft);
}
.how__media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Áreas de atendimento
   ========================================================================== */
.areas-grid {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  min-width: 0;
}
@media (min-width: 720px) {
  .areas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  /* 3 sub-regiões → 3 colunas simétricas no desktop */
  .areas-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Variante para páginas com só 2 cards (ex.: Barra da Tijuca) — sem isso,
   a regra de 3 colunas acima deixa a 3ª vazia e os 2 cards colados à
   esquerda com um vão enorme à direita. */
.areas-grid--2 {
  max-width: 56rem;
}
@media (min-width: 1080px) {
  .areas-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
/* Variante para páginas com só 1 card de bairros (Zona Sul, Tijuca) — sem
   isso, o card se estica a largura toda do container só pra exibir uma
   fileira de tags, sobrando muito espaço em branco dentro dele mesmo. */
.areas-grid--1 {
  grid-template-columns: 1fr;
  max-width: 46rem;
  justify-items: start;
}
.areas-grid--1 .area-card {
  width: fit-content;
  max-width: 100%;
}
.area-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.area-card__pin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tan-600);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
}
.area-card__pin svg { width: 1.3rem; height: 1.3rem; }
.area-card p {
  margin-top: 0.75rem;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  line-height: 1.65;
}
.area-card__tags {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.area-card__tags li {
  font-size: 0.72rem;
  background: var(--cream-100);
  color: var(--forest-800);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}
.area-card__link {
  margin-top: 1.1rem;
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--tan-600);
}

.areas-note {
  margin-top: 2rem;
  background: var(--tan-100);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  color: var(--forest-800);
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-align: center;
}
.areas-note a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Compromisso (pilares) — seção escura
   ========================================================================== */
.pillars-grid {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.pillar-card {
  background: rgba(250, 247, 241, 0.06);
  border: 1px solid rgba(250, 247, 241, 0.14);
  border-radius: var(--radius-md);
  padding: 1.9rem 1.6rem;
  flex: 1 1 15.5rem;
  max-width: 22rem;
  min-width: 0;
}
@media (min-width: 720px) {
  /* 5 cards → 3+2 centralizado (flex-wrap cuida disso sozinho, sem
     deixar um card sozinho grudado na esquerda como o grid faria) */
  .pillar-card { flex-basis: 27%; }
}
.pillar-card__icon {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: rgba(207, 154, 99, 0.16);
  color: var(--tan-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.pillar-card__icon svg { width: 1.5rem; height: 1.5rem; }
.pillar-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cream-50);
}
.pillar-card p {
  margin-top: 0.55rem;
  font-size: var(--fs-sm);
  color: var(--cream-100);
  line-height: 1.6;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 52rem;
  margin-inline: auto;
  display: grid;
  gap: 0.75rem;
}
.faq-item {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--forest-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon-plus {
  flex-shrink: 0;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  border: 1.5px solid var(--tan-600);
  color: var(--tan-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.faq-item summary .icon-plus::before,
.faq-item summary .icon-plus::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}
.faq-item summary .icon-plus::before { width: 9px; height: 1.5px; }
.faq-item summary .icon-plus::after { width: 1.5px; height: 9px; }
.faq-item[open] summary .icon-plus::after { transform: rotate(90deg) scaleX(0); }

.faq-item__answer {
  padding: 0 1.5rem 1.4rem;
  color: var(--ink-700);
  font-size: var(--fs-sm);
  line-height: 1.7;
  max-width: 62ch;
}

/* ==========================================================================
   CTA Final — fechamento da página, deliberadamente diferente do Hero:
   fundo bege (como o resto do site) com um card verde centralizado, duas
   colunas (texto reduzido + ações), WhatsApp em grande destaque e o
   telefone como alternativa com hierarquia própria.
   ========================================================================== */
.cta-final {
  background: var(--cream-100);
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
}
.cta-final .container { position: relative; }
.cta-final__card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--forest-900), var(--forest-700));
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  box-shadow: 0 40px 80px -35px rgba(22, 36, 27, 0.45);
  display: grid;
  gap: 2.5rem;
  text-align: center;
}
.cta-final__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 15% 0%, rgba(207, 154, 99, 0.22), transparent 65%);
  pointer-events: none;
}
@media (min-width: 860px) {
  .cta-final__card {
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    text-align: left;
    padding-inline: clamp(3rem, 6vw, 5.5rem);
  }
}

.cta-final__text-col { position: relative; }
.cta-final .eyebrow { color: var(--tan-500); justify-content: center; }
.cta-final__card > .cta-final__text-col .eyebrow::before { display: none; }
@media (min-width: 860px) {
  .cta-final .eyebrow { justify-content: flex-start; }
  .cta-final__card .eyebrow::before { display: inline-block; }
}

.cta-final__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 1.35rem + 1.6vw, 2.45rem);
  line-height: 1.15;
  color: var(--white);
  max-width: 30ch;
  margin-inline: auto;
}
.cta-final__text {
  margin-top: 1.1rem;
  max-width: 56ch;
  margin-inline: auto;
  color: var(--cream-100);
  line-height: 1.65;
  font-size: var(--fs-sm);
}
.cta-final__text + .cta-final__text { margin-top: 0.85rem; }
@media (min-width: 860px) {
  .cta-final__title,
  .cta-final__text { margin-inline: 0; }
}

.cta-final__actions {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
@media (min-width: 860px) {
  .cta-final__actions { align-items: stretch; }
}

/* WhatsApp muito mais evidente que o padrão do site */
.btn--cta-final {
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.2rem);
  padding: 1.15rem 1.9rem;
  box-shadow: 0 0 0 0 rgba(207, 154, 99, 0.55), var(--shadow-soft);
  animation: cta-pulse 2.8s ease-in-out infinite;
}
.btn--cta-final svg { width: 1.55em; height: 1.55em; }
.btn--cta-final { text-wrap: balance; }
.btn--cta-final:hover { animation-play-state: paused; }
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(207, 154, 99, 0.32), var(--shadow-soft); }
  50% { box-shadow: 0 0 0 10px rgba(207, 154, 99, 0), var(--shadow-soft); }
}

.cta-final__phone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid rgba(250, 247, 241, 0.35);
  color: var(--cream-50);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.cta-final__phone-btn:hover { background: rgba(250, 247, 241, 0.08); border-color: var(--tan-500); }
.cta-final__phone-btn svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--tan-500); }
/* Botão "confira o bairro": mesma família do botão de telefone, com texto
   de uma linha só e quebra equilibrada em telas estreitas. */
/* Celular: os três botões do CTA com a mesma largura (no desktop já esticam). */
@media (max-width: 859px) {
  .cta-final__actions > a { width: 100%; max-width: 24rem; }
}
.cta-final__area-btn {
  text-align: center;
  line-height: 1.3;
  text-wrap: balance;
}
.cta-final__phone-btn small {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(250, 247, 241, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Footer — 4 colunas, ícones sociais e largura de conteúdo maior que o
   restante do site (mais itens de navegação/serviço cabem confortavelmente).
   ========================================================================== */
.site-footer {
  background: var(--forest-900);
  color: rgba(250, 247, 241, 0.75);
  padding-block: 4rem 2rem;
  font-size: var(--fs-sm);
}
.site-footer .container { max-width: 1360px; }

.footer-grid--4 {
  display: grid;
  gap: 2.75rem;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
@media (max-width: 960px) {
  .footer-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer-grid--4 { grid-template-columns: 1fr; }
}

.footer-brand__heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.footer-brand__heading img { width: 40px; height: 40px; }
.footer-brand strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--cream-50);
  display: block;
}
.footer-brand__bio {
  margin-top: 1.1rem;
  line-height: 1.7;
  max-width: 32ch;
}

.footer-col .footer-social {
  display: flex;
  flex-direction: row;
  margin-top: 1.4rem;
  gap: 0.65rem;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1.5px solid rgba(207, 154, 99, 0.4);
  color: var(--tan-500);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.footer-social a:hover {
  border-color: var(--tan-500);
  background: rgba(207, 154, 99, 0.16);
  color: var(--tan-100);
}
.footer-social svg { width: 1.15rem; height: 1.15rem; }

/* Coluna Contato — ícone + texto na cor da paleta, sem depender de emoji */
.footer-col .footer-contact-list {
  display: grid;
  gap: 0.85rem;
}
.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.footer-contact-list li a {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.footer-contact-list svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--tan-500);
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.footer-contact-list span { line-height: 1.5; }

.footer-col p { line-height: 1.7; }
.footer-col p + p { margin-top: 0.4rem; }
.footer-col h4 {
  color: var(--cream-50);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 0.9rem;
  font-size: 1rem;
}
.footer-col ul { display: grid; gap: 0.6rem; }
.footer-col a:hover { color: var(--tan-500); }

.footer-bottom {
  margin-top: 3.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(250, 247, 241, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: rgba(250, 247, 241, 0.55);
}
.footer-bottom--stack {
  flex-direction: column;
  gap: 0.4rem;
}
.footer-bottom a { color: rgba(250, 247, 241, 0.75); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--tan-500); }


/* ==========================================================================
   WhatsApp flutuante
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--forest-600);
  color: var(--cream-50);
  padding: 0.9rem 1.3rem;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  font-weight: 600;
  font-size: var(--fs-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.3s var(--ease), visibility 0.3s;
}
.whatsapp-float.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.whatsapp-float:hover { background: var(--forest-700); }
.whatsapp-float svg { width: 1.3rem; height: 1.3rem; }
.whatsapp-float__label { display: none; }
@media (min-width: 640px) {
  .whatsapp-float__label { display: inline; }
}

/* ==========================================================================
   Utilitários finais
   ========================================================================== */
.text-center { text-align: center; }

@media (max-width: 640px) {
  .hero__checklist { grid-template-columns: 1fr; }
  /* position:relative (não static) para pintar por cima da foto — elementos
     posicionados sempre ficam acima de elementos estáticos, independente
     da ordem no DOM. Sem isso, a borda da foto cobria o texto do card. */
  .hero__card { position: relative; z-index: 2; margin-top: -2.5rem; margin-inline: 1rem; }
}
.about__credential a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.icon-pin { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.15em; color: var(--tan-500); }
.icon-star { color: #F9AB00; fill: #F9AB00; }