/* ==========================================================================
   Dra. Thaís Gama — Medicina de Família e Comunidade
   Mobile first. Assinatura visual: títulos "adesivo" (.sticker).
   ========================================================================== */

/* ==========================================================================
   AJUSTES RÁPIDOS: mude os valores abaixo, salve e recarregue a página.
   rem = tamanho em relação ao texto normal (1rem = 16px). vw = % da largura da tela.
   ========================================================================== */
:root {
  --saudacao-celular: 4.4vw;        /* "Olá, sou a Dra. Thaís Gama" no celular (maior = mais largo; acima de ~4.8vw quebra linha) */
  --saudacao-computador: 1.75rem;   /* a mesma saudação no computador */
  --titulo-topo-celular: 5.2vw;     /* "Uma médica que realmente cuida..." no celular */
  --titulo-topo-computador: 3.4rem; /* o mesmo título no computador (tamanho máximo, em telas grandes) */
  --foto-topo-celular: 40%;         /* largura da foto do topo no celular */
  --texto-topo: 1rem;               /* parágrafo "Sou médica de Família e Comunidade..." no topo */
}

:root {
  /* Paleta oficial */
  --oliva: #798561;        /* cor principal (fundos/decoração; não usar em texto pequeno) */
  --verde: #525939;        /* verde profundo do logo: textos de destaque, botões */
  --salvia: #C9D2C2;       /* fundos suaves */
  --salvia-logo: #D6E0C8;  /* detalhes */
  --grafite: #282628;      /* texto principal, seções escuras */
  --off: #F2F2F2;          /* fundo base */
  --creme: #F8F5EC;        /* contorno do efeito adesivo */
  --branco: #FFFFFF;

  --texto: var(--grafite);
  --texto-suave: #4C4A4C;
  --linha: rgba(40, 38, 40, .16);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --script: "Alex Brush", "Segoe Script", cursive;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --raio: 18px;
  --raio-sm: 10px;
  --gutter: 20px;
  --max: 1160px;
  --header-h: 60px;        /* altura da barra de menu (pílula) */
  --header-gap: 10px;      /* distância da barra até o topo da tela */
  --sombra: 0 10px 30px -12px rgba(40, 38, 40, .28);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--header-gap) + 16px); }
body {
  margin: 0;
  background: var(--off);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--verde); text-underline-offset: .18em; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 700; }
figure, blockquote, dl, dd { margin: 0; }
address { font-style: normal; }
button { font: inherit; }

:focus-visible { outline: 3px solid var(--oliva); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible, .site-footer :focus-visible { outline-color: var(--salvia-logo); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--verde); color: var(--branco); padding: 10px 16px; border-radius: var(--raio-sm);
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 10vw, 120px); position: relative; }

/* Pendências — sempre visíveis para a agência completar */
.pendente {
  display: inline;
  font-family: var(--sans); font-style: normal; font-weight: 600; font-size: .82em; letter-spacing: 0;
  background: #FFF1B8; color: #5A4500;
  border: 1px dashed #B58900; border-radius: 4px; padding: .05em .4em;
  text-shadow: none;
}

/* ---------- Tipografia ---------- */
.display {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.35rem, 5.2vw + 1rem, 4.4rem);
  line-height: 1.06;
  letter-spacing: -.025em;
}
.display-md { font-size: clamp(2.1rem, 4vw + 1rem, 3.6rem); }
.h2 {
  font-family: var(--serif);
  font-size: clamp(1.95rem, 3vw + 1rem, 3rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: .6em;
}
.h2 em, .h3 em, .pull em { font-style: italic; font-weight: 900; color: var(--verde); }
.dark .h2 em, .dark .pull em { color: var(--salvia-logo); }
.h3 { font-family: var(--serif); font-size: clamp(1.4rem, 1.5vw + 1rem, 1.85rem); line-height: 1.2; letter-spacing: -.01em; }

.eyebrow {
  font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--verde); margin-bottom: 1rem;
  display: flex; align-items: center; gap: .6em;
}
.eyebrow::before { content: ""; width: 28px; height: 1.5px; background: currentColor; }
.dark .eyebrow { color: var(--salvia-logo); }

