/* Dra. Patricia Barros — style.css
 * Versão "design novo": a composição da referência de clínica enviada em 14/11/2026 (faixa de
 * topo, navegação clara, hero com a médica recortada sobre uma forma colorida, barra por cima da
 * borda do hero, fotos em formas com brilhos e selo giratório, letreiro, cartões de atendimento
 * com ícone redondo), feita com a paleta e a logo da Dra. Onde a referência usa azul entra o
 * vermelho da marca; o cinza claro vira creme e verde sálvia; o verde escuro faz as áreas fortes.
 * A janela de agendamento fica em agendar.css.
 * Mobile first: a base é o celular, e os min-width acrescentam colunas.
 * ==========================================================================================
 *  1 Tokens · 2 Fontes e base · 3 Tipografia · 4 Layout e peças · 5 Topo e navegação
 *  6 Hero e barra · 7 Sobre · 8 Letreiro · 9 Atendimentos · 10 Foco · 11 Formação · 12 Onde
 * 13 Dúvidas · 14 Conversar · 15 Rodapé · 16 Barra fixa · 17 Movimento · 18 Responsivo
 * 19 Reduced motion · 20 Impressão
 * ========================================================================================== */

/* 1. TOKENS ================================================================ */
:root {
  /* A paleta: creme e vermelho principais, verde escuro secundária, rosa, vinho e sálvia
     terciárias. O creme claro é o creme a meio caminho do branco, para os cartões. */
  --creme:        #FFF5E3;
  --creme-claro:  #FFFBF3;
  --vermelho:     #D93B52;  /* marca: formas, ícones, metade dos títulos (4,2:1 no creme)     */
  --vermelho-btn: #D5384F;  /* botões e letreiro: branco em cima dá 4,7:1                     */
  --vermelho-pe:  #A82A3F;  /* pé do degradê das áreas vermelhas                              */
  --vinho:        #912535;  /* links e rótulos (7,8:1 no creme, 6:1 na sálvia)                */
  --rosa:         #F68D9C;  /* detalhes e a cor de destaque sobre o verde escuro              */
  --salvia:       #D5DDCA;
  --verde:        #394B3D;  /* títulos e áreas fortes (8,6:1 no creme)                        */
  --tinta:        #0D0900;
  --apoio:        #4B564C;  /* texto de apoio (7:1 no creme, 5,4:1 na sálvia)                 */
  --fio:          #C2CCB5;

  --font-display: "Cabinet Grotesk", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Satoshi", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --t-xs:   .8125rem;
  --t-sm:   .9375rem;
  --t-base: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --t-md:   clamp(1.125rem, 1.07rem + .25vw, 1.25rem);
  --t-lg:   clamp(1.3125rem, 1.22rem + .4vw, 1.5rem);
  --t-h2:   clamp(1.9rem, 1.45rem + 1.9vw, 3rem);
  --t-h1:   clamp(2.5rem, 1.75rem + 3.3vw, 4.25rem);

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --container: 1200px;
  --secao: clamp(4rem, 3rem + 5vw, 7rem);
  --nav-h: 68px;

  --r-painel: clamp(24px, 2vw + 14px, 40px);
  --r-cartao: 20px;
  --r-pill: 999px;

  --sombra-sm: 0 1px 2px rgb(57 75 61 / .06), 0 6px 16px -6px rgb(57 75 61 / .16);
  --sombra-md: 0 2px 4px rgb(57 75 61 / .06), 0 22px 44px -18px rgb(57 75 61 / .38);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --z-barra: 20; --z-fixo: 200; --z-menu: 400;

  /* A flor como máscara: silhueta (marcadores) e com os vãos (enfeites). */
  --petala: url("../img/flor-cheia.svg");
  --petala-linha: url("../img/flor-traco.svg");
}

