/* =========================================================
   DESENTUPIDORA ESPECIALISTA — Sistema visual
   Direção: industrial de emergência. Preto profundo,
   vermelho sinalizador, branco osso. Tipografia de placa.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  /* cor */
  --ink:        #0A0A0B;
  --ink-2:      #0F0F11;
  --ink-3:      #17171A;
  --ink-4:      #202024;
  --line:       rgba(255,255,255,.09);
  --line-2:     rgba(255,255,255,.16);

  --red:        #E10600;
  --red-hot:    #FF2D14;
  --red-deep:   #8A0400;
  --red-soft:   rgba(225,6,0,.12);

  --bone:       #F5F2ED;
  --white:      #FFFFFF;
  --muted:      rgba(245,242,237,.60);
  --muted-2:    rgba(245,242,237,.42);

  --wpp:        #22C15E;
  --wpp-dark:   #14933F;

  /* tipografia */
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body:    "Instrument Sans", -apple-system, sans-serif;
  --mono:    "Martian Mono", ui-monospace, monospace;

  /* espaço */
  --shell: 1240px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --sec-y: clamp(4.5rem, 10vw, 9rem);

  /* forma */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 16px;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:128px; }
body{
  font-family:var(--body);
  background:var(--ink);
  color:var(--bone);
  line-height:1.6;
  font-size:clamp(.975rem,.4vw + .9rem,1.0625rem);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* grão sutil sobre tudo */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
address{ font-style:normal; }
::selection{ background:var(--red); color:var(--white); }

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

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- TIPOGRAFIA BASE ---------- */
h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.hl{ color:var(--red-hot); }
.outline{
  color:transparent;
  -webkit-text-stroke:1.5px var(--bone);
  paint-order:stroke fill;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono);
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.eyebrow--center{ justify-content:center; }
.pulse{
  width:7px; height:7px; border-radius:50%;
  background:var(--red-hot); position:relative; flex:none;
  box-shadow:0 0 0 0 rgba(255,45,20,.7);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,45,20,.65); }
  70%{ box-shadow:0 0 0 10px rgba(255,45,20,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,45,20,0); }
}

