/* ═══════════════════════════════════════════════════════════
   ERMES PÓS-OBRA — folha de estilo
   Direção: basalto molhado + concreto polido, azul da marca.
   Sinais: areia = ANTES · azul da marca = DEPOIS (e toda a interação).
   Identidade visual única e assumida — a página pinta o
   próprio fundo e não acompanha o tema do sistema.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────── */
:root{
  /* material */
  --breu:      #0A0D0E;   /* basalto molhado */
  --breu-2:    #12181A;   /* superfície elevada no escuro */
  --breu-3:    #1C2427;   /* filete no escuro */
  --cal:       #EDEEEB;   /* concreto polido */
  --cal-2:     #F5F6F3;   /* superfície elevada no claro */
  --cal-3:     #D2D6D1;   /* filete no claro */

  /* tinta */
  --tinta:     #111617;
  --tinta-2:   #586366;   /* cinza com viés ciano */
  --gelo:      #DEE4E3;
  --gelo-2:    #8C9A9B;

  /* sinais */
  --azul:      #4C93EA;   /* azul da marca — fundo escuro (6,19:1) */
  --azul-esc:  #0A4FAE;   /* azul da marca — fundo claro  (6,57:1) */
  --areia:     #C09A6B;   /* antes — fundo escuro (oposto exato do azul) */
  --areia-2:   #8A5F2A;   /* antes — fundo claro */
  --zap:       #25D366;

  /* tipografia */
  /* Archivo: só os títulos grandes. Plex Sans: todo o resto. */
  --ff: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fc: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --t-h1:   clamp(2.4rem, 5.3vw, 4.7rem);
  --t-h2:   clamp(1.8rem, 3.6vw, 2.85rem);
  --t-h3:   clamp(1.06rem, 1.35vw, 1.22rem);
  --t-lead: clamp(1.03rem, 1.25vw, 1.18rem);
  --t-mono: .715rem;

  /* medidas */
  --navh: 4.9rem;                 /* o logo do cliente pede altura */
  --gut:  clamp(1.15rem, 4vw, 2.5rem);
  --max:  1180px;
  --band:   clamp(3.25rem, 7vw, 7rem);
  --band-t: clamp(2rem, 4.2vw, 4rem);       /* faixa que continua o chão anterior */
  --band-j: clamp(1.5rem, 2.6vw, 2.75rem);  /* faixa cuja seguinte continua este chão */
  --r:    3px;

  /* contexto padrão = claro */
  --bg:   var(--cal);
  --surf: var(--cal-2);
  --fg:   var(--tinta);
  --fg-2: var(--tinta-2);
  --line: var(--cal-3);
  --acc:  var(--azul-esc);
  --ant:  var(--areia-2);
}

/* contexto escuro */
.band--dark, .hero, .final, .ft, .menu{
  --bg:   var(--breu);
  --surf: var(--breu-2);
  --fg:   var(--gelo);
  --fg-2: var(--gelo-2);
  --line: var(--breu-3);
  --acc:  var(--azul);
  --ant:  var(--areia);
}

/* ── 2. Base ───────────────────────────────────────────── */
*, *::before, *::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top: calc(var(--navh) + 1rem) }

body{
  margin:0;
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--fc);
  font-size: 1.005rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg{ display:block; max-width:100% }
img{ height:auto }

a{ color:inherit; text-decoration:none }

button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

:where(h1,h2,h3,p,ul,ol,figure,blockquote){ margin:0 }
ul, ol{ padding:0; list-style:none }

:focus-visible{
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background: var(--breu); color: var(--gelo);
  padding:.8rem 1.2rem; font-family:var(--fc); font-size:.8rem;
}
.skip:focus{ left:.6rem; top:.6rem }

.wrap{ width: min(100% - (var(--gut) * 2), var(--max)); margin-inline:auto }