/* 2. FONTES E BASE ======================================================== */
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/CabinetGrotesk-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); -webkit-text-size-adjust: 100%; }
body {
  overflow-x: clip; margin: 0; background: var(--creme); color: var(--tinta);
  font-family: var(--font-body); font-size: var(--t-base); font-weight: 420; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
figure, blockquote { margin: 0; }
::selection { background: var(--vermelho); color: var(--creme); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }
.topo :focus-visible, .servicos :focus-visible, .chamada :focus-visible, .rodape :focus-visible { outline-color: var(--creme); }
.servicos .cartao :focus-visible { outline-color: var(--tinta); }

.skip-link {
  position: absolute; left: 1rem; top: -6rem; z-index: 500; padding: .75rem 1rem; border-radius: 12px;
  background: var(--tinta); color: var(--creme); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.ico { width: 1.25em; height: 1.25em; flex: none; }

/* 3. TIPOGRAFIA ============================================================ */
h1, h2, h3 {
  margin: 0; font-family: var(--font-display); font-weight: 800; color: var(--verde);
  letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; overflow-wrap: break-word;
}
h1 { font-size: var(--t-h1); letter-spacing: -.03em; line-height: 1; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-lg); font-weight: 700; line-height: 1.15; letter-spacing: -.012em; }
p  { margin: 0; max-width: 60ch; text-wrap: pretty; }
a  { color: var(--vinho); text-underline-offset: .2em; }
a:hover { color: var(--tinta); }
/* Título em duas cores, como na referência: a primeira parte na cor da marca. */
.cor { color: var(--vermelho); }

.kicker {
  margin-bottom: .7rem; max-width: none; font-size: var(--t-xs); font-weight: 700; line-height: 1.2;
  letter-spacing: .24em; text-transform: uppercase; color: var(--vinho);
}

/* 4. LAYOUT E PEÇAS ======================================================== */
.wrap { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.secao { padding-block: var(--secao); }
.petala, .petala-linha { background-color: currentColor; }
.petala       { -webkit-mask: var(--petala) center / contain no-repeat; mask: var(--petala) center / contain no-repeat; }
.petala-linha { -webkit-mask: var(--petala-linha) center / contain no-repeat; mask: var(--petala-linha) center / contain no-repeat; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .7rem 1.5rem; border: 1.5px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 700; font-size: var(--t-sm); line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out), transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.btn--grande { min-height: 56px; padding: .9rem 1.9rem; font-size: var(--t-base); }
.btn--cheio { background: var(--vermelho-btn); color: #FFFFFF; box-shadow: 0 12px 24px -14px rgb(217 59 82 / .7); }
.btn--cheio:hover { background: var(--vinho); color: #FFFFFF; transform: translateY(-1px); }
.btn--claro { background: var(--creme); color: var(--verde); }
.btn--claro:hover { background: var(--rosa); color: var(--tinta); transform: translateY(-1px); }
.btn:active { transform: none; }

.link-seta {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
  font-weight: 700; font-size: var(--t-sm); color: var(--vinho); text-decoration: none;
}
.link-seta .ico { width: 1.1rem; height: 1.1rem; transition: translate 200ms var(--ease-out); }
.link-seta:hover { color: var(--tinta); }
.link-seta:hover .ico { translate: 4px 0; }

/* Cabeçalho de seção: título à esquerda e, quando houver, um botão à direita. */
.cabeca { display: grid; gap: 1.5rem; justify-items: start; margin-bottom: 2.5rem; }
.cabeca h2 { max-width: 18ch; }
.cabeca__texto { margin-top: 1rem; max-width: 46ch; }

/* Brilho de quatro pontas, o enfeite da referência. */
.brilho { position: absolute; pointer-events: none; color: var(--vermelho); }

/* 5. TOPO E NAVEGAÇÃO ====================================================== */
.topo { background: var(--verde); color: var(--creme); font-size: var(--t-xs); font-weight: 500; }
.topo__in { display: flex; align-items: center; justify-content: center; gap: 1.5rem; min-height: 40px; }
.topo__lista { display: none; gap: 1.75rem; }
.topo__lista li { display: flex; align-items: center; gap: .45rem; }
.topo__lista .ico { color: var(--rosa); }
.topo__crm { max-width: none; letter-spacing: .01em; text-align: center; }

.mast { position: sticky; top: 0; z-index: var(--z-menu); background: var(--creme); transition: box-shadow 240ms var(--ease-out); }
.mast.is-stuck { box-shadow: 0 1px 0 var(--fio), 0 14px 28px -22px rgb(57 75 61 / .6); }
.mast__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--nav-h); }
.mast__brand {
  position: relative; z-index: calc(var(--z-menu) + 1); display: inline-flex; align-items: center; gap: .6rem; flex: none;
  color: var(--vermelho); text-decoration: none; border-radius: 8px;
}
.mast__brand:hover { color: var(--vermelho); }
.mast__brand img { width: 46px; height: 46px; transition: rotate 700ms var(--ease-out); }
.mast__brand:hover img { rotate: 60deg; }
.mast__nome { display: grid; font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.mast__nome small { font-size: .8125rem; letter-spacing: -.01em; }
.mast__nome span { font-size: 1.3125rem; }

.mast__toggle {
  position: relative; z-index: calc(var(--z-menu) + 1); display: inline-grid; place-items: center;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--salvia); color: var(--verde);
}
.mast__toggle span { position: absolute; left: 14px; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 240ms var(--ease-out); }
.mast__toggle span:nth-child(1) { top: 19px; }
.mast__toggle span:nth-child(2) { top: 27px; }
.mast__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.mast__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Celular: gaveta em tela cheia. */
.mast__nav {
  position: fixed; inset: 0; z-index: var(--z-menu); display: flex; flex-direction: column; gap: 2rem;
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  background: var(--creme); overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(-102%); visibility: hidden;
  transition: transform 520ms cubic-bezier(.65, 0, .35, 1), visibility 0s 520ms;
}
.mast__nav.is-open { transform: none; visibility: visible; transition: transform 520ms var(--ease-out); }
.mast__links { display: grid; }
.mast__link {
  display: flex; align-items: center; min-height: 58px; border-bottom: 1px solid var(--fio);
  font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; letter-spacing: -.02em;
  color: var(--verde); text-decoration: none;
}
.mast__link:hover, .mast__link[aria-current] { color: var(--vermelho); }
.mast__cta { width: 100%; min-height: 56px; font-size: var(--t-base); }
html:has(body.menu-aberto) { overflow: hidden; }

/* 6. HERO E BARRA ========================================================== */
/* Fundo sálvia de ponta a ponta, como o cinza da referência. No celular a foto vem primeiro. */
.hero { position: relative; background: var(--salvia); overflow: clip; }
.hero__in { display: grid; }
/* No celular a forma é cortada na base da foto, e o selo fica por cima desse corte. */
.hero__figura { position: relative; order: -1; display: grid; justify-items: center; align-items: end; height: 20rem; margin-top: 1.25rem; overflow: hidden; }
.hero__bolha {
  position: absolute; left: 50%; bottom: -30%; width: min(21rem, 92%); aspect-ratio: 1; translate: -50% 0; overflow: hidden;
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: linear-gradient(168deg, var(--vermelho) 0%, var(--vermelho-pe) 100%);
}
.hero__halo { position: absolute; left: 50%; top: 42%; width: 118%; aspect-ratio: 1; translate: -50% -50%; color: var(--rosa); opacity: .45; }
.hero__foto { position: relative; height: 100%; width: auto; max-width: none; filter: drop-shadow(0 16px 22px rgb(57 75 61 / .25)); }
.brilho--a { left: 6%; top: 10%; width: 2.2rem; height: 2.2rem; }
.brilho--b { left: 16%; top: 30%; width: 1.1rem; height: 1.1rem; color: var(--verde); }

.hero__texto { position: relative; z-index: 2; display: grid; justify-items: start; gap: 1.1rem; padding: 0 0 6.5rem; }
.hero__texto .selo { margin-top: -1.15rem; }
.selo {
  display: inline-flex; align-items: center; gap: .5rem; max-width: none; padding: .45rem 1rem .45rem .7rem;
  border-radius: var(--r-pill); background: var(--creme-claro); box-shadow: var(--sombra-sm);
  font-size: var(--t-xs); font-weight: 700; color: var(--verde);
}
.selo .ico { width: 1rem; height: 1rem; color: var(--vermelho); }
.hero h1 { max-width: 13ch; }
.hero__lede { max-width: 34ch; font-size: var(--t-md); line-height: 1.5; }
.hero__acoes { display: grid; gap: .75rem; width: 100%; margin-top: .4rem; }

/* O segundo botão do hero: bola com seta e o texto ao lado, como o "Watch Video". */
.link-bola { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 48px; font-weight: 700; font-size: var(--t-sm); color: var(--verde); text-decoration: none; }
.link-bola__bola { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--creme-claro); box-shadow: var(--sombra-sm); color: var(--vermelho); transition: translate 200ms var(--ease-out); }
.link-bola__bola .ico { width: 1.15rem; height: 1.15rem; rotate: 90deg; }
.link-bola span:last-child { text-decoration: underline; text-decoration-color: var(--vermelho); text-underline-offset: .3em; }
.link-bola:hover { color: var(--tinta); }
.link-bola:hover .link-bola__bola { translate: 0 3px; }

/* Barra por cima da borda do hero. */
.barra {
  position: relative; z-index: var(--z-barra); display: grid; gap: 1rem; margin-top: -4.5rem; padding: 1.25rem;
  border-radius: 22px; background: var(--creme-claro); box-shadow: var(--sombra-md);
}
.barra__lista { display: grid; gap: .9rem; }
.barra__item { display: grid; gap: .2rem; }
.barra__rotulo { font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.barra__valor { display: flex; align-items: center; gap: .5rem; font-size: var(--t-sm); color: var(--apoio); }
.barra__valor .ico { width: 1.1rem; height: 1.1rem; color: var(--vermelho); }
.barra__btn { width: 100%; }

/* 7. SOBRE ================================================================= */
.sobre__grid { display: grid; gap: 3rem; align-items: center; }
/* Duas fotos em formas, com brilhos e o selo giratório: o conjunto da referência, com o arco
   no lugar do dente. */
.formas { position: relative; width: min(100%, 25rem); aspect-ratio: 1 / 1.04; margin-inline: auto; }
.forma { position: absolute; overflow: hidden; background: var(--salvia); }
.forma img { width: 100%; height: 100%; object-fit: cover; }
.forma--grande { right: 2%; top: 0; width: 70%; height: 94%; border-radius: 999px 999px 30px 30px; }
.forma--grande img { object-position: 50% 12%; }
.forma--pequena { left: 0; bottom: 3%; width: 46%; aspect-ratio: 1; border-radius: 50% 50% 50% 16%; box-shadow: 0 0 0 8px var(--creme); }
.forma--pequena img { object-position: 50% 20%; }
.brilho--c { left: 5%; top: 9%; width: 3.2rem; height: 3.2rem; }
.brilho--d { left: 1%; top: 27%; width: 1.4rem; height: 1.4rem; color: var(--verde); }

.giro {
  position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 6.75rem; aspect-ratio: 1; overflow: hidden;
  border-radius: 50%; background: var(--verde); color: var(--creme); text-decoration: none; box-shadow: 0 0 0 6px var(--creme);
}
.giro__texto { position: absolute; inset: 0; width: 100%; height: 100%; }
.giro__texto text { fill: currentColor; font-family: var(--font-body); font-size: 10.5px; font-weight: 700; }
.giro__centro { position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--vermelho-btn); color: #FFFFFF; transition: scale 240ms var(--ease-out); }
.giro__centro .ico { width: 1.15rem; height: 1.15rem; rotate: -45deg; }
.giro:hover { color: var(--creme); }
.giro:hover .giro__centro { scale: 1.12; }

.sobre__texto { display: grid; justify-items: start; gap: 1.1rem; }
.sobre__texto .kicker { margin-bottom: -.3rem; }
.sobre__texto p { color: var(--apoio); }
.checks { display: grid; gap: .7rem; margin-block: .2rem .5rem; }
.checks li { display: flex; align-items: flex-start; gap: .7rem; font-weight: 600; line-height: 1.4; }
.checks__marca { display: grid; place-items: center; flex: none; width: 1.4rem; height: 1.4rem; margin-top: .05em; border-radius: 50%; background: var(--vermelho-btn); color: #FFFFFF; }
.checks__marca .ico { width: .85rem; height: .85rem; }

/* 8. LETREIRO ============================================================== */
/* A faixa que corre, com a flor entre um item e outro. Só enfeite: aria-hidden no HTML. */
.letreiro { overflow: hidden; padding-block: 1rem; background: var(--vermelho-btn); color: #FFFFFF; }
.letreiro__trilho { display: flex; width: max-content; }
.letreiro__grupo { display: flex; align-items: center; flex: none; }
.letreiro__grupo li {
  display: flex; align-items: center; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); letter-spacing: -.01em;
}
.letreiro__grupo li::after {
  content: ""; width: 1.5rem; height: 1.5rem; margin-inline: clamp(1.25rem, 2.5vw, 2.25rem); background-color: var(--creme);
  -webkit-mask: var(--petala-linha) center / contain no-repeat; mask: var(--petala-linha) center / contain no-repeat;
}

/* 9. ATENDIMENTOS ========================================================== */
.servicos { background: var(--verde); color: var(--creme); }
.servicos h2 { color: var(--creme); }
.servicos .cor, .servicos .kicker { color: var(--rosa); }
.cartoes { display: grid; gap: 1.25rem; }
.cartao {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-cartao);
  background: var(--creme); color: var(--tinta); border-bottom: 4px solid transparent;
  transition: border-color 200ms var(--ease-out), translate 240ms var(--ease-out);
}
.cartao:hover, .cartao--destaque { border-bottom-color: var(--vermelho); }
.cartao:hover { translate: 0 -4px; }
.cartao__foto img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 30%; }
.cartao__corpo { position: relative; display: grid; align-content: start; justify-items: start; gap: .6rem; padding: 2.6rem 1.4rem 1.25rem; }
.cartao__icone {
  position: absolute; left: 1.25rem; top: -2rem; display: grid; place-items: center; width: 4rem; height: 4rem;
  border-radius: 50%; background: var(--vermelho-btn); color: #FFFFFF; box-shadow: 0 0 0 5px var(--creme);
}
.cartao__icone .ico { width: 1.75rem; height: 1.75rem; }
.cartao p { color: var(--apoio); font-size: var(--t-sm); line-height: 1.55; }
.cartao .link-seta { margin-top: auto; }

/* 10. FOCO ================================================================= */
.foco__grid { display: grid; gap: 3rem; align-items: center; }
.foco__foto { position: relative; width: min(100%, 26rem); margin-inline: auto; padding-bottom: 2.5rem; }
.foco__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-painel) var(--r-painel) var(--r-painel) 999px; }
.foco__fala {
  position: absolute; right: -.25rem; bottom: 0; max-width: 15.5rem; padding: 1rem 1.1rem 1rem 1.5rem;
  border-radius: 18px; background: var(--creme-claro); box-shadow: var(--sombra-md);
}
.foco__fala::before { content: "\201C"; position: absolute; left: .55rem; top: .1rem; font-family: var(--font-display); font-weight: 800; font-size: 2.3rem; line-height: 1; color: var(--vermelho); }
.foco__fala p { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; color: var(--verde); }
.foco__texto { display: grid; justify-items: start; gap: 1.1rem; }
.foco__texto .kicker { margin-bottom: -.3rem; }
.foco__texto > p { color: var(--apoio); }
.itens { display: grid; gap: .75rem; margin-top: .4rem; }
.itens li { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--salvia); font-weight: 600; line-height: 1.4; }
.itens__marca { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1em; color: var(--vermelho); }