/* fita de risco listrada */
.tape{
  height:8px; width:100%;
  background:repeating-linear-gradient(135deg,
    var(--red) 0 14px, #0A0A0B 14px 28px);
  opacity:.9;
}

/* ---------- BOTÕES ---------- */
.btn{
  --bg:var(--red); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; padding:.85rem 1.5rem;
  background:var(--bg); color:var(--fg);
  font-family:var(--body); font-weight:700; font-size:.9375rem;
  letter-spacing:.01em; border-radius:var(--r);
  border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
  overflow:hidden; isolation:isolate; white-space:nowrap;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.28),transparent 80%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.btn:hover::before{ transform:translateX(120%); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--red{ --bg:var(--red); box-shadow:0 10px 30px -12px rgba(225,6,0,.9); }
.btn--red:hover{ --bg:var(--red-hot); box-shadow:0 16px 40px -14px rgba(255,45,20,1); }

.btn--wpp{ --bg:var(--wpp); --fg:#04140A; box-shadow:0 10px 30px -12px rgba(34,193,94,.7); }
.btn--wpp:hover{ --bg:#2ad76b; box-shadow:0 16px 40px -14px rgba(34,193,94,.85); }

.btn--ghost{
  --bg:transparent; --fg:var(--bone);
  border-color:var(--line-2); backdrop-filter:blur(6px);
}
.btn--ghost:hover{ --bg:rgba(255,255,255,.06); border-color:var(--bone); }

.btn--lg{ padding:1.05rem 1.9rem; font-size:1rem; }
.btn--sm{ padding:.6rem 1rem; font-size:.85rem; }
.btn--block{ width:100%; }

.ico{ width:1.15em; height:1.15em; fill:currentColor; flex:none; }
.ico--arrow{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--ease); }
.btn:hover .ico--arrow{ transform:translateX(4px); }

/* ---------- TOPBAR ---------- */
.topbar{
  background:var(--red);
  color:#fff; overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,.25);
}
.topbar__track{
  display:flex; gap:2.5rem; width:max-content;
  padding:.5rem 0;
  animation:slide 38s linear infinite;
}
.topbar__item{
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:var(--mono); font-size:.625rem; font-weight:600;
  letter-spacing:.16em; white-space:nowrap;
}
.topbar__item .dot{ width:4px; height:4px; background:#fff; border-radius:50%; flex:none; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.topbar:hover .topbar__track{ animation-play-state:paused; }

/* ---------- HEADER ---------- */
.header{
  position:sticky; top:0; z-index:900;
  background:rgba(10,10,11,.82);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:padding .3s var(--ease), background .3s;
}
.header.is-stuck{ background:rgba(10,10,11,.96); box-shadow:0 12px 40px -20px #000; }
.header__inner{
  display:flex; align-items:center; gap:1.5rem;
  min-height:96px;
  transition:min-height .3s var(--ease);
}
.header.is-stuck .header__inner{ min-height:80px; }

/* A logo é preta com contorno branco: sobre fundo escuro ela some.
   Por isso vive sobre uma placa clara, tratada como placa de sinalização. */
.brand{ display:flex; align-items:center; flex:none; }
.brand__mark{
  height:68px; width:auto;
  padding:5px 10px;
  background:var(--bone);
  border-radius:6px;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.85), inset 0 0 0 1px rgba(0,0,0,.08);
  transition:height .3s var(--ease), transform .5s var(--ease), box-shadow .35s;
}
.brand:hover .brand__mark{
  transform:translateY(-2px);
  box-shadow:0 14px 32px -12px rgba(225,6,0,.55), inset 0 0 0 1px rgba(225,6,0,.35);
}
.header.is-stuck .brand__mark{ height:56px; }

.nav{ display:flex; gap:.35rem; margin-left:auto; }
.nav a{
  position:relative; padding:.5rem .8rem;
  font-size:.875rem; font-weight:500; color:var(--muted);
  transition:color .25s;
}
.nav a::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.25rem;
  height:2px; background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav a:hover{ color:var(--white); }
.nav a:hover::after{ transform:scaleX(1); }

.header__actions{ display:flex; align-items:center; gap:.9rem; }
.header__phone{ display:flex; flex-direction:column; line-height:1.1; text-align:right; }
.header__phone-label{
  font-family:var(--mono); font-size:.5625rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-2);
}
.header__phone-num{ font-family:var(--display); font-weight:800; font-size:1.125rem; letter-spacing:.02em; }
.header__phone:hover .header__phone-num{ color:var(--red-hot); }

.burger{ display:none; width:42px; height:42px; border:1px solid var(--line-2); border-radius:var(--r); }
.burger span{
  display:block; width:18px; height:2px; background:var(--bone);
  margin:3.5px auto; transition:transform .35s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(3rem,7vw,5.5rem) clamp(4rem,8vw,7rem); }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__glow{
  position:absolute; top:-30%; left:-10%; width:70vw; height:70vw; max-width:900px; max-height:900px;
  background:radial-gradient(circle, rgba(225,6,0,.30) 0%, rgba(225,6,0,.08) 40%, transparent 68%);
  filter:blur(12px);
  animation:breathe 9s ease-in-out infinite alternate;
}
@keyframes breathe{ to{ transform:translate(4%,3%) scale(1.12); opacity:.8; } }
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
}
.hero__ghost{
  position:absolute; right:-3vw; bottom:-6vw;
  font-family:var(--display); font-weight:900; font-size:34vw; line-height:.7;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.05);
  letter-spacing:-.04em; user-select:none;
}

.hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}

.hero__title{
  font-size:clamp(2.9rem,7.6vw,5.6rem);
  margin:1.1rem 0 1.4rem;
  letter-spacing:-.015em;
}
.hero__title .hl{ position:relative; display:inline-block; }
.hero__title .hl::after{
  content:""; position:absolute; left:-.04em; right:-.04em; bottom:.07em; height:.09em;
  background:var(--red); z-index:-1; transform:scaleX(0); transform-origin:left;
  animation:swipe .9s .5s var(--ease) forwards;
}
@keyframes swipe{ to{ transform:scaleX(1); } }

.hero__lead{
  font-size:clamp(1.02rem,1.4vw,1.1875rem);
  color:var(--muted); max-width:56ch; line-height:1.65;
}
.hero__lead strong{ color:var(--bone); font-weight:600; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin:2rem 0 2.2rem; }

.hero__trust{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--line); padding-top:1.6rem;
}
.hero__trust li{
  flex:1 1 30%; min-width:150px;
  display:flex; flex-direction:column; gap:.15rem;
  font-size:.8125rem; color:var(--muted); line-height:1.35;
  padding-right:1rem;
  border-right:1px solid var(--line);
}
.hero__trust li:last-child{ border-right:0; }
.hero__trust li:not(:first-child){ padding-left:1.4rem; }
.hero__trust b{
  font-family:var(--display); font-weight:800; font-size:1.75rem;
  color:var(--red-hot); line-height:1;
}

