/* Fontes servidas localmente (sem dependência externa, compatível com CSP estrita) */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/manrope-latin.woff2') format('woff2'); }

:root {
  --navy: #082d47; --navy-deep: #062238; --blue: #0b6f91; --teal: #0aa3a1; --green: #81b741;
  --sand: #f6f4ed; --ink: #163247; --muted: #566b7a; --line: rgba(17, 64, 82, .13); --white: #fff;
  --gutter: clamp(1rem, 5vw, 3rem);
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--sand); font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.skip-link { position: absolute; top: -4rem; left: 1rem; z-index: 20; padding: .75rem 1rem; border-radius: .55rem; color: #fff; background: var(--navy); text-decoration: none; font-weight: 700; }
.skip-link:focus { top: 1rem; }

.page-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: linear-gradient(135deg, #f8f7f1 0%, #f3f6ee 100%); }
.site-header, main, .site-footer {
  width: min(var(--container), 100% - 2 * var(--gutter));
  width: min(var(--container), calc(100% - 2 * max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right))));
  margin-inline: auto;
}
main { flex: 1; }

/* Cabeçalho */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: clamp(1.1rem, 3vw, 2.35rem) 0 1.5rem; padding-top: max(clamp(1.1rem, 3vw, 2.35rem), env(safe-area-inset-top)); }
.brand { display: inline-flex; align-items: center; gap: clamp(.65rem, 1.5vw, 1rem); min-width: 0; text-decoration: none; border-radius: .9rem; }
.brand:focus-visible { outline: 3px solid rgba(10,163,161,.35); outline-offset: 6px; }
.brand-mark { display: grid; place-items: center; flex: 0 0 auto; width: clamp(3rem, 6vw, 4rem); aspect-ratio: 1; padding: .5rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; box-shadow: 0 10px 22px rgba(8,45,71,.1); }
.brand-mark img { width: 100%; }
.brand-copy { display: grid; gap: .2rem; min-width: 0; padding-left: clamp(.65rem, 1.5vw, 1rem); border-left: 2px solid var(--line); }
.brand-copy strong { color: var(--navy); font-family: Manrope, Arial, sans-serif; font-size: clamp(.92rem, 1.6vw, 1.1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.brand-copy small { color: var(--muted); font-size: clamp(.68rem, 1.2vw, .78rem); font-weight: 600; line-height: 1.3; }
.header-tag { display: flex; flex: 0 0 auto; align-items: center; gap: .6rem; padding: .55rem .85rem; border: 1px solid rgba(216,168,71,.35); border-radius: 999px; color: #6f5a24; background: rgba(246,237,207,.6); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.live-dot, .card-status i { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: #d8a847; box-shadow: 0 0 0 .28rem rgba(216,168,71,.16); }
.live-dot { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 .5rem rgba(216,168,71,0); } }

/* Hero */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(2rem, 5vw, 3.2rem) 0 clamp(2.5rem, 6vw, 4.7rem); }
.hero-copy { position: relative; z-index: 2; max-width: 590px; }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.35rem; color: #078583; font-size: clamp(.62rem, 1.1vw, .7rem); font-weight: 800; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
.eyebrow-line { width: 2.15rem; height: 2px; flex: 0 0 auto; background: var(--teal); }
h1, h2 { font-family: Manrope, Arial, sans-serif; letter-spacing: -.05em; text-wrap: balance; }
h1 { max-width: 620px; margin: 0; color: var(--navy); font-size: clamp(2.3rem, 1.2rem + 4.6vw, 5.1rem); font-weight: 800; line-height: 1.02; }
h1 em { color: #5f9a22; font-style: normal; }
.hero-text { max-width: 505px; margin: 1.6rem 0 0; color: var(--muted); font-size: clamp(.95rem, .9rem + .25vw, 1.05rem); line-height: 1.7; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: .8rem 1.2rem; border: 1px solid transparent; border-radius: .65rem; font-size: .85rem; font-weight: 700; text-align: center; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button:focus-visible, .text-link:focus-visible { outline: 3px solid rgba(10,163,161,.45); outline-offset: 4px; }
.button-primary { gap: .75rem; color: #fff; background: var(--navy); box-shadow: 0 12px 23px rgba(8,45,71,.2); }
.button-primary:hover { background: #0c4262; box-shadow: 0 15px 26px rgba(8,45,71,.25); }
.button-primary svg { width: 1.1rem; flex: 0 0 auto; }
.button-secondary { color: var(--navy); background: rgba(255,255,255,.55); border-color: rgba(8,45,71,.2); }
.button-secondary:hover { background: #fff; }
.reassurance { display: flex; align-items: center; gap: .7rem; margin-top: 2.25rem; color: var(--navy); font-size: .82rem; line-height: 1.4; }
.reassurance small { color: #6b7d87; font-size: .76rem; }
.reassurance-icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: 0 0 auto; border: 1px solid rgba(10,163,161,.25); border-radius: 50%; color: var(--teal); background: rgba(10,163,161,.08); }
.reassurance-icon svg { width: 1.1rem; }

/* Ilustração — o cartão fica no fluxo; órbitas e notas se posicionam em torno dele */
.hero-visual { position: relative; display: grid; place-items: center; padding: clamp(2.2rem, 5vw, 3.5rem) clamp(.5rem, 2vw, 1.5rem); }
.visual-glow { position: absolute; inset: 5% 8%; border-radius: 50%; background: rgba(132,188,82,.14); filter: blur(16px); transform: rotate(18deg); }
.orbit { position: absolute; border: 1px solid rgba(10,163,161,.2); border-radius: 50%; transform: rotate(-25deg); pointer-events: none; }
.orbit-one { top: 8%; left: 6%; width: 88%; height: 52%; }
.orbit-two { top: 30%; left: 4%; width: 92%; height: 52%; border-color: rgba(129,183,65,.22); transform: rotate(32deg); }
.visual-card { position: relative; z-index: 1; width: min(100%, 500px); overflow: hidden; border: 1px solid rgba(255,255,255,.78); border-radius: 1.2rem; background: rgba(255,255,255,.86); box-shadow: 0 24px 70px rgba(8,45,71,.14), 0 3px 10px rgba(8,45,71,.04); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.card-topline, .progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card-topline { padding: 1.2rem 1.35rem .9rem; }
.card-label { color: #6a7d85; font-size: .6rem; font-weight: 800; letter-spacing: .15em; }
.card-status { display: flex; align-items: center; gap: .45rem; color: #7d6a35; font-size: .64rem; font-weight: 700; }
.card-status i { width: .35rem; height: .35rem; box-shadow: none; }
.illustration { position: relative; height: 278px; overflow: hidden; background: linear-gradient(180deg, #dcf1ed 0%, #eaf4df 58%, #edf0dc 100%); }
.sun { position: absolute; top: 2.2rem; right: 17%; width: 4.7rem; height: 4.7rem; border-radius: 50%; background: #f3c66b; box-shadow: 0 0 0 .9rem rgba(243,198,107,.15); }
.cloud { position: absolute; z-index: 2; width: 7.5rem; height: 1.65rem; border-radius: 2rem; background: rgba(255,255,255,.7); }
.cloud:before, .cloud:after { position: absolute; bottom: 0; content: ''; border-radius: 50% 50% 0 0; background: inherit; }
.cloud:before { left: 1.1rem; width: 2.8rem; height: 2.5rem; }
.cloud:after { right: 1.2rem; width: 2.2rem; height: 2rem; }
.cloud-back { top: 5rem; left: 16%; transform: scale(.7); opacity: .6; animation: drift 14s ease-in-out infinite alternate; }
.cloud-front { top: 8rem; left: 48%; transform: scale(.52); opacity: .8; animation: drift 18s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { translate: 2.5rem 0; } }
.hill { position: absolute; bottom: -4.5rem; width: 86%; height: 12rem; border-radius: 50% 50% 0 0; transform: rotate(-7deg); }
.hill-back { left: -10%; background: #b2cf91; }
.hill-front { right: -16%; bottom: -6rem; background: #72af7b; transform: rotate(10deg); }
.road { position: absolute; bottom: -4rem; left: 25%; z-index: 3; width: 37%; height: 12rem; border-radius: 50% 50% 0 0; background: #d9c69b; transform: rotate(-18deg); }
.person { position: absolute; bottom: 5.7rem; z-index: 5; width: 2.9rem; height: 6rem; }
.person-left { left: 28%; transform: rotate(-4deg); }
.person-right { right: 23%; transform: scale(.84) rotate(5deg); }
.person .head { position: absolute; top: 0; left: .9rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #7c4a36; }
.person .body { position: absolute; top: 1rem; left: .56rem; width: 1.8rem; height: 2.35rem; border-radius: .8rem .8rem .5rem .5rem; background: #0d7490; }
.person-right .body { background: #d39336; }
.person .leg { position: absolute; top: 3.1rem; width: .55rem; height: 2.5rem; border-radius: 0 0 .5rem .5rem; background: #264960; }
.person .leg-a { left: .7rem; transform: rotate(7deg); }
.person .leg-b { left: 1.35rem; transform: rotate(-8deg); }
.person .tool { position: absolute; top: 1.4rem; left: -.7rem; width: 2.3rem; height: .2rem; border-radius: .2rem; background: #795c3e; transform: rotate(-43deg); transform-origin: 80% 50%; animation: hammer 1.6s ease-in-out infinite; }
@keyframes hammer { 50% { transform: rotate(-20deg); } }
.person .flag { position: absolute; top: 1.2rem; right: -1.6rem; width: .1rem; height: 4.5rem; background: #66523e; }
.person .flag:before { position: absolute; top: 0; left: .1rem; content: ''; width: 1.25rem; height: .75rem; background: var(--teal); clip-path: polygon(0 0, 100% 30%, 75% 100%, 0 70%); }
.plant { position: absolute; bottom: 4.7rem; z-index: 6; width: 2rem; height: 3rem; }
.plant-one { left: 16%; }
.plant-two { right: 14%; transform: scale(.8); }
.plant span { position: absolute; bottom: .4rem; width: .9rem; height: 1.7rem; border-radius: 100% 0 100% 0; background: #3b8d66; transform-origin: bottom; }
.plant span:first-child { left: .7rem; transform: rotate(27deg); }
.plant span:nth-child(2) { left: .1rem; transform: rotate(-38deg); }
.plant i { position: absolute; bottom: 0; left: .75rem; width: .25rem; height: 1.8rem; background: #73894d; }
.progress-wrap { padding: .85rem 1.35rem 1.1rem; }
.progress-meta { color: #6f8186; font-size: .68rem; }
.progress-meta span:last-child { color: #078583; font-weight: 700; }
.progress-track { height: .35rem; margin-top: .62rem; overflow: hidden; border-radius: 1rem; background: #e2ebe4; }
.progress-track span { display: block; width: 64%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--green), var(--teal)); background-size: 200% 100%; animation: flow 3s linear infinite; }
@keyframes flow { to { background-position: -200% 0; } }
.floating-note { position: absolute; z-index: 3; display: flex; align-items: center; gap: .55rem; padding: .7rem .8rem; border: 1px solid rgba(255,255,255,.8); border-radius: .8rem; color: #5d7277; background: rgba(255,255,255,.9); box-shadow: 0 15px 30px rgba(8,45,71,.1); font-size: .62rem; line-height: 1.25; }
.floating-note strong { color: var(--navy); font-size: .7rem; }
.note-one { top: .5rem; left: 0; }
.note-two { right: 0; bottom: .5rem; }
.note-icon { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: .55rem; color: #a98234; background: #f6edcf; font-size: .9rem; }
.note-icon-green { color: #4c8b57; background: #e4f0d9; font-size: .74rem; }

/* Faixa de contato */
.contact-strip { position: relative; display: grid; grid-template-columns: 1.1fr 1fr auto; align-items: center; gap: clamp(1rem, 4vw, 3rem); margin-bottom: 2rem; padding: clamp(1.5rem, 3vw, 2rem) clamp(1.35rem, 3vw, 2.3rem); overflow: hidden; border-radius: 1.1rem; background: var(--navy); box-shadow: 0 20px 40px rgba(8,45,71,.13); }
.contact-strip:after { position: absolute; right: 8%; bottom: -5rem; width: 15rem; height: 15rem; border: 1px solid rgba(129,183,65,.35); border-radius: 50%; content: ''; pointer-events: none; }
.contact-strip .eyebrow { margin-bottom: .5rem; color: #75c8be; }
.contact-strip h2 { max-width: 390px; margin: 0; color: #fff; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.8rem); line-height: 1.16; }
.contact-copy { max-width: 380px; color: #c3d5d9; font-size: .85rem; line-height: 1.6; }
.contact-copy p { margin: 0 0 .9rem; }
.text-link { color: #fff; font-size: .82rem; font-weight: 700; text-underline-offset: .3rem; }
.text-link span { color: #a9d35b; font-size: 1rem; }
.contact-seal { position: relative; z-index: 1; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; padding: .85rem; border: 1px solid rgba(169,211,91,.6); border-radius: 50%; background: #fff; transform: rotate(-8deg); }
.contact-seal img { width: 100%; }

/* Rodapé */
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.25rem 0 1.8rem; padding-bottom: max(1.8rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: #6b7b80; font-size: .75rem; }
.footer-logo img { width: clamp(4.5rem, 9vw, 6rem); }
.footer-copy { display: grid; gap: .15rem; text-align: right; line-height: 1.4; }
.footer-copy strong { color: var(--navy); font-family: Manrope, Arial, sans-serif; font-size: .85rem; }

/* Telas grandes */
@media (min-width: 1600px) {
  :root { --container: 1320px; }
  html { font-size: 17px; }
}

/* Tablets */
@media (max-width: 920px) {
  .header-tag { padding: .45rem .7rem; font-size: .62rem; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: 650px; }
  .hero-visual { width: min(100%, 560px); margin-inline: auto; }
  .contact-strip { grid-template-columns: 1fr auto; }
  .contact-seal { grid-row: 1; grid-column: 2; align-self: start; }
  .contact-copy { grid-column: 1 / -1; max-width: 560px; }
}

/* Celulares */
@media (max-width: 600px) {
  .site-header { flex-wrap: wrap; }
  .header-tag { order: -1; }
  .brand-copy small { max-width: 26ch; }
  .actions { flex-direction: column; align-items: stretch; }
  .button { width: 100%; }
  .reassurance { margin-top: 1.7rem; }
  .illustration { height: 200px; }
  .sun { top: 1.5rem; right: 16%; width: 3.4rem; height: 3.4rem; }
  .person { bottom: 4.2rem; transform: scale(.75) rotate(-4deg); }
  .person-right { transform: scale(.63) rotate(5deg); }
  .hill { bottom: -5.6rem; }
  .road { bottom: -5rem; }
  .plant { bottom: 3.7rem; transform: scale(.75); }
  .plant-two { transform: scale(.6); }
  .floating-note { transform: scale(.85); }
  .note-one { transform-origin: left top; }
  .note-two { transform-origin: right bottom; }
  .contact-strip { margin-bottom: 1.4rem; }
  .contact-seal { width: 3.6rem; height: 3.6rem; padding: .65rem; }
  .site-footer { flex-direction: column; text-align: center; }
  .footer-copy { text-align: center; }
}

/* Celulares muito estreitos (≤ 360px) */
@media (max-width: 360px) {
  .brand-mark { width: 2.6rem; padding: .35rem; border-radius: .75rem; }
  .brand-copy { padding-left: .55rem; }
  .brand-copy strong { font-size: .82rem; }
  .brand-copy small { font-size: .64rem; }
  .eyebrow-line { display: none; }
  .illustration { height: 170px; }
  .floating-note { display: none; }
  .hero-visual { padding-block: 1rem; }
}

/* Paisagem em telas baixas (celular deitado) */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding-block: 1.5rem; }
  .hero-visual { padding-block: 1.5rem; }
  .illustration { height: 170px; }
  .floating-note { display: none; }
  h1 { font-size: clamp(2rem, 6vw, 3rem); }
  .actions { flex-direction: row; }
  .button { width: auto; }
}

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

@media print {
  .hero-visual, .actions, .skip-link { display: none; }
  .page-shell { background: none; }
  .contact-strip { color: #000; background: none; box-shadow: none; border: 1px solid #ccc; }
  .contact-strip h2, .text-link { color: #000; }
}