/* 11. FORMAÇÃO ============================================================= */
.formacao { background: var(--salvia); }
.grupos { display: grid; gap: 1.25rem; }
.grupo { display: grid; align-content: start; justify-items: start; gap: .9rem; padding: 1.5rem; border-radius: var(--r-cartao); background: var(--creme-claro); }
.grupo__icone { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--verde); color: var(--creme); }
.grupo__icone .ico { width: 1.5rem; height: 1.5rem; }
.grupo h3 { font-size: var(--t-md); }
.grupo ul { display: grid; gap: .6rem; }
.grupo li { position: relative; padding-left: 1.4rem; font-size: var(--t-sm); line-height: 1.45; color: var(--apoio); }
.grupo li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: .8rem; height: .85rem; background-color: var(--vermelho);
  -webkit-mask: var(--petala) center / contain no-repeat; mask: var(--petala) center / contain no-repeat;
}

/* 12. ONDE ================================================================= */
.onde__grid { display: grid; gap: 2.5rem; align-items: center; }
.onde__texto .kicker { margin-bottom: .7rem; }
.locais { display: grid; gap: 1rem; margin-top: 1.75rem; }
.local { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.25rem; border-radius: var(--r-cartao); background: var(--creme-claro); box-shadow: var(--sombra-sm); }
.local > div { display: grid; justify-items: start; gap: .35rem; }
.local h3 { font-size: var(--t-md); }
.local address, .local p { font-size: var(--t-sm); line-height: 1.55; color: var(--apoio); }
.local__icone { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--vermelho-btn); color: #FFFFFF; }
.local__icone--verde { background: var(--verde); color: var(--creme); }
.local__icone .ico { width: 1.4rem; height: 1.4rem; }
.onde__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 24%; border-radius: var(--r-painel); }