/* ---------- CARD DE ORÇAMENTO ---------- */
.quote{
  position:relative;
  background:linear-gradient(170deg, var(--ink-3), var(--ink-2) 55%);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 40px 90px -40px #000, inset 0 1px 0 rgba(255,255,255,.06);
}
.quote__tape{
  height:6px;
  background:repeating-linear-gradient(135deg, var(--red) 0 12px, #101012 12px 24px);
}
.quote__head{ padding:1.6rem 1.6rem .25rem; }
.quote__badge{
  display:inline-block; margin-bottom:.7rem;
  padding:.28rem .6rem; border-radius:3px;
  background:var(--red-soft); border:1px solid rgba(225,6,0,.4);
  color:var(--red-hot);
  font-family:var(--mono); font-size:.5625rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
}
.quote__head h2{ font-size:2rem; margin-bottom:.5rem; }
.quote__head p{ font-size:.875rem; color:var(--muted); line-height:1.5; }

.quote__form{ padding:1.35rem 1.6rem 1.7rem; display:grid; gap:.85rem; }
.field{ display:grid; gap:.4rem; }
.field > span{
  font-family:var(--mono); font-size:.5625rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
}
.field input, .field select{
  width:100%; padding:.8rem .9rem;
  background:rgba(0,0,0,.4);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--bone); font-size:.9375rem;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.field input::placeholder{ color:rgba(245,242,237,.28); }
.field input:focus, .field select:focus{
  outline:none; border-color:var(--red);
  background:rgba(0,0,0,.6);
  box-shadow:0 0 0 3px rgba(225,6,0,.16);
}
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F2ED' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:14px;
  padding-right:2.2rem;
}
.field select option{ background:var(--ink-3); color:var(--bone); }
.field.is-error input, .field.is-error select{ border-color:var(--red-hot); box-shadow:0 0 0 3px rgba(255,45,20,.18); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }

.quote__note{
  display:flex; align-items:flex-start; gap:.5rem;
  font-size:.75rem; color:var(--muted-2); line-height:1.45;
}
.quote__note .ico{ width:.95rem; height:.95rem; margin-top:.15rem; fill:var(--wpp); }

/* ---------- STATS ---------- */
.stats{ background:var(--ink-2); }
.stats__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-block:clamp(2rem,4vw,3rem);
}
.stat{ text-align:center; padding-inline:1rem; border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat b{
  display:block; font-family:var(--display); font-weight:900;
  font-size:clamp(2.6rem,5.5vw,4rem); line-height:.9;
  color:var(--white); letter-spacing:-.02em;
}
.stat b .count,
.stat b .slash{ font:inherit; letter-spacing:inherit; }
.stat .slash{ color:var(--red-hot); }
.stat > span{
  display:block; margin-top:.45rem;
  font-family:var(--mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-2); line-height:1.5;
}

/* ---------- SEÇÕES ---------- */
.section{ padding-block:var(--sec-y); position:relative; }
.section--alt{ background:var(--ink-2); border-block:1px solid var(--line); }

.sec-head{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start; margin-bottom:clamp(2.5rem,5vw,4rem);
}
.sec-head--stack{ margin-bottom:2.5rem; }
.sec-num{
  font-family:var(--mono); font-size:.75rem; font-weight:700;
  color:var(--red); letter-spacing:.1em;
  padding-top:.6rem; position:relative;
}
.sec-num::after{
  content:""; display:block; width:34px; height:1px;
  background:linear-gradient(90deg,var(--red),transparent); margin-top:.7rem;
}
.sec-title{ font-size:clamp(2.2rem,5vw,3.75rem); }
.sec-lead{ margin-top:1.1rem; color:var(--muted); max-width:58ch; font-size:1.0625rem; }

/* ---------- CARDS DE SERVIÇO ---------- */
.cards{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
}
.card{
  position:relative; background:var(--ink);
  padding:2rem 1.6rem 1.6rem;
  display:flex; flex-direction:column; gap:.8rem;
  transition:background .4s var(--ease);
  isolation:isolate;
}
.card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 50% 0%, rgba(225,6,0,.18), transparent 65%);
  opacity:0; transition:opacity .45s var(--ease);
}
.card:hover{ background:var(--ink-3); }
.card:hover::before{ opacity:1; }

