/* mark.agency · Mark Publicidade. Paleta: azul #0a85c7 (principal), amarelo e roxo (detalhes), fundo branco. */
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-latin-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-latin-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
body{margin:0;background:#fff}
[hidden]{display:none!important}
.ma [id]{scroll-margin-top:88px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:4px;background:#0a85c7;color:#fff;font:600 15px Inter,system-ui,sans-serif;text-decoration:none}
.skip:focus{top:12px}
.form-error{padding:12px 14px;border-radius:4px;background:#fcec50;color:#111;font-size:15px;line-height:1.5}
.form-error a{color:#111;font-weight:600}
.btn[aria-busy="true"]{opacity:.7;cursor:progress}
html{scroll-behavior:smooth}
.ma{
  --azul:#0a85c7;--azul-c:#e8f3fb;--azul-cc:#f4f9fd;
  --amarelo:#ffeb0d;--amarelo-s:#fcec50;--roxo:#742b8c;--roxo-c:#f4ecf7;
  --tinta:#111111;--suave:#52514e;--apagada:#898781;--campo:#898781;--sup:#ffffff;--sup-2:#f4f4f2;--linha:#e4e3de;--linha-az:#d4e6f3;
  --grad:linear-gradient(90deg,#f4ca55 0%,#faea50 7%,#f6ea51 15%,#bee574 30%,#81ddca 45%,#6ddbf8 60%,#6ddbf8 100%);
  --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-io:cubic-bezier(0.77,0,0.175,1);
  --gutter:clamp(16px,4cqi,56px);--max:1240px;
  --display:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  container-type:inline-size;container-name:page;
  color-scheme:light;
  background:var(--sup);color:var(--tinta);
  font:400 17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
.ma *,.ma *::before,.ma *::after{box-sizing:border-box}
.ma img{max-width:100%}
.ma a{color:inherit}
.ma h1,.ma h2,.ma h3,.ma h4{font-family:var(--display);margin:0;text-wrap:balance}
.ma p{margin:0}
.ma :focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.over{font:600 12.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--azul)}
.h2{font-weight:700;font-size:clamp(32px,4cqi,56px);line-height:1.06;letter-spacing:-.018em}
.lead{font-size:clamp(17px,1.4cqi,20px);line-height:1.6;color:var(--suave);max-width:36em}
.hl{position:relative;isolation:isolate;white-space:nowrap}
.hl::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.04em;height:.18em;background:var(--amarelo);z-index:-1;transform-origin:left}
.sec{padding-block:clamp(72px,8cqi,116px)}
.sec-head{display:flex;flex-direction:column;gap:16px;max-width:780px}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:4px;font:600 16px/1 var(--sans);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform 160ms var(--ease-out),background-color .2s,color .2s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex-shrink:0;transition:transform .3s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.ma .btn-az{background:var(--azul);color:#fff}
.ma .btn-az:hover{box-shadow:0 0 0 4px rgba(10,133,199,.22)}
.ma .btn-line{background:transparent;color:var(--azul);box-shadow:inset 0 0 0 2px var(--azul)}
.ma .btn-line:hover{background:var(--azul-c)}

/* Topo */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--linha)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.logo{display:block;width:118px;flex-shrink:0}
.logo img{display:block;width:100%;height:auto}
.top nav{display:flex;align-items:center;gap:26px}
.top nav a{text-decoration:none;font:500 15px var(--sans);position:relative;padding:6px 0;white-space:nowrap}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--azul);transform:scaleX(0);transform-origin:right;transition:transform 300ms var(--ease-out)}
.top nav a:hover::after{transform:scaleX(1);transform-origin:left}
.top-r{display:flex;align-items:center;gap:18px}
.ma .pt{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:600 14px var(--sans);text-decoration:none;color:var(--suave)}
.ma .pt:hover{color:var(--azul)}
.pt svg{width:17px;height:17px}
.top .btn{min-height:44px;padding:0 18px;font-size:15px}
@container page (max-width:1060px){.top nav{display:none}}
@container page (max-width:520px){.pt{display:none}.top .wrap{height:64px}.logo{width:98px}.top .btn{padding:0 14px}}

/* Hero */
.hero{padding-block:clamp(44px,5.5cqi,80px) clamp(52px,6cqi,88px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,5cqi,72px);align-items:center}
.hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.hero h1{font-weight:700;font-size:clamp(40px,5.1cqi,74px);line-height:1.03;letter-spacing:-.03em;max-width:13em}
.hero .lead{font-size:clamp(18px,1.5cqi,21px);line-height:1.55;max-width:32em}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.live{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 14px 8px 12px;border-radius:999px;background:var(--azul-cc);border:1px solid var(--linha-az);font:500 14px/1.3 var(--sans);color:var(--azul);font-variant-numeric:tabular-nums}
.live b{color:var(--tinta)}
.pulse{position:relative;width:9px;height:9px;border-radius:50%;background:var(--azul);flex-shrink:0}
.pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--azul);opacity:0;animation:pulse 2s var(--ease-out) infinite}
@keyframes pulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.hero-card{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.6cqi,36px);border-radius:8px;background:var(--azul-cc);border:1px solid var(--linha-az)}
.hero-card svg{display:block;width:100%;height:auto;overflow:visible}
.hero-card .cap{font:600 clamp(19px,1.7cqi,23px)/1.3 var(--display);letter-spacing:-.01em;color:var(--tinta)}
.hero-card .langs{font:600 12.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
@container page (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-card{max-width:540px}}

.a-hello .ring{fill:none;stroke:var(--azul);stroke-width:3;stroke-linejoin:round}
.a-hello .fillw{fill:#fff}
.a-hello .words text{font:700 28px var(--display);fill:var(--tinta);text-anchor:middle;letter-spacing:-.01em;opacity:0;transform-box:fill-box;transform-origin:center}
.a-hello .words text:first-child{opacity:1}
.a-hello .link{fill:none;stroke:var(--azul);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 9;animation:flow 1.2s linear infinite}
.a-hello .big{fill:var(--azul);transform-box:fill-box;transform-origin:center;animation:beat 2.4s var(--ease-out) infinite}
.a-hello .mark{fill:var(--amarelo)}
.a-hello .ola{font:800 62px var(--display);fill:#fff;text-anchor:middle;letter-spacing:-.03em}
@keyframes flow{to{stroke-dashoffset:-22}}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.035)}}
@keyframes word{0%{opacity:0;transform:translateY(10px)}4%,17%{opacity:1;transform:none}21%,100%{opacity:0;transform:translateY(-10px)}}
@media (prefers-reduced-motion:no-preference){
  .a-hello .words text{animation:word 12s var(--ease-out) infinite both}
  .a-hello .words text:nth-child(2){animation-delay:2.4s}
  .a-hello .words text:nth-child(3){animation-delay:4.8s}
  .a-hello .words text:nth-child(4){animation-delay:7.2s}
  .a-hello .words text:nth-child(5){animation-delay:9.6s}
}