/* 13. DÚVIDAS ============================================================== */
.duvidas { padding-top: 0; }
.duvidas__grid { display: grid; gap: 2rem; }
.duvidas__cabeca p:last-child { margin-top: 1rem; color: var(--apoio); }
.faq { display: grid; gap: .6rem; }
.faq__item { border-radius: 18px; background: var(--salvia); transition: background-color 160ms var(--ease-out); }
.faq__item[open] { background: var(--creme-claro); box-shadow: inset 0 0 0 1.5px var(--fio); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding: .75rem 1rem .75rem 1.35rem;
  font-weight: 700; line-height: 1.3; color: var(--verde); cursor: pointer; list-style: none; border-radius: 18px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item p { padding: 0 1.35rem 1.35rem; color: var(--apoio); }
.faq__sinal { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--creme-claro); }
.faq__item[open] .faq__sinal { background: var(--vermelho-btn); }
.faq__sinal::before, .faq__sinal::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 2px; background: var(--vinho); transition: transform 240ms var(--ease-out); }
.faq__sinal::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.faq__sinal::after  { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.faq__item[open] .faq__sinal::before, .faq__item[open] .faq__sinal::after { background: #FFFFFF; }
.faq__item[open] .faq__sinal::after { transform: translate(-50%, -50%) scaleY(0); }

/* 14. CONVERSAR ============================================================ */
.chamada { padding-bottom: var(--secao); }
.chamada__painel {
  position: relative; display: grid; overflow: hidden; border-radius: var(--r-painel);
  background: linear-gradient(160deg, var(--vermelho-btn) 0%, var(--vermelho-pe) 70%); color: #FFFFFF;
}
.chamada__halo { position: absolute; left: -7rem; bottom: -9rem; width: 22rem; aspect-ratio: 1; color: var(--rosa); opacity: .3; pointer-events: none; }
.chamada__texto { position: relative; display: grid; justify-items: start; gap: 1rem; padding: 2.5rem 1.5rem 1.5rem; }
.chamada__texto h2 { color: #FFFFFF; }
.chamada__texto .kicker { margin-bottom: -.2rem; color: #FFFFFF; }
.chamada__sem-js { color: #FFFFFF; font-weight: 700; }
.chamada__figura { position: relative; height: 17rem; overflow: hidden; }
.chamada__disco { position: absolute; left: 50%; top: 2rem; width: 17rem; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--rosa); }
.chamada__figura img { position: absolute; left: 50%; top: .75rem; width: 14.5rem; max-width: none; translate: -46% 0; }

/* 15. RODAPÉ =============================================================== */
.rodape { padding-block: 3.5rem calc(1.5rem + env(safe-area-inset-bottom)); background: var(--verde); color: var(--creme); }
.rodape a { color: var(--creme); }
.rodape a:hover { color: var(--rosa); }
.rodape__grid { display: grid; gap: 2rem; padding-bottom: 2.5rem; }
.rodape__marca { display: flex; align-items: center; gap: 1rem; }
.rodape__flor { flex: none; width: 4.25rem; height: 4.25rem; color: var(--rosa); }
.rodape__nome { display: grid; gap: .1em; max-width: none; font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -.025em; }
.rodape__nome small { font-size: .9375rem; }
.rodape__nome span { font-size: 1.875rem; }
.rodape__nome em { margin-top: .35em; font-style: normal; font-weight: 700; font-size: .9375rem; letter-spacing: -.005em; color: var(--rosa); }
.rodape__col { display: grid; align-content: start; gap: .5rem; font-size: var(--t-sm); line-height: 1.6; }
.rodape__col h2 { font-family: var(--font-body); font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa); }
.rodape__links { display: grid; justify-items: start; }
.rodape__links a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape__legal { max-width: 90ch; padding-top: 1.5rem; border-top: 1px solid rgb(255 245 227 / .18); font-size: var(--t-xs); line-height: 1.6; color: rgb(255 245 227 / .78); }

/* 16. BARRA FIXA (celular) ================================================= */
.cta-fixo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-fixo);
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background: rgb(255 245 227 / .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 -1px 0 var(--fio), 0 -12px 28px -20px rgb(57 75 61 / .5);
  transform: translateY(110%); visibility: hidden;
  transition: transform 520ms var(--ease-out), visibility 0s 520ms;
}
.cta-fixo .btn { width: 100%; min-height: 54px; }
.cta-fixo.is-visible { transform: none; visibility: visible; transition: transform 520ms var(--ease-out), visibility 0s; }

/* 17. MOVIMENTO ============================================================ */
@keyframes corre { from { translate: 0 0; } to { translate: -50% 0; } }
@keyframes giro  { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes ergue { from { transform: translateY(22px); } to { transform: none; } }
@keyframes pisca { 0%, 100% { scale: 1; } 50% { scale: .72; } }

@media (prefers-reduced-motion: no-preference) {
  .letreiro__trilho { animation: corre 38s linear infinite; }
  .giro__texto { animation: giro 18s linear infinite; }
  .hero__foto { animation: ergue 900ms var(--ease-out) backwards; }
  .brilho--a, .brilho--c { animation: pisca 3.2s ease-in-out infinite; }
  .brilho--b, .brilho--d { animation: pisca 3.2s ease-in-out 1.1s infinite; }
}

/* 18. RESPONSIVO =========================================================== */
@media (min-width: 30rem) {
  .hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; width: auto; }
}

@media (min-width: 44rem) {
  :root { --nav-h: 76px; }
  .mast__brand img { width: 52px; height: 52px; }
  .mast__nome span { font-size: 1.5rem; }
  .hero__figura { height: 25rem; }
  .hero__bolha { width: 27rem; }
  .barra { padding: 1.25rem 1.5rem; }
  .barra__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .barra__item { padding-inline: 1.25rem; border-left: 1px solid var(--fio); }
  .barra__item:first-child { padding-left: 0; border-left: 0; }
  .cabeca { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartao:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cartao:last-child:nth-child(odd) .cartao__foto img { aspect-ratio: 16 / 6; object-position: 50% 22%; }
  .grupos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chamada__painel { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: stretch; }
  .chamada__texto { align-content: center; padding: 3rem 0 3rem 3rem; }
  .chamada__figura { height: auto; min-height: 21rem; }
  .chamada__disco { top: auto; bottom: -3.5rem; width: 19rem; }
  .chamada__figura img { top: auto; bottom: 0; width: auto; height: 94%; translate: -50% 0; }
  .rodape__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  :root { --nav-h: 84px; }
  .topo__in { justify-content: space-between; }
  .topo__lista { display: flex; }
  .mast__toggle { display: none; }
  .mast__nav {
    position: static; inset: auto; flex-direction: row; align-items: center; gap: 1.25rem; padding: 0;
    background: transparent; overflow: visible; transform: none; visibility: visible; transition: none;
  }
  .mast__links { display: flex; gap: .15rem; }
  .mast__link {
    min-height: 44px; padding: 0 .7rem; border: 0; border-radius: var(--r-pill); white-space: nowrap;
    font-family: var(--font-body); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; color: var(--tinta);
    transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out);
  }
  .mast__link:hover { background: rgb(57 75 61 / .1); color: var(--verde); }
  .mast__link[aria-current] { background: rgb(57 75 61 / .1); color: var(--vinho); }
  .mast__cta { width: auto; min-height: 46px; font-size: var(--t-sm); }

  /* Duas colunas: o texto à esquerda e a foto à direita, encostada na borda de baixo. */
  .hero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; min-height: clamp(34rem, calc(100svh - 11rem), 42rem); }
  .hero__texto { align-self: center; gap: 1.35rem; padding: 3rem 0 7rem; }
  .hero__figura { order: 0; align-self: stretch; height: auto; min-height: 30rem; margin-top: 0; overflow: visible; }
  .hero__texto .selo { margin-top: 0; }
  .hero__bolha { bottom: -22%; width: min(34rem, 112%); }
  .hero__foto { position: absolute; left: 50%; bottom: 0; height: min(92%, 35rem); translate: -50% 0; }
  .brilho--a { left: -2%; top: 16%; width: 3rem; height: 3rem; }
  .brilho--b { left: 7%; top: 31%; width: 1.4rem; height: 1.4rem; }
  .barra { grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-top: -3.25rem; padding: 1.35rem 1.75rem; }
  .barra__btn { width: auto; }

  .sobre__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 6vw, 6rem); }
  .formas { width: min(100%, 29rem); }
  .giro { width: 7.75rem; }
  .cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .cartao:last-child:nth-child(odd) { grid-column: auto; }
  .cartao:last-child:nth-child(odd) .cartao__foto img { aspect-ratio: 16 / 11; object-position: 50% 30%; }
  .foco__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(3rem, 6vw, 6rem); }
  .foco__foto { width: 100%; }
  .onde__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: stretch; }
  .onde__foto { position: relative; min-height: 26rem; }
  .onde__foto img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .duvidas__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .duvidas__cabeca { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
  .chamada__texto { padding: 4rem 0 4rem 4rem; }
  .chamada__figura { min-height: 25rem; }
  .chamada__disco { width: 24rem; bottom: -5rem; }
  .rodape__grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  .cta-fixo { display: none; }
}

