/* ---------- 0. fonte (Figtree variável, servida localmente) ---------- */
@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/figtree-latin.woff2') format('woff2');
  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:'Figtree';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* =====================================================================
   Sultech Soluções — folha de estilo única
   Direção: painel técnico. Preto do banner, azul elétrico, ciano da logo.
   Elemento assinatura: o corte diagonal ("blade") que vem da arte do banner.
   ===================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  /* cor */
  --ink:        #04060B;
  --ink-2:      #070B14;
  --panel:      #0A1220;
  --panel-2:    #101B2E;
  --navy:       #0E2350;
  --cyan:       #2FD4F2;
  --cyan-deep:  #17A9D8;
  --blue:       #1257F5;
  --banner-azul:#0A5AD4;  /* neon do banner */
  --banner-fundo:#0B2352; /* azul profundo do banner */
  --banner-azul-cl:#5B9CFF; /* azul do banner clareado, p/ fundo escuro */
  --amber:      #FBBC04;
  --wpp:        #25D366;

  --txt:        #E9F0F8;
  --txt-dim:    #93A6BE;
  --line:       rgba(120,170,220,.16);
  --line-hi:    rgba(120,190,235,.30);

  --paper:      #EFF3F8;
  --paper-2:    #FFFFFF;
  --ink-txt:    #0A1424;
  --ink-dim:    #56657C;
  --ink-line:   #DFE7F0;

  /* tipografia */
  --font-primary: 'Figtree','Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --fs-h1:   3rem;      /* 48 */
  --fs-h2:   2.5rem;    /* 40 */
  --fs-h3:   1.5rem;    /* 24 */
  --fs-h4:   1.1875rem; /* 19 — título de cartão */
  --fs-lg:   1.0625rem; /* 17 — lead/apoio */
  --fs-base: .9375rem;  /* 15 — corpo */
  --fs-sm:   .8125rem;  /* 13 */
  --fs-xs:   .75rem;    /* 12 */
  --fs-btn:  var(--fs-base);

  /* medidas */
  --hdr-h: 78px;
  --cut: 20px;                       /* profundidade do corte diagonal */
  --ease: cubic-bezier(.22,.61,.36,1);
}


/* escala responsiva */
@media (max-width:1200px){ :root{ --fs-h1:2.75rem; --fs-h2:2.25rem; } }
@media (max-width:1023px){ :root{ --fs-h1:2.5rem; --fs-h2:2rem; } }
@media (max-width:767px){
  :root{
    --fs-h1:2rem; --fs-h2:1.75rem;
    --fs-h3:1.25rem; --fs-h4:1.0625rem; --fs-lg:1rem;
  }
}
/* ---------- 2. reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:dark; }
body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font-family:var(--font-primary);
  font-size:var(--fs-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a,button{ -webkit-tap-highlight-color:rgba(47,212,242,.2); touch-action:manipulation; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure,blockquote{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:2px;
}
.sec--light :focus-visible{ outline-color:var(--blue); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--cyan); color:#04121C; padding:.7rem 1.1rem; font-weight:600; letter-spacing:0;
}
.skip:focus{ left:1rem; top:1rem; }

.wrap{ width:min(1240px, 100% - 3rem); margin-inline:auto; }

/* versoes curtas de titulo/lede: entram no lugar das longas no mobile
   (o display:none tira a variante que nao esta em uso tambem do leitor de tela) */
.tx--curta{ display:none; }

/* conteudo so para leitores de tela e buscadores */
.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
section[id], main[id]{ scroll-margin-top:calc(var(--hdr-h) + 14px); }

/* ---------- 3. peças de tipografia ---------- */
h1,h2,h3,h4{
  font-family:var(--font-primary);
  font-weight:700;
  line-height:1.2;
  text-wrap:balance;
}
/* ênfase se faz por peso, não por cor: 400 de entrada, 800 na palavra-chave */
h1,h2{ font-weight:400; color:rgba(233,240,248,.76); }
h1 em, h2 em{ font-style:normal; font-weight:800; color:#fff; }
.sec--light h1, .sec--light h2{ color:rgba(10,20,36,.72); }
.sec--light h1 em, .sec--light h2 em{ color:var(--ink-txt); }

.sec__lede{ color:var(--txt-dim); font-size:var(--fs-lg); line-height:1.6; max-width:60ch; }
.sec--light .sec__lede{ color:var(--ink-dim); }

/* ---------- 4. botões ---------- */
.btn{
  --cut:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:600; font-size:var(--fs-btn); letter-spacing:0; line-height:1.2;
  min-height:48px; padding:.92em 1.5em;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition:transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  text-align:center;
}
.btn svg{ width:1.2em; height:1.2em; flex:none; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primary{
  background:linear-gradient(102deg, var(--cyan) 0%, #1FB4E8 48%, var(--blue) 130%);
  color:#03121B;
  font-weight:700;
  box-shadow:0 12px 34px -12px rgba(47,212,242,.65);
}
.btn--primary:hover{ box-shadow:0 18px 40px -12px rgba(47,212,242,.8); }

/* contornado, para fundo claro */
.btn--ghost{
  color:var(--ink-txt); font-weight:700;
  background:var(--paper-2);
  box-shadow:inset 0 0 0 1px #7C93AE;
}
.btn--ghost:hover{ background:#F2F7FC; box-shadow:inset 0 0 0 1px var(--banner-azul); }

.btn--ink{
  background:var(--ink-txt); color:#fff;
}
.btn--ink:hover{ background:var(--navy); }

/* contornado, para fundo escuro */
.btn--linha{
  color:var(--txt); font-weight:700;
  box-shadow:inset 0 0 0 1px var(--line-hi);
}
.btn--linha:hover{ background:rgba(47,212,242,.1); box-shadow:inset 0 0 0 1px rgba(47,212,242,.5); }

.btn--head{
  min-height:42px; padding:.62em 1.15em; font-size:var(--fs-sm);
  color:var(--cyan);
  box-shadow:inset 0 0 0 1px rgba(47,212,242,.42);
  clip-path:none; border-radius:4px;
}
.btn--head:hover{ background:rgba(47,212,242,.12); }

/* ---------- 5. cabeçalho ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s;
}
.hdr.is-stuck{
  background:rgba(4,6,11,.88);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 var(--line), 0 18px 40px -30px #000;
}
.hdr__in{
  height:var(--hdr-h);
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.6rem);
}

.lockup{ display:flex; align-items:center; gap:.72rem; margin-right:auto; }
.lockup__mark{ width:38px; height:38px; flex:none; display:block; object-fit:contain; }
/* logo em arquivo unico: so entra no mobile (ver media 900px) */
.lockup__img{ display:none; width:auto; height:34px; flex:none; }
.lockup__txt{ display:flex; flex-direction:column; line-height:1; }
.lockup__name{
  font-size:1.34rem; letter-spacing:-.02em;
}
.lockup__name b{ font-weight:800; color:#fff; }
.lockup__name i{ font-style:normal; font-weight:600; color:var(--cyan); }
.lockup__sub{
  font-size:var(--fs-xs); font-weight:600; letter-spacing:0;
  color:var(--txt-dim); margin-top:.34rem;
}

.nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem); }
.nav > a{
  font-size:1.125rem; font-weight:600; letter-spacing:-.1px; color:var(--txt); position:relative; padding:.3rem 0;
}
.nav > a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--cyan); transition:right .3s var(--ease);
}
.nav > a:hover::after, .nav > a:focus-visible::after{ right:0; }

/* topo, rodape e fundo escuro pertencem so ao painel lateral do mobile */
.nav__top, .nav__foot, .navsc{ display:none; }
/* trava a rolagem da pagina enquanto o painel esta aberto */
body.nav-open{ overflow:hidden; }

.burger{ display:none; width:44px; height:44px; padding:11px 9px; }
.burger span{ display:block; height:2px; background:var(--txt); transition:transform .3s var(--ease), opacity .2s; }
.burger span+span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =====================================================================
   6. HERO
   ===================================================================== */
.hero{
  position:relative;
  min-height:calc(92svh - 60px);
  padding-top:var(--hdr-h);
  display:flex; flex-direction:column;
  isolation:isolate; z-index:1; overflow:hidden;
  background:var(--ink);
}

/* -- arte de fundo (fixa) -- */
.hero__bg{ position:absolute; inset:0; overflow:hidden; z-index:-1; }
.hero__art{
  /* --art-shift desloca a arte para a esquerda; a caixa é alargada do
     mesmo tanto para o cover continuar preenchendo o hero inteiro */
  --art-shift:clamp(48px, 7.5vw, 118px);
  position:absolute; top:0;
  left:calc(var(--art-shift) * -1);
  width:calc(100% + var(--art-shift)); max-width:none; height:100%;
  object-fit:cover; object-position:60% 42%;
}

/* véu de leitura */
.hero__scrim{
  position:absolute; inset:0; z-index:3;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(4,6,11,.55) 12%, transparent 34%),
    linear-gradient(96deg, rgba(4,6,11,.55) 0%, transparent 18%),
    linear-gradient(270deg, rgba(4,6,11,.45) 0%, transparent 16%);
}