/* ── 3. Tipografia utilitária ──────────────────────────── */
.eyebrow, .marker{
  font-family: var(--fc);
  font-size: var(--t-mono);
  font-weight: 600;
  letter-spacing: .145em;
  text-transform: uppercase;
  color: var(--fg-2);
  line-height:1.4;
}
.marker{ display:flex; align-items:center; gap:.75rem; color:var(--acc) }
.marker::before{
  content:''; flex:none; width:26px; height:2px; background:currentColor;
}

.h2, .hero__h1, .final__h{
  font-family: var(--ff);
  font-weight: 800;
  font-stretch: 112%;              /* eixo de largura do Archivo */
  text-transform: uppercase;
  letter-spacing: -.014em;
  line-height: .95;
  text-wrap: balance;
  color: var(--fg);
}
.h2{ font-size: var(--t-h2) }
.hero__h1{ font-size: var(--t-h1); font-stretch:107%; letter-spacing:-.022em; line-height:.92 }
.final__h{ font-size: clamp(1.95rem, 4.3vw, 3.3rem) }

.dot{ color: var(--azul) }
.dot--esc{ color: var(--azul-esc) }

.lead{
  font-size: var(--t-lead);
  color: var(--fg-2);
  max-width: 56ch;
  line-height:1.65;
}
.lead + .lead{ margin-top:1rem }

.head{ display:flex; flex-direction:column; gap:.85rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem) }

/* o dispositivo da página: o filete que divide antes | depois */
.split-rule{
  height:2px; width:100%; margin-top:.25rem;
  background: linear-gradient(90deg, var(--ant) 0 50%, var(--acc) 50% 100%);
  opacity:.5;
}

/* ── 4. Botões ─────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.78rem 1.3rem;
  font-weight:600; font-size:.94rem; letter-spacing:.005em;
  border:1.5px solid transparent; border-radius:var(--r);
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
  will-change: transform;
}
.btn--lg{ padding:1.02rem 1.7rem; font-size:1.01rem }
.btn .ico{ width:19px; height:19px; flex:none }

.btn--zap{ background: var(--azul); color:#04121F; border-color: var(--azul) }
.btn--zap:hover{ background:#6BA6EF; border-color:#6BA6EF; transform:translateY(-2px) }
.btn--zap:active{ transform:translateY(0) }

.btn--ghost{ color: var(--fg); border-color: color-mix(in srgb, var(--fg) 32%, transparent) }
.btn--ghost:hover{ border-color: var(--acc); color: var(--acc); transform:translateY(-2px) }

/* ── 5. Navegação ──────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:90;
  background: transparent;
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.nav--solid{
  background: color-mix(in srgb, var(--breu) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--breu-3);
}
.nav__in{
  display:flex; align-items:center; gap:1.6rem;
  min-height: var(--navh);
}

.lockup{ display:flex; align-items:center; flex:none; border-radius:2px }
/* No menu entra o lockup horizontal (GRUPO ERMES): na altura de
   cabeçalho o logo completo comprime a palavra a ~15px. O logo
   inteiro, com a rotativa e a tagline, aparece no rodapé. */
.logo{ height:42px; width:auto; flex:none }
.logo--ft{ height:96px }

.nav__links{ display:flex; gap:1.75rem; margin-left:auto }
.nav__links a{
  font-size:.905rem; font-weight:500; color:var(--gelo-2);
  padding-block:.35rem; position:relative; transition:color .2s ease;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--azul); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.nav__links a:hover{ color:var(--gelo) }
.nav__links a:hover::after{ transform:scaleX(1) }

.nav__cta{ flex:none; padding:.6rem 1.05rem; font-size:.86rem }

.burger{ display:none; width:44px; height:44px; margin-left:auto; flex-direction:column; justify-content:center; gap:6px; align-items:center }
.burger span{ display:block; width:22px; height:1.8px; background:var(--gelo); transition:transform .25s ease, opacity .2s ease }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.9px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.9px) rotate(-45deg) }