.lead { font-size: clamp(1.08rem, .4vw + 1rem, 1.25rem); line-height: 1.6; color: var(--texto-suave); max-width: 36em; }
.dark .lead { color: rgba(242, 242, 242, .86); }

.script { font-family: var(--script); font-size: clamp(1.9rem, 2vw + 1.2rem, 2.6rem); line-height: 1; color: var(--verde); margin-bottom: .35em; }

/* Assinatura: efeito adesivo (contorno grosso creme + sombra leve), como nas capas do feed */
.sticker {
  display: inline-block;
  font-style: italic; font-weight: 900;
  color: var(--verde);
  letter-spacing: -.02em;
  padding-inline: .06em;
  transform: rotate(-1.5deg);
  --s: .055em;
  --c: var(--creme);
  text-shadow:
    var(--s) 0 0 var(--c), calc(var(--s) * -1) 0 0 var(--c), 0 var(--s) 0 var(--c), 0 calc(var(--s) * -1) 0 var(--c),
    calc(var(--s) * .7) calc(var(--s) * .7) 0 var(--c), calc(var(--s) * -.7) calc(var(--s) * .7) 0 var(--c),
    calc(var(--s) * .7) calc(var(--s) * -.7) 0 var(--c), calc(var(--s) * -.7) calc(var(--s) * -.7) 0 var(--c),
    var(--s) calc(var(--s) * .4) 0 var(--c), calc(var(--s) * -1) calc(var(--s) * .4) 0 var(--c),
    var(--s) calc(var(--s) * -.4) 0 var(--c), calc(var(--s) * -1) calc(var(--s) * -.4) 0 var(--c),
    calc(var(--s) * .4) var(--s) 0 var(--c), calc(var(--s) * -.4) var(--s) 0 var(--c),
    calc(var(--s) * .4) calc(var(--s) * -1) 0 var(--c), calc(var(--s) * -.4) calc(var(--s) * -1) 0 var(--c),
    0 .12em .22em rgba(40, 38, 40, .35);
}
.sticker-light { --c: var(--salvia-logo); color: var(--grafite); }