/* -- corpo do hero -- */
.hero__body{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.78fr);
  min-height:clamp(420px,62svh,620px);
  column-gap:clamp(1rem,3vw,3rem);
  align-items:end;
  padding-top:clamp(1rem,2.6vh,2.2rem);
  padding-bottom:clamp(1.4rem,3.4vh,2.6rem);
}

.hero__copy{
  grid-column:1; grid-row:1;
  position:relative; z-index:2;
  align-self:center;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  padding-bottom:clamp(.5rem,1.6vh,1.4rem);
}

.slide{
  grid-area:1/1;
  transition:opacity .5s var(--ease), visibility .5s;
}
.slide:not(.is-on){ opacity:0; visibility:hidden; }
.slide h1,.slide .lede{
  opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.slide.is-on h1{ opacity:1; transform:none; transition-delay:.08s; }
.slide.is-on .lede{ opacity:1; transform:none; transition-delay:.18s; }

.slide h1{
  font-size:calc(var(--fs-h1) * 1.06);
  letter-spacing:-1px;
  line-height:1.12;
  margin-bottom:1.35rem;
  max-width:17ch;
}
.slide h1 em{ display:block; }
.slide .lede{
  color:#C2D2E4;
  font-size:calc(var(--fs-lg) * 1.1);
  line-height:1.65;
  max-width:54ch;
  text-wrap:pretty;
}
.slide .lede b{ color:#fff; font-weight:700; }

/* -- técnico -- */
.hero__person{
  /* a caixa da figura acompanha o recorte (880x1092 -> 0.806) */
  --person-h:min(76svh, 780px);
  /* fora da grade do .wrap: ancorado na borda direita da tela e assentado
     na base do hero, para o corte na cintura da foto sumir na virada de
     seção em vez de flutuar no meio do banner. */
  position:absolute; z-index:1;
  right:clamp(28px, 6.5vw, 150px);
  bottom:0;
  width:min(37vw, calc(var(--person-h) * .806));
}

.hero__person img{
  display:block; position:relative; z-index:1;
  width:100%; height:auto;
  filter:drop-shadow(-14px 14px 34px rgba(0,0,0,.7));
  animation:riseIn 1.1s var(--ease) both .15s;
}
@keyframes riseIn{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
/* =====================================================================
   6b. FAIXA DE NÚMEROS (logo abaixo do banner)
   ===================================================================== */
.strip{
  position:relative;
  background:linear-gradient(96deg, var(--navy) 0%, #113585 46%, var(--blue) 122%);
  border-top:1px solid rgba(47,212,242,.30);
  border-bottom:1px solid rgba(47,212,242,.30);
  overflow:hidden;
}
/* trama diagonal discreta — mesmo idioma do corte da marca */
.strip::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(47,212,242,.13) 0 1px, transparent 1px 15px);
  -webkit-mask-image:linear-gradient(90deg, transparent 52%, #000 100%);
          mask-image:linear-gradient(90deg, transparent 52%, #000 100%);
}

.strip__in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  margin-block:0;
  padding-block:clamp(1.5rem,3.2vw,2.35rem);
}
.strip__item{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  text-align:center;
  padding-inline:clamp(.4rem,2vw,1.5rem);
  border-left:1px solid rgba(190,225,250,.22);
}
.strip__item:first-child{ border-left:0; }

.strip__item dt{
  font-size:clamp(1.7rem,3.5vw,2.7rem);
  font-weight:800; line-height:1; letter-spacing:-1.2px;
  color:#fff;
}
.strip__item dt span{ color:var(--cyan); margin-left:.05em; }
/* itens textuais (sem número): mesmo peso, corpo menor para equilibrar a faixa */
.strip__item dt.strip__tx{
  font-size:clamp(1.05rem,1.9vw,1.45rem);
  letter-spacing:-.3px; line-height:1.15;
  text-wrap:balance;
  /* casa a altura da linha dos números para as legendas ficarem alinhadas */
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(1.7rem,3.5vw,2.7rem);
}
.strip__item dd{
  margin:0;
  font-size:var(--fs-sm); font-weight:500;
  color:#C6DAF0;
  text-wrap:balance;
}


/* =====================================================================
   7. SEÇÕES GENÉRICAS
   ===================================================================== */
.sec{ padding-block:clamp(4.5rem,9vw,8rem); }
#servicos{ padding-top:clamp(4.5rem,9vw,8rem); }
.sec--light{ background:var(--paper); color:var(--ink-txt); }
.sec--dark{ background:var(--ink-2); }

.sec__head{ margin-bottom:clamp(2.4rem,4.5vw,3.6rem); }
.sec__head h2{ font-size:var(--fs-h2); letter-spacing:-.8px; line-height:1.15; margin-bottom:1rem; max-width:18ch; }


/* titulo e lede das secoes de servicos, avaliacoes e metodo (portfolio):
   maiores e nas cores do banner */
#servicos .sec__head h2,
#avaliacoes .sec__head h2,
#metodo .sec__head h2{
  font-size:calc(var(--fs-h2) * 1.2); max-width:24ch; margin-bottom:1.15rem;
  color:var(--banner-fundo);
}
#servicos .sec__head h2 em,
#avaliacoes .sec__head h2 em,
#metodo .sec__head h2 em{ color:var(--banner-azul); }
#servicos .sec__lede,
#avaliacoes .sec__lede,
#metodo .sec__lede{ font-size:calc(var(--fs-lg) * 1.2); max-width:64ch; color:#4E6187; }

/* cabecalho das avaliacoes centralizado */
#avaliacoes .sec__head{ text-align:center; }
#avaliacoes .sec__head h2,
#avaliacoes .sec__lede{ margin-inline:auto; }
/* ---------- serviços ---------- */
.srv{
  display:grid; grid-template-columns:repeat(6,1fr);
  grid-auto-rows:1fr; /* todos os cards com a mesma altura */
  gap:clamp(1rem,1.6vw,1.4rem);
}
.srv__item{
  grid-column:span 2;
  position:relative;
  cursor:pointer;
  background:var(--paper-2);
  border:1px solid var(--ink-line);
  border-radius:4px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.srv__item:hover, .srv__item:focus-within{
  transform:translateY(-6px);
  border-color:#C9D8EB;
  box-shadow:0 18px 40px -18px rgba(11,35,82,.40);
}
.srv__item[hidden]{ display:none; }

/* botao que revela o ultimo card */
.srv__mais{ display:flex; justify-content:center; margin-top:clamp(1.6rem,3vw,2.4rem); }
.srv__vermais{ clip-path:none; }
.srv__vermais svg{
  width:1.15em; height:1.15em;
  transition:transform .3s var(--ease);
}
.srv__vermais[aria-expanded="true"] svg{ transform:rotate(180deg); }
.srv__img{
  aspect-ratio:16/10; overflow:hidden; position:relative;
  background:var(--paper-2);
}
.srv__img img{
  width:100%; height:100%; object-fit:cover; object-position:50% 32%;
  transition:transform .7s var(--ease);
}
/* veu escuro que entra no hover */
.srv__img::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(9,20,38,.52) 0%,rgba(9,20,38,.34) 100%);
  opacity:0; transition:opacity .4s var(--ease);
}
.srv__item:hover .srv__img img,
.srv__item:focus-within .srv__img img{ transform:scale(1.07); }
.srv__item:hover .srv__img::after,
.srv__item:focus-within .srv__img::after{ opacity:1; }
.srv__txt{ padding:1.5rem 1.5rem 1.7rem; display:flex; flex-direction:column; flex:1; }
.srv__txt h3{ font-size:var(--fs-h4); font-weight:700; letter-spacing:-.2px; margin-bottom:.6rem; }
.srv__txt p{ color:var(--ink-dim); font-size:var(--fs-base); }
.srv__more{
  align-self:flex-start;
  margin-top:auto; padding-top:1.15rem;
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:var(--fs-base); font-weight:700; letter-spacing:.1px;
  color:var(--navy); text-decoration:none;
}
.srv__arrow{ transition:transform .32s var(--ease); }
.srv__more:hover .srv__arrow{ transform:translateX(5px); }
.srv__more:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; border-radius:2px; }
/* o "Saiba mais" cobre o card inteiro: clicar em qualquer ponto abre a pagina do servico */
.srv__more::after{ content:""; position:absolute; inset:0; z-index:2; }
/* marca no canto inferior direito do card */
.srv__marca{
  position:absolute; pointer-events:none;
  right:1.5rem; bottom:1.7rem;
  display:flex; align-items:center; gap:.32rem;
  color:var(--ink-txt); opacity:.42;
}
.srv__marca-ic{ width:clamp(17px,1.5vw,21px); aspect-ratio:1; flex:none; }
.srv__marca-tx{ font-size:clamp(.72rem,.72vw,.82rem); line-height:1; letter-spacing:-.01em; }
.srv__marca-tx b{ font-weight:800; }
.srv__marca-tx i{ font-style:normal; font-weight:500; }