.card__n{
  font-family:var(--mono); font-size:.625rem; font-weight:700;
  letter-spacing:.14em; color:var(--muted-2);
  position:absolute; top:1.2rem; right:1.3rem;
  transition:color .3s;
}
.card:hover .card__n{ color:var(--red-hot); }

.card__ico{
  width:44px; height:44px; flex:none;
  fill:none; stroke:var(--red-hot); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .5s var(--ease), stroke .3s;
}
.card:hover .card__ico{ transform:translateY(-4px) scale(1.06); stroke:var(--white); }

.card h3{ font-size:1.375rem; letter-spacing:0; margin-top:.2rem; }
.card p{ font-size:.875rem; color:var(--muted); line-height:1.6; flex:1; }
.card__link{
  margin-top:.4rem; align-self:flex-start;
  font-family:var(--mono); font-size:.625rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bone);
  border-bottom:1px solid var(--line-2); padding-bottom:.25rem;
  transition:color .25s, border-color .25s, gap .25s;
  display:inline-flex; align-items:center; gap:.4rem;
}
.card__link::after{ content:"→"; transition:transform .3s var(--ease); }
.card__link:hover{ color:var(--red-hot); border-color:var(--red); }
.card__link:hover::after{ transform:translateX(4px); }

/* ---------- PASSOS ---------- */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1.25rem,3vw,2.25rem);
  counter-reset:s;
}
.step{ position:relative; padding-top:2.6rem; }
.step::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--line-2);
}
.step::after{
  content:""; position:absolute; top:0; left:0; width:0; height:2px;
  background:var(--red);
  transition:width .8s var(--ease) var(--d,0s);
}
.step.is-visible::after{ width:100%; }
.step__n{
  position:absolute; top:.85rem; left:0;
  font-family:var(--mono); font-size:.6875rem; font-weight:700;
  letter-spacing:.14em; color:var(--red);
}
.step h3{ font-size:1.5rem; margin-bottom:.55rem; }
.step p{ font-size:.9375rem; color:var(--muted); line-height:1.6; }
.step p strong{ color:var(--bone); }

/* faixa de CTA intermediária */
.strip-cta{
  margin-top:clamp(3rem,6vw,4.5rem);
  display:flex; align-items:center; justify-content:space-between;
  gap:1.75rem; flex-wrap:wrap;
  padding:clamp(1.5rem,3vw,2.25rem);
  background:linear-gradient(100deg, rgba(225,6,0,.14), rgba(225,6,0,.02));
  border:1px solid rgba(225,6,0,.32);
  border-left:4px solid var(--red);
  border-radius:var(--r);
}
.strip-cta p{ font-size:clamp(1.0625rem,1.8vw,1.375rem); font-weight:500; max-width:60ch; }
.strip-cta b{ color:var(--red-hot); font-weight:700; }

