/* Unistaff: identidade existente, composição aprovada em design/mockup-home-v1.png. */
:root{
  --blue:#6888a4;
  --blue-dark:#426783;
  --ink:#172c3b;
  --text:#51616e;
  --muted:#eef4f8;
  --line:#d9e3ea;
  --white:#fff;
  --green:#087e36;
  --container:1180px}

*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:105px}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  font-size:16px;
  line-height:1.65;
  background:#fff}
h1,h2,h3,p{
  margin:0}
h1,h2,h3{
  line-height:1.16;
  letter-spacing:-.035em}
h1{
  font-size:clamp(2.2rem,4.15vw,3.55rem);
  font-weight:700}
h2{
  font-size:clamp(1.85rem,3vw,2.65rem);
  font-weight:700}
h3{
  font-size:1.28rem;
  letter-spacing:-.02em}
p{
  color:var(--text)}
a{
  color:var(--blue-dark);
  text-decoration:none}
a:hover{
  text-decoration:underline}
button,input,select,textarea{
  font:inherit}
button,a,input,summary{
  touch-action:manipulation}
button,summary{
  cursor:pointer}
img{
  display:block;
  max-width:100%;
  height:auto}
svg{
  width:24px;
  height:24px;
  flex-shrink:0}
button{
  border:0}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid #ac702b;
  outline-offset:4px}
.container{
  width:min(var(--container),calc(100% - 96px));
  margin-inline:auto}
.section{
  padding:88px 0}
.section-tint{
  background:var(--muted)}
.eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--blue-dark);
  font-size:.76rem;
  letter-spacing:.09em;
  font-weight:700;
  margin-bottom:20px}
.eyebrow:before{
  content:"";
  width:34px;
  height:2px;
  background:currentColor;
  flex-shrink:0}
.prose{
  margin-top:24px}
.prose p+p{
  margin-top:16px}
.prose ul{
  padding-left:22px;
  color:var(--text)}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:52px;
  padding:14px 25px;
  background:var(--blue-dark);
  color:var(--white);
  border-radius:4px;
  font-size:.91rem;
  font-weight:700;
  line-height:1.4;
  text-align:center;
  border:1px solid transparent;
  transition:background .15s,transform .15s}
.button:hover{
  background:#355671;
  text-decoration:none;
  transform:translateY(-1px)}
.button-outline{
  border-color:#ffffffab;
  background:transparent}
.button-outline:hover{
  background:#ffffff16}
.button-white{
  background:#fff;
  color:var(--ink)}
.button-white:hover{
  background:#eaf1f6}
.button-whatsapp{
  background:var(--green)}
.button-whatsapp:hover{
  background:#06662c}
.button-group{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:30px}
.button:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none}
.skip-link{
  position:absolute;
  top:-100px;
  left:15px;
  padding:14px;
  background:white;
  z-index:100}
.skip-link:focus{
  top:10px}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:#fffffff5;
  border-bottom:1px solid #e4eaee;
  backdrop-filter:blur(12px)}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:100px;
  gap:40px}
.brand{
  flex-shrink:0}
.brand img{
  width:246px}
.site-header nav{
  display:flex;
  align-items:center;
  gap:14px}
.site-header nav>a,.login-dropdown>summary{
  font-size:1rem;
  font-weight:700;
  color:var(--ink);
  padding:18px 10px;
  white-space:nowrap;
  position:relative}
.site-header nav>a:hover,.login-dropdown>summary:hover{
  color:var(--blue-dark);
  background:var(--muted);
  text-decoration:none}
.site-header nav>a:focus-visible,.login-dropdown>summary:focus-visible{
  background:var(--muted)}
.site-header nav>a.active:after{
  content:"";
  position:absolute;
  bottom:3px;
  left:10px;
  right:10px;
  height:4px;
  background:var(--blue)}
.menu-toggle{
  display:none;
  background:none;
  font-size:.9rem;
  font-weight:700;
  color:var(--ink);
  min-height:44px}
.login-dropdown{
  position:relative}