/* ---------- a empresa ---------- */
.empresa{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(2rem,5.5vw,5.5rem); align-items:stretch;
}
.empresa__fig{ position:relative; }
.empresa__fig::before{
  content:""; position:absolute; inset:-6% -18% -20% -18%;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(18,87,245,.26), transparent 72%);
  filter:blur(22px);
}
.empresa__fig img{
  position:relative; width:100%;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.6));
}
/* titulo e lede da empresa: mesma tipografia do titulo de servicos,
   nas versoes claras das cores do banner (fundo escuro) */
.empresa__txt h2{
  font-size:calc(var(--fs-h2) * 1.2); letter-spacing:-.8px; line-height:1.15;
  max-width:24ch; margin-bottom:1.15rem;
  color:#fff;
}
.empresa__txt h2 em{ color:var(--banner-azul-cl); }
.empresa__txt .sec__lede{ font-size:calc(var(--fs-lg) * 1.2); max-width:64ch; }
.pillars{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.7rem 2rem; margin-top:2.6rem; }
.pillars dt{
  font-weight:700; font-size:var(--fs-h4); letter-spacing:-.2px; color:#fff;
  padding-left:1.05rem; position:relative; margin-bottom:.4rem;
}
.pillars dt::before{
  content:""; position:absolute; left:0; top:.52em;
  width:7px; height:7px; background:var(--cyan); transform:rotate(45deg);
}
.pillars dd{ color:var(--txt-dim); font-size:var(--fs-base); padding-left:1.05rem; }
.empresa__btn{ margin-top:clamp(1.8rem,3vw,2.4rem); clip-path:none; border-radius:4px; }