.quote {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, .6vw + 1rem, 1.35rem); line-height: 1.5;
  color: var(--grafite);
  border-left: 2px solid var(--oliva); padding-left: 1.1em; margin-block: 1.6em;
}
.quote p { margin: 0; }
.quote-light { color: var(--off); border-left-color: var(--salvia-logo); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .8em 1.5em;
  border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--sans); font-weight: 700; font-size: 1rem; line-height: 1.1; text-decoration: none;
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn .icon { width: 1.25em; height: 1.25em; flex: none; }
.btn-sm { min-height: 40px; padding: .55em 1.1em; font-size: .92rem; }
.btn-primary { background: var(--verde); color: var(--branco); box-shadow: 0 6px 18px -8px rgba(82, 89, 57, .7); }
.btn-primary:hover { background: #434a2e; transform: translateY(-1px); }
.btn-ghost { color: var(--grafite); text-decoration: underline; text-decoration-thickness: 1.5px; padding-inline: .4em; }
.btn-ghost:hover { color: var(--verde); }
.btn-outline { border-color: var(--grafite); color: var(--grafite); background: transparent; }
.btn-outline:hover { background: var(--grafite); color: var(--off); }
.btn-light { background: var(--off); color: var(--verde); }
.btn-light:hover { background: var(--salvia-logo); transform: translateY(-1px); }

.text-link { font-weight: 700; color: var(--verde); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.text-link:hover { color: var(--grafite); }

.icon { width: 1.2em; height: 1.2em; }
.icon-lg { width: 36px; height: 36px; }

/* ---------- Textura e decoração ---------- */
.grain { background-color: var(--salvia); position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22; mix-blend-mode: multiply;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .35 0 0 0 0 .22 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sparkle { color: var(--verde); }
.arch { border-radius: 999px 999px var(--raio) var(--raio); overflow: hidden; }

/* ---------- Cabeçalho ---------- */
/* Barra em formato de pílula, flutuando sobre a página (referência: doktra.com.br) */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: var(--header-gap) 12px 0;
  pointer-events: none; /* a faixa transparente em volta da pílula não bloqueia cliques */
}
.site-header .header-inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 6px;
  min-height: var(--header-h); padding: 6px 6px 6px 18px;
  background: var(--branco); border-radius: 999px;
  box-shadow: 0 10px 30px -4px rgba(40, 38, 40, .14);
  transition: box-shadow .2s;
}
.site-header.is-scrolled .header-inner { box-shadow: 0 12px 34px -6px rgba(40, 38, 40, .24); }
.brand { display: block; margin-right: auto; }
.brand img { height: 28px; width: auto; }
.header-cta { padding-inline: 1em; }

.menu-toggle {
  width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--grafite);
}
.menu-toggle-bar, .menu-toggle-bar::before, .menu-toggle-bar::after {
  display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s, opacity .2s;
}
.menu-toggle-bar { position: relative; }
.menu-toggle-bar::before, .menu-toggle-bar::after { content: ""; position: absolute; left: 0; }
.menu-toggle-bar::before { top: -7px; }
.menu-toggle-bar::after { top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

.main-nav {
  position: absolute; left: 12px; right: 12px; top: calc(100% + 8px);
  background: var(--branco); border-radius: 24px; box-shadow: 0 16px 40px -8px rgba(40, 38, 40, .25);
  display: none; pointer-events: auto;
}
.main-nav.is-open { display: block; }
.main-nav ul { list-style: none; margin: 0; padding: 8px 22px 12px; }
.main-nav a {
  display: block; padding: 14px 4px; border-bottom: 1px solid var(--linha);
  color: var(--grafite); text-decoration: none; font-weight: 600; font-size: 1.05rem;
}
.main-nav li:last-child a { border-bottom: 0; }
.main-nav a:hover { color: var(--verde); }

/* ---------- Hero ---------- */
/* O topo começa por baixo da barra flutuante */
.hero {
  overflow: hidden;
  margin-top: calc(-1 * (var(--header-h) + var(--header-gap)));
  padding-block: calc(var(--header-h) + var(--header-gap) + 32px) 64px;
}
/* Curvas suaves de fundo (tom sobre tom), como nos posts */
.bg-shapes { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.bg-shapes circle, .bg-shapes ellipse { fill: #D3DBCB; }
.bg-shapes-dark circle, .bg-shapes-dark ellipse { fill: #5B6340; }

/* Estrelas de 4 pontas: contorno e preenchida */
.star { position: absolute; pointer-events: none; }
.star-filled { color: var(--grafite); }
.star-hero-intro { width: 22px; height: 22px; right: 4px; top: -28px; }
.star-hero-photo { width: 30px; height: 30px; left: -12px; top: 58%; }
.star-mfc { width: 30px; height: 30px; right: 4px; top: -44px; }
/* Celular: saudação em uma linha no topo; título ao lado da foto; o resto ocupa a largura toda embaixo */
.hero-inner {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) var(--foto-topo-celular);
  grid-template-areas: "intro photo" "rest rest";
  gap: 24px 14px;
}
.hero-intro { grid-area: intro; position: relative; }
.hero-rest { grid-area: rest; }
.hero .hero-greet { font-size: max(.85rem, var(--saudacao-celular)); line-height: 1.15; white-space: nowrap; margin-bottom: .45em; }
.hero-intro .display { color: var(--grafite); margin: 0; font-size: var(--hero-titulo); }
/* O parágrafo do topo acompanha a largura do título (não passa para baixo da foto) */
/* 7.2 × tamanho do título = largura da linha mais longa do título ("não só atende.") */
.hero-inner { --hero-titulo: clamp(1.6rem, calc(var(--titulo-topo-celular) + .5rem), var(--titulo-topo-computador)); }
.hero .lead { color: #3A383A; font-size: var(--texto-topo); max-width: min(calc(100% - var(--foto-topo-celular) - 14px), calc(var(--hero-titulo) * 7.2)); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 28px; }
.credential { font-size: .92rem; line-height: 1.5; color: #3A383A; margin: 0; padding-top: 18px; border-top: 1px solid rgba(40, 38, 40, .22); max-width: 30em; }
.credential strong { color: var(--grafite); }

.hero-photo { grid-area: photo; position: relative; width: 100%; overflow: visible; border-radius: 0; align-self: center; }
.hero-photo img {
  border-radius: 999px 999px var(--raio-sm) var(--raio-sm);
  border: 1.5px solid var(--grafite);
  aspect-ratio: 3 / 4.2; object-fit: cover; object-position: 50% 18%; width: 100%;
  box-shadow: 7px 7px 0 -1.5px var(--salvia-logo), 7px 7px 0 0 var(--grafite);
}

/* ---------- Sobre: "Conheça a Dra." + história ---------- */
.perfil { display: grid; gap: 32px; align-items: center; }
.perfil-photo { max-width: 480px; }
.perfil-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raio); }
.perfil-nome {
  font-family: var(--serif); font-weight: 700; color: var(--verde);
  font-size: clamp(2.2rem, 3vw + 1rem, 3.4rem); line-height: 1.05; letter-spacing: -.02em;
}
.perfil-crm {
  position: relative; margin: .35em 0 0; padding-bottom: 18px;
  font-size: 1.15rem; letter-spacing: .02em; color: var(--texto-suave);
}
.perfil-crm::after { content: ""; position: absolute; left: 0; bottom: 0; width: 96px; height: 1.5px; background: var(--verde); }
.perfil-lista { list-style: none; margin: 24px 0 30px; padding: 0; display: grid; gap: 12px; max-width: 38em; }
.perfil-lista li { position: relative; padding-left: 24px; line-height: 1.5; }
.perfil-lista li::before {
  content: ""; position: absolute; left: 3px; top: .45em;
  border-left: 7px solid var(--oliva); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}

.historia {
  display: grid; gap: 8px 64px;
  margin-top: clamp(56px, 8vw, 96px); padding-top: clamp(40px, 6vw, 64px);
  border-top: 1px solid var(--linha);
}
.historia .quote { margin-top: 0; }
.historia-body > p { max-width: 38em; }
/* ---------- Medicina de Família ---------- */
.dark { background: var(--verde); color: var(--off); }
.mfc { overflow: hidden; isolation: isolate; }
.mfc-head { max-width: 760px; margin-bottom: 48px; position: relative; }
.mfc-head .display { margin-bottom: .5em; }
.mfc-grid { display: grid; gap: 40px; align-items: start; }
.nowrap { white-space: nowrap; }
/* Título da parceria: no celular encolhe um pouco para ficar em 2 linhas ("...em uma" / "única especialidade.") */
#parceria-title { font-size: min(clamp(1.95rem, 3vw + 1rem, 3rem), 7.6vw); }

.pillars { display: grid; gap: 0; }
.pillars > div { padding: 18px 0; border-top: 1px solid rgba(214, 224, 200, .35); }
.pillars dt { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 1.3rem; color: var(--salvia-logo); margin-bottom: 4px; }
.pillars dd { color: rgba(242, 242, 242, .88); }

.quando { margin-top: 64px; padding-top: 48px; border-top: 1px solid rgba(214, 224, 200, .35); }
.quando-titulo {
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.1rem; letter-spacing: .01em;
  color: var(--salvia-logo); margin-bottom: 16px;
}
.quando-list { list-style: none; counter-reset: q; margin: 0 0 40px; padding: 0; display: grid; gap: 14px; }
.quando-list li {
  counter-increment: q; position: relative; padding: 14px 18px 14px 64px;
  background: rgba(242, 242, 242, .07); border: 1px solid rgba(214, 224, 200, .3); border-radius: var(--raio-sm);
  font-size: 1.05rem;
}
.quando-list li::before {
  content: counter(q, decimal-leading-zero); position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  font-family: var(--serif); font-style: italic; font-weight: 900; font-size: 1.35rem; color: var(--salvia-logo);
}
.pull { font-family: var(--serif); font-size: clamp(1.5rem, 2vw + 1rem, 2.2rem); line-height: 1.25; letter-spacing: -.01em; max-width: 22em; margin-bottom: 28px; }

/* ---------- Fotona ---------- */
.fotona-head { display: grid; gap: 32px; align-items: end; margin-bottom: 40px; }
.fotona-photo { max-width: 420px; }
.fotona-photo img { width: 100%; border-radius: var(--raio); aspect-ratio: 3 / 4; object-fit: cover; }

.proc-list { border-top: 1.5px solid var(--grafite); }
.proc { border-bottom: 1px solid var(--linha); }
.proc summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 2px; align-items: center;
  padding: 22px 4px;
}
.proc summary::-webkit-details-marker { display: none; }
.proc-name { font-family: var(--serif); font-weight: 700; font-size: clamp(1.35rem, 1.2vw + 1rem, 1.75rem); line-height: 1.2; grid-column: 1; }
.proc-short { grid-column: 1; color: var(--texto-suave); font-size: .98rem; }
.proc-more {
  grid-column: 2; grid-row: 1 / span 2;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .85rem; font-weight: 700; color: var(--verde); white-space: nowrap;
}
.proc-more::after {
  content: "+"; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--verde); font-size: 1.3rem; font-weight: 500; line-height: 1; transition: transform .25s, background-color .2s, color .2s;
}
.proc[open] .proc-more::after { transform: rotate(45deg); background: var(--verde); color: var(--branco); }
.proc summary:hover .proc-name { color: var(--verde); }
.proc-body { padding: 0 4px 26px; max-width: 46em; }
.proc-note { font-size: .92rem; font-style: italic; color: var(--texto-suave); }
.fotona-foot {
  display: flex; gap: 12px; align-items: flex-start; margin: 32px 0 0; max-width: 46em;
  font-size: .98rem; color: var(--texto-suave);
}
.sparkle-inline { width: 20px; height: 20px; flex: none; margin-top: 3px; }

@media (max-width: 479px) {
  .proc-more { font-size: 0; gap: 0; }
}

/* ---------- Parceria ---------- */
.parceria-head { max-width: 640px; margin-bottom: 40px; }
.parceria-head p:last-child { font-size: 1.08rem; color: #3A383A; }
.partners { display: grid; gap: 20px; }
.partner {
  display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: start; align-content: start;
  background: var(--off); border: 1.5px solid var(--grafite); border-radius: var(--raio); padding: 22px;
}
.partner-photo {
  width: 88px; aspect-ratio: 1; border-radius: 50%;
  background: var(--salvia-logo); border: 1.5px solid var(--grafite);
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--serif); font-style: italic; font-weight: 900; font-size: 1.8rem; color: var(--verde);
}
.partner-photo img { width: 100%; height: 100%; object-fit: cover; }
.partner-name { font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; }
.partner-role { font-weight: 600; font-size: .95rem; margin: 4px 0 2px; }
.partner-crm { font-size: .88rem; letter-spacing: .02em; color: var(--verde); font-weight: 700; margin-bottom: 10px; }
.partner-info p:last-child { margin-bottom: 0; }
.partner-insta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .95rem; color: var(--verde); text-decoration: none; }
.partner-insta:hover { text-decoration: underline; }