.login-dropdown summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px}
.login-chevron{
  width:16px;
  height:16px;
  flex-shrink:0;
  transition:transform .18s ease}
.login-dropdown[open] .login-chevron{
  transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){
  .login-chevron{transition:none}}
.login-dropdown summary::-webkit-details-marker{
  display:none}
.login-form{
  position:absolute;
  right:0;
  top:100%;
  width:270px;
  background:white;
  padding:22px;
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 12px 35px #172c3b1c}
.login-form label{
  display:block;
  font-size:.85rem;
  margin-bottom:5px}
.login-form input:not([type=hidden]){
  width:100%;
  min-height:40px;
  border:1px solid var(--line);
  border-radius:3px;
  padding:7px 10px;
  margin-bottom:15px}
.login-form .button{
  min-height:42px;
  padding:9px 18px}
.login-notice{
  font-size:.77rem;
  margin-top:12px;
  line-height:1.5}

.hero{
  position:relative;
  min-height:600px;
  display:flex;
  align-items:center;
  isolation:isolate;
  background:#23323d;
  overflow:hidden}
.hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:-2}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#101e2aeb 0%,#172732c9 47%,#1c344538 100%);
  z-index:-1}
.hero-content{
  padding-block:82px}
.hero h1{
  max-width:740px;
  color:white;
  line-height:1.1}
.hero .eyebrow{
  color:#c3d7e5}
.hero-description{
  max-width:600px;
  font-size:1.23rem;
  color:#e6edf2;
  margin-top:22px;
  line-height:1.5}
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:74px}
.about-image{
  width:100%;
  height:350px;
  object-fit:cover;
  border-radius:5px}
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  margin-top:36px}
.service-card{
  background:white;
  padding:32px;
  border-radius:5px;
  border:1px solid #e6edf2}
.service-icon{
  color:var(--blue-dark);
  margin-bottom:22px}
.service-icon svg{
  width:50px;
  height:50px}
.service-card h3{
  margin-bottom:13px}
.service-card p{
  font-size:.96rem}
.service-card ul{
  padding-left:17px;
  margin:22px 0 0;
  color:var(--text);
  font-size:.84rem;
  line-height:1.6;
  border-top:1px solid var(--line);
  padding-top:18px}
.service-card li+li{
  margin-top:10px}
.projects{
  margin-top:30px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  padding:28px}
.projects-heading{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
  font-weight:700}
.projects-heading svg{width:42px;height:42px;color:var(--blue-dark)}
.projects .prose{
  margin:0;
  max-width:860px}
.team-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  margin-top:40px}
.team-grid article+article{
  padding-left:0}
.team-grid h3{
  margin-bottom:15px}
.team-image{width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px;margin-bottom:24px}
.team-grid p{
  font-size:.96rem}
.clients-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
  margin-top:35px}
.client-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:104px;
  background:white;
  border:1px solid #e4ebf0;
  padding:15px;
  border-radius:3px}
.client-logo img{
  max-height:80px;
  width:100%;
  object-fit:contain}
.cta-section{
  background:var(--blue-dark);
  padding:55px 0}
.cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:55px}
.cta-inner h2{
  font-size:2rem;
  color:white}
.cta-inner p{
  color:#e3edf5;
  max-width:710px;
  margin-top:14px}
.cta-inner>.button{
  flex-shrink:0}
.contact-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:65px;
  align-items:center}
.contact-list{
  list-style:none;
  margin:28px 0;
  padding:0;
  display:grid;
  gap:16px}
.contact-list li{
  display:flex;
  gap:15px;
  align-items:flex-start}
.contact-list svg{
  color:var(--blue-dark);
  margin-top:3px}
.contact-list a{
  color:var(--ink);
  overflow-wrap:anywhere}
.map-preview img{
  width:100%;
  border-radius:4px;
  border:1px solid var(--line)}
.map-preview span{
  display:block;
  text-align:right;
  font-size:.85rem;
  margin-top:12px}
