:root {
  /* Identidade MFC Litoral: salvia #5d6754, caramelo #a1855e, teal #3ba993 */
  --brand-sage: #5d6754;
  --brand-clay: #a1855e;
  --brand-teal: #3ba993;

  --ink: #3b4436;
  --ink-deep: #2b322a;
  --ink-soft: #5d6754;
  --sage: #8b9583;
  --sage-pale: #e3e7dd;
  --mist: #eef1ea;
  --sand: #f8f6f1;
  --sand-warm: #f1ebe1;
  --paper: #ffffff;
  --rose: #a1855e;
  --rose-ink: #7d6544;
  --rose-pale: #f1e8db;
  --gold: #c3a67a;
  --gold-ink: #7d6544;
  --teal: #3ba993;
  --teal-deep: #2a8271;
  --text: #3a4237;
  --muted: #646e5e;
  --hair: rgba(59, 68, 54, .12);
  --hair-strong: rgba(59, 68, 54, .22);
  --shade-sm: 0 2px 10px -4px rgba(43, 50, 42, .2);
  --shade-md: 0 18px 40px -28px rgba(43, 50, 42, .5);
  --shade-lg: 0 40px 90px -50px rgba(43, 50, 42, .6);
  --r-xl: 44px;
  --r-lg: 32px;
  --r-md: 22px;
  --r-sm: 14px;
  --container: 1200px;
  --header-h: 84px;
  --ease: cubic-bezier(.22,.68,.16,1);
  --display: Outfit, "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --z-float: 40;
  --z-header: 60;
  --z-menu: 70;
  --z-grain: 80;
  --z-modal: 90;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
  margin: 0; color: var(--text); background: var(--sand);
  font-family: var(--sans); font-size: 16px; line-height: 1.62;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.menu-open, body.spec-modal-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.section--dark :focus-visible, .section--contact :focus-visible, .site-footer :focus-visible, .ticker :focus-visible { outline-color: #fff; }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.grain { position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: .5;
  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'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); }
.skip-link { position: fixed; left: 24px; top: -60px; z-index: 999; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; transition: top .2s; }
.skip-link:focus { top: 24px; }

/* ---------- type ---------- */
.display { font-family: var(--display); font-weight: 300; color: var(--ink); letter-spacing: -.028em; line-height: 1.06; text-wrap: balance; }
h1.display { font-size: clamp(44px, 5.1vw, 70px); }
h2.display { font-size: clamp(34px, 3.7vw, 52px); }
h3.display { font-size: clamp(21px, 1.6vw, 25px); line-height: 1.22; }
.lead { font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.7; color: #4d5749; max-width: 60ch; text-wrap: pretty; }
.prose p { margin: 0 0 15px; max-width: 62ch; color: var(--muted); text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--rose); }
.eyebrow--plain::before { display: none; }
.marker { font-family: var(--display); font-weight: 500; font-size: 13px; color: var(--rose-ink); font-variant-numeric: tabular-nums; letter-spacing: .1em; }
/* em faixa escura o caramelo escuro some no fundo (contraste 1,85): versão clara */
.section--dark .marker, .section--contact .marker, .note .marker { color: #dcc9a6; }
em.soft { font-style: normal; color: var(--brand-clay); opacity: 1; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: -.005em; cursor: pointer;
  transition: background .25s var(--ease), color .25s, border-color .25s, transform .18s var(--ease), box-shadow .25s; }
.btn svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.995); }
.btn--solid { background: var(--ink); color: #fff; box-shadow: var(--shade-md); }
.btn--solid:hover { background: var(--ink-deep); box-shadow: 0 24px 50px -30px rgba(43,50,42,.65); }
.btn--outline { border-color: var(--hair-strong); color: var(--ink); background: transparent; }
.btn--outline:hover { background: rgba(255,255,255,.7); border-color: var(--ink); }
.btn--paper { background: #fff; color: var(--ink); box-shadow: 0 20px 45px -30px rgba(0,0,0,.6); }
.btn--paper:hover { background: var(--sand); }
.btn--lg { min-height: 56px; padding-inline: 28px; font-size: 15px; }
.btn--block { width: 100%; }
.textlink { position: relative; display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; font-weight: 600; }
.textlink span { display: inline-block; transition: transform .25s var(--ease); }
.textlink i { position: absolute; left: 0; bottom: -5px; height: 1px; background: var(--ink); width: 100%; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.textlink:hover span { transform: translateX(4px); }
.textlink:hover i { transform: scaleX(1); }

/* ---------- header ---------- */
.ticker { background: var(--ink); color: rgba(255,255,255,.72); font-size: 12px; letter-spacing: .02em; }
.ticker__inner { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 7px; }
.ticker a { color: #fff; font-weight: 600; white-space: nowrap; }
.ticker a:hover { color: var(--rose-pale); }

.site-header { position: sticky; top: 0; z-index: var(--z-header); padding-top: 14px; }
.header__shell { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  min-height: 66px; padding: 8px 10px 8px 18px; border-radius: 999px;
  background: rgba(248,246,241,.72); border: 1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(43,50,42,.04);
  backdrop-filter: blur(16px) saturate(140%); transition: box-shadow .35s, background .35s, border-color .35s, transform .3s var(--ease); }
.site-header.is-scrolled .header__shell { transform: translateY(-6px); background: rgba(248,246,241,.88); border-color: rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 38px -26px rgba(43,50,42,.5); }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand img.brand__logo { width: auto; height: 44px; max-width: none; object-fit: contain; transition: opacity .25s; }
.brand:hover img.brand__logo { opacity: .75; }
.brand img.brand__logo--footer { height: 54px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__text strong { font-family: var(--display); font-weight: 400; font-size: 19px; color: var(--ink); letter-spacing: .005em; }
.brand__text small { color: var(--muted); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; margin-top: 4px; }
.nav { display: flex; justify-content: center; gap: 4px; }
.nav a { position: relative; padding: 9px 13px; border-radius: 999px; color: #414a3d; font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: background .25s, color .25s; }
.nav a:hover { background: rgba(255,255,255,.75); color: var(--ink); }
.nav a.is-current { background: var(--ink); color: #fff; }
.menu-toggle { display: none; width: 48px; height: 48px; border: 1px solid var(--hair); border-radius: 999px; background: rgba(255,255,255,.6); position: relative; }
.menu-toggle span { position: absolute; left: 14px; width: 19px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-toggle span:first-child { top: 19px; }
.menu-toggle span:last-child { top: 26px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 22.5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 22.5px; transform: rotate(-45deg); }
.mobile-menu { display: none; position: fixed; inset: 0; z-index: var(--z-menu); padding: 100px 24px 40px; background: var(--sand);
  opacity: 0; visibility: hidden; transform: translateY(-10px); transition: .32s var(--ease); overflow-y: auto; }
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu .container > a:not(.btn) { display: flex; align-items: center; justify-content: space-between; padding: 19px 2px;
  border-bottom: 1px solid var(--hair); font-family: var(--display); font-size: 23px; color: var(--ink); }
.mobile-menu .container > a:not(.btn) span { color: var(--rose-ink); font-size: 14px; }
.mobile-menu .btn { margin-top: 28px; }
.mobile-menu__foot { margin-top: 26px; color: var(--muted); font-size: 13px; }
.mobile-menu__foot a { font-weight: 600; color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; padding: 0 0 clamp(60px, 7vw, 96px); overflow: hidden; }
.hero::before { content: ""; position: absolute; z-index: 0; inset: -20% -10% auto -30%; height: 120%;
  background: radial-gradient(58% 52% at 18% 14%, rgba(227,231,221,.9), transparent 70%),
              radial-gradient(40% 40% at 88% 8%, rgba(241,232,219,.75), transparent 72%); pointer-events: none; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; grid-template-rows: auto 1fr;
  grid-template-areas: "head stage" "rest stage"; align-items: end; gap: 0 clamp(38px, 5vw, 72px); }
.hero__head { grid-area: head; padding-top: clamp(40px, 5vw, 64px); }
.hero__rest { grid-area: rest; }
.hero h1 { margin: 22px 0 0; }
.hero__lead { margin: 24px 0 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__cred { margin: 36px 0 0; padding-top: 20px; border-top: 1px solid var(--hair); max-width: 560px;
  color: var(--muted); font-size: 12.5px; line-height: 1.8; }
.hero__cred span { color: var(--rose); padding-inline: 4px; }

.hero__stage { grid-area: stage; position: relative; align-self: stretch; display: flex; margin-top: calc(clamp(40px, 5vw, 64px) + 9px); }
.shot { position: relative; overflow: hidden; background: var(--sand-warm); box-shadow: var(--shade-lg); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--lead { border-radius: var(--r-xl); flex: 1; aspect-ratio: auto; min-height: 480px; }
.shot--lead img { position: absolute; inset: 0; width: 100%; height: 100%; }
.shot--lead img { object-position: center 30%; }
.shot__caption { position: absolute; left: 16px; bottom: 16px; max-width: min(64%, 300px); display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 18px; border-radius: var(--r-md); color: #fff;
  background: rgba(35,41,33,.52); border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3); backdrop-filter: blur(14px) saturate(140%); }
.shot__caption strong { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
.shot__caption small { display: block; opacity: .74; font-size: 11px; margin-top: 3px; letter-spacing: .04em; }
.shot__caption em { flex: 0 0 auto; font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }

/* ---------- routes ---------- */
.routes { padding: clamp(16px, 2.5vw, 28px) 0 clamp(44px, 5vw, 64px); }
.routes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.route { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 22px;
  border: 1px solid var(--hair); border-radius: var(--r-lg); background: rgba(255,255,255,.55);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s, background .35s; overflow: hidden; }
.route::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(220px 160px at var(--mx, 50%) var(--my, 0%), rgba(139,149,131,.22), transparent 70%); pointer-events: none; }
.route:hover { transform: translateY(-3px); background: #fff; border-color: rgba(43,50,42,.18); box-shadow: var(--shade-md); }
.route:hover::after { opacity: 1; }
.route__icon { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--ink-soft);
  background: var(--mist); border: 1px solid rgba(43,50,42,.07); }
.route__icon svg { width: 21px; height: 21px; }
.route__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.route h3 { margin: 0; font-size: clamp(17px, 1.4vw, 20px); }
.route p { margin: 0; color: var(--muted); font-size: 12.5px; }
.route__go { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; }
.route__go > span { display: none; }
.route__go svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.route:hover .route__go svg { transform: translateX(4px); }

/* ---------- sections ---------- */
.section { position: relative; padding: clamp(70px, 8vw, 120px) 0; overflow: hidden; }
.section--mist { background: var(--mist); }
.section--paper { background: var(--paper); }
.section--dark { background: var(--ink); color: rgba(255,255,255,.72); }
.section--dark .display, .section--dark h3 { color: #fff; }
.section--dark .eyebrow { color: var(--sage-pale); }
.section--dark .prose p { color: rgba(255,255,255,.66); }
.section--dark em.soft { color: var(--sage-pale); opacity: .75; }
.band { position: relative; }
.band::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.head { display: grid; gap: 16px; margin-bottom: clamp(34px, 4vw, 54px); }
.head--split { grid-template-columns: 1fr .8fr; align-items: end; gap: 48px; }
.head--split.head--split-media { align-items: center; }
.shot--resumo { border-radius: var(--r-lg); aspect-ratio: 4/5; }
.shot--resumo img { object-position: center 38%; }
.head__meta { display: flex; align-items: center; gap: 14px; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4.5vw, 64px); align-items: start; }
.duo--wide-left { grid-template-columns: 1.1fr .9fr; }
.duo--wide-right { grid-template-columns: .9fr 1.1fr; }

.panel { padding: clamp(22px, 2.2vw, 30px); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--hair); box-shadow: var(--shade-md); }
.tabs { display: grid; grid-auto-flow: column; gap: 6px; padding: 6px; border-radius: 999px; background: var(--mist); }
.tab { border: 0; border-radius: 999px; padding: 13px 16px; color: #56604f; background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 600; transition: background .25s, color .25s, box-shadow .25s; }
.tab:hover { color: var(--ink); }
.tab.is-active { background: var(--ink); color: #fff; box-shadow: var(--shade-sm); }
.tab-panel { display: none; padding-top: 24px; }
.tab-panel.is-active { display: block; animation: fadeUp .38s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
.tab-panel > p { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ticks li { position: relative; padding-left: 28px; color: #434c40; font-size: 14px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--sage-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312332f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") no-repeat center/10px 10px; }
.ticks--two { grid-template-columns: 1fr 1fr; column-gap: 28px; }
.ticks--light li { color: rgba(255,255,255,.8); }
.ticks--light li::before { background-color: rgba(255,255,255,.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8cdcd' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E"); }
.pull { margin: 0; padding: 26px 28px; border-radius: var(--r-md); background: linear-gradient(140deg, var(--rose-pale), #fbf7f0 70%);
  border: 1px solid rgba(161,133,94,.28); color: var(--ink); font-family: var(--display); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.4; }
.pull--sage { background: linear-gradient(140deg, var(--sage-pale), #f2f5ef 70%); border-color: rgba(139,149,131,.4); }

.note { position: relative; overflow: hidden; display: grid; grid-template-columns: 52px 1fr; gap: 22px;
  padding: clamp(26px, 3vw, 38px); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--ink), var(--ink-soft));
  border: 1px solid rgba(176,146,101,.32); box-shadow: var(--shade-lg); }
.note::before { content: ""; position: absolute; right: -60px; top: -90px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(176,146,101,.2), transparent 62%); pointer-events: none; }
.note__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: #ddc49a;
  background: rgba(176,146,101,.14); border: 1px solid rgba(176,146,101,.42); }
.note__icon svg { width: 21px; height: 21px; }
.note__tag { color: #cdb083; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.note strong { display: block; margin-top: 9px; color: #fff; font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.7vw, 23px); }
.note p { margin: 11px 0 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.68; max-width: 82ch; }
.note b { color: #eadcc2; font-weight: 600; white-space: nowrap; }

/* ---------- feridas ---------- */
.wound__top { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px, 4.5vw, 60px); align-items: center; }
.shot--wound { border-radius: var(--r-lg); aspect-ratio: 5/6; }
.shot--wound img { object-position: center 34%; }
.shot--wound::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(35,41,33,.8), transparent 52%); }
.shot__over { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; color: #fff; }
.shot__over span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .72; }
.shot__over strong { display: block; margin-top: 8px; font-family: var(--display); font-weight: 400; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.2; }

/* ---------- pivot: "Cada ferida tem uma história" ----------
   O bloco vinha num grid onde a foto tinha aspect-ratio 5/6 e mandava na
   altura: a coluna de texto pedia ~215px e a foto pedia ~620px, sobrando
   400px de vazio. Aqui a altura vem do TEXTO e a foto preenche o que sobrar,
   entao o vazio nao tem como existir. A foto vira faixa horizontal e a frase
   ganha a escala que merece, porque ela e a tese da pagina inteira. */
.pivot {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(28px, 3.4vw, 52px);
  align-items: stretch;
  margin-top: clamp(40px, 5vw, 68px);
}
.shot--preparo { border-radius: var(--r-lg); }
/* a faixa e baixa e o canto inferior esquerdo da foto e linho claro:
   sem este veu a legenda cai para 2,6 de contraste. Medido, nao estimado. */
.shot--preparo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,34,26,.88), rgba(28,34,26,.45) 30%, transparent 62%); }
.shot--preparo .shot__over span { opacity: .92; }
.pivot .shot--preparo { min-height: clamp(200px, 14vw, 218px); }
.pivot .shot--preparo img { position: absolute; inset: 0; object-position: center 62%; }
.pivot__text { display: flex; flex-direction: column; justify-content: center; }
/* a medida em `em` trava a quebra depois de "tem" em qualquer tamanho de tela,
   e o 42px deixa a frase abaixo do h2 da secao seguinte (52px), sem inverter hierarquia */
.pivot__text .display {
  margin: 12px 0 16px;
  max-width: 8.2em;
  font-size: clamp(28px, 2.9vw, 42px);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.pivot__text .prose p { margin: 0; }
@media (max-width: 860px) {
  .pivot { grid-template-columns: 1fr; gap: 22px; }
  .pivot .shot--preparo { aspect-ratio: 16/10; min-height: 0; }
}

.wound__cards { display: grid; grid-template-columns: 1.08fr .92fr; gap: 14px; margin-top: clamp(28px, 3vw, 44px); align-items: start; }
.card { padding: clamp(24px, 2.4vw, 32px); border-radius: var(--r-lg); background: rgba(255,255,255,.66); border: 1px solid var(--hair); }
.card > h3 { margin: 0 0 18px; }
.story { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.5fr auto; gap: clamp(28px, 3.5vw, 52px); align-items: center;
  margin-top: 14px; padding: clamp(30px, 3.4vw, 46px); border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(161,133,94,.2), rgba(255,255,255,.8) 68%); border: 1px solid rgba(161,133,94,.4); }
.story::before { content: "“"; position: absolute; right: 24px; top: -54px; font-family: var(--display); font-size: 220px; line-height: 1;
  color: rgba(161,133,94,.26); pointer-events: none; }
.story h3 { margin: 10px 0 12px; }
.story p { margin: 0 0 10px; color: var(--muted); font-size: 14.5px; line-height: 1.68; max-width: 62ch; }
.story p:last-child { margin-bottom: 0; }
.story__close { font-family: var(--display); color: var(--ink) !important; font-size: 16px !important; }
.story__cta { display: grid; gap: 10px; justify-items: center; }
.story__cta small { color: var(--ink-soft); font-size: 11.5px; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(40px, 5vw, 80px); }
.step { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 26px 0 28px; border-top: 1px solid var(--hair); }
.step:nth-child(1), .step:nth-child(2) { border-top: 0; }
.step__n { font-family: var(--display); font-size: 40px; line-height: 1; color: var(--ink); opacity: .22; font-variant-numeric: tabular-nums;
  transition: opacity .35s, color .35s; }
.step:hover .step__n { opacity: 1; color: var(--rose); }
.step h3 { margin: 0 0 7px; }
.step p { margin: 0; color: var(--muted); font-size: 14px; }
.close-line { margin-top: clamp(30px, 3.4vw, 46px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
  padding-top: 30px; border-top: 1px solid var(--hair); }
.close-line p { margin: 0; font-family: var(--display); color: var(--ink); font-size: clamp(18px, 1.7vw, 22px); max-width: 46ch; }

/* ---------- famílias ---------- */
.section--dark .band-art { position: absolute; z-index: 0; right: -180px; top: -140px; width: 560px; height: 560px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.06); box-shadow: 0 0 0 70px rgba(255,255,255,.02), 0 0 0 140px rgba(255,255,255,.012); pointer-events: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 32px; }
.chips span { padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.82); font-size: 12.5px;
  transition: background .25s, border-color .25s; }
.chips span:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.3); }
.label-light { color: rgba(255,255,255,.64); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.voices { display: grid; gap: 12px; }
.voice { position: relative; padding: 24px 26px; border-radius: var(--r-lg); background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.voice p { margin: 0; color: #fff; font-family: var(--display); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; }
.voice--hero { background: linear-gradient(135deg, rgba(161,133,94,.34), rgba(161,133,94,.08) 78%); border-color: rgba(161,133,94,.44); }
.voice--hero p { font-size: clamp(21px, 2vw, 27px); }
.help { position: relative; z-index: 1; margin-top: clamp(46px, 5vw, 72px); padding-top: clamp(34px, 4vw, 50px); border-top: 1px solid rgba(255,255,255,.12); }
.help h3 { margin: 0 0 24px; }
.help__close { margin: 32px 0 0; color: #fff; font-family: var(--display); font-size: clamp(18px, 1.8vw, 23px); }

/* ---------- clínica ---------- */
/* ---------- abertura da pagina da clinica ----------
   Eram dois paragrafos num bloco de 699px solto no meio de um container de
   1200px, sem titulo nem rotulo: boiava e nao alinhava com nenhum bloco de
   baixo. Agora ocupa a largura inteira em duas colunas, com a 1a frase (a
   tese) maior e mais escura que a 2a, que e o desdobramento. */
.clinlead {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(26px, 3.4vw, 56px);
  align-items: start;
}
.clinlead__a { margin: 0; color: var(--ink); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; letter-spacing: -.005em; }
.clinlead__b { margin: 0; color: var(--muted); font-size: clamp(14.5px, 1.1vw, 15.5px); line-height: 1.68; }
@media (max-width: 860px) { .clinlead { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- equipe ----------
   Antes a Dra. Leticia e a Fernanda apareciam DUAS vezes na mesma pagina:
   como card grande aqui e de novo como spec 01/02 logo abaixo, com a mesma
   descricao. Agora existe um roster so: as duas que conduzem o cuidado nos
   cards grandes, o restante da equipe na grade. */
.rosterhead { margin-top: clamp(36px, 4vw, 56px); margin-bottom: clamp(20px, 2.4vw, 30px);
  /* mesma grade da abertura logo acima: as duas colunas da direita comecam
     no mesmo x, senao os dois blocos empilhados ficam quase iguais e tortos */
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(26px, 3.4vw, 56px); align-items: baseline; }
.rosterhead h2 { margin: 0; font-size: clamp(27px, 2.7vw, 38px); line-height: 1.1; white-space: nowrap; }
.rosterhead p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
@media (max-width: 760px) { .rosterhead { grid-template-columns: 1fr; gap: 12px; } .rosterhead h2 { white-space: normal; } }

.team { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: stretch; }
.pro { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-xl); background: var(--paper);
  border: 1px solid var(--hair); box-shadow: var(--shade-md); }
.pro__shot { height: clamp(300px, 34vw, 430px); overflow: hidden; background: var(--sand-warm); }
.pro__shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .9s var(--ease); }
.pro:hover .pro__shot img { transform: scale(1.03); }
.pro__body { padding: clamp(26px, 2.6vw, 36px); display: flex; flex-direction: column; }
.pro__role { color: var(--rose-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pro h3 { margin: 13px 0 12px; font-size: clamp(24px, 2.2vw, 31px); }
.pro p { margin: 0; color: var(--muted); font-size: 14px; }
.pro small { margin-top: 16px; color: var(--ink-soft); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; }
/* empurra registro e biografia para o rodape do card, os dois alinhados
   mesmo com descricoes de tamanhos diferentes */
.pro__spacer { flex: 1 1 auto; min-height: 14px; }
.pro__more { margin-top: 14px; align-self: flex-start; }

.specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 18px;
  background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; }
.spec { min-height: 200px; padding: 26px 24px; background: var(--sand); display: flex; flex-direction: column; transition: background .3s; }
.spec:hover { background: #fff; }
.spec h3 { margin: 0; font-size: clamp(17px, 1.35vw, 20px); }
.spec p { margin: 0; color: var(--muted); font-size: 13px; }
/* biografia alinhada no rodape de todos os cards, nao logo abaixo do texto */
.spec .spec__more { margin-top: auto; padding-top: 16px; }
/* 4 colunas so quando cabem; 4 divide certo por 2 e por 1, nunca sobra celula orfa */
@media (max-width: 1180px) { .specs { grid-template-columns: 1fr 1fr; } }

/* ---------- como trabalhamos ----------
   Era um `.duo` com o texto a esquerda e UM botao sozinho na coluna direita:
   sobravam ~290x460px de vazio. Agora as duas colunas sao texto, entao a
   altura de uma acompanha a da outra e o vazio nao tem onde aparecer.
   A primeira frase da doutora vira a tese do bloco, em escala de display. */
.method {
  margin-top: clamp(40px, 4.5vw, 64px);
  padding-top: clamp(32px, 3.6vw, 48px);
  border-top: 1px solid var(--hair);
  display: grid;
  /* mesma grade da abertura e do "Nossa equipe": a pagina inteira tem uma
     coluna da direita so, sempre no mesmo x */
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(26px, 3.4vw, 56px);
  align-items: stretch;
}
.method__lead { display: flex; flex-direction: column; align-items: flex-start; }
/* a coluna da esquerda e mais alta por causa do botao; centrar os paragrafos
   evita a barriga de vazio embaixo da direita */
.method__body { display: flex; flex-direction: column; justify-content: center; }
.method__claim {
  margin: 16px 0 28px;
  max-width: 15em;
  color: var(--ink);
  font-family: var(--display); font-weight: 300;
  /* fica abaixo do manifesto (33px), que e quem fecha a pagina */
  font-size: clamp(24px, 2.3vw, 31px); line-height: 1.16; letter-spacing: -.015em;
}
.method__body p { margin: 0 0 16px; }
.method__body p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .method { grid-template-columns: 1fr; gap: 24px; }
  .method__claim { max-width: none; }
}
.manifesto { margin-top: clamp(40px, 4.5vw, 64px); padding: clamp(34px, 4vw, 58px) clamp(28px, 4vw, 66px); border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--sage-pale), #ece1d0); display: grid; grid-template-columns: 96px 1fr; gap: clamp(26px, 3vw, 46px);
  align-items: center; }
.manifesto img { width: 96px; height: 86px; object-fit: contain; }
.manifesto p { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(21px, 2.4vw, 33px); line-height: 1.32; }

/* ---------- depoimentos (marquee) ---------- */
.reviews-marquee { position: relative; margin-top: clamp(30px, 3.4vw, 46px); overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.reviews-marquee + .reviews-marquee { margin-top: 16px; }
.reviews-marquee__track { display: flex; width: max-content; gap: 16px; animation: reviews-marquee 38s linear infinite; }
.reviews-marquee__track--reverse { animation-duration: 44s; animation-direction: reverse; }
.reviews-marquee:hover .reviews-marquee__track { animation-play-state: paused; }
@keyframes reviews-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.review-card { flex: 0 0 auto; width: min(340px, 80vw); margin: 0; padding: clamp(22px, 2.2vw, 28px);
  border-radius: var(--r-lg); background: var(--sand); border: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 16px; }
.review-card__head { display: flex; align-items: center; gap: 12px; }
.review-card__avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 500; font-size: 14px; background: var(--sage-pale); color: var(--ink-soft); }
.review-card:nth-child(3n+2) .review-card__avatar { background: var(--rose-pale); color: var(--rose-ink); }
.review-card:nth-child(3n+3) .review-card__avatar { background: #dcf2ed; color: var(--teal-deep); }
.review-card__who { display: flex; flex-direction: column; min-width: 0; }
.review-card__name { color: var(--ink); font-size: 13px; font-weight: 600; }
.review-card__tag { color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
.stars { color: var(--gold-ink); letter-spacing: .18em; font-size: 12px; }
.review-card blockquote { margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.56; text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) {
  .reviews-marquee__track { animation: none; }
  .reviews-marquee { overflow-x: auto; }
  .reviews-marquee__track [aria-hidden="true"] { display: none; }
}

/* ---------- contato ---------- */
.section--contact { background: var(--ink-deep); color: rgba(255,255,255,.72); }
.section--contact .display { color: #fff; }
.section--contact .eyebrow { color: var(--sage-pale); }
.section--contact .prose p { color: rgba(255,255,255,.68); }
.section--contact em.soft { color: var(--sage-pale); opacity: .8; }
.section--contact .form-card .display { color: var(--ink); }
.contact { position: relative; z-index: 1; display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(38px, 5vw, 78px); align-items: start; }
.lines { display: grid; margin-top: 32px; border-top: 1px solid rgba(255,255,255,.14); }
.lines a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 2px;
  border-bottom: 1px solid rgba(255,255,255,.14); transition: color .25s; }
.lines a > * { transition: transform .25s var(--ease); }
.lines a:hover { color: #fff; }
.lines a:hover > * { transform: translateX(6px); }
.lines span { color: rgba(255,255,255,.62); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.lines strong { font-size: 13.5px; font-weight: 600; }
.contact__close { margin: 26px 0 0; font-family: var(--display); color: rgba(255,255,255,.9); font-size: clamp(17px, 1.6vw, 21px); }
.form-card { padding: clamp(28px, 3vw, 44px); border-radius: var(--r-xl); background: var(--paper); color: var(--text); box-shadow: var(--shade-lg); }
.form-card h3 { margin: 0; font-size: clamp(23px, 2.2vw, 30px); }
.form-card > p { margin: 12px 0 26px; color: var(--muted); font-size: 14px; }
.choices { display: grid; gap: 9px; }
.choices a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; border-radius: var(--r-sm);
  background: var(--mist); color: var(--ink); font-size: 13.5px; font-weight: 600; transition: background .25s, transform .25s var(--ease); }
.choices a:hover { background: var(--sage-pale); transform: translateX(4px); }
.choices svg { width: 16px; height: 16px; flex: 0 0 auto; }
.fineprint { position: relative; overflow: hidden; margin-top: 22px; padding: 20px 22px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--ink), var(--ink-soft)); border: 1px solid rgba(176,146,101,.3);
  color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.65; }
.fineprint strong { display: block; color: #cdb083; font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 8px; }

/* ---------- footer ---------- */
.site-footer { background: #262c24; color: rgba(255,255,255,.58); padding: clamp(48px, 5vw, 70px) 0 26px; font-size: 13px; }
.footer__top { display: grid; grid-template-columns: .85fr 1.15fr .9fr; gap: clamp(28px, 4vw, 56px); align-items: start; padding-bottom: 42px; }
.footer__top .brand__text strong { color: #fff; }
.footer__top .brand__text small { color: rgba(255,255,255,.42); }
.footer__claim { margin: 0; max-width: 42ch; font-family: var(--display); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; color: rgba(255,255,255,.78); }
.footer__links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px 20px; font-size: 12.5px; }
.footer__links a:hover { color: #fff; }
.footer__links em { font-style: normal; color: rgba(255,255,255,.55); font-size: 11.5px; }
.footer__bottom { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 12px; font-size: 11px; color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; }
.footer__nap { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); padding-bottom: 24px;
  display: grid; grid-template-columns: .85fr 1.15fr .9fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.footer__nap address { grid-column: 2 / -1; }
.footer__nap h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.4; color: rgba(255,255,255,.78); max-width: 26ch; }
.footer__nap address { font-style: normal; display: grid; gap: 7px; font-size: 12.5px; line-height: 1.6; }
.footer__nap address strong { color: rgba(255,255,255,.86); font-weight: 600; }
.footer__nap a:hover { color: #fff; }

.wa { position: fixed; z-index: var(--z-float); right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 18px 13px 14px; border-radius: 999px; background: #3b4436; color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: 0 22px 45px -22px rgba(0,0,0,.6); transition: transform .3s var(--ease), background .3s; }
.wa:hover { transform: translateY(-2px); background: var(--ink); }
.wa svg { width: 21px; height: 21px; fill: #5fd28c; stroke: none; }
.wa span { display: inline-block; }

.regen { margin-top: clamp(46px, 5vw, 72px); padding-top: clamp(38px, 4.5vw, 58px); border-top: 1px solid var(--hair); }
.prpf { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.shot--como { border-radius: var(--r-lg); aspect-ratio: 4/5; }
.shot--como img { object-position: center 12%; }
.spec__face { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center 16%; border: 2px solid #fff; box-shadow: var(--shade-sm); margin-bottom: 14px; }
.spec__ph { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--sage-pale); margin-bottom: 14px; }
.spec__ph img { width: 42px; height: 39px; opacity: .55; }
.spec { position: relative; overflow: hidden; }
.spec__overlay { position: absolute; inset: 0; padding: 28px; background: var(--ink-soft); display: flex; flex-direction: column; pointer-events: none;
  clip-path: circle(48px at 76px 76px); transition: clip-path .85s cubic-bezier(.83, 0, .17, 1); transform: translateZ(0); }
.spec__overlay .spec__face { border-color: rgba(255,255,255,.55); box-shadow: none; }
.spec__overlay > span:not(.spec__ph) { font-family: var(--display); font-size: 13px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.82); }
.spec__overlay .spec__ph { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.spec__overlay .spec__ph img { filter: brightness(0) invert(1); opacity: .85; }
.spec__overlay h3 { color: #fff; }
.spec__overlay .spec__name { color: #f1e3c6; }
.spec__overlay p { color: rgba(255,255,255,.92); }
@media (hover: hover) {
  .spec:hover .spec__overlay { clip-path: circle(160% at 76px 76px); }
}
@media (hover: none) {
  .spec__overlay { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .spec__overlay { transition: none; }
}
.spec__name { color: var(--rose-ink); font-size: 12.5px; font-weight: 600; margin: 2px 0 8px; }
@media (max-width: 760px) {
  .prpf { grid-template-columns: 1fr; }
}

/* ---------- "ler mais" do spec + modal de biografia ---------- */
/* z-index mantém o botão acima do overlay de revelação (que cobre o card no hover
   e é pointer-events:none); sem isso ele desaparecia justamente ao passar o mouse */
.spec__more { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 0; border: 0; background: none;
  color: var(--rose-ink); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: color .3s var(--ease); }
.spec__more svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.spec__more:hover { color: var(--ink); }
.spec__more:hover svg { transform: translateX(3px); }
@media (hover: hover) {                              /* só onde o overlay existe */
  .spec:hover .spec__more { color: #f1e3c6; }        /* sobre o sálvia do overlay */
  .spec:hover .spec__more:hover { color: #fff; }
}
.spec__overlay .spec__more { display: none; }

.spec-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
.spec-modal.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.spec-modal__backdrop { position: absolute; inset: 0; background: rgba(35,41,33,.62); backdrop-filter: blur(6px); }
.spec-modal__panel { position: relative; width: min(640px, 100%); max-height: min(88vh, 820px);
  background: var(--paper); border-radius: var(--r-xl); box-shadow: var(--shade-lg);
  display: flex; flex-direction: column; overflow: hidden; }
.spec-modal__close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--hair); background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
  display: grid; place-items: center; color: var(--ink); cursor: pointer; }
.spec-modal__close:hover { background: #fff; }
.spec-modal__close svg { width: 18px; height: 18px; }
.spec-modal__media { flex: 0 0 auto; aspect-ratio: 4/5; max-height: 44vh; background: var(--sage-pale); overflow: hidden;
  border-radius: var(--r-xl) var(--r-xl) 0 0; }
.spec-modal__media img { width: 100%; height: 100%; object-fit: cover; }
.spec-modal__media--ph { display: grid; place-items: center; }
.spec-modal__media--ph img { width: 30%; height: 30%; object-fit: contain; opacity: .55; }
.spec-modal__fade { display: flex; flex-direction: column; min-height: 0; opacity: 0; transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease); }
.spec-modal__fade.is-in { opacity: 1; transform: none; }
/* cabecalho (rotulo + nome + CTA) e um grupo so; a biografia e outro.
   Os vaos internos do grupo sao 11px e 16px, entao o vao ATE o texto precisa
   ser bem maior, senao o botao cola no primeiro paragrafo. 20 daqui + 16 do
   scroll = 36px, mais do que o dobro do maior vao interno. */
.spec-modal__head { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px) clamp(14px, 1.6vw, 20px); }
.spec-modal__role { color: var(--rose-ink); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
/* nome + registro da Leticia tem 2 conselhos e quebrava deixando o "·" sozinho
   no comeco da 2a linha; neste tamanho cabe em uma linha e o balance cuida do resto */
.spec-modal__head h3 { margin: 8px 0 0; font-size: clamp(19px, 1.8vw, 23px); text-wrap: balance; }
.spec-modal__head .btn { flex: 0 0 auto; min-height: 44px; padding: 0 20px; font-size: 13px; }
.spec-modal__scroll { min-height: 0; overflow-y: auto; padding: 16px clamp(20px, 2.4vw, 28px) clamp(28px, 3vw, 40px);
  mask-image: linear-gradient(to bottom, #000, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000, #000 88%, transparent);
  scrollbar-width: none; }
.spec-modal__scroll::-webkit-scrollbar { display: none; }
.spec-modal__scroll .ticks { margin: 0 0 15px; }
.spec-modal__scroll .ticks li { font-size: 15px; }
.spec-modal__scroll .ticks strong { color: var(--ink-deep); font-weight: 600; }
@media (max-width: 640px) {
  .spec-modal { padding: 0; }
  .spec-modal__panel { max-height: 100vh; height: 100%; border-radius: 0; }
  .spec-modal__media { border-radius: 0; aspect-ratio: auto; height: 40vh; max-height: none; }
  /* os retratos são cortados com o centro do rosto em 43% da altura; 12% aqui mantém
     a cabeça inteira dentro da faixa horizontal do mobile */
  .spec-modal__media img { object-position: center 12%; }
  .spec-modal__head { flex-direction: column; }
}
/* acima do mobile o painel vira 2 colunas: retrato em pé à esquerda, texto à direita.
   Em faixa horizontal a foto vertical cortava o topo da cabeça e ampliava demais o rosto. */
@media (min-width: 641px) {
  .spec-modal__panel { width: min(900px, 100%); flex-direction: row; align-items: stretch; }
  .spec-modal__media { flex: 0 0 38%; aspect-ratio: auto; max-height: none; min-height: 420px;
    border-radius: var(--r-xl) 0 0 var(--r-xl); }
  .spec-modal__fade { flex: 1 1 auto; min-width: 0; }
  .spec-modal__head { flex-direction: column; align-items: flex-start; padding-right: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .spec-modal, .spec-modal__fade, .spec-modal__media { transition: none !important; }
}

/* teal = submarca do atendimento domiciliar (mesma cor do bordado do jaleco) */
.route--home .route__icon { color: var(--teal-deep); background: #e2f1ed; border-color: rgba(59,169,147,.22); }
#domiciliar .ticks li::before { background-color: #dff0ec;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a8271' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E"); }
#domiciliar .tab.is-active { background: var(--teal-deep); }
.pull--sage { background: linear-gradient(140deg, #e2f1ed, #f3f9f7 70%); border-color: rgba(59,169,147,.3); }

/* ---------- dobras de leitura (conteúdo integral no HTML; exibição progressiva) ---------- */
.fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.fold__inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s .55s; }
.fold.is-open { grid-template-rows: 1fr; }
.fold.is-open .fold__inner { visibility: visible; transition: visibility 0s; }
.fold-toggle { appearance: none; background: none; border: 0; padding: 13px 6px; margin: -5px -6px -13px; display: inline-flex; align-items: center; gap: 8px;
  color: var(--rose-ink); font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .03em; cursor: pointer; }
.fold-toggle svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.fold-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.fold-toggle:hover { color: var(--ink); }
.section--dark .fold-toggle { color: #dcc9a6; }
.section--dark .fold-toggle:hover { color: #fff; }
.ticks li.is-folded { display: none; }
@media (prefers-reduced-motion: reduce) { .fold, .fold__inner, .fold-toggle svg { transition: none; } }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .85s var(--ease), transform .85s var(--ease); transition-delay: var(--delay, 0ms); }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .nav { display: none; }
  .header__shell { grid-template-columns: 1fr auto; padding-right: 8px; }
  .header__shell > .btn { display: none; }
  .menu-toggle { display: block; }
  .mobile-menu { display: block; }
  .hero__grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "head" "stage" "rest"; gap: 0; }
  .hero__head { padding-top: 38px; }
  .hero__stage { width: 100%; margin-top: 30px; }
  .hero__rest { margin-top: 30px; }
  .shot--lead { border-radius: var(--r-xl); aspect-ratio: 4/5; min-height: 0; flex: 1; }
  .routes__grid { grid-template-columns: 1fr; gap: 12px; }
  .duo, .duo--wide-left, .duo--wide-right, .wound__top, .wound__cards, .steps, .team, .contact, .head--split {
    grid-template-columns: 1fr; }
  .steps { gap: 0; }
  .step:nth-child(2) { border-top: 1px solid var(--hair); }
  .story { grid-template-columns: 1fr; }
  .story__cta { justify-items: stretch; }
  .specs { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__nap { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  :root { --header-h: 76px; --r-xl: 30px; --r-lg: 24px; }
  .container { width: min(calc(100% - 32px), var(--container)); }
  .ticker__inner span { display: none; }
  .ticker__inner { justify-content: center; }
  .hero__head { padding-top: 28px; }
  .hero__stage { margin-top: 24px; }
  .hero__rest { margin-top: 26px; }
  .shot--lead { border-radius: var(--r-lg); }
  .shot__caption { left: 10px; right: 10px; bottom: 10px; padding: 11px 13px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .shot__caption em { display: none; }
  .hero__actions .btn { width: 100%; }
  .tabs { grid-auto-flow: row; border-radius: var(--r-md); }
  .tab { border-radius: var(--r-sm); }
  .ticks--two { grid-template-columns: 1fr; }
  .wound__cards { margin-top: 22px; }
  .step { grid-template-columns: 54px 1fr; gap: 14px; }
  .specs { grid-template-columns: 1fr; }
  .spec { min-height: 0; }
  .manifesto { grid-template-columns: 1fr; text-align: left; }
  .manifesto img { width: 72px; height: 66px; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__nap { grid-template-columns: 1fr; gap: 16px; }
  .footer__nap address { grid-column: 1 / -1; }
  .close-line .btn, .story__cta .btn { width: 100%; }
  .wa { right: 16px; bottom: 16px; padding: 13px; }
  .wa span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ======================================================================
   HERO DA HOME — composição aprovada (painel branco + painel fotográfico
   com reentrância). Tudo escopado em .mfc-hero.
   --s é o fator de escala da referência (1551px de largura): uma medida
   de N px na referência vira calc(N * var(--s)).
   ====================================================================== */
.mfc-hero {
  /* --s = escala da ESTRUTURA (painel branco, recortes, respiros).
     --c = escala do CONTEÚDO dentro do painel (texto, botão, pílulas, card,
     etiquetas, ícones): menor que --s de propósito, para sobrar branco. */
  --s: clamp(.56px, calc(100vw / 1551), 1.06px);
  --c: calc(var(--s) * .74);
  --edge: calc(13 * var(--s));
  --r-panel: calc(50 * var(--s));
  --r-shot: calc(42 * var(--s));
  --notch-w: calc(104 * var(--c));
  --notch-h: calc(232 * var(--c));
  --notch-cc: calc(22 * var(--c));
  /* sobe as duas no quadro: com o painel baixo sobrava fundo acima das cabeças */
  --shot-pos: center 30%;
  --hero-ink: #18191f;
  --hero-grey: #737477;
  padding: var(--edge);
  background: #e1e5dc;
}
.mfc-hero__panel {
  display: grid;
  grid-template-columns: 47.7% 1fr;
  /* o painel nunca passa da altura da janela: a foto encolhe junto e a hero
     inteira cabe na tela sem rolar */
  min-height: min(calc(988 * var(--s)), calc(100vh - 64px));
  background: #fff;
  border-radius: var(--r-panel);
}

/* ---- coluna de texto ---- */
.mfc-hero__col {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: calc(40 * var(--c)) calc(28 * var(--s)) calc(33 * var(--c)) calc(57 * var(--s));
}
.mfc-hero__brand { display: block; width: calc(212 * var(--c)); }
.mfc-hero__brand img { display: block; width: 100%; height: auto; }
.mfc-hero__title {
  /* auto nas duas pontas: o texto se distribui no painel em vez de empurrar a
     altura, então a hero cabe na janela em qualquer altura de tela */
  margin: auto 0 0;
  font-family: var(--display);
  font-size: calc(61 * var(--c));
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.022em;
  color: var(--hero-ink);
}
.mfc-hero__dot { color: var(--brand-sage); }
.mfc-hero__lead {
  margin: calc(58 * var(--c)) 0 0;
  max-width: calc(600 * var(--c));
  font-size: calc(24 * var(--c));
  line-height: 1.42;
  color: var(--hero-grey);
}
.mfc-hero__cta {
  margin-top: calc(42 * var(--c));
  display: inline-flex; align-items: center; justify-content: center;
  min-height: calc(60 * var(--c));
  padding: 0 calc(34 * var(--c));
  border-radius: 999px;
  background: var(--hero-ink); color: #fff;
  font-family: var(--display); font-size: calc(21 * var(--c)); font-weight: 500;
  transition: background .25s var(--ease);
}
.mfc-hero__cta:hover { background: #33362e; color: #fff; }
.mfc-hero__tags {
  list-style: none; margin: auto 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: calc(11 * var(--c));
  max-width: calc(646 * var(--s));
}
.mfc-hero__tags a {
  display: inline-flex; align-items: center; gap: calc(9 * var(--c));
  min-height: calc(46 * var(--c));
  padding: 0 calc(17 * var(--c));
  border-radius: 999px;
  background: #f5f5f1;
  color: #2c2f28;
  font-size: calc(16 * var(--c));
  white-space: nowrap;
  transition: background .25s var(--ease);
}
.mfc-hero__tags a:hover { background: var(--sage-pale); color: var(--ink-deep); }
.mfc-hero__tags-break { flex: 0 0 100%; height: 0; margin: 0; }
.mfc-hero__tags svg {
  flex: 0 0 auto; width: calc(19 * var(--c)); height: calc(19 * var(--c));
  fill: none; stroke: var(--brand-sage); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- painel fotográfico ---- */
.mfc-hero__stage {
  position: relative; display: grid;
  padding: calc(18 * var(--s)) calc(26 * var(--s)) calc(30 * var(--s)) 0;
}
.mfc-hero__shot { position: relative; min-width: 0; }
/* A forma do painel é a UNIÃO de dois retângulos arredondados: o bloco da
   direita (altura inteira, recuado pela reentrância) e o bloco de baixo
   (largura inteira). Cada camada mostra a MESMA foto no mesmo enquadramento
   — as duas têm inset:0 e object-fit:cover —, então a emenda é invisível. */
.mfc-hero__layer { position: absolute; inset: 0; display: block; }
.mfc-hero__layer img { width: 100%; height: 100%; object-fit: cover; object-position: var(--shot-pos); display: block; }
.mfc-hero__layer--side { clip-path: inset(0 0 0 var(--notch-w) round var(--r-shot)); }
.mfc-hero__layer--base { clip-path: inset(var(--notch-h) 0 0 0 round var(--r-shot)); }
/* terceira camada: só o quadradinho do encontro dos dois blocos, com um
   quarto de círculo vazado — é o que arredonda o canto CÔNCAVO do degrau */
.mfc-hero__layer--joint {
  /* +1px à direita e abaixo: a emenda encosta nas outras camadas em vez de
     deixar uma fenda de subpixel entre os recortes */
  clip-path: inset(calc(var(--notch-h) - var(--notch-cc)) calc(100% - var(--notch-w) - 1px) calc(100% - var(--notch-h) - 1px) calc(var(--notch-w) - var(--notch-cc)));
  -webkit-mask-image: radial-gradient(circle var(--notch-cc) at calc(var(--notch-w) - var(--notch-cc)) calc(var(--notch-h) - var(--notch-cc)), rgba(0,0,0,0) 98.5%, #000 99.5%);
          mask-image: radial-gradient(circle var(--notch-cc) at calc(var(--notch-w) - var(--notch-cc)) calc(var(--notch-h) - var(--notch-cc)), rgba(0,0,0,0) 98.5%, #000 99.5%);
}

/* ---- ícones sociais, na reentrância ---- */
.mfc-hero__social {
  position: absolute; left: 0; top: calc(9 * var(--s));
  width: var(--notch-w);
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: calc(11 * var(--c));
}
.mfc-hero__social a {
  display: grid; place-items: center;
  width: calc(58 * var(--c)); height: calc(58 * var(--c));
  border-radius: 50%; background: #f6f6f2; color: var(--hero-ink);
  transition: background .25s var(--ease);
}
.mfc-hero__social a:hover { background: var(--sage-pale); color: var(--ink-deep); }
.mfc-hero__social svg {
  width: calc(25 * var(--c)); height: calc(25 * var(--c));
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- etiquetas sobre a foto ---- */
.mfc-hero__chip {
  position: absolute; margin: 0;
  display: inline-flex; align-items: center; gap: calc(14 * var(--c));
  min-height: calc(50 * var(--c));
  padding: 0 calc(7 * var(--c)) 0 calc(24 * var(--c));
  border-radius: 999px; background: #fff;
  color: var(--hero-ink); font-size: calc(19 * var(--c)); font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 10px 30px -22px rgba(24, 25, 31, .55);
}
.mfc-hero__chip span {
  width: calc(43 * var(--c)); height: calc(43 * var(--c));
  border-radius: 50%; background: var(--brand-sage);
  box-shadow: 0 0 0 calc(4 * var(--c)) #fff;
  position: relative;
}
.mfc-hero__chip span::before,
.mfc-hero__chip span::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: #fff; border-radius: 2px;
}
.mfc-hero__chip span::before { width: calc(15 * var(--c)); height: calc(1.8 * var(--c)); }
.mfc-hero__chip span::after { width: calc(1.8 * var(--c)); height: calc(15 * var(--c)); }
.mfc-hero__chip--a { left: 7%; top: 68%; }
.mfc-hero__chip--b { right: calc(30 * var(--s)); top: 53%; }

/* ---- card de identificação ---- */
.mfc-hero__card {
  position: absolute; right: calc(24 * var(--s)); bottom: calc(24 * var(--s));
  width: calc(315 * var(--c));
  padding: calc(30 * var(--c));
  border-radius: calc(32 * var(--c));
  background: #fff;
  box-shadow: 0 24px 60px -40px rgba(24, 25, 31, .5);
}
.mfc-hero__card-icon {
  display: block; width: calc(38 * var(--c)); height: calc(38 * var(--c));
  fill: none; stroke: var(--brand-sage); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.mfc-hero__card strong {
  display: block; margin-top: calc(16 * var(--c));
  font-family: var(--display); font-size: calc(22 * var(--c)); font-weight: 500; color: var(--hero-ink);
}
.mfc-hero__card-rule { display: block; height: 1px; margin: calc(16 * var(--c)) 0; background: rgba(24, 25, 31, .1); }
.mfc-hero__card-note { display: block; font-size: calc(16 * var(--c)); color: var(--hero-grey); }

/* ---- registros profissionais (fora da composição, preservados) ---- */
.mfc-hero__cred {
  margin: calc(16 * var(--s)) auto 0;
  padding: 0 calc(24 * var(--s));
  max-width: calc(1100 * var(--s));
  text-align: center;
  font-size: calc(15 * var(--c));
  color: #55604e;
}
.mfc-hero__cred span { padding-inline: calc(6 * var(--s)); color: var(--brand-clay); }

/* na home o topo é limpo: barra preta e header pill só aparecem ao rolar */
body:has(.mfc-hero--home) .ticker { display: none; }
body:has(.mfc-hero--home) .site-header {
  position: fixed; left: 0; right: 0; top: 0;
  opacity: 0; visibility: hidden; transform: translateY(calc(-1 * var(--header-h)));
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
body:has(.mfc-hero--home) .site-header.is-scrolled {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
/* o botão flutuante cobriria o card da hero; na home ele entra junto com o
   header (na hero o WhatsApp já está na coluna de ícones sociais) */
body:has(.mfc-hero--home) .wa {
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
body:has(.mfc-hero--home) .site-header.is-scrolled ~ .wa {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

/* o fecho da seção escura ganha um painel próprio: separa a lista do bloco de
   cima e melhora a leitura dos itens sobre o fundo sálvia */
.help {
  margin-top: clamp(34px, 4vw, 54px);
  padding: clamp(24px, 2.6vw, 38px);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.help h3 { margin: 0 0 clamp(16px, 1.8vw, 24px); }

/* legenda do CTA dentro do careblock (ex.: "Resposta pelo WhatsApp") */
.careblock__hint { margin-top: 10px; color: var(--muted); font-size: 12.5px; }
/* empurra a citação para o rodapé da coluna quando o painel ao lado é mais
   alto: sem isso sobravam ~260px de vazio embaixo do texto */
.careblock__spacer { flex: 1 1 auto; min-height: 0; }
.careblock__hint + .quotecard { margin-top: clamp(22px, 2.4vw, 32px); }

/* ============ enfermagem regenerativa ============
   A seção tinha 4 caixas iguais, mas são duas camadas diferentes: o que a
   pessoa procura (as duas aplicações) e o que é usado nelas (PRP e PRF).
   Os recursos passam a viver num painel próprio sob o rótulo que o próprio
   texto usa — "terapias autólogas" —, e o container compartilhado já diz que
   os dois vêm da mesma origem, sem precisar de ornamento. */
.autolog {
  margin-top: clamp(16px, 1.8vw, 24px);
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--r-lg);
  background: var(--sage-pale);
}
.autolog__label {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 clamp(18px, 2vw, 26px);
  color: var(--ink-soft); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.autolog__label::after { content: ""; flex: 1; height: 1px; background: rgba(59,68,54,.18); }
.autolog__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px); }
.tech {
  padding: clamp(20px, 2vw, 26px);
  border-radius: var(--r-md);
  background: var(--paper);
}
/* a sigla é o vocabulário da área: vira a marca tipográfica do card */
.tech__sig {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(30px, 3vw, 40px); line-height: 1;
  letter-spacing: -.02em; color: var(--brand-sage);
}
.tech h3 { margin: 10px 0 8px; font-size: clamp(16px, 1.25vw, 18px); }
.tech p { margin: 0; color: #434c40; font-size: 14.5px; line-height: 1.5; }
@media (max-width: 860px) { .autolog__grid { grid-template-columns: 1fr; } }

/* ============ etapas do processo (flow) ============
   6 passos = sequência real, então a numeração fica — mas em leitura natural,
   da esquerda para a direita, linha a linha. Sem conectores atravessando o
   texto: o número já diz a ordem. Marcador, corpo e hairline são os mesmos do
   careblock (círculo 42px, texto 14,5px), para as duas seções soarem iguais. */
.flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}
.flow__step {
  padding: clamp(20px, 2vw, 28px);
  border-radius: var(--r-md);
  background: var(--sand);
  border: 1px solid var(--hair);
}
.flow__n {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: #fff; border: 1px solid var(--hair);
  font-family: var(--display); font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--ink-soft); letter-spacing: .02em;
}
.flow__step:last-child .flow__n { background: var(--brand-sage); border-color: var(--brand-sage); color: #fff; }
.flow__step h3 { margin: 16px 0 8px; font-size: clamp(17px, 1.3vw, 19px); }
.flow__step p { margin: 0; color: #434c40; font-size: 14.5px; line-height: 1.5; }
.flow + .note { margin-top: clamp(34px, 3.6vw, 52px); }
@media (max-width: 900px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; } }
/* ============ aviso de limite do serviço ============
   O card dizia duas coisas diferentes no mesmo parágrafo: o que a clínica NÃO
   é, e o que fazer numa emergência. Separar em duas colunas resolve o vazio da
   direita e, mais importante, transforma a segunda parte em ação: no celular,
   quem lê isso numa emergência toca e liga. */
/* só o aviso que tem painel de emergência vira 2 colunas; os demais .note da
   obra seguem no layout ícone + texto */
.note:has(.note__main) { grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 3vw, 44px); align-items: center; }
.note__main { display: grid; grid-template-columns: 52px 1fr; gap: 22px; }
.sos {
  padding: clamp(18px, 2vw, 24px);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
}
/* especificidade: `.note p` (0,1,1) vencia `.sos__label` (0,1,0) e zerava a margem */
.note .sos__label { margin: 0 0 20px; color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.5; text-align: center; }
/* os dois botões dividem a largura do painel e centralizam o conteúdo: assim
   não sobra vazio nem dentro do botão nem ao lado deles */
.sos__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sos__call {
  display: flex; align-items: center; gap: 11px;
  justify-content: center; padding: 13px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, .95); color: var(--ink-deep);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.sos__call:hover { background: #fff; color: var(--ink-deep); transform: translateY(-1px); }
.sos__call svg { flex: 0 0 auto; width: 19px; height: 19px; fill: none; stroke: var(--brand-sage); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sos__call span { display: flex; flex-direction: column; line-height: 1.1; font-size: 12px; color: #5b6455; }
.sos__call b { font-family: var(--display); font-size: 19px; font-weight: 500; color: var(--ink-deep); font-variant-numeric: tabular-nums; }
.note .sos__foot { margin: 16px 0 0; color: rgba(255,255,255,.62); font-size: 12.5px; line-height: 1.5; text-align: center; }
@media (max-width: 900px) {
  /* ARMADILHA: `.note:has(.note__main)` tem especificidade (0,2,0) e media query
     nao soma nada, entao o `.note` (0,1,0) daqui NUNCA vencia. O card de
     emergencia ficava em 2 colunas de 440px dentro de 343px e, como `.section`
     tem overflow:hidden, os telefones do SAMU e dos Bombeiros eram CORTADOS da
     tela no celular. Precisa repetir o seletor com a mesma forca. */
  .note, .note:has(.note__main) { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  /* nesta largura os dois botoes lado a lado espremem o numero contra o rotulo */
  .sos__row { grid-template-columns: 1fr; }
}

/* ============ bloco de serviço (careblock) ============
   card branco com o texto à esquerda e o painel de abas à direita; a lista
   ganha ícone por item, mantendo cada frase como está escrita. */
/* a seção ganha um fundo levemente frio para o card branco existir; e quando
   o card é a abertura da seção, o respiro de topo é o do próprio card */
.section--paper:has(.careblock) { background: var(--mist); padding-top: clamp(30px, 3.2vw, 46px); }
.container > .careblock:first-child { margin-top: 0; }
.careblock {
  display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(22px, 2.6vw, 40px);
  border: 1px solid rgba(59, 68, 54, .07);
  margin-top: clamp(28px, 3vw, 44px);
  padding: clamp(24px, 2.6vw, 40px);
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: 0 30px 70px -56px rgba(43, 50, 42, .55);
}
.careblock__text { display: flex; flex-direction: column; }
.careblock__intro { font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.55; color: var(--ink); }
.careblock__cta { align-self: flex-start; margin-top: clamp(20px, 2vw, 28px); }
.careblock__panel {
  padding: clamp(18px, 1.8vw, 26px);
  border-radius: var(--r-lg);
  background: var(--sand);
  border: 1px solid var(--hair);
}
.quotecard {
  position: relative; margin: auto 0 0; margin-top: clamp(26px, 2.6vw, 38px);
  padding: clamp(22px, 2.2vw, 30px); padding-right: clamp(54px, 5vw, 76px);
  border-radius: var(--r-md);
  background: var(--sand-warm);
  color: var(--ink-deep); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.5;
}
.quotecard__ic {
  position: absolute; top: clamp(16px, 1.6vw, 22px); right: clamp(16px, 1.6vw, 22px);
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: #fff; box-shadow: var(--shade-sm);
}
.quotecard__ic svg { width: 21px; height: 21px; fill: none; stroke: var(--brand-sage); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.iconlist { list-style: none; margin: 0; padding: 0; }
.iconlist li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px;
  padding: 13px 0; border-top: 1px solid var(--hair); color: #434c40; font-size: 14.5px; line-height: 1.45; }
.iconlist li:first-child { border-top: 0; padding-top: 4px; }
.iconlist li.is-folded { display: none; }
.iconlist__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 1px solid var(--hair); }
.iconlist__ic svg { width: 21px; height: 21px; fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1080px) {
  .careblock { grid-template-columns: 1fr; }
  .quotecard { margin-top: clamp(22px, 3vw, 30px); }
}

/* ---- variação da hero nas páginas internas: painel mais baixo, sem
   reentrância (não há ícones sociais aqui) e com a faixa da equipe ---- */
.mfc-hero--sub { --c: calc(var(--s) * .78); --shot-pos: center 16%; }
.mfc-hero--sub .mfc-hero__panel { min-height: min(calc(700 * var(--s)), calc(100vh - 150px)); }
.mfc-hero--sub .mfc-hero__col { padding-top: calc(52 * var(--c)); padding-bottom: calc(52 * var(--c)); justify-content: center; }
.mfc-hero--sub .mfc-hero__title { margin-top: calc(14 * var(--c)); }
.mfc-hero--sub .mfc-hero__stage { padding: calc(20 * var(--s)) calc(20 * var(--s)) calc(20 * var(--s)) 0; }
/* espelhada: foto à esquerda, texto à direita (variação da /atendimento-domiciliar/) */
.mfc-hero--flip .mfc-hero__panel { grid-template-columns: 40% 1fr; }
.mfc-hero--flip .mfc-hero__col { padding-left: calc(28 * var(--s)); padding-right: calc(57 * var(--s)); }
.mfc-hero--flip .mfc-hero__stage { padding: calc(20 * var(--s)) 0 calc(20 * var(--s)) calc(20 * var(--s)); }
.mfc-hero__eyebrow {
  display: inline-flex; align-items: center; gap: calc(10 * var(--c));
  color: var(--rose-ink); font-size: calc(13 * var(--c)); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.mfc-hero__eyebrow::before { content: ""; width: calc(26 * var(--c)); height: 1px; background: currentColor; opacity: .5; }
.mfc-hero__shot--plain { border-radius: var(--r-shot); overflow: hidden; }
/* absoluto como as camadas da home: com a img no fluxo, a altura natural dela
   (2:3) esticava o painel inteiro */
.mfc-hero__shot--plain img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--shot-pos); display: block; }
/* faixa da equipe: os mesmos rostos da grade, em fila sobreposta */
.mfc-hero__crew { display: flex; align-items: center; gap: calc(16 * var(--c)); margin-top: auto; padding-top: calc(40 * var(--c)); }
.mfc-hero__faces { list-style: none; display: flex; margin: 0; padding: 0; }
.mfc-hero__faces li { margin-left: calc(-14 * var(--c)); }
.mfc-hero__faces li:first-child { margin-left: 0; }
.mfc-hero__faces img {
  display: block; width: calc(52 * var(--c)); height: calc(52 * var(--c));
  border-radius: 50%; object-fit: cover; object-position: center 16%;
  border: 2px solid #fff; box-shadow: var(--shade-sm); background: var(--sage-pale);
}
.mfc-hero__crew p { margin: 0; font-size: calc(16 * var(--c)); color: var(--hero-grey); max-width: calc(220 * var(--c)); line-height: 1.35; }
.mfc-hero__crew strong { display: block; color: var(--hero-ink); font-weight: 600; }

/* ---------- grupo de avatares com balao ----------
   Mesmo comportamento do componente React que o cliente mandou (foto sobe,
   passa para a frente das vizinhas e abre um balao), porem em CSS puro:
   o site e HTML estatico, nao tem React nem motion. O "spring" do motion
   vira uma curva com passagem do ponto (back-out). */
.mfc-hero__faces li { position: relative; }
.mfc-hero__faces img { transition: transform .34s cubic-bezier(.34, 1.56, .64, 1); }
.crewtip {
  position: absolute; z-index: 4; left: 50%; bottom: calc(100% + 8 * var(--c));
  pointer-events: none;
  display: grid; gap: calc(2 * var(--c)); width: max-content; max-width: calc(210 * var(--c));
  padding: calc(9 * var(--c)) calc(13 * var(--c));
  border-radius: calc(12 * var(--c));
  background: var(--ink-deep); color: #fff;
  font-size: calc(12.5 * var(--c)); line-height: 1.3; text-align: center;
  box-shadow: var(--shade-md);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, calc(6 * var(--c))) scale(.92);
  transform-origin: bottom center;
  transition: opacity .2s var(--ease), transform .3s cubic-bezier(.34, 1.56, .64, 1), visibility 0s .2s;
}
.crewtip b { font-weight: 600; }
.crewtip > span { color: rgba(255, 255, 255, .72); }
.crewtip::after {                                    /* bico do balao */
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: calc(5 * var(--c)) solid transparent; border-top-color: var(--ink-deep);
}
/* o primeiro avatar encosta na margem do conteudo: centrar o balao nele jogaria
   o texto para fora da coluna, entao esse ancora pela esquerda e o bico anda junto */
.mfc-hero__faces li:first-child .crewtip {
  left: calc(-8 * var(--c));
  transform-origin: bottom left;
  transform: translate(0, calc(6 * var(--c))) scale(.92);
}
.mfc-hero__faces li:first-child .crewtip::after { left: calc(34 * var(--c)); }
@media (hover: hover) {                              /* no toque nao existe hover: nada fica preso aberto */
  .mfc-hero__faces li:hover { z-index: 3; }
  .mfc-hero__faces li:hover img { transform: translateY(-30%); }
  .mfc-hero__faces li:hover .crewtip {
    opacity: 1; visibility: visible;
    transform: translate(-50%, 0) scale(1);
    transition-delay: 0s;
  }
  .mfc-hero__faces li:first-child:hover .crewtip { transform: translate(0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mfc-hero__faces img, .crewtip { transition-duration: .01ms; }
  .mfc-hero__faces li:hover img { transform: none; }
}
.prose--wide p { max-width: 78ch; }
@media (max-width: 1000px) {
  .mfc-hero--sub { --c: calc(var(--s) * .9); }
  .mfc-hero--sub .mfc-hero__panel { min-height: 0; }
  .mfc-hero--sub .mfc-hero__stage { padding: 0 calc(18 * var(--s)) calc(22 * var(--s)); }
  .mfc-hero--sub .mfc-hero__shot { aspect-ratio: 4 / 5; }
  .mfc-hero--sub .mfc-hero__col { padding-top: calc(26 * var(--c)); padding-bottom: calc(26 * var(--c)); }
  .mfc-hero__crew { margin-top: calc(26 * var(--c)); padding-top: 0; padding-left: calc(26 * var(--s)); padding-right: calc(26 * var(--s)); }
}

@media (max-width: 1240px) {
  .mfc-hero__wrap { display: none; }
  .mfc-hero__title { font-size: calc(62 * var(--s)); }
}
@media (max-width: 1000px) {
  .mfc-hero {
    --s: clamp(.62px, calc(100vw / 780), 1.1px);
    --notch-w: calc(86 * var(--s));
    --notch-h: calc(190 * var(--s));
    padding: 14px;
  }
  .mfc-hero__panel { grid-template-columns: 1fr; min-height: 0; border-radius: calc(38 * var(--s)); }
  .mfc-hero__col { padding: calc(28 * var(--s)) calc(26 * var(--s)) calc(30 * var(--s)); }
  .mfc-hero__title { margin-top: calc(34 * var(--s)); font-size: calc(40 * var(--s)); }
  .mfc-hero__lead { margin-top: calc(18 * var(--s)); font-size: calc(18 * var(--s)); max-width: none; }
  .mfc-hero__cta { margin-top: calc(24 * var(--s)); min-height: calc(54 * var(--s)); font-size: calc(18 * var(--s)); }
  .mfc-hero__stage { padding: 0 calc(18 * var(--s)) calc(22 * var(--s)); }
  .mfc-hero__shot { aspect-ratio: 5 / 6; }
  .mfc-hero__tags { order: 2; margin-top: calc(22 * var(--s)); padding: 0 calc(26 * var(--s)) calc(30 * var(--s)); max-width: none; }
  .mfc-hero__chip { font-size: calc(15 * var(--s)); min-height: calc(42 * var(--s)); padding-left: calc(18 * var(--s)); gap: calc(10 * var(--s)); }
  /* no empilhado a foto é alta e o card ocupa o rodapé: a etiqueta volta ao topo */
  .mfc-hero__chip--a { left: 26%; top: calc(46 * var(--s)); }
  .mfc-hero__chip span { width: calc(34 * var(--s)); height: calc(34 * var(--s)); }
  .mfc-hero__card { width: calc(230 * var(--s)); padding: calc(20 * var(--s)); border-radius: calc(24 * var(--s)); }
  .mfc-hero__card strong { font-size: calc(17 * var(--s)); margin-top: calc(12 * var(--s)); }
  .mfc-hero__card-note { font-size: calc(13.5 * var(--s)); }
  .mfc-hero__card-rule { margin: calc(11 * var(--s)) 0; }
  .mfc-hero__social { top: calc(26 * var(--s)); gap: calc(9 * var(--s)); }
  .mfc-hero__social a { width: calc(46 * var(--s)); height: calc(46 * var(--s)); }
  .mfc-hero__cred { margin-top: calc(14 * var(--s)); font-size: calc(13 * var(--s)); }
}
/* a coluna vira a ordem do briefing: logo, título, texto, botão, foto, etiquetas */
@media (max-width: 1000px) {
  .mfc-hero__panel { display: flex; flex-direction: column; }
  .mfc-hero__col { display: contents; }
  .mfc-hero__brand { margin: calc(28 * var(--s)) 0 0 calc(26 * var(--s)); }
  .mfc-hero__title { margin-left: calc(26 * var(--s)); margin-right: calc(26 * var(--s)); }
  .mfc-hero__lead, .mfc-hero__cta { margin-left: calc(26 * var(--s)); margin-right: calc(26 * var(--s)); }
  .mfc-hero__stage { order: 1; margin-top: calc(26 * var(--s)); }
}
@media (max-width: 520px) {
  .mfc-hero {
    --s: clamp(.56px, calc(100vw / 430), .95px);
    /* reentrância mais discreta: no celular ela comia largura útil da foto */
    --notch-w: calc(64 * var(--s)); --notch-h: calc(152 * var(--s)); --notch-cc: calc(14 * var(--s));
    padding: 12px;
  }
  .mfc-hero__title { font-size: calc(40 * var(--s)); }
  .mfc-hero__shot { aspect-ratio: 4 / 5; }
  .mfc-hero__social { top: calc(10 * var(--s)); gap: calc(7 * var(--s)); }
  .mfc-hero__social a { width: calc(42 * var(--s)); height: calc(42 * var(--s)); }
  .mfc-hero__social svg { width: calc(19 * var(--s)); height: calc(19 * var(--s)); }
  .mfc-hero__chip--a { left: auto; right: calc(12 * var(--s)); top: calc(16 * var(--s)); }
  .mfc-hero__chip--b { display: none; }
  .mfc-hero__card {
    width: calc(168 * var(--s)); padding: calc(15 * var(--s));
    right: calc(12 * var(--s)); bottom: calc(12 * var(--s)); border-radius: calc(19 * var(--s));
  }
  .mfc-hero__card-icon { width: calc(25 * var(--s)); height: calc(25 * var(--s)); }
  .mfc-hero__card strong { font-size: calc(14.5 * var(--s)); margin-top: calc(9 * var(--s)); }
  .mfc-hero__card-rule { margin: calc(9 * var(--s)) 0; }
  .mfc-hero__card-note { font-size: calc(12 * var(--s)); }
}