/* ---------- Instagram ---------- */
.insta-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-bottom: 32px; }
.insta-head .h2 { margin-bottom: 0; }
.insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.insta-grid:empty { display: none; }
.instagram:has(.insta-grid:empty) .insta-head { margin-bottom: 0; }
.insta-item {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: var(--salvia);
}
.insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.insta-item:hover img { transform: scale(1.04); }
.insta-item .insta-badge { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; color: var(--branco); filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.insta-fallback {
  grid-column: 1 / -1; display: grid; justify-items: center; text-align: center; gap: 10px;
  padding: 48px 24px; border: 1.5px dashed rgba(40, 38, 40, .35); border-radius: var(--raio); color: var(--verde);
}
.insta-fallback p { color: var(--texto-suave); margin: 0; max-width: 28em; }

/* ---------- CTA final ---------- */
.cta-final { background: var(--grafite); padding-block: clamp(64px, 9vw, 110px); overflow: hidden; }
.cta-inner { display: grid; justify-items: center; text-align: center; }
.cta-copy { max-width: 820px; }
.cta-copy .lead { margin-inline: auto; }

.cta-copy .display { margin-bottom: .5em; }
.cta-final .sticker-light { color: var(--verde); --c: var(--creme); }

/* ---------- Contato ---------- */
.contato-grid { display: grid; gap: 40px; }
.info-list { display: grid; gap: 0; margin-bottom: 28px; }
.info-list > div { display: grid; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.info-list dt { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--verde); }
.info-list dd { padding-left: 28px; }
.info-list dd a { color: var(--grafite); font-weight: 600; }
.contato-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.map { position: relative; min-height: 340px; border-radius: var(--raio); overflow: hidden; border: 1.5px solid var(--grafite); background: var(--salvia); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-facade {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 24px;
  color: var(--verde);
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0 110px, rgba(82, 89, 57, .25) 111px 112px, transparent 113px 170px, rgba(82, 89, 57, .18) 171px 172px, transparent 173px);
}
.map-facade p { margin: 0; color: var(--grafite); font-weight: 600; }
.map-facade .map-note { font-size: .82rem; font-weight: 400; color: var(--texto-suave); }

/* ---------- Rodapé ---------- */
.site-footer { background: var(--verde); color: rgba(242, 242, 242, .9); padding: 56px 0 96px; font-size: .95rem; }
.footer-grid { display: grid; gap: 32px; }
.footer-brand img { width: 220px; height: auto; }
.footer-tech p { margin-bottom: .6em; }
.footer-tech strong { color: var(--off); }
.footer-small { font-size: .85rem; opacity: .85; }
.footer-links { display: grid; gap: 10px; align-content: start; }
.footer-links a, .link-button { color: var(--off); text-decoration: none; font-weight: 600; justify-self: start; }
.footer-links a:hover, .link-button:hover { text-decoration: underline; }
.link-button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(214, 224, 200, .3); font-size: .85rem; opacity: .85; }
.footer-bottom p { margin: 0; }

