/* Norte Estúdio · modelo de site para agência (marca, web e marketing).
   Mundo visual: azul-marinho de tinta, amarelo de marcador e uma tipografia grande e direta. */
:root{
  --navy:#0B1F3A; --navy-2:#13294A; --yellow:#FFD23F; --paper:#F4F6F8; --white:#FFFFFF; --ink:#0B1F3A; --muted:#4A5A70; --line:#D3DAE3; --blue:#4C7BD1;
  --on-navy:#F4F6F8; --muted-navy:#B4C0D2; --error:#B3261E; --error-navy:#FFB4A9;
  --display:"Anybody",system-ui,sans-serif; --sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1160px; --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--yellow);color:var(--navy)}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:3px}
.navy :focus-visible,.hero :focus-visible,.band :focus-visible,.contact :focus-visible{outline-color:var(--yellow)}
.wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto}
.muted{color:var(--muted)}.small{font-size:14.5px}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:var(--navy);padding:10px 14px;z-index:100}
.skip:focus{left:12px}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.8rem,7.2vw,5.6rem)}
h2{font-size:clamp(2rem,4.4vw,3.2rem)}
h3{font-size:1.35rem;letter-spacing:-.01em}
.lead{font-size:1.2rem;line-height:1.55;max-width:46ch;margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 26px;border:2px solid var(--navy);background:var(--navy);color:var(--on-navy);font:700 16px/1 var(--sans);text-decoration:none;border-radius:6px;cursor:pointer;transition:transform .2s var(--ease),background .2s,color .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 -4px var(--yellow)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-yellow{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.btn-yellow:hover{box-shadow:0 8px 0 -4px #fff}
.btn-outline{background:transparent;border-color:currentColor;color:var(--on-navy)}
.btn-sm{min-height:42px;padding:8px 18px;font-size:15px;background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.demo-banner{background:var(--yellow);color:var(--navy);text-align:center;font:600 14px/1.4 var(--sans);padding:8px 16px}

.top{position:sticky;top:0;z-index:40;background:var(--navy);color:var(--on-navy)}
.top-in{display:flex;align-items:center;gap:26px;min-height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;font:800 1.2rem/1 var(--display);letter-spacing:-.01em;text-decoration:none;margin-right:auto}
.logo-mark{width:26px;height:26px;background:var(--yellow);clip-path:polygon(50% 0,100% 100%,78% 100%,50% 36%,22% 100%,0 100%);flex:none}
.nav{display:flex;gap:26px}
.nav a{font-weight:500;font-size:15px;text-decoration:none;color:var(--muted-navy);padding:6px 0;background:linear-gradient(var(--yellow),var(--yellow)) 0 100%/0 2px no-repeat;transition:background-size .25s var(--ease),color .2s}
.nav a:hover{color:#fff;background-size:100% 2px}

/* Entrada */
.hero{background:var(--navy);color:var(--on-navy)}
.hero-in{padding-block:clamp(56px,9vw,120px) clamp(40px,6vw,72px)}
.hero h1{max-width:15ch;animation:rise .8s var(--ease) both}
.mark{background:linear-gradient(var(--yellow),var(--yellow)) 0 92%/100% .14em no-repeat;animation:draw .9s .5s var(--ease) both}
@keyframes draw{from{background-size:0 .14em}to{background-size:100% .14em}}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:28px;margin-top:clamp(32px,5vw,56px);animation:rise .8s .1s var(--ease) both}
.hero .lead{color:var(--muted-navy)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.ticker{background:var(--yellow);color:var(--navy);overflow:hidden;border-block:2px solid var(--navy)}
.ticker-track{display:flex;width:max-content;animation:tick 36s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{font:800 1.25rem/1 var(--display);padding:18px 0;white-space:nowrap}
.ticker span:after{content:"";display:inline-block;width:12px;height:12px;background:var(--navy);margin:0 28px;transform:rotate(45deg)}
@keyframes tick{to{transform:translateX(-50%)}}

.section{padding-block:clamp(60px,8vw,108px);border-top:1px solid var(--line)}
.hero+.section{border-top:0}
.section>h2,.band>h2{margin-bottom:36px}

/* Serviços: lista à esquerda, detalhe à direita */
.services{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.svc-list{display:flex;flex-direction:column;border-top:2px solid var(--navy)}
.svc{appearance:none;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;font:800 clamp(1.3rem,2.4vw,1.8rem)/1.1 var(--display);letter-spacing:-.01em;color:var(--muted);padding:22px 0 22px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .2s,padding-left .3s var(--ease)}
.svc:hover{color:var(--navy)}
.svc[aria-selected="true"]{color:var(--navy);padding-left:18px;box-shadow:inset 6px 0 0 var(--yellow)}
.svc[aria-selected="true"]:after{content:"→";font-family:var(--sans)}
.svc-panel{background:var(--white);border-radius:10px;padding:36px;display:flex;flex-direction:column;gap:20px;animation:rise .4s var(--ease)}
.svc-panel p{margin:0;font-size:1.15rem}
.svc-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.svc-panel li{display:flex;gap:12px;align-items:baseline;font-weight:500}
.svc-panel li:before{content:"";width:10px;height:10px;background:var(--yellow);flex:none;transform:translateY(1px) rotate(45deg);box-shadow:0 0 0 2px var(--navy)}
.svc-panel .time{align-self:flex-start;background:var(--navy);color:var(--on-navy);font-weight:600;font-size:14.5px;padding:7px 12px;border-radius:4px}

/* Trabalho (faixa escura) */
.band{background:var(--navy);color:var(--on-navy);box-shadow:0 0 0 100vmax var(--navy);clip-path:inset(0 -100vmax);padding-block:clamp(60px,8vw,108px)}
.cases{display:flex;flex-direction:column;gap:clamp(48px,7vw,88px)}
.case{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.case:nth-child(even) .case-art{order:2}
.case-art{border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--navy-2)}
.case-art svg{display:block;width:100%;height:100%}
.case-type{margin:0 0 8px;color:var(--muted-navy);font-size:14.5px}
.case h3{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:18px}
.case dl{margin:0;display:grid;gap:14px}
.case dt{font-weight:700;color:var(--yellow);font-size:14px}
.case dd{margin:2px 0 0;color:var(--on-navy)}

/* Método */
.method{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:m;border-top:2px solid var(--navy)}
.method li{counter-increment:m;padding:24px 24px 8px 0;display:flex;flex-direction:column;gap:10px;border-right:1px solid var(--line)}
.method li+li{padding-left:24px}.method li:last-child{border-right:0}
.method li:before{content:counter(m);font:800 3.4rem/1 var(--display);color:var(--navy);box-shadow:inset 0 -.28em 0 var(--yellow);align-self:flex-start;padding-inline:2px}
.method p{margin:0;color:var(--muted);font-size:15.5px}

/* Pacotes */
.plans-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 28px;margin-bottom:28px}
.plans-head h2{margin:0}.plans-head p{margin:0}
.table-wrap{overflow-x:auto}
.plans{border-collapse:collapse;width:100%;min-width:620px;background:var(--white);border-radius:10px;overflow:hidden}
.plans th,.plans td{padding:16px 20px;border-bottom:1px solid var(--line);text-align:center}
.plans thead th{padding-top:24px;vertical-align:top;font:800 1.3rem/1.1 var(--display)}
.plans thead small{display:block;font:500 14px/1.4 var(--sans);color:var(--muted);margin-top:8px}
.plans th:first-child,.plans td:first-child{text-align:left;font-weight:600}
.plans .hl{background:#FFF7D6}
.plans thead .hl{box-shadow:inset 0 6px 0 var(--yellow)}
.yes,.no{display:inline-block;width:22px;height:22px;position:relative}
.yes:before{content:"";position:absolute;left:7px;top:2px;width:7px;height:13px;border:solid var(--navy);border-width:0 3px 3px 0;transform:rotate(45deg)}
.no:before{content:"";position:absolute;left:5px;top:10px;width:12px;height:2px;background:#8C99AB}

.about-body{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.about h2{max-width:20ch;margin-bottom:28px}
.about h3{margin-bottom:12px}
.about ul{list-style:none;margin:0;padding:0}
.about li{padding:10px 0;border-bottom:1px solid var(--line);font-weight:600}
.about .small{margin:10px 0 0}

/* Contacto */
.contact{background:var(--navy);color:var(--on-navy);padding-block:clamp(60px,8vw,108px)}
.contact-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,72px);align-items:start}
.contact .lead{color:var(--muted-navy);margin-top:18px}
.direct{margin:24px 0 0;display:flex;flex-direction:column;gap:4px;font-weight:600}
.direct a{text-underline-offset:4px}
form{display:flex;flex-direction:column;gap:16px;background:var(--navy-2);padding:28px;border-radius:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14.5px}
input,select,textarea{font:400 16.5px/1.3 var(--sans);color:var(--navy);background:#fff;border:2px solid transparent;border-radius:6px;padding:12px 14px;min-height:48px;width:100%}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--yellow);outline-offset:1px}
[aria-invalid="true"]{border-color:var(--error)!important;background:#FFF1EE}
.check{flex-direction:row;align-items:flex-start;gap:12px;font-weight:400;font-size:14.5px;line-height:1.45;color:var(--muted-navy)}
.check input{width:22px;height:22px;min-height:0;flex:none;margin-top:1px;accent-color:var(--yellow)}
.error{margin:0;color:var(--error-navy);font-weight:600;font-size:15px}
.sent{border:2px solid var(--yellow);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:12px;animation:rise .4s var(--ease)}
.sent p{margin:0}.sent-title{font:800 1.4rem/1 var(--display);color:var(--yellow)}

.foot{background:var(--navy);color:var(--muted-navy);border-top:1px solid #23406B;padding:30px 0 40px;font-size:14.5px}
.foot-in{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline}
.logo-text{font:800 1.1rem/1 var(--display);color:var(--on-navy)}

@media (max-width:960px){
  .nav{display:none}
  .services,.about-body,.contact-in{grid-template-columns:1fr;gap:36px}
  .case{grid-template-columns:1fr}.case:nth-child(even) .case-art{order:0}
  .method{grid-template-columns:1fr 1fr}
  .method li:nth-child(2){border-right:0}
  .method li:nth-child(3){padding-left:0}
}
@media (max-width:560px){
  body{font-size:16px}
  .two{grid-template-columns:1fr}
  form{padding:20px}
  .svc-panel{padding:24px 20px}
  .method{grid-template-columns:1fr}
  .method li{border-right:0;padding:20px 0;border-bottom:1px solid var(--line)}
  .method li+li{padding-left:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
}