.menu{
  background: var(--breu); border-bottom:1px solid var(--breu-3);
  padding: .5rem var(--gut) 1.4rem;
  display:flex; flex-direction:column;
}
.menu[hidden]{ display:none }
.menu a{
  padding:.85rem 0; border-bottom:1px solid var(--breu-3);
  color:var(--gelo); font-weight:500; font-size:1.02rem;
}
.menu__zap{ color:var(--azul) !important; border-bottom:0 !important; padding-top:1.1rem !important }

/* ── 6. Hero ───────────────────────────────────────────── */
.hero{
  position:relative;
  background: var(--breu);
  color: var(--gelo);
  padding-bottom: clamp(3.25rem, 5.5vw, 5rem);
  margin-top: calc(var(--navh) * -1);
  padding-top: calc(var(--navh) + clamp(2rem, 3.6vw, 3.25rem));
  overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 78% 10%, rgba(76,147,234,.11), transparent 60%),
    radial-gradient(90% 60% at 8% 88%, rgba(192,154,107,.07), transparent 62%);
  pointer-events:none;
}
.hero__grid{
  position:relative;
  width: min(100% - (var(--gut) * 2), 1300px);
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(2.25rem, 4vw, 4.25rem);
  align-items:center;
}
.hero__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem }
.hero__lead{ font-size:var(--t-lead); color:var(--gelo-2); max-width:46ch; line-height:1.66 }
.hero__acts{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.25rem }

.hero__trust{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  margin-top:.9rem; padding-top:1.4rem;
  border-top:1px solid var(--breu-3);
  width:100%;
  font-family:var(--fc); font-size:.83rem; font-weight:500; letter-spacing:.005em;
  color:var(--gelo-2);
}
.hero__trust li{ display:flex; align-items:center; gap:.5rem }
.hero__trust li::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--azul); flex:none;
}

.hero__fade{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, var(--areia) 0 50%, var(--azul) 50% 100%);
  opacity:.55;
}

/* ── 7. Comparador antes / depois ──────────────────────── */
/* A posição da divisa é uma propriedade registrada: assim a
   "passagem da rotativa" na entrada é uma transição de CSS,
   e o arraste continua instantâneo. */
@property --pos{ syntax:'<percentage>'; inherits:true; initial-value:100% }