/* ---------- WhatsApp flutuante ---------- */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--verde); color: var(--branco);
  box-shadow: 0 0 0 3px var(--off), 0 10px 24px -6px rgba(40, 38, 40, .55);
  transition: transform .2s, bottom .25s;
}
.wa-float svg { width: 30px; height: 30px; }
.wa-float:hover { transform: scale(1.06); }
body.cookie-visible .wa-float { bottom: calc(16px + var(--cookie-h, 0px)); }

/* ---------- Cookies ---------- */
.cookie {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70;
  max-width: 560px; margin-inline: auto;
  background: var(--off); color: var(--grafite);
  border: 1.5px solid var(--grafite); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 18px 18px 16px; font-size: .92rem; line-height: 1.5;
}
.cookie[hidden] { display: none; }
.cookie p { margin: 0 0 12px; }
.cookie-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Animação de entrada (só com JS e sem reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   Tablet / desktop
   ========================================================================== */
@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .partners { grid-template-columns: 1fr 1fr; }
  .partner { grid-template-columns: 1fr; }
  .partner-photo { width: 112px; font-size: 2.2rem; }
  .pillars { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .insta-grid { gap: 10px; }
}

@media (min-width: 960px) {
  :root { --header-h: 68px; --header-gap: 16px; }
  .site-header { padding-inline: 16px; }
  .site-header .header-inner { padding: 10px 10px 10px 26px; gap: 12px; }
  .brand img { height: 36px; }
  .header-cta { padding-inline: 1.5em; }
  .menu-toggle { display: none; }
  .main-nav { position: static; display: block; background: none; border: 0; box-shadow: none; margin-right: 8px; }
  .main-nav ul { display: flex; gap: 4px; padding: 0; }
  .main-nav a { border: 0; padding: 8px 14px; font-size: .92rem; font-weight: 500; border-radius: 999px; }
  .main-nav a:hover { background: rgba(121, 133, 97, .14); }
  .header-cta { min-height: 44px; }

  .hero { padding-block: calc(var(--header-h) + var(--header-gap) + 48px) 96px; }
  .hero-inner {
    grid-template-columns: 1.15fr .85fr;
    /* linhas vazias em cima e embaixo centralizam o bloco de texto na altura da foto */
    grid-template-areas: "topo photo" "intro photo" "rest photo" "base photo";
    grid-template-rows: 1fr auto auto 1fr;
    gap: 0 64px;
    --hero-titulo: clamp(2.4rem, 3.2vw + .6rem, var(--titulo-topo-computador));
  }
  .hero-intro { align-self: end; }
  .hero-photo { align-self: center; }
  .hero .hero-greet { font-size: var(--saudacao-computador); }
  .hero-intro .display { margin-bottom: 24px; }
  .hero-rest { align-self: start; }
  .hero-photo { max-width: 440px; justify-self: end; }
  .hero-photo img { aspect-ratio: 4 / 5; object-position: 50% 22%; border-radius: 999px 999px var(--raio) var(--raio); box-shadow: 14px 14px 0 -1.5px var(--salvia-logo), 14px 14px 0 0 var(--grafite); }
  .star-hero-intro { width: 36px; height: 36px; right: 8%; top: -40px; }
  .star-hero-photo { width: 52px; height: 52px; left: -26px; top: 22%; }
  .star-mfc { width: 46px; height: 46px; right: -40px; top: 10px; }

  .perfil { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; }
  .historia { grid-template-columns: 1fr 1.4fr; }

  .pillars { grid-template-columns: repeat(4, 1fr); }
  .hero .lead { max-width: calc(var(--hero-titulo) * 7.2); }
  .quando { display: grid; grid-template-columns: 1fr 1.3fr; grid-template-rows: auto auto 1fr; gap: 0 64px; align-items: start; }
  .quando-titulo { grid-column: 2; grid-row: 1; }
  .quando-list { grid-column: 2; grid-row: 2 / span 2; margin: 0; }
  .quando .pull { grid-column: 1; grid-row: 1 / span 2; }
  .quando .btn { grid-column: 1; grid-row: 3; justify-self: start; }

  .fotona-head { grid-template-columns: 1fr 300px; gap: 64px; }
  .fotona-photo { max-width: none; }
  .proc summary { grid-template-columns: minmax(240px, 1fr) 1.2fr auto; padding: 26px 8px; }
  .proc-name, .proc-short { grid-column: auto; }
  .proc-more { grid-column: 3; grid-row: 1; }
  .proc-body { padding-left: calc(8px); margin-left: 0; }



  .contato-grid { grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: stretch; }
  .map { min-height: 100%; }

  .site-footer { padding-bottom: 28px; }
  .footer-grid { grid-template-columns: 1fr 1.6fr auto; gap: 48px; }

  .wa-float { right: 24px; bottom: 24px; }
  body.cookie-visible .wa-float { bottom: 24px; }
  .cookie { left: 24px; right: auto; bottom: 24px; margin: 0; }
}