/* ---------- avaliações ---------- */
.revs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.6vw,1.4rem); }
.rev{
  background:var(--paper-2);
  border:1px solid var(--ink-line);
  border-radius:4px;
  padding:1.6rem 1.6rem 1.4rem;
  display:flex; flex-direction:column;
}
.rev__stars{ color:var(--amber); letter-spacing:0; font-size:var(--fs-h4); margin-bottom:.85rem; }
.rev blockquote{ margin:0; color:var(--ink-txt); font-size:var(--fs-base); line-height:1.6; text-wrap:pretty; }
.rev__who{
  margin-top:auto; padding-top:1rem; border-top:1px solid var(--ink-line);
  font-weight:700; font-size:var(--fs-base); letter-spacing:-.2px;
}
.rev__who span{ font-weight:400; letter-spacing:0; color:var(--ink-dim); }

/* carrossel: 3 cards visíveis, avança de um em um (ativado via JS) */
.revs-box.is-carousel .revs-stage{
  display:flex; align-items:center;
  gap:clamp(.7rem,1.6vw,1.3rem);
}
.revs-box.is-carousel .revs-view{ flex:1 1 auto; min-width:0; overflow:hidden; }
.revs.is-carousel{
  --rev-gap:clamp(1rem,1.6vw,1.4rem);
  --rev-per:3;
  display:flex; flex-wrap:nowrap;
  gap:var(--rev-gap);
  transition:transform .55s var(--ease);
  will-change:transform;
}
.revs.is-carousel .rev{
  flex:0 0 calc((100% - (var(--rev-per) - 1) * var(--rev-gap)) / var(--rev-per));
}
@media (max-width:1023px){ .revs.is-carousel{ --rev-per:2; } }
@media (max-width:620px){
  .revs.is-carousel{ --rev-per:1; }
  .revs__arrow{ width:40px; height:40px; }
  .revs__arrow svg{ width:18px; height:18px; }
}

/* mobile: sem setas, o carrossel anda so no arrasto e de um card por vez
   (o snap nativo do navegador cuida da parada em cada card) */
@media (max-width:767px){
  .revs__arrow{ display:none; }
  .revs.is-carousel{ --rev-per:1; transform:none !important; transition:none; }
  .revs-box.is-carousel .revs-view{
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .revs-box.is-carousel .revs-view::-webkit-scrollbar{ display:none; }
  .revs.is-carousel .rev{ scroll-snap-align:center; scroll-snap-stop:always; }
}

/* setas nas laterais, fora da área dos cards */
.revs__arrow[hidden]{ display:none; }
.revs__arrow{
  flex:none;
  width:48px; height:48px;
  display:grid; place-items:center;
  background:var(--paper-2); color:var(--ink-txt);
  border:1px solid var(--ink-line); border-radius:999px;
  box-shadow:0 10px 26px -12px rgba(10,20,36,.45);
  cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.revs__arrow svg{ width:21px; height:21px; }
.revs__arrow:hover{
  background:var(--banner-fundo); border-color:var(--banner-fundo); color:#fff;
  box-shadow:0 14px 30px -12px rgba(11,35,82,.6);
}

.revs__dots[hidden]{ display:none; }
.revs__dots{ display:flex; align-items:center; justify-content:center; gap:.55rem; margin-top:1.6rem; }
.revs__dot{
  width:9px; height:9px; padding:0; flex:none;
  background:var(--ink-line); border:0; border-radius:999px;
  cursor:pointer; transition:background .25s var(--ease), transform .25s var(--ease);
}
.revs__dot:hover{ background:var(--ink-dim); }
.revs__dot.is-on{ background:var(--banner-azul); transform:scale(1.35); }

/* ---------- chamada final ---------- */
.sec--cta{
  --pad-b:clamp(4.5rem,9vw,8rem);
  position:relative; overflow:hidden;
  background:var(--panel);
  padding-top:clamp(3.5rem,4vw,3.75rem);
  padding-bottom:0;
}
.sec--cta::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(112deg, transparent 44%, rgba(18,87,245,.42) 44.2%, rgba(18,87,245,.42) 62%, transparent 62.2%),
    linear-gradient(112deg, transparent 64%, rgba(47,212,242,.22) 64.2%, rgba(47,212,242,.22) 71%, transparent 71.2%),
    radial-gradient(ellipse at 88% 30%, rgba(18,87,245,.35), transparent 58%);
  opacity:.55;
}
.cta{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2rem,5.5vw,5.5rem); align-items:stretch;
}
/* técnico apontando para o formulário */
.cta__fig{
  align-self:end;
  margin:0 -1rem 0 auto;
  width:min(520px, 96%);
}
.cta__fig img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(-14px 14px 34px rgba(0,0,0,.7));
}