.site-footer{
  background:var(--muted);
  padding:33px 0}
.footer-inner{
  display:flex;
  gap:30px;
  align-items:center;
  justify-content:space-between}
.footer-inner img{
  width:210px}
.footer-inner p{
  font-size:.75rem}
.social-links{
  display:flex;
  gap:18px;
  font-size:.82rem}
.social-links a,.social-links .social-pending{display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;border-radius:4px}
.social-links a:hover{background:var(--line)}
.social-links .social-pending{opacity:.45}
.site-footer a:hover{
  color:var(--ink)}
dialog{
  width:min(1100px,calc(100% - 40px));
  padding:24px;
  border:0;
  border-radius:7px;
  color:var(--ink);
  box-shadow:0 15px 60px #0005}
dialog::backdrop{
  background:#132531c7}
.dialog-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:20px}
.dialog-header h2{
  font-size:1.3rem}
.dialog-close{
  background:var(--muted);
  border-radius:4px;
  font-size:1.8rem;
  width:44px;
  height:44px;
  color:var(--ink)}
dialog>img{
  width:100%}
dialog>p{
  margin-top:16px}

.page-intro{
  padding:52px 0 60px}
.back-link{
  font-size:.85rem;
  display:inline-block;
  margin-bottom:28px}
.page-intro h1{
  font-size:clamp(2.1rem,4vw,3.2rem)}
.page-intro p:last-child{
  margin-top:20px;
  max-width:700px;
  font-size:1.08rem}
.quote-section{
  padding-top:55px}
.quote-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:60px}
.form-intro{
  font-size:.85rem;
  margin-bottom:30px}
.form-group{
  margin:0 0 40px;
  padding:25px 0 0;
  border:0;
  border-top:1px solid var(--line);
  min-width:0}
.form-group>legend{
  padding-right:16px;
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:-.02em}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px}
.field label{
  display:block;
  font-size:.87rem;
  margin-bottom:9px;
  color:var(--ink);
  line-height:1.45}
.field input{
  width:100%;
  padding:12px 14px;
  min-height:48px;
  border:1px solid #b8c9d6;
  border-radius:4px;
  background:#fff;
  color:var(--ink);
  min-width:0}
.field input:focus{
  border-color:var(--blue-dark)}
.full-width{
  grid-column:1/-1}
.choice-field{
  margin:0;
  padding:0;
  border:0;
  min-width:0}
.choice-field legend{
  font-size:.87rem;
  margin-bottom:12px;
  padding:0}
.choices{
  display:flex;
  flex-wrap:wrap;
  gap:10px}
.choice{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:4px;
  padding:8px 13px;
  font-size:.84rem;
  cursor:pointer}
.choice:has(input:checked){
  background:var(--muted);
  border-color:var(--blue-dark)}
.choice input{
  accent-color:var(--blue-dark);
  width:17px;
  height:17px;
  flex-shrink:0}
.form-submit{
  border-top:1px solid var(--line);
  padding-top:28px;
  display:grid;
  justify-items:start;
  gap:22px}
.form-submit p{
  font-size:.83rem}
.quote-aside{
  position:sticky;
  top:135px;
  align-self:start;
  background:var(--muted);
  padding:25px;
  border-radius:4px}
.quote-aside h2{
  font-size:1.22rem;
  margin-bottom:14px}
.quote-aside p{
  font-size:.88rem;
  margin-bottom:20px}
.quote-aside>a{
  display:block;
  font-size:.84rem;
  margin-top:12px;
  overflow-wrap:anywhere}
.quote-aside>.button{
  display:flex;
  font-size:.8rem;
  padding:12px;
  margin-top:24px}
.error-page{
  min-height:45vh}
.error-page p:not(.eyebrow){
  margin-top:24px}
.error-page .button{
  margin-top:30px}