/* ---------- DIFERENCIAIS ---------- */
.diffs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.5vw,2rem); }
.diff{
  padding:1.75rem 1.6rem;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:transform .45s var(--ease), border-color .35s, background .35s;
}
.diff:hover{ transform:translateY(-5px); border-color:rgba(225,6,0,.45); background:var(--ink-3); }
.diff__ico{
  width:32px; height:32px; margin-bottom:1rem;
  fill:none; stroke:var(--red-hot); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.diff h3{ font-size:1.375rem; margin-bottom:.5rem; letter-spacing:0; }
.diff p{ font-size:.9375rem; color:var(--muted); line-height:1.6; }

/* ---------- DEPOIMENTOS ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.5vw,1.75rem); }
.qcard{
  position:relative;
  padding:2rem 1.75rem 1.75rem;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r);
  display:flex; flex-direction:column; gap:1.1rem;
  transition:border-color .35s, transform .45s var(--ease);
}
.qcard::before{
  content:"”"; position:absolute; top:-.3rem; right:1.2rem;
  font-family:var(--display); font-size:7rem; line-height:1;
  color:rgba(225,6,0,.16);
}
.qcard:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.stars{ color:var(--red-hot); letter-spacing:.18em; font-size:.9375rem; }
.qcard blockquote{ font-size:.9375rem; line-height:1.7; color:var(--bone); flex:1; }
.qcard figcaption{ display:flex; flex-direction:column; gap:.15rem; padding-top:1rem; border-top:1px solid var(--line); }
.qcard figcaption b{ font-family:var(--display); font-weight:800; font-size:1.125rem; letter-spacing:.02em; }
.qcard figcaption span{ font-family:var(--mono); font-size:.625rem; letter-spacing:.08em; color:var(--muted-2); }

/* ---------- ÁREAS ---------- */
.areas{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.areas__col{ background:var(--ink); padding:1.75rem 1.5rem; }
.areas--5{ grid-template-columns:repeat(5,1fr); }
.areas__col h3{
  font-size:1.0625rem; letter-spacing:.02em; color:var(--red-hot);
  margin-bottom:1rem; padding-bottom:.7rem; border-bottom:1px solid var(--line);
}
.areas__col h3 a{ transition:color .25s, letter-spacing .25s; }
.areas__col h3 a:hover{ color:var(--white); letter-spacing:.04em; }
.areas__note{
  margin-top:1.5rem; font-size:.9375rem; color:var(--muted); line-height:1.7;
}
.areas__note b{ color:var(--bone); font-weight:600; }
.areas__col li{
  font-size:.875rem; color:var(--muted); padding:.32rem 0 .32rem .95rem;
  position:relative; transition:color .25s, padding-left .25s;
}
.areas__col li::before{
  content:""; position:absolute; left:0; top:.95em;
  width:4px; height:4px; background:var(--red); border-radius:50%;
  transition:transform .25s;
}
.areas__col li:hover{ color:var(--white); padding-left:1.15rem; }
.areas__col li:hover::before{ transform:scale(1.6); }

/* ---------- FAQ ---------- */
.faq-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.faq-wrap .sec-head{ margin-bottom:0; grid-template-columns:auto 1fr; }
.faq-wrap .sec-head .btn{ margin-top:1.5rem; }

.faq{ display:grid; gap:.6rem; }
.faq__item{
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color .3s, background .3s;
}
.faq__item[open]{ border-color:rgba(225,6,0,.4); background:var(--ink-3); }
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 1.25rem; cursor:pointer; list-style:none;
  font-weight:600; font-size:1rem; line-height:1.4;
  transition:color .25s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+"; flex:none;
  font-family:var(--display); font-weight:700; font-size:1.65rem; line-height:1;
  color:var(--red-hot);
  transition:transform .35s var(--ease);
}
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item summary:hover{ color:var(--red-hot); }
.faq__body{ padding:0 1.25rem 1.15rem; }
.faq__body p{ font-size:.9375rem; color:var(--muted); line-height:1.7; }
.faq__body strong{ color:var(--bone); }
.faq__item[open] .faq__body{ animation:reveal .4s var(--ease); }
@keyframes reveal{ from{ opacity:0; transform:translateY(-6px); } }

/* ---------- CTA FINAL ---------- */
.final{
  position:relative; overflow:hidden;
  padding-block:clamp(4.5rem,9vw,8rem);
  text-align:center;
  background:
    radial-gradient(ellipse 70% 100% at 50% 100%, rgba(225,6,0,.28), transparent 65%),
    var(--ink);
  border-top:1px solid var(--line);
}
.final__bg{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.final__ghost{
  font-family:var(--display); font-weight:900; font-size:clamp(12rem,30vw,26rem);
  line-height:1; color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.045);
  letter-spacing:-.04em;
}
.final__inner{ position:relative; z-index:1; display:grid; justify-items:center; gap:0; }
.final h2{ font-size:clamp(2.5rem,7vw,5rem); margin:1.1rem 0 1.2rem; }
.final__lead{ color:var(--muted); max-width:52ch; font-size:1.0625rem; }
.final__cta{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:2.2rem; }

/* ---------- FOOTER ---------- */
.footer{ background:var(--ink-2); border-top:1px solid var(--line); }
.footer__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:clamp(2rem,4vw,3rem);
  padding-block:clamp(3rem,6vw,4.5rem) 2.5rem;
}
.brand--footer{ margin-bottom:1.25rem; }
.brand--footer .brand__mark{ height:88px; padding:7px 13px; }
.footer__brand p{ font-size:.875rem; color:var(--muted); line-height:1.65; max-width:38ch; }
.footer__social{ display:flex; gap:.5rem; margin-top:1.25rem; flex-wrap:wrap; }
.footer__social a{
  padding:.4rem .75rem; border:1px solid var(--line-2); border-radius:99px;
  font-family:var(--mono); font-size:.5625rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); transition:all .25s;
}
.footer__social a:hover{ background:var(--red); border-color:var(--red); color:#fff; }

.footer__col h3{
  font-size:.875rem; letter-spacing:.1em; margin-bottom:1.1rem;
  font-family:var(--mono); font-weight:700; text-transform:uppercase; color:var(--white);
}
.footer__col li{ margin-bottom:.55rem; }
.footer__col a{ font-size:.875rem; color:var(--muted); transition:color .25s, padding-left .25s; }
.footer__col a:hover{ color:var(--red-hot); padding-left:4px; }

.contact li{ display:flex; flex-direction:column; gap:.15rem; margin-bottom:1rem; }
.contact span{
  font-family:var(--mono); font-size:.5625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2);
}
.contact a, .contact b, .contact address{ font-size:.9375rem; color:var(--bone); font-weight:500; line-height:1.45; }
.contact a:hover{ color:var(--red-hot); }