/* ---------- formulário de contato ---------- */
/* sem card: os campos ficam direto sobre o fundo da seção */
.fm{
  align-self:start;
  margin-top:clamp(2rem,4vw,4rem);
  margin-bottom:clamp(3rem,5vw,5rem);
  position:relative;
}
.fm__title{
  font-size:calc(var(--fs-h3) * 1.28); font-weight:400;
  color:rgba(233,240,248,.78);
  letter-spacing:-.4px;
}
.fm__title em{ font-style:normal; font-weight:800; color:#fff; }
.fm__note{
  color:var(--txt-dim); font-size:var(--fs-lg);
  margin-top:.5rem;
}
.fm__form{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem 1.1rem;
  margin-top:2.1rem;
}
.fld{ display:grid; gap:.5rem; min-width:0; }
.fld--wide{ grid-column:1/-1; }
.fld label{
  font-size:var(--fs-base); font-weight:700;
  color:var(--txt);
}
.fld input,
.fld select,
.fld textarea{
  width:100%;
  font-family:inherit; font-size:var(--fs-lg); color:var(--txt);
  background:rgba(4,7,14,.55);
  border:1px solid var(--line-hi);
  border-radius:0;
  padding:.95rem 1.05rem;
  min-height:58px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.fld textarea{ resize:vertical; line-height:1.55; min-height:160px; }
.fld input::placeholder,
.fld textarea::placeholder{ color:#7B8CA6; }
.fld input:hover,
.fld select:hover,
.fld textarea:hover{ border-color:rgba(140,200,240,.45); }
.fld input:focus,
.fld select:focus,
.fld textarea:focus{
  outline:none;
  background:rgba(4,7,14,.8);
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(47,212,242,.16);
}

/* seta própria no select */
.fld__sel{ position:relative; display:block; }
.fld__sel select{
  appearance:none; -webkit-appearance:none;
  padding-right:2.8rem; cursor:pointer;
}
.fld__sel select:invalid{ color:#7B8CA6; }
.fld__sel select option{ background:#0A1220; color:var(--txt); }
.fld__sel svg{
  position:absolute; right:1rem; top:50%;
  width:18px; height:18px; margin-top:-9px;
  color:var(--cyan); pointer-events:none;
}

/* erro de validação */
.fld__err{
  font-size:var(--fs-sm); font-weight:600;
  color:#FF9B9B;
}
.fld__err[hidden]{ display:none; }
.fld.is-bad input,
.fld.is-bad select,
.fld.is-bad textarea{
  border-color:rgba(255,120,120,.65);
  background:rgba(255,120,120,.07);
  box-shadow:0 0 0 3px rgba(255,120,120,.12);
}

/* botao reto, na cor do WhatsApp */
.fm__send{
  grid-column:1/-1; width:100%;
  min-height:60px; margin-top:.5rem;
  --fs-btn:var(--fs-lg);
  clip-path:none;
  background:var(--wpp); color:#fff; font-weight:700;
  box-shadow:0 14px 34px -12px rgba(37,211,102,.65);
}
.fm__send svg{ width:1.3em; height:1.3em; }
.fm__send:hover{ background:#1EBE5A; box-shadow:0 18px 40px -12px rgba(37,211,102,.8); }
.fm__ok{
  grid-column:1/-1;
  font-size:var(--fs-base); line-height:1.55;
  color:var(--txt);
  background:rgba(47,212,242,.09);
  border-left:3px solid var(--cyan);
  padding:.9rem 1.1rem;
}
.fm__ok[hidden]{ display:none; }

/* =====================================================================
   MAPA
   ===================================================================== */
.mapa{
  width:100%;
  line-height:0;
  background:var(--ink-2);
}
.mapa__frame{
  display:block; width:100%; border:0;
  height:clamp(150px, 19vw, 230px);
  filter:grayscale(.35) contrast(1.05);
}

/* =====================================================================
   8. RODAPÉ
   ===================================================================== */
.ft{ background:var(--ink); border-top:1px solid var(--line); padding-top:clamp(3rem,6vw,4.5rem); }
.ft__in{
  display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:3rem;
}
.ft__lockup{
  margin-right:0; margin-bottom:1.3rem;
  gap:.85rem;
}
.ft__lockup .lockup__mark{ width:46px; height:46px; }
.ft__lockup .lockup__name{ font-size:1.62rem; }
.ft__brand p{ color:var(--txt-dim); font-size:var(--fs-base); }
.ft h2{
  font-size:var(--fs-sm); font-weight:600;
  letter-spacing:0; color:var(--cyan); margin-bottom:1.1rem;
}
.ft__nav, .ft__contact, .ft__hours{ display:flex; flex-direction:column; align-items:flex-start; gap:.62rem; }
.ft__nav a, .ft__contact a{ color:var(--txt-dim); font-size:var(--fs-base); transition:color .2s; }
.ft__nav a:hover, .ft__contact a:hover{ color:var(--cyan); }

/* ---------- horario de funcionamento ---------- */
.hours{ display:grid; gap:1.05rem; width:100%; }
/* o dia fica em cima e o horario embaixo: nao aperta em coluna estreita
   e o par continua legivel quando o rodape empilha */
.hours__row{ display:grid; gap:.15rem; }
.hours dt{ color:var(--txt-dim); font-size:var(--fs-sm); }
.hours dd{
  color:var(--txt); font-size:var(--fs-base); font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.hours__off{ color:var(--txt-dim); font-weight:500; }

.social{ display:flex; gap:.6rem; margin-top:.7rem; }
.social a{
  width:44px; height:44px; display:grid; place-items:center;
  color:var(--txt-dim);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:color .25s, box-shadow .25s, background .25s;
}
.social a:hover{ color:var(--cyan); box-shadow:inset 0 0 0 1px rgba(47,212,242,.4); background:rgba(47,212,242,.08); }
.social svg{ width:19px; height:19px; }

.ft__base{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-block:1.4rem;
  border-top:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--txt-dim);
}

/* ---------- botão flutuante ---------- */
.wpp{
  /* tamanho e afastamento escalam junto com a largura da tela */
  --wpp-size:clamp(60px, 55px + 1.3vw, 74px);
  --wpp-right:clamp(1.25rem, .85rem + 1.5vw, 2.4rem);
  --wpp-bottom:clamp(1.25rem, .85rem + 1.5vw, 2.4rem);

  position:fixed; right:var(--wpp-right); bottom:var(--wpp-bottom);
  z-index:90;
  width:var(--wpp-size); height:var(--wpp-size); border-radius:50%;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%),
    var(--wpp);
  color:#fff;
  box-shadow:0 14px 34px -8px rgba(37,211,102,.65);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  animation:wppFloat 3.6s ease-in-out infinite;
  will-change:transform;
}
.wpp svg{
  width:50%; height:50%;
  transition:transform .3s var(--ease);
}

/* anel que pulsa, chamando atencao */
.wpp::before{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  animation:wppPulse 2.4s var(--ease) infinite;
  pointer-events:none;
}

.wpp:hover,
.wpp:focus-visible{
  transform:scale(1.09) translateY(-3px);
  box-shadow:0 20px 44px -10px rgba(37,211,102,.8), 0 0 0 6px rgba(37,211,102,.16);
  animation:none;
}
.wpp:hover svg{ transform:rotate(-8deg) scale(1.06); }
.wpp:active{ transform:scale(.96); animation:none; }
.wpp:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* balaozinho no desktop */
@media (hover:hover) and (pointer:fine){
  .wpp::after{
    content:"Fale conosco";
    position:absolute; right:calc(100% + .7rem); top:50%;
    transform:translateY(-50%) translateX(6px);
    padding:.45rem .8rem; border-radius:999px;
    background:var(--wpp); color:#fff;
    font-size:.82rem; font-weight:600; line-height:1; white-space:nowrap;
    box-shadow:0 10px 24px -10px rgba(37,211,102,.7);
    opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
  }
  .wpp:hover::after,
  .wpp:focus-visible::after{ opacity:1; transform:translateY(-50%) translateX(0); }
}

@keyframes wppFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}
@keyframes wppPulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/* =====================================================================
   9. RESPONSIVO
   ===================================================================== */
@media (max-width:1100px){
  .ft__in{ grid-template-columns:repeat(3,1fr); }
  .ft__brand{ grid-column:1/-1; }
  .hero__body{ grid-template-columns:minmax(0,1fr) minmax(0,.62fr); }
  .empresa{ grid-template-columns:minmax(0,.62fr) minmax(0,1fr); }
  .cta{ grid-template-columns:1fr; align-items:stretch; }
  /* coluna unica: a foto volta ao fluxo, sem encostar na base */
  .sec--cta{ padding-bottom:var(--pad-b); }
  .fm{ margin-top:0; margin-bottom:0; }
  .cta__fig{ width:min(340px,72%); margin-right:0; margin-bottom:-.4rem; }
}

@media (max-width:900px){
  :root{ --hdr-h:64px; }
  .wrap{ width:min(1240px, 100% - 2.2rem); }

  /* header sempre solido no mobile (nunca transparente sobre o banner).
     sem backdrop-filter: ele criaria um bloco de contencao e quebraria
     o painel lateral, que e position:fixed dentro do header */
  .hdr, .hdr.is-stuck{
    background:var(--ink);
    backdrop-filter:none;
    box-shadow:0 1px 0 var(--line), 0 18px 40px -30px #000;
  }
  /* no lugar da marca + texto, a logo em imagem */
  .hdr .lockup__mark, .hdr .lockup__txt{ display:none; }
  .hdr .lockup__img{ display:block; }

  /* rodape segue a mesma logica do header: a logo original em imagem */
  .ft__lockup .lockup__mark, .ft__lockup .lockup__txt{ display:none; }
  .ft__lockup .lockup__img{ display:block; height:38px; }

  /* =========== menu mobile: painel lateral de altura total =========== */

  /* fundo escuro que cobre a pagina inteira */
  .navsc{
    display:block;
    position:fixed; inset:0; z-index:1;
    background:rgba(3,5,10,.66);
    opacity:0; visibility:hidden;
    /* visibility troca na hora ao abrir e so no fim ao fechar */
    transition:opacity .34s var(--ease), visibility 0s linear .34s;
  }
  .navsc.is-open{
    opacity:1; visibility:visible;
    transition:opacity .34s var(--ease), visibility 0s linear 0s;
  }

  .nav{
    position:fixed; top:0; right:0; bottom:0; left:auto; z-index:2;
    width:min(87vw, 376px);
    flex-direction:column; align-items:stretch; gap:0;
    padding:0;
    background:linear-gradient(200deg, var(--ink-2) 0%, var(--ink) 62%);
    border-left:1px solid var(--line-hi);
    box-shadow:-40px 0 70px -34px #000;
    overflow-y:auto; overscroll-behavior:contain;
    visibility:hidden;
    transform:translateX(101%);
    transition:transform .38s var(--ease), visibility 0s linear .38s;
  }
  .nav.is-open{
    visibility:visible; transform:translateX(0);
    transition:transform .38s var(--ease), visibility 0s linear 0s;
  }

  /* -- topo: marca + fechar -- */
  .nav__top{
    position:relative; flex:none;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    min-height:var(--hdr-h); padding:0 1.15rem;
  }
  /* filete ciano: mesma assinatura do corte diagonal do resto do site */
  .nav__top::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:linear-gradient(90deg, var(--cyan) 0%, var(--cyan-deep) 34%, rgba(47,212,242,0) 100%);
  }
  .nav__logo{ display:block; width:auto; height:30px; }
  .nav__close{
    width:44px; height:44px; margin-right:-11px; flex:none;
    display:grid; place-items:center;
    color:var(--txt-dim);
    transition:color .25s var(--ease), transform .3s var(--ease);
  }
  .nav__close svg{ width:23px; height:23px; }
  .nav__close:hover, .nav__close:focus-visible{ color:var(--cyan); transform:rotate(90deg); }

  /* -- lista de secoes -- */
  .nav > a{
    position:relative;
    display:flex; align-items:center;
    min-height:74px; padding:1.15rem 2.9rem 1.15rem 1.15rem;
    font-size:1.25rem; font-weight:600; color:var(--txt);
    border-bottom:1px solid var(--line);
    transition:color .24s var(--ease), background-color .24s var(--ease), padding-left .24s var(--ease);
  }
  /* lamina ciana que entra pela esquerda no toque */
  .nav > a::before{
    content:""; position:absolute; left:0; top:50%;
    width:3px; height:30px; background:var(--cyan);
    transform:translateY(-50%) scaleY(0); transform-origin:center;
    transition:transform .24s var(--ease);
  }
  /* seta fina, sem moldura */
  .nav > a::after{
    content:""; position:absolute; right:1.4rem; top:50%; left:auto; bottom:auto;
    width:9px; height:9px; background:none;
    border-right:2px solid currentColor; border-top:2px solid currentColor;
    color:var(--txt-dim); opacity:.85;
    transform:translate(0,-50%) rotate(45deg);
    transition:transform .24s var(--ease), color .24s var(--ease);
  }
  .nav > a:hover, .nav > a:focus-visible{
    color:var(--cyan); background:rgba(47,212,242,.055); padding-left:1.55rem;
  }
  .nav > a:hover::before, .nav > a:focus-visible::before{ transform:translateY(-50%) scaleY(1); }
  .nav > a:hover::after, .nav > a:focus-visible::after{
    color:var(--cyan); transform:translate(4px,-50%) rotate(45deg);
  }

  /* -- rodape do painel: acao, telefone, horario e perfis -- */
  .nav__foot{
    display:block; position:relative; flex:none; margin-top:auto;
    padding:1.25rem 1.15rem calc(1.35rem + env(safe-area-inset-bottom, 0px));
    text-align:center;
  }
  .nav__foot::before{
    content:""; position:absolute; left:0; right:0; top:0; height:2px;
    background:linear-gradient(90deg, var(--cyan) 0%, var(--cyan-deep) 34%, rgba(47,212,242,0) 100%);
  }
  /* no painel os dois botoes sao retos, sem o corte diagonal */
  .nav__cta, .nav__wpp{
    display:flex; width:100%;
    clip-path:none; border-radius:4px;
  }
  /* orcamento: so o contorno, no ciano da marca */
  .nav__cta{
    background:none; color:var(--cyan); font-weight:700;
    box-shadow:inset 0 0 0 1px rgba(47,212,242,.45);
  }
  .nav__cta:hover{
    background:rgba(47,212,242,.12);
    box-shadow:inset 0 0 0 1px rgba(47,212,242,.8);
  }
  /* whatsapp: cheio, no verde do proprio whatsapp */
  .nav__wpp{
    margin-top:.62rem;
    background:var(--wpp); color:#04210E; font-weight:700;
  }
  .nav__wpp:hover{ background:#1FBE5A; }

  .nav__tel{
    display:block; margin-top:1.1rem;
    font-size:1.375rem; font-weight:800; letter-spacing:-.02em; color:#fff;
    transition:color .25s var(--ease);
  }
  .nav__tel:hover{ color:var(--cyan); }
  .nav__hrs{ margin-top:.3rem; font-size:var(--fs-sm); color:var(--txt-dim); }
  .nav__social{ justify-content:center; margin-top:1.05rem; }

  .burger{ display:block; }
  /* no mobile o "FALE CONOSCO" sai do header: o menu ja tem "Contato"
     e o flutuante do WhatsApp fica sempre visivel */
  .btn--head{ display:none; }

  /* contato no mobile: so o formulario (a foto do tecnico sai) */
  .cta__fig{ display:none; }
  .cta{ gap:0; }

  /* hero em bloco alto: foto de fundo desfocada e o tecnico ao centro */
  .hero{ min-height:0; padding-bottom:0; }
  /* o banner comeca abaixo do header solido */
  .hero__bg{ top:var(--hdr-h); }
  .hero__art{
    --art-shift:0px;
    object-fit:cover; object-position:center 46%;
    /* a foto vira ambiente: desfocada atras do tecnico, que fica em foco.
       o scale cobre a franja transparente que o blur cria nas bordas */
    filter:blur(6px) saturate(1.06);
    transform:scale(1.08);
  }
  /* tecnico em cima, chamada logo abaixo, os dois empilhados no centro */
  .hero__body{
    display:flex; flex-direction:column; align-items:center;
    min-height:0;
    padding-top:0;
    padding-bottom:clamp(1.7rem, 6vw, 2.6rem);
  }
  .hero__person{
    position:static; order:1;
    width:min(78vw, 324px); height:auto;
    margin:0; z-index:2;
  }
  .hero__person img{
    width:100%; height:auto;
    /* sem sombra aqui: a mascara recorta no limite da caixa da imagem e a
       sombra virava um retangulo visivel em volta do tecnico */
    filter:none;
    /* dissolve o corte na cintura da foto no fundo desfocado */
    -webkit-mask-image:linear-gradient(180deg, #000 82%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 82%, transparent 100%);
  }
  /* a chamada sobe um pouco sobre a base da foto, como no material de origem */
  .hero__copy.sr-only{
    order:2; position:static; z-index:2;
    width:100%; max-width:min(100%, 24rem); height:auto;
    margin:clamp(-2.2rem, -5.5vw, -1.1rem) auto 0; padding:0;
    clip-path:none; overflow:visible; white-space:normal;
    text-align:center;
  }
  /* mesmas cores dos titulos do site: base clara e a palavra-chave em azul */
  .hero__copy h1{
    font-size:clamp(1.95rem, 8.4vw, 2.6rem);
    line-height:1.15; letter-spacing:-.02em;
    margin:0 0 .95rem; max-width:none;
  }
  .hero__copy h1 em{ display:block; color:var(--banner-azul-cl); }
  .hero__copy .lede{
    font-size:clamp(1.02rem, 4.1vw, 1.16rem); line-height:1.55;
    color:var(--txt-dim); margin:0; max-width:none;
  }
  .hero__copy .lede b{ color:var(--txt); font-weight:700; }
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(4,6,11,.5) 0%, transparent 18%),
      linear-gradient(0deg, rgba(4,6,11,.94) 0%, rgba(4,6,11,.72) 28%, rgba(4,6,11,.18) 60%, transparent 76%);
  }

  .srv__item{ grid-column:span 3; }
  /* no toque nao existe hover: os cards ja ficam no estado destacado */
  .srv__item{
    transform:translateY(-6px);
    border-color:#C9D8EB;
    box-shadow:0 18px 40px -18px rgba(11,35,82,.40);
  }
  .srv__img img{ transform:scale(1.07); }
  .srv__img::after{ opacity:1; }
  /* "quem somos" vira um cartao com o tecnico saindo por cima da borda */
  .empresa{ grid-template-columns:1fr; gap:0; }
  .empresa__fig{
    position:relative; z-index:1;
    max-width:min(64vw, 260px);
    margin:0 auto -3rem;
  }
  /* o brilho de fundo sangrava 18% para os lados e empurrava a pagina
     para fora da tela no mobile; aqui ele fica dentro da margem */
  .empresa__fig::before{ inset:-6% -4% -16% -4%; }
  .empresa__txt{
    position:relative; z-index:2;
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:16px;
    padding:clamp(1.5rem, 5.5vw, 2.2rem);
    box-shadow:0 26px 54px -32px #000;
  }
  .empresa__txt h2, .empresa__txt .sec__lede{ text-align:center; margin-inline:auto; }
  .revs{ grid-template-columns:repeat(2,1fr); }
  .ft__in{ grid-template-columns:1fr 1fr; }
  .ft__brand{ grid-column:1/-1; }
  /* com a largura toda disponivel o par volta para a mesma linha */
  .hours{ gap:.7rem; max-width:22rem; }
  .hours__row{
    grid-template-columns:1fr auto; align-items:baseline;
    gap:.15rem 1rem;
    padding-bottom:.7rem; border-bottom:1px solid var(--line);
  }
  .hours__row:last-child{ padding-bottom:0; border-bottom:0; }
}

/* no mobile os cabecalhos de secao usam a redacao curta */
@media (max-width:767px){
  .tx--longa{ display:none; }
  .tx--curta{ display:inline; }
  /* titulo em duas linhas, apoio menor e tudo centralizado no mobile */
  #servicos .sec__head{ text-align:center; }
  #servicos .sec__head h2{ max-width:15ch; margin:0 auto .9rem; }
  #servicos .sec__lede{
    font-size:calc(var(--fs-lg) * 1.1); max-width:38ch; text-wrap:pretty;
    margin-inline:auto;
  }
  .sec__head{ margin-bottom:2rem; }
}

/* tablet: o tecnico ganha corpo para nao ficar perdido na faixa larga */
@media (min-width:621px) and (max-width:900px){
  .hero__person{ width:min(52vw, 400px); }
  .hero__copy.sr-only{ max-width:28rem; }
}

@media (max-width:620px){
  .hdr .lockup__img{ height:31px; }

  .srv__item{ grid-column:1/-1; }
  .revs{ grid-template-columns:1fr; }
  .pillars{ grid-template-columns:1fr; gap:1.4rem; }
  .ft__in{ grid-template-columns:1fr; }
  .ft__base{ flex-direction:column; gap:.35rem; }
  .fm__form{ grid-template-columns:1fr; }
  /* no celular o botao sobe e recua um pouco mais das bordas */
  .wpp{ --wpp-right:1.6rem; --wpp-bottom:1.9rem; }

  /* faixa de números em 2x2 */
  .strip__in{ grid-template-columns:repeat(2,minmax(0,1fr)); padding-block:0; }
  .strip__item{ padding-block:1.15rem; }
  .strip__item:nth-child(odd){ border-left:0; }
  .strip__item:nth-child(n+3){ border-top:1px solid rgba(190,225,250,.22); }
}

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

/* ---------- revelação ao rolar (aplicada via JS) ---------- */
.reveal{ opacity:0; transform:translateY(20px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .65s var(--ease), transform .65s var(--ease);
}

/* ---------- áreas seguras (iPhone com notch) ---------- */
@supports (padding:env(safe-area-inset-left)){
  .wrap{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  .wpp{
    right:calc(var(--wpp-right) + env(safe-area-inset-right));
    bottom:calc(var(--wpp-bottom) + env(safe-area-inset-bottom));
  }
}

/* =====================================================================
   10. PÁGINA INTERNA DE SERVIÇO (/servicos/*.html)
   ===================================================================== */

/* ---------- voltar no cabeçalho ---------- */
.voltar{
  display:inline-flex; align-items:center; gap:.42rem; flex:none;
  margin-right:calc(clamp(1rem,3vw,2.6rem) * -1 + 1.05rem);
  font-size:var(--fs-sm); font-weight:600; letter-spacing:0;
  color:var(--txt-dim);
  transition:color .22s var(--ease);
}
.voltar svg{
  width:1.25em; height:1.25em; flex:none;
  transition:transform .25s var(--ease);
}
.voltar:hover{ color:var(--cyan); }
.voltar:hover svg{ transform:translateX(-3px); }

/* ---------- topo ---------- */
.srvp{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink-2);
  display:flex; align-items:center;
  min-height:clamp(190px,21vw,300px);
  padding-top:calc(var(--hdr-h) + clamp(1.5rem,3vw,2.4rem));
  padding-bottom:clamp(1.5rem,3vw,2.4rem);
}

/* a foto do serviço ocupa o fundo inteiro */
.srvp__bg{ position:absolute; inset:0; z-index:-2; }
.srvp__bg img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 40%;
  filter:saturate(.8) contrast(1.04);
}
/* escurecimento que segura a leitura do texto, mais forte do lado do texto */
.srvp__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(94deg, rgba(4,6,11,.92) 0%, rgba(4,6,11,.76) 32%, rgba(6,14,32,.42) 62%, rgba(8,20,44,.24) 100%),
    linear-gradient(180deg, rgba(4,6,11,.92) 0%, rgba(4,6,11,.6) 96px, rgba(4,6,11,.06) 46%, rgba(4,6,11,.55) 100%),
    linear-gradient(0deg, rgba(11,35,82,.3), rgba(11,35,82,.3));
}
/* o mesmo corte diagonal e o brilho azul do restante do site */
.srvp::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(112deg, transparent 52%, rgba(18,87,245,.34) 52.2%, rgba(18,87,245,.34) 68%, transparent 68.2%),
    linear-gradient(112deg, transparent 70%, rgba(47,212,242,.18) 70.2%, rgba(47,212,242,.18) 76%, transparent 76.2%),
    radial-gradient(ellipse at 84% 26%, rgba(18,87,245,.32), transparent 60%);
  opacity:.5;
}
.srvp__in{ position:relative; }