.grad{height:10px;background:var(--grad);background-size:160% 100%;border-top:3px solid #3577ba;animation:grad 9s ease-in-out infinite alternate}
@keyframes grad{to{background-position:100% 0}}

/* Faixa em movimento */
.band{overflow:hidden;padding:28px 0;border-bottom:1px solid var(--linha)}
.track{display:flex;width:max-content;animation:run 48s linear infinite}
.seq{display:flex;align-items:center;gap:40px;padding-right:40px}
.seq span{font:700 clamp(30px,4.6cqi,66px)/1 var(--display);letter-spacing:-.025em;white-space:nowrap;color:var(--azul)}
.seq .ol{color:transparent;-webkit-text-stroke:1.5px var(--azul)}
.seq svg{width:clamp(22px,2.5cqi,36px);height:auto;flex-shrink:0}
@keyframes run{to{transform:translateX(-50%)}}
.band:hover .track{animation-play-state:paused}

/* Números */
.num{position:relative;padding-top:32px}
.num::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:3px;background:var(--grad);background-size:300% 100%;transform-origin:left}
.num:nth-child(2)::before{background-position:50% 0}
.num:nth-child(3)::before{background-position:100% 0}
.num strong{display:block;font:800 clamp(72px,8.4cqi,124px)/.86 var(--display);letter-spacing:-.05em;color:var(--azul);font-variant-numeric:tabular-nums;margin-left:-.04em}
.num strong small{font-size:.5em;letter-spacing:-.02em;margin-left:.04em}
.num p{margin-top:22px;font:600 20px/1.35 var(--sans);max-width:16em}
.num .src{display:block;margin-top:10px;color:var(--suave);font-size:14.5px;line-height:1.5;max-width:24em}