@media(min-width:1440px){
  .hero{
  min-height:660px}
}
@media(max-width:1100px){
  .container{
  width:calc(100% - 64px)}
.brand img{
  width:200px}
.header-inner{
  gap:25px;
  min-height:90px}
.site-header nav{
  gap:6px}
.site-header nav>a,.login-dropdown>summary{
  font-size:.92rem;
  padding-inline:7px}
.hero{
  min-height:560px}
.about-grid{
  gap:40px}
.service-card{
  padding:25px}
.clients-grid{
  grid-template-columns:repeat(4,1fr)}
.quote-layout{
  gap:35px;
  grid-template-columns:minmax(0,1fr) 235px}
.contact-grid{
  gap:40px}
}

@media(max-width:820px){
  html{
  scroll-padding-top:85px}
.container{
  width:calc(100% - 40px)}
.section{
  padding:58px 0}
.header-inner{
  min-height:78px;
  flex-wrap:wrap;
  gap:0}
.brand img{
  width:192px}
.menu-toggle{
  display:flex;
  align-items:center;
  gap:12px}
.site-header nav{
  display:none;
  width:100%;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:14px 0 20px}
.site-header nav.is-open{
  display:flex}
.site-header nav>a,.login-dropdown>summary{
  font-size:1.05rem;
  padding:12px 10px}
.site-header nav>a.active:after{
  display:block;
  width:34px;
  right:auto;
  bottom:4px}
.login-form{
  position:static;
  width:100%;
  margin-top:6px;
  box-shadow:none}
.hero{
  min-height:570px}
.hero-content{
  padding-block:65px}
.hero h1{
  max-width:650px}
.hero-description{
  font-size:1.12rem}
.hero:after{
  background:#10202bc9}
.about-grid{
  grid-template-columns:1fr;
  gap:30px}
.about-image{
  height:290px}
.service-grid{
  grid-template-columns:1fr;
  gap:18px;
  margin-top:28px}
.service-card{
  padding:28px}
.service-card ul{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 30px}
.service-card li+li{
  margin:0}
.team-grid{
  grid-template-columns:1fr;
  gap:25px;
  margin-top:30px}
.team-grid article+article{
  border-left:0;
  border-top:1px solid var(--line);
  padding:25px 0 0}
.clients-grid{
  grid-template-columns:repeat(4,1fr);
  gap:12px}
.client-logo{
  min-height:95px;
  padding:10px}
.cta-inner{
  flex-direction:column;
  align-items:flex-start;
  gap:25px}
.cta-inner h2{
  font-size:1.8rem}
.contact-grid{
  grid-template-columns:1fr;
  gap:35px}
.map-preview{
  max-width:600px}
.footer-inner{
  flex-wrap:wrap;
  gap:22px}
.footer-inner p{
  order:3;
  width:100%}
.quote-layout{
  grid-template-columns:1fr;
  gap:40px}
.quote-aside{
  position:static;
  max-width:440px}
.page-intro{
  padding:35px 0 45px}
}

@media(max-width:480px){
  .container{
  width:calc(100% - 36px)}
h1{
  font-size:2.2rem}
h2{
  font-size:1.9rem}
.hero{
  min-height:580px}
.hero .eyebrow{
  font-size:.65rem;
  gap:10px}
.hero h1{
  font-size:2.2rem}
.hero-description{
  font-size:1.05rem}
.button-group{
  gap:12px}
.button-group .button{
  width:100%}
.service-card ul{
  display:block}
.service-card li+li{
  margin-top:10px}
.clients-grid{
  grid-template-columns:repeat(3,1fr);
  gap:8px}
.client-logo{
  min-height:78px;
  padding:7px}
.contact-list{
  font-size:.94rem}
.form-grid{
  grid-template-columns:1fr;
  gap:20px}
.form-group{
  margin-bottom:32px}
.choices{
  flex-direction:column}
.choice{
  width:100%}
.footer-inner img{
  width:180px}
.social-links{
  gap:12px}
.footer-inner{
  gap:20px}
.social-links a{
  min-height:44px;
  display:flex;
  align-items:center}
.dialog-header h2{
  font-size:1.1rem}
}

@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
*{
  transition:none!important}
}