/* trilha de navegação */
.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-size:1rem; color:var(--txt-dim);
  margin-bottom:.95rem;
}
.crumb a{ transition:color .2s var(--ease); }
.crumb a:hover{ color:var(--cyan); }
.crumb [aria-current]{ color:var(--txt); font-weight:600; }

.srvp__title{
  font-size:calc(var(--fs-h1) * 1.08); font-weight:800;
  letter-spacing:-1.2px; line-height:1.08;
  color:#fff;
  text-wrap:balance; max-width:16ch;
}

/* ---------- chamada com o botão de orçamento ---------- */
.pedir{ background:var(--paper-2); padding-block:clamp(3rem,6vw,4.6rem); }
.pedir__in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
/* o ciano do foco some no branco */
.pedir :focus-visible{ outline-color:var(--blue); }
.pedir__txt{
  color:var(--ink-dim); font-size:calc(var(--fs-lg) * 1.34); line-height:1.6;
  max-width:50ch;
}

/* tópicos do serviço */
.pedir__lista{
  display:grid; gap:.9rem;
  margin-top:clamp(1.4rem,2.6vw,1.9rem);
  max-width:56ch;
}
.pedir__lista li{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:.7rem; align-items:start;
}
.pedir__lista svg{
  width:25px; height:25px; flex:none;
  color:var(--banner-azul); margin-top:.15rem;
}
.pedir__lista p{ color:var(--ink-dim); font-size:calc(var(--fs-lg) * 1.15); line-height:1.55; }
.pedir__lista b{ color:var(--ink-txt); font-weight:700; }