/* Oportunidade */
.opp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5cqi,56px);margin-top:64px;align-items:stretch}
.quote{position:relative;overflow:hidden;isolation:isolate;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:300px;padding:clamp(24px,3cqi,40px);border-radius:8px;background:var(--azul);color:#fff}
.quote .over{color:#fff}
.quote blockquote{margin:0;font:700 clamp(24px,2.3cqi,32px)/1.2 var(--display);letter-spacing:-.015em}
.quote cite{font:600 16px var(--sans);font-style:normal;color:#fff}
.quote svg{position:absolute;right:-48px;bottom:-56px;width:220px;height:220px;z-index:-1}
@container page (max-width:900px){.opp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quote{grid-column:1/-1;min-height:0}}
@container page (max-width:560px){.opp-grid{grid-template-columns:1fr;gap:44px}}

/* Serviços */
.svc{background:var(--azul-cc)}
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.card{display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:8px;background:#fff;border:1px solid var(--linha-az);transition:transform .35s var(--ease-out),border-color .25s,box-shadow .35s var(--ease-out)}
.card:hover{transform:translateY(-4px);border-color:var(--azul);box-shadow:0 24px 40px -30px rgba(10,133,199,.55)}
.card-top{display:flex;justify-content:space-between;align-items:center}
.ico{width:52px;height:52px;border-radius:8px;background:var(--azul-c);color:var(--azul);display:grid;place-items:center;transition:background-color .25s,color .25s}
.card:hover .ico{background:var(--azul);color:#fff}
.ico svg{width:26px;height:26px}
.card .n{font:600 13px var(--sans);letter-spacing:.12em;color:var(--apagada)}
.card h3{margin-top:6px;font-weight:600;font-size:22px;line-height:1.3}
.card p{color:var(--suave);font-size:16px;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.chips span{font:600 13px/1.2 var(--sans);padding:7px 11px;border-radius:999px;background:var(--azul-cc);border:1px solid var(--linha-az);color:var(--azul)}
.svc-foot{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.svc-foot p{font:600 clamp(20px,1.8cqi,24px)/1.3 var(--display);letter-spacing:-.01em}
@container page (max-width:1000px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container page (max-width:640px){.svc-grid{grid-template-columns:1fr}.card{padding:24px}}

/* Cases */
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:56px}
.case{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,3.4cqi,48px);border-radius:8px;background:var(--azul-cc);border:1px solid var(--linha-az);transition:transform .35s var(--ease-out),border-color .25s}
.case:hover{transform:translateY(-4px);border-color:var(--azul)}
.case h3{font:800 clamp(42px,4.6cqi,64px)/1 var(--display);letter-spacing:-.03em;color:var(--azul)}
.case p{font-size:18px;line-height:1.6;color:var(--suave);max-width:30em}
.case .chips{margin-top:8px}
.ma .case .over{font-size:12.5px;line-height:1.3;color:var(--azul)}
.case .chips span{background:#fff}
.ma .work-more{margin-top:28px;color:var(--suave)}
.work-more a{color:var(--azul);font-weight:600}
@container page (max-width:860px){.work-grid{grid-template-columns:1fr}}

/* Por que a Mark */
.why{background:var(--azul-cc)}
.why-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5cqi,80px);align-items:center}
.points{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px}
.points li{display:flex;gap:14px;align-items:flex-start;font-size:17px;line-height:1.5}
.points svg{flex-shrink:0;width:26px;height:26px;padding:4px;border-radius:50%;background:var(--azul);color:#fff}
.bridge{width:100%;max-width:460px;justify-self:center}
.bridge svg{display:block;width:100%;height:auto;overflow:visible}
.why-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5cqi,56px);margin-top:80px}
.a-bridge .base{fill:none;stroke:var(--linha-az);stroke-width:3}
.a-bridge .flow{fill:none;stroke:var(--azul);stroke-width:3;stroke-linecap:round;stroke-dasharray:10 14;animation:flow2 1.6s linear infinite}
.a-bridge .flow.back{stroke:var(--roxo);animation-direction:reverse}
.a-bridge .e1 circle{fill:#fff;stroke:var(--azul);stroke-width:3}
.a-bridge .e1 text{fill:var(--azul)}
.a-bridge .e2 circle{fill:var(--azul)}
.a-bridge .e2 text{fill:#fff}
.a-bridge text{font:800 30px var(--display);text-anchor:middle}
.a-bridge .cap{font:600 13px var(--sans);fill:var(--suave);letter-spacing:.12em}
@keyframes flow2{to{stroke-dashoffset:-24}}
@container page (max-width:900px){.why-grid{grid-template-columns:1fr}.bridge{justify-self:start;max-width:380px}}
@container page (max-width:700px){.why-nums{grid-template-columns:1fr;gap:44px;margin-top:56px}}

/* Como funciona */
.how-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6cqi,96px);align-items:start}
.how-side{position:sticky;top:120px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.steps{display:grid;gap:20px;list-style:none;margin:0;padding:0}
.step{display:grid;grid-template-columns:minmax(0,1fr) 172px;gap:24px;align-items:center;padding:28px;border:1px solid var(--linha);border-radius:8px;background:#fff}
.step .k{font:800 15px var(--display);letter-spacing:.04em;color:var(--azul)}
.step h3{margin-top:8px;font-weight:600;font-size:24px;line-height:1.25}
.step p{margin-top:10px;color:var(--suave)}
.pic{aspect-ratio:4/3;border-radius:8px;display:grid;place-items:center;overflow:hidden;background:var(--azul-cc)}
.pic svg{display:block;width:100%;height:100%}
.step:nth-child(2) .pic{background:var(--sup-2)}
.step:nth-child(3) .pic{background:var(--roxo-c)}
@container page (max-width:900px){.how-grid{grid-template-columns:1fr}.how-side{position:static}}
@container page (max-width:560px){.step{grid-template-columns:1fr;padding:24px}.pic{max-width:240px}}

.a-study rect{fill:#c9dff0}
.a-study .lens circle{fill:rgba(255,255,255,.6);stroke:var(--azul);stroke-width:5}
.a-study .lens path{fill:none;stroke:var(--azul);stroke-width:6;stroke-linecap:round}
.a-study .lens{animation:sweep 4s var(--ease-io) infinite}
@keyframes sweep{0%,100%{transform:translate(-14px,-10px)}35%{transform:translate(40px,0)}65%{transform:translate(4px,22px)}}
.a-plan .road{fill:none;stroke:var(--azul);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;animation:road 5s var(--ease-io) infinite}
.a-plan .ms{fill:var(--azul);stroke:#fff;stroke-width:3}
.a-plan .flag{fill:var(--roxo);transform-box:fill-box;transform-origin:bottom left;animation:flag 5s var(--ease-out) infinite}
.a-plan .pole{stroke:var(--suave);stroke-width:2.5;stroke-linecap:round}
@keyframes road{0%{stroke-dashoffset:100}55%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
@keyframes flag{0%,50%{transform:scale(0)}60%{transform:scale(1.15)}66%,90%{transform:scale(1)}100%{transform:scale(0)}}
.a-run rect{fill:#fff;stroke:#d8c3e2;stroke-width:1.5;animation:cell 6s var(--ease-out) infinite both}
.a-run rect:nth-of-type(2){animation-delay:.2s}
.a-run rect:nth-of-type(3){animation-delay:.4s}
.a-run rect:nth-of-type(4){animation-delay:.6s}
.a-run rect:nth-of-type(5){animation-delay:.8s}
.a-run rect:nth-of-type(6){animation-delay:1s}
.a-run rect:nth-of-type(7){animation-delay:1.2s}
.a-run rect:nth-of-type(8){animation-delay:1.4s}
.a-run rect:nth-of-type(9){animation-delay:1.6s}
.a-run rect:nth-of-type(10){animation-delay:1.8s}
.a-run rect:nth-of-type(11){animation-delay:2s}
.a-run rect:nth-of-type(12){animation-delay:2.2s}
.a-run .ok{fill:var(--roxo);transform-box:fill-box;transform-origin:center;animation:okpop 6s var(--ease-out) infinite}
.a-run .tick{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
@keyframes cell{0%,5%{fill:#fff}15%,88%{fill:var(--roxo)}100%{fill:#fff}}
@keyframes okpop{0%,48%{transform:scale(0)}56%{transform:scale(1.2)}62%,88%{transform:scale(1)}100%{transform:scale(0)}}

/* FAQ */
.faq{background:var(--azul-cc)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5cqi,80px);align-items:start}
.faq-side{display:flex;flex-direction:column;gap:16px}
.faq-side .lead a{color:var(--azul);font-weight:600}
.qa{border-top:1px solid var(--linha-az)}
.qa:last-child{border-bottom:1px solid var(--linha-az)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:600 19px/1.4 var(--display);color:var(--tinta)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--azul)}
.pm{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--linha-az);color:var(--azul);transition:transform .3s var(--ease-out),background-color .2s,color .2s}
.pm svg{width:16px;height:16px}
.qa[open] .pm{transform:rotate(45deg);background:var(--azul);border-color:var(--azul);color:#fff}
.ans{padding:0 52px 24px 0;color:var(--suave);font-size:17px;line-height:1.65;max-width:40em}
@container page (max-width:900px){.faq-grid{grid-template-columns:1fr}}
@container page (max-width:560px){.ans{padding-right:0}.qa summary{font-size:18px}}

/* Contato */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5cqi,80px);align-items:start}
.contact .h2{font-size:clamp(40px,5.2cqi,74px);color:var(--azul)}
.chat{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:36px;max-width:440px}
.bub{max-width:92%;padding:12px 16px;border-radius:18px 18px 18px 4px;background:#fff;border:1px solid var(--linha-az);color:var(--tinta);font:500 17px/1.45 var(--sans)}
.bub.y{background:var(--amarelo-s);border-color:var(--amarelo-s)}
.typing{display:inline-flex;gap:5px;padding:13px 15px;border-radius:18px 18px 18px 4px;background:#fff;border:1px solid var(--linha-az)}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--azul);animation:hop 1s var(--ease-io) infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes hop{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.direct{margin-top:36px;display:grid;gap:18px}
.direct div{display:grid;gap:2px}
.direct span{font-size:15px;color:var(--suave)}
.direct a{font:600 20px/1.3 var(--sans);color:var(--tinta);text-decoration:none;overflow-wrap:anywhere}
.direct a:hover{color:var(--azul);text-decoration:underline}
.form{position:relative;display:grid;gap:18px;padding:clamp(22px,3cqi,40px);border-radius:8px;background:#fff;border:1px solid var(--linha-az)}
.form h3{font-weight:600;font-size:24px;line-height:1.25}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fld{display:grid;gap:8px}
.fld label,.legend{font:600 14px/1.3 var(--sans);color:var(--tinta)}
.fld label small{font-weight:500;color:var(--suave)}
.fld input,.fld textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:4px;border:1.5px solid var(--campo);background:#fff;color:var(--tinta);font:400 16px/1.4 var(--sans);transition:border-color .2s,box-shadow .2s}
.fld textarea{min-height:116px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(10,133,199,.2)}
.stage{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.stage legend{padding:0;margin-bottom:10px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;display:inline-flex}
.pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pill span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--campo);font:500 15px/1.2 var(--sans);color:var(--tinta);transition:background-color .2s,border-color .2s,color .2s}
.pill:hover span{border-color:var(--azul)}
.pill input:checked+span{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:600}
.pill input:focus-visible+span{outline:2px solid var(--azul);outline-offset:2px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--suave)}
.consent input{flex-shrink:0;width:20px;height:20px;margin:1px 0 0;accent-color:var(--azul)}
.consent a{color:var(--azul)}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.send{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px}
.send small{font-size:14px;color:var(--suave)}
.done{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:clamp(28px,4cqi,48px);border-radius:8px;background:#fff;border:1px solid var(--linha-az)}
.done .ok{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--azul);color:#fff}
.done .ok svg{width:26px;height:26px}
.done h3{font-weight:700;font-size:30px;line-height:1.15;letter-spacing:-.01em}
.done p{color:var(--suave);max-width:30em}
@container page (max-width:900px){.contact-grid{grid-template-columns:1fr}}
@container page (max-width:560px){.row2{grid-template-columns:1fr}.send .btn{width:100%}}

/* Rodapé */
.foot{background:var(--azul);color:#fff}
.foot-body{padding:64px 0 calc(40px + env(safe-area-inset-bottom,0px))}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
.foot-brand img{display:block;width:150px;height:auto;margin-bottom:20px}
.foot-brand p{font-size:15px;line-height:1.6;max-width:30em}
.foot h4{margin:0 0 14px;font:600 12.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px}
.foot address{font-style:normal;font-size:15px;line-height:1.6}
.ma .foot a{text-decoration:none;overflow-wrap:anywhere}
.ma .foot a:hover{text-decoration:underline}
.ma .foot :focus-visible{outline-color:var(--amarelo)}
.social{display:flex;gap:10px;margin-top:22px}
.ma .social a{width:44px;height:44px;border-radius:4px;display:grid;place-items:center;background:rgba(255,255,255,.14);transition:background-color .2s}
.ma .social a:hover{background:rgba(255,255,255,.28);text-decoration:none}
.social svg{width:20px;height:20px}
.ma .pt-foot{display:inline-flex;margin-top:14px;font-size:15px;font-weight:600}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.3);font-size:14px}
.foot-bar div{display:flex;flex-wrap:wrap;gap:8px 20px}
@container page (max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
@container page (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* Entradas animadas */
@media (prefers-reduced-motion:no-preference){
  .hero-text .in-1{animation:appear .8s var(--ease-out) .1s both}
  .hero-text .in-2{animation:appear .8s var(--ease-out) .25s both}
  .hero-text .in-3{animation:appear .8s var(--ease-out) .4s both}
  .hero-text .in-4{animation:appear .8s var(--ease-out) .55s both}
  .hero-card{animation:appear .9s var(--ease-out) .35s both}
  .hero .hl::after{animation:draw .9s var(--ease-out) .8s both}
}
@keyframes appear{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
    .num::before{animation:draw linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
    .sec .hl::after{animation:draw linear both;animation-timeline:view();animation-range:entry 40% cover 50%}
  }
}
@keyframes reveal{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .ma *,.ma *::before,.ma *::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