/* Sem cursor não há hover: nada depende dele. */
@media (hover: none) {
  .btn:hover, .cartao:hover { transform: none; translate: none; }
}

/* 18b. PÁGINA DE DOCUMENTO (política de privacidade) ====================== */
.mast__voltar { min-height: 44px; }
.doc { padding-block: 2.5rem var(--secao); }
.doc__painel { padding: 2rem 1.5rem; border-radius: var(--r-painel); background: var(--creme-claro); box-shadow: var(--sombra-sm); }
.doc__cabeca { display: grid; gap: .75rem; margin-bottom: 2rem; }
.doc__cabeca p { font-size: var(--t-sm); color: var(--apoio); }
.doc__corpo { display: grid; gap: 1rem; max-width: 62ch; }
.doc__corpo h2 { margin-top: 1.5rem; font-size: var(--t-lg); }
.doc__corpo h2:first-of-type { margin-top: 0; }
.doc__corpo ul { display: grid; gap: .5rem; }
.doc__corpo ul li { position: relative; padding-left: 1.4rem; }
.doc__corpo ul li::before {
  content: ""; position: absolute; left: 0; top: .4em; width: .8rem; height: .85rem; background-color: var(--vermelho);
  -webkit-mask: var(--petala) center / contain no-repeat; mask: var(--petala) center / contain no-repeat;
}
.doc__volta { margin-top: 1.5rem; }
.rodape__legal--so { padding-top: 0; border-top: 0; }
.pendente { padding: 0 .28em; border-radius: 4px; background: var(--salvia); font-weight: 600; color: var(--vinho); }
@media (min-width: 44rem) { .doc__painel { padding: 4rem clamp(2.5rem, 6vw, 6rem); } }

/* 19. REDUCED MOTION ======================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .mast__nav { transition: none; }
}

/* 20. IMPRESSÃO ============================================================ */
@media print {
  .topo, .mast, .cta-fixo, .skip-link, .letreiro, .giro, .brilho, .hero__bolha, .chamada__figura, .barra__btn { display: none !important; }
  body, .hero, .servicos, .formacao, .chamada__painel, .rodape { background: #FFFFFF !important; color: #000000 !important; }
  .servicos h2, .chamada__texto h2, .chamada__texto .kicker, .rodape a, .rodape__legal, .rodape__col h2 { color: #000000 !important; }
  img { max-height: 8cm; object-fit: contain; }
}