.pedir__acts{
  display:flex; flex-wrap:wrap; gap:.9rem;
  margin-top:clamp(1.8rem,3.2vw,2.5rem);
}
.pedir__btn{
  font-size:var(--fs-lg); font-weight:700; padding-inline:1.9em;
  clip-path:none; border-radius:4px;
}

/* foto do serviço */
.pedir__fig{ margin:0; }
.pedir__fig img{
  width:100%; aspect-ratio:16/11; object-fit:cover;
}

/* ---------- responsivo ---------- */
/* cabecalho apertado: fica so a seta, e o botao do topo sai —
   a pagina ja tem "Pedir orcamento" na abertura e o flutuante do WhatsApp */
@media (max-width:900px){
  .pedir__in{ grid-template-columns:1fr; gap:clamp(1.8rem,4vw,2.6rem); }
  .pedir__txt, .pedir__lista{ max-width:none; }
}

@media (max-width:620px){
  .pedir__acts{ width:100%; }
  .pedir__btn{ width:100%; }
}

@media (max-width:460px){
  .voltar{ position:relative; margin-right:0; }
  .voltar__tx{
    position:absolute; width:1px; height:1px;
    margin:-1px; padding:0; border:0;
    clip-path:inset(50%); overflow:hidden; white-space:nowrap;
  }
  /* alvo de toque de 44px sem deslocar a seta da margem */
  .voltar::after{
    content:""; position:absolute;
    top:50%; left:50%; transform:translate(-50%,-50%);
    width:44px; height:44px;
  }
}