.ba{ display:flex; flex-direction:column; gap:.85rem; width:100%; max-width:430px; margin-left:auto }
.ba__frame{
  --pos: 100%;
  transition: --pos 1.45s cubic-bezier(.18,.82,.28,1);
  position:relative; aspect-ratio: 41 / 64; width:100%;
  border-radius: var(--r); overflow:hidden;
  background: var(--breu-2);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07);
  cursor: ew-resize;
  user-select:none; -webkit-user-select:none;
}
.ba__frame.is-drag{ transition:none }
.ba__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.ba__wet{
  position:absolute; inset:0; z-index:2;
  clip-path: inset(0 0 0 var(--pos));
}
.ba__tag{
  position:absolute; top:.85rem; z-index:3;
  font-family:var(--fc); font-size:.68rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  padding:.34rem .62rem; border-radius:2px;
  background: rgba(8,11,12,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display:flex; align-items:center; gap:.42rem;
}
.ba__tag::before{ content:''; width:6px; height:6px; border-radius:50%; flex:none }
.ba__tag--a{ left:.85rem; color:#E6C79C }
.ba__tag--a::before{ background:var(--areia) }
.ba__tag--d{ right:.85rem; color:#A9CDF6 }
.ba__tag--d::before{ background:var(--azul) }

.ba__bar{
  position:absolute; top:0; bottom:0; left:var(--pos); z-index:4;
  width:3px; margin-left:-1.5px;
  background:#F2F4F3;
  box-shadow: 0 0 18px rgba(255,255,255,.35);
  pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.ba__grip{
  flex:none;                       /* a barra tem 3px: sem isso o punho encolhe */
  width:38px; height:38px; border-radius:var(--r);
  background:#F2F4F3; color:var(--breu);
  display:grid; place-items:center;
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
}
.ba__frame:has(.ba__range:focus-visible) .ba__grip{
  outline:2px solid var(--azul); outline-offset:3px;
}

.ba__range{
  position:absolute; inset:0; z-index:5;
  width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.ba__range::-webkit-slider-thumb{ -webkit-appearance:none; width:44px; height:100vh }
.ba__range::-moz-range-thumb{ width:44px; height:1000px; border:0 }

.ba__cap{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem;
  font-family:var(--fc); font-size:.82rem; letter-spacing:.005em;
  color:var(--gelo-2); line-height:1.55;
}
/* A dica vive dentro do quadro — é sobre o quadro. */
.ba__hint{
  position:absolute; left:.85rem; bottom:.85rem; z-index:3;
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--fc); font-size:.72rem; font-weight:600; letter-spacing:.02em;
  color:#A9CDF6; background: rgba(8,11,12,.72);
  padding:.34rem .6rem; border-radius:2px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events:none;
}
.ba__hint::before{ content:'↔'; font-size:.85rem }

/* ── 8. Faixas ─────────────────────────────────────────── */
.band{ background: var(--bg); color: var(--fg); padding-block: var(--band) }
/* --tight: a faixa continua o mesmo chão da anterior
   --joined: a próxima faixa continua este chão */
.band--tight{ padding-top: var(--band-t) }
.band--joined{ padding-bottom: var(--band-j) }

/* ── 10. Serviços ──────────────────────────────────────── */
.svcs{
  display:grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(.9rem, 1.6vw, 1.35rem);
}
.svc{
  position:relative;
  grid-column: span 3;
  display:flex; flex-direction:column; gap:.72rem;
  padding: clamp(1.4rem, 2.3vw, 1.9rem);
  border:1px solid var(--line); border-radius: var(--r);
  background: transparent;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.svc--big{ grid-column: span 6; background: var(--cal-2) }
.svc:hover{ border-color: var(--acc); transform: translateY(-3px) }

.svc__t{
  font-size: clamp(1.15rem, 1.6vw, 1.42rem); font-weight:700;
  line-height:1.2; letter-spacing:-.005em; color: var(--fg);
}
.svc--big .svc__t{ font-size: clamp(1.3rem, 2vw, 1.72rem) }
.svc__d{ color: var(--fg-2); font-size:.97rem }
.svc:not(.svc--big) .svc__cta{
  padding:0; border-bottom:0;
  font-size:0;                       /* o rótulo some da tela, fica no leitor de tela */
}
.svc:not(.svc--big) .svc__cta::after{
  content:''; position:absolute; inset:0;   /* o card inteiro vira o link */
}
.svc:not(.svc--big) .svc__cta span{
  position:absolute; right:1.3rem; bottom:1.05rem; font-size:1.1rem;
  transition: transform .2s ease;
}
.svc:not(.svc--big):hover .svc__cta span{ transform: translateX(4px) }
.svc:not(.svc--big) .svc__d{ padding-bottom:1.6rem }

.svc__cta{
  align-self:flex-start; margin-top:auto; padding-top:.35rem;
  font-weight:600; font-size:.9rem; color: var(--acc);
  display:inline-flex; align-items:center; gap:.45rem;
  border-bottom:1.5px solid transparent; padding-bottom:2px;
  transition:border-color .2s ease, gap .2s ease;
}
.svc__cta:hover{ border-bottom-color: var(--acc); gap:.75rem }

/* ── 11. Resultados ────────────────────────────────────── */
.gal{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
}

/* O vídeo ocupa a 6ª célula da grade: fecha o buraco que sobrava
   e devolve a foto da fachada à proporção nativa — como faixa
   própria ela era esticada e o operador sumia no corte. */
.case--video .case__shot video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* não é um par antes|depois: sem o filete branco de divisa */
.case--video .case__shot + .case__shot{ border-top-color: var(--breu-3) }
.case{ display:flex; flex-direction:column; gap:1rem }
.case__pair{
  display:flex; flex-direction:column;
  border-radius: var(--r); overflow:hidden;
  background: var(--breu-2);
  box-shadow: 0 20px 50px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
}
.case__shot{ position:relative; aspect-ratio: 16 / 9; overflow:hidden }
.case__shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.case__shot img.baixo{ object-position: center 76% }
.case__shot + .case__shot{ border-top:2px solid var(--gelo) }
.chip{
  position:absolute; left:.7rem; bottom:.7rem;
  font-family:var(--fc); font-size:.65rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  padding:.3rem .55rem; border-radius:2px;
  background: rgba(8,11,12,.74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display:flex; align-items:center; gap:.4rem;
}
.chip::before{ content:''; width:6px; height:6px; border-radius:50%; flex:none }
.chip--a{ color:#E6C79C } .chip--a::before{ background:var(--areia) }
.chip--d{ color:#A9CDF6 } .chip--d::before{ background:var(--azul) }

.case__cap h3{ font-size:1.03rem; font-weight:600; line-height:1.35; color:var(--fg) }
.case__cap p{
  font-family:var(--fc); font-size:.86rem; font-weight:400;
  color:var(--fg-2); margin-top:.3rem;
}

/* ── 12. Equipe ────────────────────────────────────────── */
.equipe{
  display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: clamp(2.2rem, 5vw, 4.5rem); align-items:center;
}
.equipe__copy{ display:flex; flex-direction:column; gap:1.15rem }
.kit{
  display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.6rem;
}
.kit li{
  font-family:var(--fc); font-size:.82rem; font-weight:500; letter-spacing:.005em;
  color:var(--fg-2); border:1px solid var(--line); border-radius:2px;
  padding:.42rem .78rem;
}
.equipe__foto{ display:flex; flex-direction:column; gap:.8rem }
.equipe__foto img{
  width:100%; aspect-ratio: 4 / 3; object-fit:cover;
  border-radius: var(--r);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06);
}
.equipe__foto figcaption{
  font-family:var(--fc); font-size:.82rem; letter-spacing:.005em;
  color:var(--fg-2); line-height:1.55;
}

/* ── 13. Como funciona ─────────────────────────────────── */
.steps{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(1.4rem, 2.6vw, 2.2rem);
}
.step{ display:flex; flex-direction:column; gap:.6rem; padding-top:1.1rem; border-top:2px solid var(--line) }
.step__n{
  font-family:var(--fc); font-size:.8rem; font-weight:600;
  letter-spacing:.1em; font-variant-numeric: tabular-nums; color: var(--acc);
}
.step h3{ font-size: var(--t-h3); font-weight:600; line-height:1.3 }
.step p{ color: var(--fg-2); font-size:.95rem }

/* ── 15. Dúvidas ───────────────────────────────────────── */
.faq{
  display:grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: clamp(1.8rem, 4vw, 4rem); align-items:start;
}
.faq__head{ margin-bottom:0; position:sticky; top: calc(var(--navh) + 1.5rem) }
.faq__nudge{ font-size:.95rem; color: var(--fg-2); margin-top:.4rem }
.faq__nudge a{
  color: var(--acc); font-weight:600; white-space:nowrap;
  border-bottom:1.5px solid transparent; padding-bottom:1px;
  transition:border-color .2s ease;
}
.faq__nudge a:hover{ border-bottom-color: var(--acc) }
.faq__list{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding: 1.15rem 0;
  font-size: clamp(1rem, 1.35vw, 1.14rem); font-weight:600;
  line-height:1.35; color: var(--fg);
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color: var(--acc) }
.faq summary::after{
  content:''; flex:none; width:14px; height:14px; margin-top:.3rem;
  background:
    linear-gradient(var(--acc), var(--acc)) center/100% 2px no-repeat,
    linear-gradient(var(--acc), var(--acc)) center/2px 100% no-repeat;
  transition: transform .28s ease;
}
.faq details[open] summary::after{ transform: rotate(90deg); background-size:100% 2px, 0 100% }
.faq__a{ padding: 0 0 1.35rem; max-width:62ch }
.faq__a p{ color: var(--fg-2); font-size:.98rem }
.faq details[open] .faq__a{ animation: slide .3s ease both }
@keyframes slide{ from{ opacity:0; transform:translateY(-5px) } to{ opacity:1; transform:none } }

/* ── 16. Chamada final ─────────────────────────────────── */
.final{
  position:relative; isolation:isolate;
  background: var(--breu); color: var(--gelo);
  padding-block: clamp(5rem, 10vw, 9rem);
  text-align:center;
  border-top:2px solid transparent;
  border-image: linear-gradient(90deg, var(--areia) 0 50%, var(--azul) 50% 100%) 1;
}
/* O fecho da página acontece sobre o próprio material que ela promete:
   a pedra molhada do "depois". */
/* A pedra é quase preta por natureza: escurecê-la a apaga.
   Aqui ela entra inteira, só rebaixada, e o escuro fica
   concentrado atrás do texto. */
.final__bg{
  position:absolute; inset:0; z-index:-1;
  background: url('../img/calcada-depois.webp') center/cover no-repeat;
  opacity:1;
  filter: brightness(.46) contrast(1.18) saturate(.7);
}
.final::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(58% 76% at 50% 50%, rgba(10,13,14,.84), rgba(10,13,14,.34) 82%),
    linear-gradient(180deg, rgba(10,13,14,.4), rgba(10,13,14,.66));
}
.final__in{ display:flex; flex-direction:column; align-items:center; gap:1.3rem }
.final__p{ color: var(--gelo-2); font-size:var(--t-lead); max-width:48ch }
.final__acts{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:.5rem }

/* ── 17. Rodapé ────────────────────────────────────────── */
.ft{ background: var(--breu); color: var(--gelo); padding-top: clamp(3.2rem, 6vw, 5rem) }
.ft__in{
  display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(1.8rem, 3.5vw, 3rem);
  padding-bottom: clamp(2.4rem, 4vw, 3.4rem);
}
.ft__tag{ color: var(--gelo-2); font-size:.92rem; margin-top:1.1rem; line-height:1.6 }
.ft__col{ display:flex; flex-direction:column; gap:.62rem }
.ft__col h3{
  font-family:var(--fc); font-size:.7rem; font-weight:600; letter-spacing:.145em;
  text-transform:uppercase; color: var(--azul); margin-bottom:.4rem;
}
/* padding-block garante o alvo de toque de 24px (WCAG 2.5.8) */
.ft__col a{
  font-size:.92rem; color: var(--gelo-2); width:fit-content;
  padding-block:.2rem; transition:color .2s ease;
}
.ft__col a:hover{ color: var(--gelo) }
.ft__note{ font-size:.82rem; color:#7E8A8B; margin-top:.35rem; line-height:1.55 }

.ft__base{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:1.5rem; border-top:1px solid var(--breu-3);
  font-family:var(--fc); font-size:.82rem; letter-spacing:.005em;
  color:#7E8A8B;
}
.ft__split{
  flex:none; width:76px; height:2px; margin:0;
  background: linear-gradient(90deg, var(--areia) 0 50%, var(--azul) 50% 100%);
  opacity:.6;
}

/* ── 18. Botão flutuante ───────────────────────────────── */
.fab{
  position:fixed; right:1rem; bottom:1rem; z-index:80;
  width:56px; height:56px; border-radius:50%;
  background: var(--zap); color:#04220F;
  display:none; place-items:center;
  box-shadow: 0 10px 30px rgba(0,0,0,.42);
  transition: transform .22s ease;
}
.fab svg{ width:29px; height:29px }
.fab:hover{ transform: scale(1.07) }

/* ── 19. Revelação no scroll ───────────────────────────── */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.7,.3,1) }
.reveal.in{ opacity:1; transform:none }
.reveal:nth-child(2){ transition-delay:.06s }
.reveal:nth-child(3){ transition-delay:.12s }
.reveal:nth-child(4){ transition-delay:.18s }
.reveal:nth-child(5){ transition-delay:.24s }

/* ── 20. Responsivo ────────────────────────────────────── */
@media (max-width: 1060px){
  /* A foto é o argumento do negócio: ela sobe para dentro da dobra,
     e o lead desce. A ordem no DOM não muda — só a de pintura. */
  .hero__grid{ grid-template-columns: 1fr; gap: 1.5rem; justify-items:start }
  .hero{ padding-top: calc(var(--navh) + 1.25rem) }
  .hero__copy{ display:contents }
  .eyebrow{ order:1 } .hero__h1{ order:2 } .ba{ order:3 }
  .hero__acts{ order:4 } .hero__lead{ order:5 } .hero__trust{ order:6 }
  .ba{ max-width: 520px; width:100%; margin-inline:auto; justify-self:center }
  .ba__frame{ aspect-ratio: 4 / 5 }
  .equipe{ grid-template-columns: 1fr }
  .equipe__foto{ max-width:560px }
  .gal{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .svc{ grid-column: span 6 }
  .faq{ grid-template-columns: 1fr }
  .faq__head{ position:static }
  .ft__in{ grid-template-columns: 1fr 1fr }
}

.gal-dica{ display:none }

/* A galeria vira carrossel: 6 casos em 434px em vez de 2.870px.
   Os 14% de espiada no próximo card fazem o gesto ser descoberto. */
@media (max-width: 760px){
  .gal{
    display:flex; gap:.75rem;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut); padding-bottom:.35rem;
    scrollbar-width:none;
  }
  .gal::-webkit-scrollbar{ display:none }
  .case{ flex:0 0 86%; scroll-snap-align:start }
  .gal-dica{ display:block; margin:-.35rem 0 .9rem }
}

@media (max-width: 900px){
  :root{ --navh: 4.5rem }
  .ft__col--nav{ display:none }          /* 15 links que repetem o menu */
  .equipe__foto figcaption{ display:none }
  .kit{ gap:.4rem }
  .kit li{ padding:.32rem .6rem; font-size:.78rem }
  .logo{ height:38px }
  .nav__links, .nav__cta{ display:none }
  .burger{ display:flex }
  .fab{ display:grid }
  .svcs{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .svc{ grid-column: span 1 }
  .svc--big{ grid-column: 1 / -1 }
}

@media (max-width: 640px){
  :root{ --navh: 4.2rem }
  /* a foto já está acima: o botão que promete levar até ela vira ruído */
  .hero__acts .btn--ghost{ display:none }
  /* o botão flutuante ganha rótulo: é a ação única do site */
  .fab{
    width:auto; height:52px; padding:0 1.15rem; border-radius:26px;
    display:inline-flex; align-items:center; gap:.55rem;
    font-weight:600; font-size:.95rem;
    bottom: calc(.9rem + env(safe-area-inset-bottom));
  }
  .fab::after{ content:'Mandar foto' }
  .fab svg{ width:24px; height:24px }
  .logo{ height:34px }
  .logo--ft{ height:76px }
  .gal{ grid-template-columns: 1fr }
  .hero__acts .btn{ width:100% }
  .ft__in{ grid-template-columns: 1fr; gap:2rem }
  .ft__base{ flex-direction:column; align-items:flex-start; gap:.9rem }
  .ba__frame{ aspect-ratio: 1 / 1 }
}

/* ── 21. Movimento reduzido ────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none }
}