/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
 * macrostructure: proof-first field guide · genre: editorial · theme: Agencia79 custom
 * contrast: pass · chrome: pass · honest: pass · responsive: pass
 */
:root {
  --color-ink: #0b0a08;
  --color-surface: #161411;
  --color-surface-raised: #211e18;
  --color-accent: #d4a937;
  --color-accent-light: #eac65c;
  --color-paper: #f4efe4;
  --color-muted: #aaa28e;
  --color-whatsapp: #25d366;
  --color-whatsapp-ink: #04310f;
  --color-line: rgba(212, 169, 55, .22);
  --color-line-soft: rgba(244, 239, 228, .1);
  --color-nav: rgba(11, 10, 8, .92);
  --color-shadow: rgba(0, 0, 0, .35);
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-small: 8px;
  --radius-medium: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body { background: var(--color-ink); color: var(--color-paper); font: 17px/1.65 var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; line-height: 1.05; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
.wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.kicker { color: var(--color-accent); font: 12px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }

nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 28px; min-height: 72px; padding: 12px max(24px, calc((100vw - 1120px) / 2)); background: var(--color-nav); border-bottom: 1px solid var(--color-line); backdrop-filter: blur(14px); }
.brand { font: 800 22px/1 var(--font-display); text-decoration: none; }
.brand > span { color: var(--color-accent); }
.brand small { display: block; margin-top: 5px; color: var(--color-muted); font: 9px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-links > a:not(.button) { color: var(--color-muted); font-size: 14px; text-decoration: none; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: var(--radius-small); font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .text-link:focus-visible, summary:focus-visible, nav a:focus-visible { outline: 2px solid var(--color-accent-light); outline-offset: 4px; }
.button-small { min-height: 42px; padding: 9px 16px; font-size: 14px; }
.button-gold { background: var(--color-accent); color: var(--color-ink); box-shadow: 0 10px 30px var(--color-shadow); }
.button-whatsapp { background: var(--color-whatsapp); color: var(--color-whatsapp-ink); }
.text-link { color: var(--color-accent-light); font-weight: 600; text-underline-offset: 5px; }

.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 72px; align-items: end; padding-block: 88px 120px; }
.hero h1 { max-width: 16ch; margin-top: 18px; font-size: clamp(42px, 5.7vw, 74px); letter-spacing: -.04em; }
.hero h1 span { color: var(--color-accent); }
.lead { max-width: 630px; margin-top: 28px; color: var(--color-muted); font-size: 19px; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 36px; }
.micro { margin-top: 14px; color: var(--color-muted); font-size: 13px; }
.test-card { padding: 32px; border-top: 4px solid var(--color-accent); background: var(--color-surface); box-shadow: 20px 20px 0 var(--color-surface-raised); }
.test-label { color: var(--color-accent); font: 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.test-card h2 { margin-top: 16px; font-size: 30px; }
.test-card > p:not(.test-label) { margin-top: 18px; color: var(--color-muted); }
.test-card ol { margin: 22px 0 24px 22px; }
.test-card li { padding: 4px 0 4px 8px; }

.problem-band { padding: 42px 0; background: var(--color-accent); color: var(--color-ink); }
.problem-grid { display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); gap: 36px; }
.problem-grid div { border-left: 1px solid var(--color-ink); padding-left: 18px; }
.problem-grid strong, .problem-grid span { display: block; }
.problem-grid span { margin-top: 7px; font-size: 14px; line-height: 1.45; }
.problem-intro { align-self: center; font: 700 24px/1.15 var(--font-display); }

.process { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 80px; padding-block: 112px; }
.section-title h2 { max-width: 16ch; margin-top: 16px; font-size: clamp(34px, 4vw, 52px); letter-spacing: -.025em; }
.timeline { list-style: none; border-top: 1px solid var(--color-line); }
.timeline li { display: grid; grid-template-columns: 54px 1fr; gap: 22px; padding: 28px 0; border-bottom: 1px solid var(--color-line); }
.timeline li > span, .solution-number { color: var(--color-accent); font: 12px/1.4 var(--font-mono); }
.timeline h3 { font-size: 22px; }
.timeline p { margin-top: 8px; color: var(--color-muted); }

.solutions { padding-block: 104px; background: var(--color-surface); }
.section-title.compact { margin-bottom: 58px; }
.section-title.compact h2 { max-width: none; }
.solution { display: grid; grid-template-columns: 80px minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; padding: 42px 0; border-top: 1px solid var(--color-line); }
.solution:last-child { border-bottom: 1px solid var(--color-line); }
.solution-type { margin-bottom: 12px; color: var(--color-accent); font: 11px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.solution h3 { max-width: 18ch; font-size: clamp(28px, 3vw, 40px); }
.solution > div:last-child p { color: var(--color-muted); }
.solution a { display: inline-block; margin-top: 22px; color: var(--color-accent-light); font-weight: 600; text-underline-offset: 5px; }

.capabilities { padding-block: 112px; background: var(--color-paper); color: var(--color-ink); }
.capabilities .kicker { color: #795b08; }
.capabilities-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 80px; align-items: end; margin-bottom: 64px; }
.capabilities-intro h2 { max-width: 18ch; margin-top: 16px; font-size: clamp(38px, 4.6vw, 62px); letter-spacing: -.035em; }
.capabilities-intro > p { max-width: 47ch; color: #5c574d; font-size: 18px; text-wrap: pretty; }
.capability-list { border-top: 1px solid rgba(11, 10, 8, .28); }
.capability-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(210px, .42fr); gap: 38px; align-items: start; padding: 34px 0; border-bottom: 1px solid rgba(11, 10, 8, .2); }
.capability-area { color: #795b08; font: 700 12px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.capability-row h3 { font-size: clamp(25px, 2.5vw, 34px); }
.capability-row div > p { max-width: 58ch; margin-top: 11px; color: #5c574d; text-wrap: pretty; }
.capability-tech { color: #4b463d; font-size: 14px; line-height: 1.55; }
.capability-tech span { display: block; margin-bottom: 7px; color: #795b08; font: 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.automation-map { margin-top: 72px; padding: 42px; background: #0c0a13; color: var(--color-paper); }
.automation-map-heading { display: flex; justify-content: space-between; gap: 48px; align-items: end; padding-bottom: 34px; border-bottom: 1px solid rgba(244, 239, 228, .12); }
.digital-foundation-label { color: var(--color-accent); font: 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.automation-map h3 { max-width: 22ch; margin-top: 12px; font-size: clamp(30px, 3.4vw, 44px); }
.automation-example { max-width: 31ch; color: #b9b2c4; }
.automation-example > p { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--color-accent-light); font: 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.automation-example > span { display: block; }
.flow-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); animation: flow-status 1.4s ease-in-out infinite; }
.flow-canvas { display: grid; grid-template-columns: minmax(150px, .8fr) 32px minmax(170px, 1fr) 32px minmax(170px, 1fr) 38px minmax(210px, 1.15fr); gap: 12px; align-items: center; padding-block: 48px; }
.flow-node, .flow-result { background: #17131f; border: 1px solid #4e465b; }
.flow-node { min-height: 190px; padding: 22px; }
.flow-entry { animation: flow-node-active 9s ease-in-out infinite; }
.flow-canvas > .flow-node:nth-child(3) { animation: flow-node-active 9s 1.8s ease-in-out infinite; }
.flow-canvas > .flow-node:nth-child(5) { animation: flow-node-active 9s 3.6s ease-in-out infinite; }
.flow-node strong { display: block; margin-top: 18px; font: 700 20px/1.12 var(--font-display); }
.flow-node > p { margin-top: 10px; color: #aaa2b6; font-size: 13px; line-height: 1.5; }
.flow-step { color: var(--color-accent); font: 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.channel-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.channel-list span { padding: 5px 7px; background: #26202f; color: #d8d2df; font-size: 11px; }
.tech-mark { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 9px; color: #fff; font: 700 12px/1 var(--font-mono); }
.tech-n8n { background: #d94e41; }
.tech-dify { background: #4d66e8; }
.tech-cal { background: #29252e; border: 1px solid #777080; }
.tech-chatwoot { background: #1f93ff; }
.tech-mautic { background: #514b9c; }
.flow-arrow { position: relative; height: 14px; color: transparent; font-size: 0; }
.flow-arrow::before { position: absolute; top: 6px; right: 0; left: 0; height: 2px; background: #4f4858; content: ''; }
.flow-arrow::after { position: absolute; top: 2px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent-light); box-shadow: 0 0 0 3px rgba(234, 198, 92, .12), 0 0 12px rgba(234, 198, 92, .9); content: ''; opacity: 0; animation: flow-signal 9s var(--signal-delay, 0s) linear infinite; }
.flow-canvas > .flow-arrow:nth-child(2) { --signal-delay: 1.05s; }
.flow-canvas > .flow-arrow:nth-child(4) { --signal-delay: 2.85s; }
.flow-canvas > .flow-arrow:nth-child(6) { --signal-delay: 4.65s; }
.flow-results { position: relative; display: flex; flex-direction: column; gap: 10px; padding-left: 18px; }
.flow-results::before { position: absolute; top: 17%; bottom: 17%; left: 0; width: 1px; background: #6d6478; content: ''; animation: flow-branch-active 9s 5.2s ease-in-out infinite; }
.flow-result { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: center; padding: 13px; }
.flow-result:nth-child(1) { --result-delay: 5.2s; animation: flow-result-active 9s var(--result-delay) ease-in-out infinite; }
.flow-result:nth-child(2) { --result-delay: 5.8s; animation: flow-result-active 9s var(--result-delay) ease-in-out infinite; }
.flow-result:nth-child(3) { --result-delay: 6.4s; animation: flow-result-active 9s var(--result-delay) ease-in-out infinite; }
.flow-result::before { position: absolute; top: 50%; left: -18px; width: 18px; height: 1px; background: #6d6478; content: ''; }
.flow-result::after { position: absolute; top: calc(50% - 4px); left: -18px; width: 8px; height: 8px; border-radius: 50%; background: #b7a5d6; box-shadow: 0 0 10px rgba(183, 165, 214, .8); content: ''; opacity: 0; animation: result-signal 9s var(--result-delay) linear infinite; }
.flow-result p { color: #c1bac9; font-size: 12px; line-height: 1.4; }
.automation-outcome { display: flex; justify-content: space-between; gap: 36px; align-items: center; padding-top: 30px; border-top: 1px solid rgba(244, 239, 228, .12); }
.automation-outcome p { max-width: 57ch; color: #c8c1d0; }
.automation-outcome p span { display: block; margin-bottom: 5px; color: var(--color-accent); font: 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.automation-outcome .button { white-space: normal; text-align: center; }

@keyframes flow-node-active {
  0%, 6%, 24%, 100% { background: #17131f; border-color: #4e465b; box-shadow: none; }
  10%, 20% { background: #1d1825; border-color: var(--color-accent); box-shadow: 0 0 0 1px rgba(212, 169, 55, .22), 0 0 22px rgba(212, 169, 55, .22); }
}
@keyframes flow-signal {
  0%, 8% { opacity: 0; transform: translateX(0); }
  10% { opacity: 1; }
  19% { opacity: 1; transform: translateX(22px); }
  21%, 100% { opacity: 0; transform: translateX(22px); }
}
@keyframes flow-result-active {
  0%, 6%, 23%, 100% { background: #17131f; border-color: #4e465b; box-shadow: none; }
  10%, 19% { background: #201a29; border-color: #a794c7; box-shadow: 0 0 18px rgba(116, 98, 155, .4); }
}
@keyframes result-signal {
  0%, 8% { opacity: 0; transform: translateX(0); }
  10% { opacity: 1; }
  18% { opacity: 1; transform: translateX(14px); }
  20%, 100% { opacity: 0; transform: translateX(14px); }
}
@keyframes flow-branch-active {
  0%, 7%, 28%, 100% { background: #6d6478; box-shadow: none; }
  11%, 24% { background: #b7a5d6; box-shadow: 0 0 8px rgba(183, 165, 214, .55); }
}
@keyframes flow-status {
  0%, 100% { opacity: .45; box-shadow: 0 0 0 0 rgba(212, 169, 55, 0); }
  50% { opacity: 1; box-shadow: 0 0 0 5px rgba(212, 169, 55, .12); }
}

.control { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 100px; padding-block: 112px; }
.control h2 { max-width: 15ch; margin-top: 16px; font-size: clamp(36px, 4vw, 54px); }
.control-copy > p:last-child { max-width: 580px; margin-top: 24px; color: var(--color-muted); }
.control-list { list-style: none; }
.control-list li { padding: 24px 0; border-bottom: 1px solid var(--color-line); }
.control-list strong, .control-list span { display: block; }
.control-list span { margin-top: 6px; color: var(--color-muted); }

.faq { padding-block: 104px; background: var(--color-surface); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 88px; }
.faq h2 { margin-top: 16px; font-size: 46px; }
.faq-note { max-width: 30ch; margin-top: 22px; color: var(--color-muted); }
details { padding: 22px 0; border-bottom: 1px solid var(--color-line-soft); }
details:first-child { border-top: 1px solid var(--color-line-soft); }
summary { display: flex; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; font-weight: 600; }
summary::after { content: '+'; color: var(--color-accent); font: 24px/1 var(--font-display); }
details[open] summary::after { content: '−'; }
details p { max-width: 55ch; margin-top: 14px; color: var(--color-muted); }

.closing { padding-block: 120px 150px; }
.closing h2 { max-width: 17ch; margin-top: 18px; font-size: clamp(42px, 6vw, 78px); letter-spacing: -.04em; }
.closing > p:not(.kicker) { max-width: 620px; margin: 28px 0 36px; color: var(--color-muted); font-size: 19px; }
footer { padding: 38px 0 46px; border-top: 1px solid var(--color-line); }
.footer-inner { display: flex; justify-content: space-between; gap: 40px; color: var(--color-muted); font-size: 14px; }
.footer-inner div, .footer-inner strong, .footer-inner span, .footer-inner a { display: block; }
.footer-inner strong { color: var(--color-paper); font: 700 19px/1.4 var(--font-display); }
.footer-inner div:last-child { text-align: right; }
.footer-inner a { margin-top: 5px; color: var(--color-accent-light); }
.footer-links { display: grid; gap: 7px; }
.footer-links a { margin-top: 0; }
.footer-legal { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 13px; line-height: 1.6; }
.whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--color-whatsapp); color: var(--color-whatsapp-ink); box-shadow: 0 10px 30px var(--color-shadow); }
.whatsapp-float svg { width: 31px; fill: currentColor; }

@media (max-width: 900px) {
  .hero, .process, .control, .faq-grid, .capabilities-intro { grid-template-columns: minmax(0, 1fr); }
  .hero { gap: 58px; padding-block: 64px 88px; }
  .problem-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .process, .control, .faq-grid, .capabilities-intro { gap: 52px; }
  .solution { grid-template-columns: 50px minmax(0, 1fr); }
  .solution > div:last-child { grid-column: 2; }
  .capability-row { grid-template-columns: 120px minmax(0, 1fr); }
  .capability-tech { grid-column: 2; }
  .flow-canvas { grid-template-columns: minmax(135px, .75fr) 26px minmax(150px, 1fr) 26px minmax(150px, 1fr); }
  .flow-arrow-branch { display: none; }
  .flow-results { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); padding: 28px 0 0; }
  .flow-results::before { top: 0; right: 16.66%; bottom: auto; left: 16.66%; width: auto; height: 1px; }
  .flow-result { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .flow-result::before { top: -28px; left: 50%; width: 1px; height: 28px; }
  .flow-result::after { display: none; }
}

@media (max-width: 600px) {
  .wrap { width: min(100% - 32px, 1120px); }
  nav { min-height: 66px; padding-inline: 16px; }
  .brand small { display: none; }
  nav { flex-wrap: wrap; row-gap: 9px; padding-block: 10px; }
  .nav-links { order: 3; width: 100%; margin-left: 0; gap: 22px; }
  .nav-links > a:not(.button) { font-size: 13.5px; }
  .nav-cta { margin-left: auto; }
  .button-small { padding-inline: 13px; }
  .hero { padding-block: 48px 72px; }
  .hero h1 { font-size: clamp(38px, 12vw, 54px); }
  .lead { font-size: 17px; }
  .actions { align-items: flex-start; flex-direction: column; }
  .test-card { padding: 26px; box-shadow: 10px 10px 0 var(--color-surface-raised); }
  .problem-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .problem-grid div { padding: 0 0 20px; border-left: 0; border-bottom: 1px solid var(--color-ink); }
  .process, .solutions, .capabilities, .control, .faq { padding-block: 76px; }
  .solution { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .solution > div:last-child { grid-column: 1; margin-top: 10px; }
  .capabilities-intro { margin-bottom: 46px; }
  .capabilities-intro h2 { font-size: clamp(36px, 11vw, 48px); }
  .capability-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 28px 0; }
  .capability-row div { margin-top: 2px; }
  .capability-tech { grid-column: 1; margin-top: 9px; }
  .automation-map { margin-top: 52px; padding: 28px 20px; }
  .automation-map-heading, .automation-outcome { align-items: flex-start; flex-direction: column; }
  .automation-map-heading { gap: 20px; }
  .flow-canvas { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 28px; }
  .flow-node { min-height: 0; padding: 20px; }
  .flow-node strong { margin-top: 12px; font-size: 18px; }
  .flow-node > p { margin-top: 7px; }
  .channel-list { margin-top: 14px; }
  .flow-arrow, .flow-arrow-branch { display: block; width: 14px; height: 24px; justify-self: center; transform: none; }
  .flow-arrow::before { top: 0; right: auto; bottom: 0; left: 6px; width: 2px; height: auto; }
  .flow-arrow::after { top: 0; left: 2px; animation-name: flow-signal-mobile; }
  .flow-results { grid-column: 1; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; }
  .flow-results::before, .flow-result::before { display: none; }
  .flow-result { grid-template-columns: minmax(86px, auto) 1fr; gap: 12px; padding: 12px 14px; }
  .automation-outcome { gap: 20px; padding-top: 24px; }
  .automation-outcome p { font-size: 17px; line-height: 1.45; }
  .automation-outcome .button { width: 100%; }
  footer { padding-bottom: 96px; }
  .hero .micro { padding-right: 66px; }
  .footer-inner { flex-direction: column; gap: 26px; }
  .footer-inner div:last-child { text-align: left; }
  .closing { padding-block: 84px 110px; }
  .whatsapp-float { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}

@keyframes flow-signal-mobile {
  0%, 8% { opacity: 0; transform: translateY(0); }
  10% { opacity: 1; }
  19% { opacity: 1; transform: translateY(14px); }
  21%, 100% { opacity: 0; transform: translateY(14px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flow-node, .flow-result, .flow-arrow::after, .flow-result::after, .flow-results::before, .flow-status-dot { animation: none; }
  .button { transition: none; }
  .button:hover { transform: none; }
}

/* ---------- Página legal (privacidade) ---------- */
.legal { max-width: 760px; padding-block: 64px 84px; }
.legal h1 { margin: 10px 0 0; font: 800 clamp(38px, 6vw, 56px)/1.06 var(--font-display); letter-spacing: -.02em; }
.legal .legal-meta { margin-top: 14px; color: var(--color-muted); font-family: var(--font-mono); font-size: 13px; }
.legal .lead { margin-top: 26px; }
.legal h2 { margin: 46px 0 0; font: 700 clamp(23px, 3.4vw, 29px)/1.2 var(--font-display); letter-spacing: -.01em; }
.legal h3 { margin: 28px 0 0; font: 600 18px/1.35 var(--font-display); color: var(--color-accent-light); }
.legal p { margin-top: 14px; color: var(--color-muted); line-height: 1.68; }
.legal strong { color: var(--color-paper); }
.legal ul { margin-top: 14px; padding-left: 20px; color: var(--color-muted); line-height: 1.68; }
.legal li { margin-top: 8px; }
.legal a { color: var(--color-accent-light); }
.legal-table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 14px; }
.legal-table th, .legal-table td { padding: 12px 14px; border: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.legal-table th { color: var(--color-paper); font-weight: 600; background: var(--color-surface-raised); }
.legal-table td { color: var(--color-muted); line-height: 1.55; }
.legal-table-scroll { overflow-x: auto; }
.legal-cta { margin-top: 54px; padding-top: 30px; border-top: 1px solid var(--color-line); }
.legal-cta p { margin-bottom: 18px; color: var(--color-paper); font: 700 21px/1.35 var(--font-display); }
@media (max-width: 600px) {
  .legal { padding-block: 46px 72px; }
  .legal-table { display: block; overflow-x: auto; white-space: nowrap; }
}

.legal-alt { margin-top: 16px; font-size: 14px; }

/* ============================================================
   Profundidade
   Sem JavaScript: a CSP da home proíbe script, e não vale afrouxar
   uma proteção que faz parte do que vendemos para clínica.
   A profundidade serve ao sentido — o diagrama É um sistema em
   camadas, então mostrá-lo em camadas informa. Não é ornamento.
   ============================================================ */

/* --- 1. Diagrama: cada etapa recua um plano --- */
.flow-canvas { perspective: 1400px; perspective-origin: 50% 45%; }
.flow-node, .flow-results { transform-style: preserve-3d; }

.flow-entry                        { transform: translateZ(0); }
.flow-canvas > .flow-node:nth-child(3) { transform: translateZ(-26px); }
.flow-canvas > .flow-node:nth-child(5) { transform: translateZ(-52px); }
.flow-results                      { transform: translateZ(-78px); }

/* a entrada é o que está mais perto de quem lê: é onde o cliente chega */
.flow-node, .flow-results { transition: transform 320ms cubic-bezier(.22,1,.36,1); }
.flow-node:hover  { transform: translateZ(26px); }
.flow-results:hover { transform: translateZ(-40px); }

/* o recuo tira contraste; devolve para o texto continuar legível */
.flow-canvas > .flow-node:nth-child(5) > p,
.flow-results .flow-result p { color: #b6aec2; }

/* --- 2. Cartão do hero: relevo real no lugar da sombra chapada --- */
.test-card { transform-style: preserve-3d;
             transition: transform 340ms cubic-bezier(.22,1,.36,1),
                         box-shadow 340ms cubic-bezier(.22,1,.36,1); }
.hero { perspective: 1600px; }
.test-card:hover { transform: translateZ(22px) rotateY(-1.4deg); }

/* --- 3. Especialidades emergem ao entrar em cena ---
   `animation-timeline: view()` liga a animação ao scroll sem script.
   Dentro de @supports para que navegador sem suporte receba o layout
   final, visível — reveal nunca pode esconder conteúdo. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .solutions { perspective: 1800px; }
    .solution {
      transform-style: preserve-3d;
      animation: emergir linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 34%;
    }
    @keyframes emergir {
      from { transform: translateZ(-90px) translateY(14px); opacity: .55; }
      to   { transform: translateZ(0)     translateY(0);    opacity: 1; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* a profundidade estática fica: ela informa, não se move.
     O que para é o movimento. */
  .flow-node, .flow-results, .test-card { transition: none; }
  .flow-node:hover, .flow-results:hover, .test-card:hover { transform: none; }
}

@media (max-width: 900px) {
  /* empilhado no celular, o recuo perde o sentido e só apaga texto */
  .flow-canvas { perspective: none; }
  .flow-entry, .flow-canvas > .flow-node:nth-child(3),
  .flow-canvas > .flow-node:nth-child(5), .flow-results { transform: none; }
}