.footer__bottom{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-block:1.4rem; border-top:1px solid var(--line);
}
.footer__bottom p{ font-family:var(--mono); font-size:.625rem; letter-spacing:.06em; color:var(--muted-2); }

/* ---------- FAB + BARRA MOBILE ---------- */
.fab{
  position:fixed; right:1.35rem; bottom:1.35rem; z-index:950;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--wpp); color:#04140A;
  box-shadow:0 14px 34px -10px rgba(34,193,94,.7);
  transition:transform .35s var(--ease);
}
.fab svg{ width:29px; height:29px; fill:currentColor; }
.fab:hover{ transform:scale(1.09) rotate(4deg); }
.fab__pulse{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--wpp); animation:ring 2.6s infinite;
}
@keyframes ring{
  0%{ transform:scale(1); opacity:.7; }
  100%{ transform:scale(1.7); opacity:0; }
}

.mobile-bar{ display:none; }

/* ---------- REVEAL ---------- */
/* A classe .is-visible vem do JS. Se o JS não rodar, o conteúdo ficaria
   invisível — por isso o <noscript> de cada página reverte isto. */
[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease) var(--d,0s), transform .7s var(--ease) var(--d,0s);
}
[data-reveal].is-visible{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1100px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:2.5rem; }
  .diffs{ grid-template-columns:repeat(2,1fr); }
  .areas{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .hero__inner{ grid-template-columns:1fr; }
  .quote{ max-width:520px; }
  .hero__ghost{ font-size:44vw; opacity:.7; }
  .faq-wrap{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  /* o backdrop-filter do header cria bloco de contenção, então position:fixed
     se ancoraria no header. Absoluto logo abaixo dele é o que se comporta bem. */
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; margin:0;
    background:var(--ink);
    border-bottom:1px solid var(--line-2);
    box-shadow:0 26px 44px -22px #000;
    padding:.5rem var(--pad) 1.35rem;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .3s, transform .3s var(--ease);
    z-index:899;
  }
  .nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav a{ padding:1rem 0; border-bottom:1px solid var(--line); font-size:1.0625rem; color:var(--bone); }
  .nav a::after{ left:0; right:auto; width:0; bottom:.5rem; }
  .burger{ display:block; }
  .header__phone, .header__actions .btn{ display:none; }
  .brand__mark{ height:56px; padding:4px 8px; }
  .header.is-stuck .brand__mark{ height:48px; }
  .quotes{ grid-template-columns:1fr; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); row-gap:2rem; }
  .stat:nth-child(2){ border-right:0; }
  .strip-cta{ flex-direction:column; align-items:flex-start; }

  /* barra fixa de ação no mobile */
  .mobile-bar{
    display:grid; grid-template-columns:1fr 1fr;
    position:fixed; inset:auto 0 0 0; z-index:940;
    background:rgba(10,10,11,.96); backdrop-filter:blur(14px);
    border-top:1px solid var(--line-2);
    padding:.55rem .6rem calc(.55rem + env(safe-area-inset-bottom));
    gap:.5rem;
  }
  .mobile-bar a{
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.85rem; border-radius:var(--r);
    font-weight:700; font-size:.9375rem;
  }
  .mobile-bar svg{ width:1.15em; height:1.15em; fill:currentColor; }
  .mobile-bar__call{ background:var(--red); color:#fff; }
  .mobile-bar__wpp{ background:var(--wpp); color:#04140A; }
  /* a barra fixa já cobre WhatsApp e telefone — o FAB vira ruído */
  .fab{ display:none; }
  body{ padding-bottom:76px; }
}

@media (max-width:640px){
  html{ scroll-padding-top:100px; }
  .brand--footer .brand__mark{ height:74px; }
  .cards{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .diffs{ grid-template-columns:1fr; }
  .areas{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .sec-head{ grid-template-columns:1fr; gap:.75rem; }
  .sec-num{ padding-top:0; }
  .sec-num::after{ margin-top:.5rem; }
  .hero__trust li{ flex:1 1 100%; border-right:0; border-bottom:1px solid var(--line); padding:.75rem 0; }
  .hero__trust li:not(:first-child){ padding-left:0; }
  .hero__trust li:last-child{ border-bottom:0; }
  .hero__trust b{ font-size:1.5rem; }
  .btn{ width:100%; }
  .hero__cta .btn, .final__cta .btn{ width:100%; }
  .footer__bottom{ flex-direction:column; text-align:center; }
  .qcard::before{ font-size:5rem; }
}

/* ---------- MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .hero__title .hl::after{ transform:scaleX(1); }
  .step::after{ width:100%; }
}

/* ---------- IMPRESSÃO ---------- */
@media print{
  .header,.topbar,.fab,.mobile-bar,.hero__bg,.final__bg{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* =========================================================
   PÁGINAS DE SERVIÇO (/desentupimento-de-pia-e-ralo/ etc.)
   Reaproveitam header, footer, botões e tokens acima.
   ========================================================= */

/* ---------- MIGALHAS ---------- */
.crumbs{ padding-block:1.5rem .25rem; }
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.crumbs li{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-2);
}
.crumbs li + li::before{ content:"/"; margin-right:.5rem; color:var(--red); }
.crumbs a{ color:var(--muted); transition:color .25s; }
.crumbs a:hover{ color:var(--red-hot); }
.crumbs [aria-current]{ color:var(--bone); }

/* ---------- HERO DA PÁGINA ---------- */
.phero{ position:relative; overflow:hidden; padding-block:clamp(1.5rem,3vw,2.5rem) clamp(3rem,6vw,4.5rem); }
.phero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.phero__bg .hero__glow{ top:-45%; left:-15%; width:60vw; height:60vw; }
.phero__inner{ position:relative; z-index:1; max-width:52rem; }
.phero h1{
  font-size:clamp(2.4rem,5.6vw,4.25rem);
  margin:1rem 0 1.2rem;
  letter-spacing:-.015em;
}
.phero__lead{ font-size:clamp(1rem,1.3vw,1.1875rem); color:var(--muted); max-width:58ch; line-height:1.65; }
.phero__lead strong{ color:var(--bone); font-weight:600; }
.phero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }

/* ---------- LAYOUT: TEXTO + CAIXA FIXA ---------- */
.svc{ padding-block:0 var(--sec-y); }
.svc__layout{
  display:grid; grid-template-columns:1fr 360px;
  gap:clamp(2rem,5vw,4rem); align-items:start;
}

/* ---------- CORPO DO TEXTO ---------- */
.prose > * + *{ margin-top:1.1rem; }
.prose h2{
  font-size:clamp(1.75rem,3.2vw,2.5rem);
  margin-top:clamp(2.75rem,5vw,3.75rem);
  padding-top:1.75rem; border-top:1px solid var(--line);
}
.prose h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.prose h3{ font-size:1.3125rem; letter-spacing:0; margin-top:2rem; }
.prose p{ color:var(--muted); line-height:1.75; }
.prose strong{ color:var(--bone); font-weight:600; }
.prose a{ color:var(--red-hot); border-bottom:1px solid rgba(255,45,20,.35); }
.prose a:hover{ border-color:var(--red-hot); }

.prose ul, .prose ol{ display:grid; gap:.7rem; }
.prose ul li, .prose ol li{
  position:relative; padding-left:1.6rem;
  color:var(--muted); line-height:1.7;
}
.prose ul li::before{
  content:""; position:absolute; left:0; top:.7em;
  width:6px; height:6px; background:var(--red); border-radius:50%;
}
.prose ol{ counter-reset:p; }
.prose ol li{ counter-increment:p; padding-left:2.1rem; }
.prose ol li::before{
  content:counter(p,decimal-leading-zero);
  position:absolute; left:0; top:.12em;
  font-family:var(--mono); font-size:.6875rem; font-weight:700;
  color:var(--red); letter-spacing:.08em;
}

/* lista de sintomas com marcador de alerta */
.signals li::before{
  content:"!"; display:grid; place-items:center;
  width:16px; height:16px; top:.28em; border-radius:3px;
  background:var(--red-soft); border:1px solid rgba(225,6,0,.45);
  color:var(--red-hot);
  font-family:var(--mono); font-size:.625rem; font-weight:700;
}
.signals li{ padding-left:1.9rem; }

/* ---------- QUADRO DE ALERTA ---------- */
.warn{
  padding:1.35rem 1.5rem;
  background:linear-gradient(100deg, rgba(225,6,0,.12), rgba(225,6,0,.02));
  border:1px solid rgba(225,6,0,.3);
  border-left:4px solid var(--red);
  border-radius:var(--r);
}
.warn h3{ font-size:1.125rem; margin:0 0 .5rem; color:var(--red-hot); letter-spacing:.01em; }
.warn p{ font-size:.9375rem; margin:0; }

/* ---------- FICHA TÉCNICA ---------- */
.spec{ width:100%; border-collapse:collapse; font-size:.9375rem; }
.spec th, .spec td{
  padding:.85rem 1rem; text-align:left;
  border-bottom:1px solid var(--line); vertical-align:top;
}
.spec th{
  width:38%;
  font-family:var(--mono); font-size:.625rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2);
}
.spec td{ color:var(--bone); line-height:1.55; }
.spec tr:last-child th, .spec tr:last-child td{ border-bottom:0; }
.spec-wrap{
  overflow-x:auto; border:1px solid var(--line);
  border-radius:var(--r); background:var(--ink-2);
}

/* ---------- CAIXA LATERAL FIXA ---------- */
.svc__aside{ position:sticky; top:120px; display:grid; gap:1rem; }
.ctabox{
  background:linear-gradient(170deg, var(--ink-3), var(--ink-2) 55%);
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 40px 90px -45px #000, inset 0 1px 0 rgba(255,255,255,.06);
}
.ctabox__tape{ height:6px; background:repeating-linear-gradient(135deg, var(--red) 0 12px, #101012 12px 24px); }
.ctabox__in{ padding:1.5rem; display:grid; gap:.9rem; }
.ctabox h2{ font-size:1.75rem; }
.ctabox p{ font-size:.875rem; color:var(--muted); line-height:1.55; }
.ctabox__price{
  display:flex; align-items:baseline; gap:.5rem;
  padding-bottom:.9rem; border-bottom:1px solid var(--line);
}
.ctabox__price b{ font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--red-hot); line-height:1; }
.ctabox__price span{ font-family:var(--mono); font-size:.5625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.ctabox__list{ display:grid; gap:.5rem; }
.ctabox__list li{
  position:relative; padding-left:1.5rem;
  font-size:.8125rem; color:var(--muted); line-height:1.5;
}
.ctabox__list li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--wpp); font-weight:700; font-size:.875rem;
}

/* ---------- SELO DE REVISÃO ---------- */
/* Sinal de frescor: conteúdo com menos de 3 meses é ~3x mais citado por IA. */
.revised{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:1.25rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.625rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted-2); line-height:1.8;
}
.revised time{ color:var(--muted); }

/* ---------- OUTROS SERVIÇOS ---------- */
.related{ display:flex; flex-wrap:wrap; gap:.5rem; }
.related a{
  padding:.6rem 1rem; border:1px solid var(--line-2); border-radius:99px;
  font-size:.8125rem; font-weight:500; color:var(--muted);
  transition:background .25s, border-color .25s, color .25s, transform .3s var(--ease);
}
.related a:hover{
  background:var(--red); border-color:var(--red); color:#fff;
  transform:translateY(-2px);
}

/* bairros: mesma pílula, sem link — é informação, não navegação */
.chip{
  padding:.6rem 1rem; border:1px solid var(--line); border-radius:99px;
  font-size:.8125rem; color:var(--muted-2); background:var(--ink-2);
}

/* rodapé com 3 colunas de links em vez de 2 */
.footer__grid--wide{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; }
@media (max-width:1100px){ .footer__grid--wide{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .footer__grid--wide{ grid-template-columns:1fr; } }

/* ---------- RESPONSIVO DAS PÁGINAS ---------- */
@media (max-width:980px){
  .svc__layout{ grid-template-columns:1fr; }
  .svc__aside{ position:static; max-width:520px; }
}
@media (max-width:640px){
  .spec th{ width:44%; }
  .spec th, .spec td{ padding:.7rem .75rem; font-size:.875rem; }
  .phero__cta .btn{ width:100%; }
}