/* ============================================================
   CONFORTECH v2 — parede pronta
   Paleta herdada da marca (logo): navy #032360 / coral #FF4939
   ============================================================ */

:root{
  color-scheme: light only;

  --navy:      #032360;
  --navy-deep: #021841;
  --navy-900:  #010F2B;
  --navy-700:  #052E7A;
  --navy-500:  #0A3A8C;
  --navy-300:  #6E86B8;
  --navy-100:  #E4E9F4;
  --navy-50:   #F2F5FA;

  --coral:      #FF4939;
  --coral-deep: #FF241C;
  --coral-700:  #E23122;   /* contraste AA sobre branco */
  --coral-100:  #FFE7E4;

  --ink:   #0F1729;
  --ink-2: #43506B;
  --ink-3: #6F7C95;
  --line:  #E2E7F0;
  --paper: #FFFFFF;
  --paper-2: #F7F9FC;

  --sh-s: 0 1px 2px rgba(3,35,96,.06), 0 2px 8px rgba(3,35,96,.05);
  --sh-m: 0 6px 16px rgba(3,35,96,.08), 0 16px 40px rgba(3,35,96,.08);
  --sh-l: 0 12px 28px rgba(3,35,96,.10), 0 32px 80px rgba(3,35,96,.14);

  --r-s: 10px; --r-m: 16px; --r-l: 26px;

  --f-d: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-t: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --wrap: 1200px;
  --nav-h: 72px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-t); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--f-d); font-weight:800; letter-spacing:-.022em; line-height:1.06; margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; border-radius:4px; }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.pular{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-s) 0;
}
.pular:focus{ left:0; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* ---------- tipografia de escala ---------- */
.t1{ font-size:clamp(2.6rem, 6.4vw, 5rem); line-height:1.02; letter-spacing:-.032em; }
.t2{ font-size:clamp(1.85rem, 3.6vw, 2.9rem); line-height:1.08; }
.lead{ font-size:clamp(1.02rem,1.6vw,1.2rem); line-height:1.62; color:var(--ink-2); max-width:56ch; }
.sub{ margin-top:16px; color:var(--ink-2); font-size:1.03rem; max-width:60ch; }
.sub--c{ margin-left:auto; margin-right:auto; }
.sub--luz{ color:rgba(255,255,255,.76); }

.grad{
  background:linear-gradient(100deg,var(--coral) 10%,#FF8A5C 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.tag{
  display:inline-block; font-family:var(--f-d); font-weight:700;
  font-size:.735rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--coral-700); margin:0 0 18px;
}
.tag--luz{ color:#FF8A7C; }

.cab{ max-width:760px; margin-bottom:60px; }
.cab .t2 + .sub{ margin-top:20px; }        /* respiro igual abaixo de todo titulo */
.cab .sub{ max-width:62ch; }
.cab--c{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- botoes ---------- */
.btn{
  --bg: var(--coral-700);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--bg); color:#fff; text-decoration:none;
  font-family:var(--f-d); font-weight:700; font-size:.95rem; letter-spacing:-.01em;
  padding:14px 26px; border:0; border-radius:var(--r-s); cursor:pointer;
  box-shadow:0 2px 10px rgba(226,49,34,.26);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.btn:hover{ background:var(--coral-deep); transform:translateY(-2px); box-shadow:0 8px 22px rgba(226,49,34,.34); }
.btn:active{ transform:translateY(0); }
.btn--lg{ padding:17px 34px; font-size:1.02rem; }
.btn--sm{ padding:10px 18px; font-size:.87rem; }
.btn--full{ width:100%; }
.btn--ghost{
  background:transparent; color:var(--navy); box-shadow:none;
  border:1.5px solid var(--navy-100);
}
.btn--ghost:hover{ background:var(--navy-50); border-color:var(--navy-300); color:var(--navy); box-shadow:none; }
.sec--dark .btn--ghost, .hero .btn--ghost, .obg .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.34); }
.sec--dark .btn--ghost:hover, .hero .btn--ghost:hover, .obg .btn--ghost:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); color:#fff; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s;
}
.nav__in{ display:flex; align-items:center; gap:30px; }
.nav__logo{ flex:none; display:block; }
.nav__logo img{ height:34px; width:auto; transition:opacity .3s; }
.nav__links{ display:flex; gap:26px; margin-left:auto; }
.nav__links a{
  font-size:.9rem; font-weight:500; text-decoration:none; color:rgba(255,255,255,.82);
  position:relative; padding:6px 0; transition:color .2s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--coral); transition:right .28s var(--ease);
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ right:0; }
.nav__cta{ flex:none; }
.nav__burger{ display:none; }

/* estado rolado */
.nav.is-fix{
  background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line), 0 6px 24px rgba(3,35,96,.06);
}
.nav.is-fix .nav__logo img{ filter:invert(1) hue-rotate(180deg) saturate(2.6) brightness(.42); }
.nav.is-fix .nav__links a{ color:var(--ink-2); }
.nav.is-fix .nav__links a:hover{ color:var(--navy); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:calc(var(--nav-h) + 48px) 0 96px; overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 82% 12%, rgba(255,73,57,.13), transparent 62%),
    radial-gradient(ellipse 80% 70% at 12% 88%, rgba(10,58,140,.32), transparent 64%),
    linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 58%, var(--navy-900) 100%);
}
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* grade tecnica, herdada da primeira versao */
.hero__grid{
  position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:90px 90px;
  mask-image:radial-gradient(ellipse 76% 68% at 62% 42%, #000 22%, transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 76% 68% at 62% 42%, #000 22%, transparent 76%);
}
/* halo que respira atras da peca */
.hero__brilho{
  position:absolute; right:6%; top:44%; width:min(46vw,560px); aspect-ratio:1;
  transform:translateY(-50%);
  background:radial-gradient(circle, rgba(255,73,57,.2) 0%, rgba(255,73,57,.07) 38%, transparent 68%);
  animation:respira 8s ease-in-out infinite;
}
@keyframes respira{
  0%,100%{ opacity:.85; transform:translateY(-50%) scale(1); }
  50%{ opacity:1; transform:translateY(-50%) scale(1.1); }
}

.hero__in{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(32px,5vw,72px); align-items:center;
}
.hero__txt{ min-width:0; color:#fff; }
.hero .lead{ color:rgba(255,255,255,.8); margin-top:26px; }
.hero__acoes{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

.hero__marcas{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:52px;
  padding-top:30px; border-top:1px solid rgba(255,255,255,.15);
}
.hero__marcas li{
  display:flex; flex-direction:column; min-width:118px;
  padding-right:26px;
}
.hero__marcas li + li{ border-left:1px solid rgba(255,255,255,.15); padding-left:26px; }
.hero__marcas b{
  font-family:var(--f-d); font-size:1.62rem; font-weight:800; color:#fff; letter-spacing:-.02em;
}
.hero__marcas span{ font-size:.8rem; color:rgba(255,255,255,.6); margin-top:2px; }

/* ---- a peca flutuando (animacao da primeira versao) ---- */
.hero__art{ min-width:0; display:flex; justify-content:center; }
.shot{
  position:relative; margin:0; width:100%; max-width:560px;
  animation:shotIn 1.3s var(--ease) .25s both;
}
.shot picture{
  display:block; animation:flutua 7s ease-in-out 1.55s infinite; will-change:transform;
}
@keyframes flutua{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  35%{ transform:translateY(-11px) rotate(.5deg); }
  70%{ transform:translateY(-5px) rotate(-.35deg); }
}
@keyframes shotIn{
  from{ opacity:0; transform:translateY(34px) scale(.92) rotate(-2.2deg); }
  60%{ opacity:1; transform:translateY(-6px) scale(1.008) rotate(.3deg); }
  to{ opacity:1; transform:none; }
}
.shot img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.3)) drop-shadow(0 4px 10px rgba(0,0,0,.16));
  transition:transform .5s var(--ease);
}
.shot:hover img{ transform:scale(1.025); }
/* sombra no chao, pulsando em contratempo com a flutuacao */
.shot::after{
  content:''; position:absolute; left:50%; bottom:1%;
  transform:translateX(-50%); z-index:-1;
  width:52%; height:26px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.3), rgba(0,0,0,.12) 45%, transparent 74%);
  filter:blur(13px);
  animation:sombraFlutua 7s ease-in-out 1.55s infinite;
}
@keyframes sombraFlutua{
  0%,100%{ transform:translateX(-50%) scale(1); opacity:1; }
  35%{ transform:translateX(-50%) scale(.86); opacity:.6; }
  70%{ transform:translateX(-50%) scale(.94); opacity:.8; }
}

.hero__scroll{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:3;
  width:26px; height:42px; border:1.5px solid rgba(255,255,255,.34); border-radius:14px;
  display:flex; justify-content:center; padding-top:8px;
}
.hero__scroll span{
  width:3px; height:8px; border-radius:2px; background:rgba(255,255,255,.75);
  animation:scr 1.8s var(--ease) infinite;
}
@keyframes scr{ 0%{opacity:0; transform:translateY(-4px);} 40%{opacity:1;} 100%{opacity:0; transform:translateY(12px);} }

/* entrada do hero */
.hero__txt > *{ opacity:0; transform:translateY(22px); animation:sobe .9s var(--ease-out) forwards; }
.hero__txt > *:nth-child(1){ animation-delay:.12s; }
.hero__txt > *:nth-child(2){ animation-delay:.22s; }
.hero__txt > *:nth-child(3){ animation-delay:.34s; }
.hero__txt > *:nth-child(4){ animation-delay:.46s; }
.hero__txt > *:nth-child(5){ animation-delay:.58s; }
@keyframes sobe{ to{ opacity:1; transform:none; } }

/* ============================================================
   SECOES BASE
   ============================================================ */
.sec{ padding:clamp(74px,9vw,132px) 0; position:relative; }
.sec--alt{ background:var(--paper-2); }
.sec--dark{ background:var(--navy-deep); color:#fff; }
.sec--navy{ background:linear-gradient(168deg,var(--navy) 0%,var(--navy-deep) 62%,var(--navy-900) 100%); color:#fff; }
.sec--dark .sub, .sec--navy .sub{ color:rgba(255,255,255,.72); }
.sec--dark .tag, .sec--navy .tag{ color:#FF8A7C; }

/* reveal */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .82s var(--ease-out), transform .82s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.11s; }
.reveal.d2{ transition-delay:.22s; }

/* ============================================================
   2. A DOR — etapas
   ============================================================ */
.etapas{
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px;
  counter-reset:e;
}
.etapas li{
  position:relative; padding:22px 16px 18px;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-m);
  background:rgba(255,255,255,.04);
  font-size:.92rem; font-weight:500; color:rgba(255,255,255,.9);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.etapas li:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.26); transform:translateY(-3px); }
.etapas li span{
  display:block; font-family:var(--f-d); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; color:rgba(255,255,255,.4); margin-bottom:8px;
}
/* as tres primeiras seguem no confortech, as tres ultimas somem */
.etapas li:nth-child(n+3){ opacity:.55; }
.etapas li:nth-child(n+3)::after{
  content:''; position:absolute; left:16px; right:16px; top:50%; height:1px;
  background:var(--coral); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.etapas.is-in li:nth-child(3)::after{ transform:scaleX(1); transition-delay:.5s; }
.etapas.is-in li:nth-child(4)::after{ transform:scaleX(1); transition-delay:.62s; }
.etapas.is-in li:nth-child(5)::after{ transform:scaleX(1); transition-delay:.74s; }
.etapas.is-in li:nth-child(6)::after{ transform:scaleX(1); transition-delay:.86s; }

.corte{
  display:flex; align-items:flex-start; gap:20px; margin-top:36px;
  padding:26px 30px; border-radius:var(--r-m);
  background:rgba(255,73,57,.1); border:1px solid rgba(255,73,57,.3);
}
.corte__seta{ flex:none; width:34px; height:34px; color:var(--coral); }
.corte__seta svg{ width:100%; height:100%; }
.corte p{ color:rgba(255,255,255,.9); font-size:1.02rem; }
.corte b{ color:#fff; }

/* ============================================================
   3 / 8. SISTEMA (texto + imagem)
   ============================================================ */
.sistema__txt .t2 + .sub{ margin-top:20px; }
.sistema{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px); align-items:center;
}
.sistema--inv .sistema__img{ order:-1; }
/* colunas de texto sem titulo proprio comecam alinhadas ao topo da imagem */
.sistema__txt > .lista:first-child,
.sistema__txt > .sub--t:first-child{ margin-top:0; }
.sistema__img{ margin:0; position:relative; }
.sistema__img picture{ display:block; }
.sistema__img img{
  width:100%; height:auto; max-height:520px; object-fit:cover; object-position:center 45%;
  border-radius:var(--r-l); box-shadow:var(--sh-l);
}
.sistema__img figcaption{
  margin-top:14px; font-size:.85rem; color:var(--ink-3); text-align:center;
}
.sec--dark .sistema__img figcaption, .sec--navy .sistema__img figcaption{ color:rgba(255,255,255,.55); }

.lista{ margin-top:30px; display:grid; gap:18px; }
.lista li{
  position:relative; padding-left:30px; color:var(--ink-2); font-size:.99rem; line-height:1.6;
}
.lista li::before{
  content:''; position:absolute; left:0; top:.58em;
  width:11px; height:11px; border-radius:3px;
  background:var(--coral); box-shadow:0 0 0 4px var(--coral-100);
}
.lista b{ color:var(--ink); }
.sec--dark .lista li, .sec--navy .lista li{ color:rgba(255,255,255,.76); }
.sec--dark .lista b, .sec--navy .lista b{ color:#fff; }
.sec--dark .lista li::before, .sec--navy .lista li::before{ box-shadow:0 0 0 4px rgba(255,73,57,.2); }

/* ============================================================
   4. ANATOMIA
   ============================================================ */
.anat{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,5vw,72px); align-items:center; }
.anat__img{ margin:0; position:relative; }
/* a peca flutua solta, sem moldura: o PNG tem fundo transparente, entao
   nada de border-radius nem box-shadow retangular atras dela */
.anat__img picture{
  display:block; animation:flutua 7s ease-in-out .6s infinite; will-change:transform;
}
.anat__img img{
  width:100%; height:auto; max-height:520px; object-fit:contain;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.28)) drop-shadow(0 4px 9px rgba(0,0,0,.14));
}
/* sombra no chao, pulsando em contratempo com a flutuacao */
.anat__img::after{
  content:''; position:absolute; left:50%; bottom:-14px;
  transform:translateX(-50%); z-index:-1;
  width:48%; height:22px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.28), rgba(0,0,0,.1) 45%, transparent 74%);
  filter:blur(14px);
  animation:sombraFlutua 7s ease-in-out .6s infinite;
}
.anat__img figcaption{ margin-top:14px; font-size:.85rem; color:rgba(255,255,255,.55); text-align:center; }

.anat__lista{ display:grid; gap:10px; }
.anat__it{
  display:flex; gap:20px; align-items:flex-start;
  padding:18px 22px; border-radius:var(--r-m); cursor:default;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.anat__it:hover, .anat__it.is-on{
  background:rgba(255,255,255,.1); border-color:rgba(255,73,57,.44); transform:translateX(5px);
}
.anat__n{
  flex:none; font-family:var(--f-d); font-weight:800; font-size:.9rem;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,73,57,.16); color:#FF8A7C;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.anat__it:hover .anat__n, .anat__it.is-on .anat__n{ background:var(--coral); color:#fff; }
.anat__it h3{ font-size:1.03rem; color:#fff; margin-bottom:4px; letter-spacing:-.012em; }
.anat__it p{ font-size:.9rem; color:rgba(255,255,255,.66); line-height:1.55; }

/* ============================================================
   5. NUMEROS
   ============================================================ */
.nums{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.num{
  padding:28px 26px; text-align:left;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--sh-s);
  display:grid; grid-template-rows:auto 1fr; gap:14px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.num:hover{ transform:translateY(-5px); box-shadow:var(--sh-m); border-color:var(--navy-100); }
/* uma frase so, com o dado em destaque no meio dela */
.num__frase{
  font-family:var(--f-d); font-weight:700; font-size:1.06rem; line-height:1.32;
  letter-spacing:-.018em; color:var(--navy);
}
.num__frase b{ color:var(--coral-700); font-weight:800; }
.num__exp{ font-size:.89rem; color:var(--ink-3); line-height:1.55; align-self:start; }

.sec--dark .num, .sec--navy .num{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); box-shadow:none;
}
.sec--dark .num:hover, .sec--navy .num:hover{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.26);
}
.sec--dark .num__frase, .sec--navy .num__frase{ color:#fff; }
.sec--dark .num__frase b, .sec--navy .num__frase b{ color:#FF8A7C; }
.sec--dark .num__exp, .sec--navy .num__exp{ color:rgba(255,255,255,.6); }

.nota{
  margin-top:34px; text-align:center; font-size:.88rem; color:var(--ink-3);
  max-width:76ch; margin-left:auto; margin-right:auto;
}
.nota b{ color:var(--ink-2); }

/* ============================================================
   6. COMPARATIVO
   ============================================================ */
.tab{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-l); box-shadow:var(--sh-m); }
.comp{ width:100%; min-width:660px; border-collapse:collapse; background:var(--paper); font-size:.96rem; }
.comp thead th{
  font-family:var(--f-d); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; text-align:left;
  padding:20px 24px; background:var(--navy-50); border-bottom:1px solid var(--line);
}
.comp thead th.comp__nos{ color:var(--navy); background:var(--navy-100); }
.comp tbody th{
  text-align:left; font-weight:600; color:var(--ink); padding:18px 24px;
  border-bottom:1px solid var(--line); font-size:.94rem;
}
.comp tbody td{ padding:18px 24px; border-bottom:1px solid var(--line); color:var(--ink-3); }
.comp tbody td.comp__nos{ background:rgba(3,35,96,.032); color:var(--ink-2); }
.comp tbody td.comp__nos b{ color:var(--navy); }
.comp tbody tr:last-child th, .comp tbody tr:last-child td{ border-bottom:0; }
.comp tbody tr{ transition:background .2s; }
.comp tbody tr:hover td, .comp tbody tr:hover th{ background:var(--navy-50); }
.comp tbody tr:hover td.comp__nos{ background:var(--navy-100); }

/* ============================================================
   7. GALERIA
   ============================================================ */
/* 6 pecas encaixadas a mao numa grade 4x3, sem sobra:
   linha1-2: video(1) | predio(2x2) | acabamento
   linha2:                            fachada
   linha3:   eletrica(2) | obra(2)                                        */
.galeria{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:214px; gap:16px;
}
.galeria .ga:nth-child(1){ grid-column:1;     grid-row:1 / span 2; }  /* video */
.galeria .ga:nth-child(2){ grid-column:2 / 4; grid-row:1 / span 2; }  /* predio */
.galeria .ga:nth-child(3){ grid-column:4;     grid-row:1; }
.galeria .ga:nth-child(4){ grid-column:4;     grid-row:2; }
.galeria .ga:nth-child(5){ grid-column:1 / 3; grid-row:3; }
.galeria .ga:nth-child(6){ grid-column:3 / 5; grid-row:3; }
.ga{ margin:0; position:relative; overflow:hidden; border-radius:var(--r-m); background:var(--navy-900); }
.ga--alta{ grid-row:span 2; grid-column:span 2; }
.ga picture, .ga img{ width:100%; height:100%; display:block; }
.ga img{ object-fit:cover; transition:transform 1.1s var(--ease-out); }
.ga:hover img{ transform:scale(1.06); }
.ga figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:44px 20px 18px;
  background:linear-gradient(180deg,transparent,rgba(1,15,43,.9));
  color:#fff; display:flex; flex-direction:column; gap:1px;
}
.ga figcaption b{ font-family:var(--f-d); font-size:.98rem; letter-spacing:-.01em; }
.ga figcaption span{ font-size:.8rem; color:rgba(255,255,255,.66); }

/* card de video: mesmo formato vertical da peca alta */
.ga--video{ grid-row:span 2; }
.ga__video{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s var(--ease-out);
}
.ga--video:hover .ga__video{ transform:scale(1.04); }
.ga__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:66px; height:66px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; z-index:2;
  background:rgba(255,73,57,.94); color:#fff;
  box-shadow:0 8px 26px rgba(0,0,0,.4);
  transition:transform .3s var(--ease), background .3s var(--ease), opacity .3s;
}
.ga__play svg{ width:28px; height:28px; margin-left:3px; }
.ga__play:hover{ transform:translate(-50%,-50%) scale(1.08); background:var(--coral-deep); }
.ga--video.is-playing .ga__play,
.obras__video.is-playing .ga__play{ opacity:0; pointer-events:none; }
/* halo pulsando, para o play chamar atencao */
.ga__play::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(255,73,57,.55);
  animation:pulsa 2.4s var(--ease) infinite;
}
@keyframes pulsa{
  0%{ transform:scale(.9); opacity:.9; }
  70%,100%{ transform:scale(1.35); opacity:0; }
}
.ga--video.is-playing .ga__play::before,
.obras__video.is-playing .ga__play::before{ animation:none; }

/* ============================================================
   9. TRES PASSOS
   ============================================================ */
.fluxo{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px;
  position:relative; text-align:center;
}
.fluxo::before{
  content:''; position:absolute; left:16.67%; right:16.67%; top:38px; height:2px;
  background:rgba(255,255,255,.16); z-index:0;
}
.fluxo.is-in::after{
  content:''; position:absolute; left:16.67%; top:38px; height:2px; z-index:1;
  background:linear-gradient(90deg,var(--coral),var(--coral-deep)); width:0;
  animation:linha 1.5s var(--ease) .35s forwards;
}
@keyframes linha{ to{ width:66.66%; } }

.fx{ position:relative; z-index:2; }
.fx__ic{
  width:76px; height:76px; margin:0 auto 22px; border-radius:50%;
  display:grid; place-items:center; position:relative; z-index:3;
  background:var(--navy-500); border:1px solid rgba(255,255,255,.2); color:#fff;
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s;
}
.fx__ic svg{ width:32px; height:32px; }
.fx:hover .fx__ic{ transform:translateY(-4px) scale(1.05); background:var(--coral); border-color:var(--coral); }
.fx h3{ font-size:1.16rem; color:#fff; margin-bottom:10px; }
.fx p{ font-size:.94rem; color:rgba(255,255,255,.68); line-height:1.6; max-width:32ch; margin:0 auto; }

/* ============================================================
   10. CALCULADORA
   ============================================================ */
.calc{
  display:grid; grid-template-columns:1.1fr .9fr; gap:0;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--sh-l); overflow:hidden;
}
.calc__form{
  padding:clamp(26px,3.4vw,44px); display:grid; gap:26px; align-content:start;
  background:var(--paper); color:var(--ink);   /* cartao claro, independente da secao */
}

.campo{ display:block; border:0; padding:0; margin:0; min-width:0; }
.campo__rot, .campo legend{
  display:block; font-family:var(--f-d); font-weight:700; font-size:.79rem;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:10px; padding:0;
}
.calc__form .opt span{ color:var(--ink); }
.calc__form .dica{ color:var(--ink-3); }
.campo input, .campo select, .campo textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--r-s);
  background:var(--paper); font-size:.98rem; transition:border-color .2s, box-shadow .2s;
  /* cor explicita: os campos ficam em cartao branco mesmo dentro de secao escura,
     entao nao podem herdar o color:#fff da secao */
  color:var(--ink); -webkit-text-fill-color:var(--ink);
}
.campo input::placeholder, .campo textarea::placeholder{ color:var(--ink-3); opacity:1; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--navy-700); box-shadow:0 0 0 3.5px rgba(5,46,122,.12);
}
.campo input.err, .campo select.err{ border-color:var(--coral-700); }
.campo textarea{ resize:vertical; min-height:84px; }

.opts{ display:grid; gap:10px; }
.opts--2{ grid-template-columns:repeat(2,1fr); }
.opts--3{ grid-template-columns:repeat(3,1fr); }
.opt{ position:relative; cursor:pointer; }
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.opt span{
  display:block; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--r-s);
  background:var(--paper); transition:border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.opt b{ display:block; font-family:var(--f-d); font-size:.96rem; color:var(--ink); }
.opt small{ display:block; font-size:.79rem; color:var(--ink-3); margin-top:2px; }
.opt:hover span{ border-color:var(--navy-300); }
.opt input:checked + span{
  border-color:var(--navy); background:var(--navy-50); transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(3,35,96,.09);
}
.opt input:checked + span b{ color:var(--navy); }
.opt input:focus-visible + span{ outline:3px solid var(--coral); outline-offset:2px; }

.dica{ margin-top:10px; font-size:.85rem; color:var(--ink-3); }

.pr__cab{
  display:grid; grid-template-columns:1fr 1fr 42px; gap:10px; margin-bottom:8px;
  font-size:.73rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);
}
.pr{
  display:grid; grid-template-columns:1fr 1fr 42px; gap:10px; margin-bottom:10px;
  align-items:center; animation:prIn .35s var(--ease-out);
}
@keyframes prIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.pr input{
  width:100%; padding:12px 13px; border:1.5px solid var(--line); border-radius:var(--r-s);
  font-size:.95rem; transition:border-color .2s, box-shadow .2s;
  background:var(--paper); color:var(--ink); -webkit-text-fill-color:var(--ink);
}
.pr input::placeholder{ color:var(--ink-3); opacity:1; }
.pr input:focus{ outline:none; border-color:var(--navy-700); box-shadow:0 0 0 3.5px rgba(5,46,122,.12); }
.pr__x{
  width:42px; height:42px; border:1.5px solid var(--line); border-radius:var(--r-s);
  background:var(--paper); color:var(--ink-3); cursor:pointer; font-size:1.15rem; line-height:1;
  transition:all .2s var(--ease);
}
.pr__x:hover{ border-color:var(--coral-700); color:var(--coral-700); background:var(--coral-100); }
.pr__x:disabled{ opacity:.35; cursor:not-allowed; }

.calc__go{ justify-self:start; }
.calc__err{ color:var(--coral-700); font-size:.9rem; font-weight:500; }

/* saida */
.calc__out{
  background:linear-gradient(168deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:#fff; padding:clamp(26px,3.4vw,44px); display:flex; flex-direction:column; justify-content:center;
}
.calc__vazio{ text-align:center; color:rgba(255,255,255,.5); }
.calc__vazio-ic{ width:52px; height:52px; margin:0 auto 16px; color:rgba(255,255,255,.28); }
.calc__vazio-ic svg{ width:100%; height:100%; }
.calc__vazio-t{ font-family:var(--f-d); font-weight:700; font-size:1.16rem; color:rgba(255,255,255,.9); margin-bottom:8px; }
.calc__vazio-s{ font-size:.92rem; max-width:34ch; margin:0 auto; }
.calc__como{ margin-top:28px; display:grid; gap:12px; text-align:left; max-width:340px; margin-left:auto; margin-right:auto; }
.calc__como li{
  display:flex; align-items:flex-start; gap:12px; font-size:.88rem;
  color:rgba(255,255,255,.66); line-height:1.5;
}
.calc__como li p{ margin:0; flex:1; min-width:0; }
.calc__como span{
  flex:none; width:23px; height:23px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,73,57,.2); color:#FF8A7C; font-family:var(--f-d); font-weight:700; font-size:.74rem;
}
.calc__como b{ color:#fff; font-weight:600; }

.res{ animation:resIn .55s var(--ease-out); }
@keyframes resIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.res__rot{ font-size:.85rem; color:rgba(255,255,255,.6); margin-bottom:20px; }
.res__hero{
  display:flex; align-items:baseline; gap:14px; padding-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.res__hero b{
  font-family:var(--f-d); font-weight:800; font-size:clamp(3.2rem,7vw,4.6rem); line-height:.92;
  color:#fff; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.res__hero span{ font-size:.92rem; color:rgba(255,255,255,.66); line-height:1.28; }

.res__linhas{ margin:22px 0; display:grid; gap:11px; }
.res__linhas li{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-size:.93rem; }
.res__linhas span{ color:rgba(255,255,255,.62); }
.res__linhas b{ font-family:var(--f-d); color:#fff; font-variant-numeric:tabular-nums; }

.res__eq{
  padding:12px 16px; border-radius:var(--r-s); background:rgba(255,255,255,.07);
  font-size:.81rem; color:rgba(255,255,255,.62); text-align:center; letter-spacing:.01em;
}
.res__equiv{ margin-top:24px; padding-top:22px; border-top:1px solid rgba(255,255,255,.16); }
.res__equiv > p{ font-size:.85rem; color:rgba(255,255,255,.6); margin-bottom:14px; }
.res__equiv ul{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.res__equiv li{ text-align:center; padding:14px 8px; border-radius:var(--r-s); background:rgba(255,255,255,.06); }
.res__equiv b{
  display:block; font-family:var(--f-d); font-size:1.32rem; color:#fff;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.res__equiv span{ display:block; font-size:.74rem; color:rgba(255,255,255,.58); margin-top:3px; }

.res__cta{ width:100%; margin-top:26px; }
.res__nota{ margin-top:14px; font-size:.8rem; color:rgba(255,255,255,.5); text-align:center; }

/* ============================================================
   11. APLICACOES
   ============================================================ */
.apps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.apps li{
  display:flex; align-items:center; gap:16px;
  padding:24px 26px; border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--paper); font-family:var(--f-d); font-weight:700; font-size:1.02rem;
  color:var(--navy); letter-spacing:-.012em;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.apps li:hover{ transform:translateY(-4px); box-shadow:var(--sh-m); border-color:var(--navy-100); }
.apps__ic{
  flex:none; width:44px; height:44px; border-radius:var(--r-s);
  display:grid; place-items:center; background:var(--navy-50); color:var(--navy);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.apps__ic svg{ width:23px; height:23px; }
.apps li:hover .apps__ic{ background:var(--coral); color:#fff; }

/* ============================================================
   12. PROVA
   ============================================================ */
.prova{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.prova__cit{ margin:0; padding-left:26px; border-left:3px solid var(--coral); }
.prova__cit p{
  font-family:var(--f-d); font-weight:600; font-size:clamp(1.28rem,2.4vw,1.72rem);
  line-height:1.3; color:var(--navy); letter-spacing:-.02em;
}
.prova__cit footer{ margin-top:22px; }
.prova__cit b{ display:block; font-family:var(--f-d); color:var(--navy); font-size:1rem; }
.prova__cit span{ font-size:.88rem; color:var(--ink-3); }
.prova__txt{ display:grid; gap:16px; color:var(--ink-2); font-size:1rem; line-height:1.68; }

/* ============================================================
   13. FAQ
   ============================================================ */
.faq{ max-width:880px; margin-inline:auto; }
.faq__lista{ display:grid; gap:0; }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:first-child{ border-top:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--f-d); font-weight:700; font-size:1.02rem; color:var(--navy);
  letter-spacing:-.012em; transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--coral-700); }
.faq summary::after{
  content:''; position:absolute; right:8px; top:50%; width:13px; height:13px;
  margin-top:-6px;
  background:
    linear-gradient(var(--coral-700),var(--coral-700)) center/13px 2px no-repeat,
    linear-gradient(var(--coral-700),var(--coral-700)) center/2px 13px no-repeat;
  transition:transform .3s var(--ease);
}
.faq details[open] summary{ color:var(--coral-700); }
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq details > div{ overflow:hidden; }
.faq details p{ padding:0 44px 24px 0; color:var(--ink-2); font-size:.98rem; line-height:1.68; }
.faq details[open] > div{ animation:abre .38s var(--ease-out); }
@keyframes abre{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* ============================================================
   14. ORCAMENTO
   ============================================================ */
.orc{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(36px,5vw,76px); align-items:start; }
.orc--centro{ display:block; max-width:720px; margin-inline:auto; }
.orc__marcas{ margin-top:32px; display:grid; gap:12px; }
.orc__marcas li{ position:relative; padding-left:28px; color:rgba(255,255,255,.78); font-size:.96rem; }
.orc__marcas li::before{
  content:''; position:absolute; left:0; top:.42em; width:15px; height:9px;
  border-left:2px solid var(--coral); border-bottom:2px solid var(--coral);
  transform:rotate(-45deg);
}
.orc__end{
  margin-top:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.16);
  font-style:normal; font-size:.92rem; color:rgba(255,255,255,.66); line-height:1.62;
}
.orc__end b{ display:block; font-family:var(--f-d); color:#fff; margin-bottom:5px; font-size:1rem; }

.orc__form{
  background:var(--paper); border-radius:var(--r-l); padding:clamp(26px,3.2vw,40px);
  display:grid; gap:20px; box-shadow:var(--sh-l);
}
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.f__msg{ font-size:.93rem; font-weight:500; padding:13px 16px; border-radius:var(--r-s); }
.f__msg.ok{ background:#E9F7EF; color:#1B7A45; }
.f__msg.erro{ background:var(--coral-100); color:var(--coral-700); }
.f__nota{ font-size:.82rem; color:var(--ink-3); text-align:center; }

/* ============================================================
   RODAPE
   ============================================================ */
.rod{
  background:var(--navy-900); color:rgba(255,255,255,.55);
  padding:44px 0 40px;
}
.rod__in{
  display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;
}
.rod__in img{ height:34px; width:auto; opacity:.92; }
.rod__dir{ font-size:.88rem; letter-spacing:.01em; }
.rod__by{ font-size:.82rem; color:rgba(255,255,255,.42); }
.rod__by b{ color:rgba(255,255,255,.72); font-weight:600; }

/* ============================================================
   MODAL
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal__fundo{ position:absolute; inset:0; background:rgba(1,15,43,.72); backdrop-filter:blur(5px); animation:fade .3s; }
@keyframes fade{ from{ opacity:0; } }
.modal__cx{
  position:relative; width:100%; max-width:436px; background:var(--paper);
  border-radius:var(--r-l); padding:36px 32px 32px; box-shadow:var(--sh-l);
  animation:pop .42s var(--ease-out);
}
@keyframes pop{ from{ opacity:0; transform:translateY(20px) scale(.97); } to{ opacity:1; transform:none; } }
.modal__x{
  position:absolute; top:14px; right:16px; width:34px; height:34px;
  border:0; background:transparent; color:var(--ink-3); font-size:1.7rem; line-height:1;
  cursor:pointer; border-radius:50%; transition:background .2s, color .2s;
}
.modal__x:hover{ background:var(--navy-50); color:var(--ink); }
.modal__cx h3{ font-size:1.42rem; color:var(--navy); margin-bottom:10px; }
.modal__cx > p{ color:var(--ink-2); font-size:.95rem; margin-bottom:24px; }
.modal__cx form{ display:grid; gap:16px; }

/* ============================================================
   FAB
   ============================================================ */
.fab{
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:80;
  display:inline-flex; align-items:center; gap:9px;
  background:#25D366; color:#fff; text-decoration:none;
  padding:13px 20px; border-radius:100px;
  font-family:var(--f-d); font-weight:700; font-size:.92rem;
  box-shadow:0 6px 20px rgba(37,211,102,.36);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, box-shadow .25s;
}
.fab.is-on{ opacity:1; visibility:visible; transform:none; }
.fab:hover{ box-shadow:0 10px 28px rgba(37,211,102,.46); transform:translateY(-2px); }
.fab svg{ width:21px; height:21px; flex:none; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1080px){
  .etapas{ grid-template-columns:repeat(3,1fr); }
  .galeria{ grid-template-columns:repeat(2,1fr); }
  .galeria .ga:nth-child(1){ grid-column:1;     grid-row:1 / span 2; }
  .galeria .ga:nth-child(2){ grid-column:2;     grid-row:1 / span 2; }
  .galeria .ga:nth-child(3){ grid-column:1;     grid-row:3; }
  .galeria .ga:nth-child(4){ grid-column:2;     grid-row:3; }
  .galeria .ga:nth-child(5){ grid-column:1;     grid-row:4; }
  .galeria .ga:nth-child(6){ grid-column:2;     grid-row:4; }
}

@media (max-width:900px){
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:0;
    background:var(--paper); padding:0 24px; margin:0;
    max-height:0; overflow:hidden; box-shadow:0 14px 34px rgba(3,35,96,.14);
    transition:max-height .38s var(--ease), padding .38s var(--ease);
  }
  .nav__links.is-open{ max-height:70vh; padding:10px 24px 22px; }
  .nav__links a{ color:var(--ink); padding:15px 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav__links a::after{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{
    display:flex; flex-direction:column; justify-content:center; gap:6px; margin-left:auto;
    width:44px; height:44px; padding:11px; border:0; background:transparent; cursor:pointer;
  }
  .nav__burger span{
    display:block; height:2px; width:100%; background:#fff; border-radius:2px;
    transition:transform .3s var(--ease), opacity .25s;
  }
  .nav.is-fix .nav__burger span{ background:var(--ink); }
  .nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

  .hero__in{ grid-template-columns:1fr; gap:34px; text-align:center; }
  .hero__txt{ max-width:640px; margin:0 auto; }
  .hero .lead{ margin-left:auto; margin-right:auto; }
  .hero__acoes{ justify-content:center; }
  .hero__marcas{ justify-content:center; }
  .hero__art{ order:-1; }
  .shot{ max-width:380px; }
  .hero__grid{ mask-image:radial-gradient(ellipse 84% 60% at 50% 30%, #000 20%, transparent 76%);
               -webkit-mask-image:radial-gradient(ellipse 84% 60% at 50% 30%, #000 20%, transparent 76%); }

  .sistema, .anat, .prova, .faq, .orc, .calc{ grid-template-columns:1fr; }
  .sistema--inv .sistema__img{ order:0; }
  .anat__img{ max-width:440px; margin:0 auto; }
  .nums{ grid-template-columns:repeat(2,1fr); }
  .apps{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px){
  .fluxo{ grid-template-columns:1fr; gap:34px; max-width:420px; margin:0 auto; }
  .fluxo::before, .fluxo.is-in::after{ display:none; }
}
/* no celular as 3 etapas viram carrossel deslizante */
@media (max-width:640px){
  .fluxo{
    display:flex; max-width:none; margin:0; padding:4px 0 16px;
    gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .fluxo::-webkit-scrollbar{ display:none; }
  .fx{
    flex:0 0 78%; scroll-snap-align:center;
    padding:22px 20px; border-radius:var(--r-m);
    background:var(--paper); border:1px solid var(--line);
  }
  .fx__ic{ width:52px; height:52px; margin:0 auto 14px; }
  .fx__ic svg{ width:24px; height:24px; }
  .fx p{ max-width:none; }

}

@media (max-width:640px){
  .wrap{ padding:0 18px; }
  .sec{ padding:64px 0 68px; }
  .cab{ margin-bottom:38px; }

  .hero{ min-height:auto; padding:calc(var(--nav-h) + 22px) 0 60px; }
  .hero__brilho{ right:50%; top:18%; transform:translate(50%,-50%); width:70vw; }
  .hero__in{ gap:22px; }
  .shot{ max-width:245px; }
  .hero .lead{ font-size:.98rem; }
  .hero__marcas{ margin-top:30px; padding-top:20px; }
  .hero__acoes{ margin-top:30px; }
  .hero__acoes .btn{ width:100%; }
  .hero__marcas{ margin-top:38px; padding-top:24px; gap:0; }
  .hero__marcas li{ min-width:0; flex:1; padding-right:12px; }
  .hero__marcas li + li{ padding-left:12px; }
  .hero__marcas b{ font-size:1.28rem; }
  .hero__marcas span{ font-size:.72rem; }
  .hero__scroll{ display:none; }

  .etapas{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .etapas li{ padding:16px 13px 14px; font-size:.87rem; }
  .corte{ flex-direction:column; gap:14px; padding:22px; }

  .nums{ grid-template-columns:1fr; gap:12px; }
  .num{ padding:22px 20px 20px; }
  .num__rot{ padding-bottom:12px; margin-bottom:14px; font-size:.78rem; }
  .num__val{ margin-bottom:10px; }

  .galeria{ grid-template-columns:1fr; grid-auto-rows:236px; }
  .galeria .ga:nth-child(n){ grid-column:1; grid-row:auto; }
  .ga--alta{ grid-row:span 1; }
  .ga--video{ grid-row:span 2; }
  .ga__play{ width:56px; height:56px; }
  .ga__play svg{ width:24px; height:24px; }

  .apps{ grid-template-columns:1fr; }
  .apps li{ padding:18px 20px; font-size:.96rem; }

  .opts--3{ grid-template-columns:1fr; }
  .opts--2 .opt span{ height:100%; }   /* alinha os dois cards de modo */
  .f2{ grid-template-columns:1fr; }

  .pr__cab{ display:none; }
  .pr{ grid-template-columns:1fr 1fr; gap:8px; padding:14px; margin-bottom:12px;
       border:1px solid var(--line); border-radius:var(--r-s); background:var(--paper-2); }
  .pr__x{ grid-column:span 2; width:100%; height:38px; }
  .pr input::placeholder{ opacity:1; color:var(--ink-3); }

  .res__equiv ul{ grid-template-columns:1fr; }
  .res__equiv li{ display:flex; align-items:baseline; justify-content:space-between; text-align:left; padding:12px 16px; }
  .res__equiv b{ font-size:1.16rem; }
  .res__equiv span{ margin-top:0; }


  .fab{ right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); padding:12px 17px; font-size:.87rem; }
  /* o botao flutuante nao pode cobrir a assinatura do rodape */
  .rod{ padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
  .modal__cx{ padding:30px 22px 26px; }
}

/* ---------- acessibilidade ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__txt > *{ opacity:1; transform:none; animation:none; }
  .shot picture, .shot::after, .hero__brilho{ animation:none; }
}

/* ---------- trava o dark automatico do Android ---------- */
@media (prefers-color-scheme:dark){
  :root{ color-scheme:light only; }
  body{ background:var(--paper); color:var(--ink); }
  .sec--alt{ background:var(--paper-2); }
  .num, .apps li, .orc__form, .modal__cx, .calc{ background:var(--paper); }
  .comp{ background:var(--paper); }
}

/* ============================================================
   v2.1 — blocos no registro da referência
   ============================================================ */

/* ---------- faixa de aplicações ---------- */
.strip{
  background:var(--navy); color:#fff; padding:16px 0; overflow:hidden;
  border-block:1px solid var(--navy-deep);
}
.strip__track{ display:flex; width:max-content; animation:desliza 42s linear infinite; }
.strip:hover .strip__track{ animation-play-state:paused; }
@keyframes desliza{ to{ transform:translateX(-50%); } }
.strip__set{ display:flex; align-items:center; }
.strip__set span{
  font-family:var(--f-d); font-size:.84rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
  padding-inline:26px; opacity:.92;
}
.strip__set i{ font-style:normal; color:var(--coral); opacity:.9; }

/* ---------- texto institucional ---------- */
.inst{ max-width:820px; margin:0 auto; display:grid; gap:18px; text-align:center; }
.inst__p{ color:var(--ink-2); font-size:1.06rem; line-height:1.72; }
.inst__p:first-child{ color:var(--ink); font-size:1.16rem; }

/* ---------- tríade de benefícios ---------- */
.tri{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }
.tri__c{
  text-align:center; padding:36px 22px;
  border:1px solid var(--line); border-radius:var(--r-l); background:var(--paper);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tri__c:hover{ transform:translateY(-5px); box-shadow:var(--sh-m); border-color:var(--navy-100); }
.tri__ic{
  display:grid; place-items:center; width:56px; height:56px; margin:0 auto 18px;
  border-radius:var(--r-m); background:var(--navy-50); color:var(--navy);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.tri__ic svg{ width:27px; height:27px; }
.tri__c:hover .tri__ic{ background:var(--coral); color:#fff; }
.tri__c b{
  font-family:var(--f-d); font-size:1.08rem; color:var(--navy);
  line-height:1.24; letter-spacing:-.014em;
}

/* ---------- ficha técnica ---------- */
.sub--t{ margin-top:0; margin-bottom:16px; max-width:none; }
.ficha{ margin:30px 0 0; display:grid; gap:0; border-top:1px solid var(--line); }
.ficha > div{
  display:grid; grid-template-columns:minmax(120px,.4fr) 1fr; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.ficha dt{
  font-family:var(--f-d); font-weight:700; font-size:.79rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
}
.ficha dd{ margin:0; color:var(--ink); font-size:.97rem; font-weight:500; }

/* ---------- lista de benefícios ---------- */
.benef{ margin-top:64px; }
.benef__rot{
  font-family:var(--f-d); font-weight:700; font-size:.79rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--coral-700);
  margin-bottom:20px;
}
.benef__rot--sm{ margin-top:32px; margin-bottom:14px; }
.benef__lista{ display:flex; flex-wrap:wrap; gap:10px; }
.benef__lista li{
  padding:11px 20px; border-radius:100px; font-size:.93rem; font-weight:500;
  background:var(--navy-50); color:var(--navy); border:1px solid var(--navy-100);
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.benef__lista li:hover{ background:var(--navy); color:#fff; transform:translateY(-2px); }
.benef__lista--claro li{ background:var(--paper); }

/* onde aplicar, em fluxo */
.fluxo-txt{ color:var(--ink-2); font-size:.98rem; line-height:2; }
.fluxo-txt i{ font-style:normal; color:var(--coral-700); padding:0 6px; font-weight:700; }

/* ---------- acabamento ---------- */
.acab{
  margin-top:56px; padding:34px 40px; border-radius:var(--r-l);
  background:var(--navy-50); border:1px solid var(--navy-100);
}
.acab h3{
  font-family:var(--f-d); font-size:1.16rem; color:var(--navy); margin-bottom:12px;
  letter-spacing:-.014em;
}
.acab p{ color:var(--ink-2); font-size:1rem; line-height:1.72; max-width:88ch; }

/* ---------- comparativo: peça em destaque + trilha alinhada ---------- */
.vs{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
  margin-bottom:64px; align-items:stretch;
}

.trk{
  border-radius:var(--r-l); padding:30px 30px 26px;
  border:1px solid var(--line); background:var(--paper);
  display:grid; grid-template-columns:auto 1fr; gap:28px;
  align-items:stretch;
}
.trk--ruim{
  background:linear-gradient(150deg,#FFF7F6,#FFEFEC);
  border-color:rgba(226,49,34,.24);
}
.trk--bom{
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-deep) 100%);
  border-color:var(--navy-700);
  box-shadow:0 14px 34px rgba(3,35,96,.22);
}

/* a peca em corte, grande: e o ativo que explica o produto */
.trk__peca{
  margin:0; display:flex; align-items:center; justify-content:center;
  width:132px;
}
/* o <picture> com height:100% empurrava a peca para o topo:
   agora ele acompanha a imagem e o flex centra de verdade */
.trk__peca picture{ display:flex; align-items:center; }
.trk__peca img{
  width:auto; height:100%; max-height:380px; object-fit:contain;
  filter:drop-shadow(0 12px 22px rgba(3,35,96,.14)) drop-shadow(0 3px 7px rgba(3,35,96,.09));
}
.trk--bom .trk__peca img{ filter:drop-shadow(0 12px 24px rgba(0,0,0,.28)) drop-shadow(0 3px 7px rgba(0,0,0,.16)); }

.trk__corpo{ display:flex; flex-direction:column; min-width:0; gap:18px; }

/* topo: nome do sistema e a contagem, sem numero gigante roubando a cena */
.trk__topo{ padding-bottom:16px; border-bottom:1px solid var(--line); }
.trk--bom .trk__topo{ border-bottom-color:rgba(255,255,255,.16); }
.trk__topo h3{
  font-family:var(--f-d); font-size:1.14rem; letter-spacing:-.016em;
  color:var(--ink-3); margin-bottom:6px; min-height:1.3em;
}
.trk--ruim .trk__topo h3{ color:var(--coral-700); }
.trk--bom .trk__topo h3{ color:#fff; }
.trk__c{ font-size:.92rem; color:var(--ink-3); min-height:1.9em; }
.trk__c b{
  font-family:var(--f-d); font-weight:800; font-size:1.5rem;
  letter-spacing:-.03em; color:var(--coral-700); margin-right:4px;
}
.trk--bom .trk__c{ color:rgba(255,255,255,.62); }
.trk--bom .trk__c b{ color:#fff; }

/* trilha: 6 faixas de altura fixa nos dois lados, para as etapas se alinharem */
.trk__fluxo{ display:grid; grid-template-rows:repeat(6,44px); gap:8px; }
.trk__fluxo li{
  display:flex; align-items:center; gap:11px; padding:0 16px;
  border-radius:var(--r-s);
  background:var(--paper); border:1px solid var(--line);
}
.trk--ruim .trk__fluxo li{ background:#fff; border-color:rgba(226,49,34,.2); }
.trk--bom .trk__fluxo li{ background:rgba(255,255,255,.1); border-color:transparent; }

/* as etapas que o sistema elimina, marcadas do lado bom */
.trk__pulo{
  background:transparent !important; border:1px dashed rgba(255,255,255,.2) !important;
}
.trk__pulo span{
  font-size:.86rem; color:rgba(255,255,255,.42); text-decoration:line-through;
  text-decoration-color:rgba(255,138,124,.6);
}

.trk__i{
  flex:none; display:grid; place-items:center;
  width:24px; height:24px; border-radius:50%;
  font-family:var(--f-d); font-weight:800; font-size:.73rem;
  background:var(--coral-700); color:#fff;
}
.trk--bom .trk__i{ background:#fff; color:var(--navy); }
.trk__fluxo b{
  font-family:var(--f-d); font-weight:600; font-size:.93rem;
  letter-spacing:-.012em; color:var(--ink);
}
.trk--bom .trk__fluxo b{ color:#fff; }

/* selo de fecho nos dois cards, na mesma linha */
.trk__selo{
  margin-top:auto; padding:12px 16px; border-radius:var(--r-s);
  font-family:var(--f-d); font-weight:700; font-size:.9rem;
  letter-spacing:-.01em; text-align:center;
  height:52px; display:grid; place-items:center;   /* caixa fixa: os dois selos comecam e terminam juntos */
}
.trk--ruim .trk__selo{
  background:rgba(226,49,34,.09); border:1px solid rgba(226,49,34,.2); color:var(--coral-700);
}
.trk--bom .trk__selo{
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); color:#fff;
}

@media (max-width:1080px){
  .trk{ padding:24px 22px; gap:20px; }
  .trk__selo{ font-size:.83rem; padding:10px 12px; }
  .trk__peca{ width:104px; }
  .trk__peca img{ max-height:320px; }
  .trk__fluxo{ grid-template-rows:repeat(6,40px); gap:7px; }
  .trk__fluxo b{ font-size:.87rem; }
  .trk__fluxo li{ padding:0 12px; gap:9px; }
}
@media (max-width:760px){
  .vs{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width:760px){
  .trk__peca{ width:120px; }
  .trk__peca img{ max-height:300px; }
  .trk__fluxo{ grid-template-rows:repeat(6,42px); }
  .trk__fluxo b{ font-size:.92rem; }
}
@media (max-width:420px){
  .trk{ padding:20px 16px; gap:14px; }
  .trk__peca{ width:82px; }
  .trk__fluxo li{ padding:0 11px; gap:8px; }
  .trk__i{ width:21px; height:21px; font-size:.68rem; }
  .trk__fluxo b{ font-size:.85rem; }
  .trk__pulo span{ font-size:.79rem; }
}

/* ---------- numeração nas etapas de assentamento ---------- */
.fx__n{
  display:block; font-family:var(--f-d); font-weight:800; font-size:.78rem;
  letter-spacing:.12em; color:var(--coral-700); margin-bottom:8px;
}
.sec--navy .fx__n, .sec--dark .fx__n{ color:#FF8A7C; }
.sec--alt .fluxo::before{ background:var(--line); }
.sec--alt .fx__ic{
  background:var(--paper); border-color:var(--line); color:var(--navy);
  box-shadow:var(--sh-s);
}
.sec--alt .fx:hover .fx__ic{ background:var(--coral); border-color:var(--coral); color:#fff; }
.sec--alt .fx h3{ color:var(--navy); }
.sec--alt .fx p{ color:var(--ink-2); }

/* ---------- responsivo dos blocos novos ---------- */
@media (max-width:900px){
  .tri{ grid-template-columns:1fr; gap:14px; }
  .tri__c{ display:flex; align-items:center; gap:18px; text-align:left; padding:20px 24px; }
  .tri__ic{ margin:0; flex:none; }
  .acab{ padding:26px 24px; }
}
@media (max-width:640px){
  .strip__set span{ font-size:.75rem; padding-inline:16px; }
  .inst{ text-align:left; }
  .inst__p{ font-size:.99rem; }
  .inst__p:first-child{ font-size:1.06rem; }
  .ficha > div{ grid-template-columns:1fr; gap:3px; padding:12px 0; }
  .benef__lista li{ padding:9px 16px; font-size:.87rem; }
  .vs__img{ height:320px; padding:20px 16px; }
  .vs__img img{ height:274px; }
  .vs__et{ min-height:0; }
  .vs__et--nos{ gap:9px; }
  .vs__et--nos li{ font-size:.95rem; }
  .fluxo-txt{ font-size:.93rem; line-height:1.9; }
}

/* ============================================================
   CTA intermediário — porta de saída no meio da página
   ============================================================ */
.cta-meio{
  margin-top:56px; padding:26px 32px;
  display:flex; align-items:center; justify-content:center;
  gap:32px; flex-wrap:wrap;
  border-radius:var(--r-l);
  background:var(--navy-50); border:1px solid var(--navy-100);
}
.cta-meio__txt{ display:grid; gap:4px; }
.cta-meio__txt b{
  font-family:var(--f-d); font-weight:700; font-size:1.1rem;
  color:var(--navy); letter-spacing:-.016em;
}
.cta-meio__txt span{ font-size:.92rem; color:var(--ink-3); }
.cta-meio .btn{ flex:none; }
/* sobre fundo escuro */
.sec--dark .cta-meio, .sec--navy .cta-meio, .cta-meio--luz{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16);
}
.sec--dark .cta-meio__txt b, .sec--navy .cta-meio__txt b{ color:#fff; }
.sec--dark .cta-meio__txt span, .sec--navy .cta-meio__txt span{ color:rgba(255,255,255,.62); }

/* ficha técnica sobre fundo escuro */
.ficha--luz{ margin-top:56px; border-top-color:rgba(255,255,255,.16); }
.ficha--luz > div{ border-bottom-color:rgba(255,255,255,.14); }
.ficha--luz dt{ color:rgba(255,255,255,.55); }
.ficha--luz dd{ color:#fff; }

@media (max-width:640px){
  .cta-meio{ flex-direction:column; align-items:stretch; text-align:center; padding:22px 20px; gap:16px; }
  .cta-meio__txt b{ font-size:1.02rem; }
  .cta-meio__txt span{ font-size:.88rem; }
  .cta-meio .btn{ width:100%; }
}

/* ============================================================
   v2.2 — hero rotativo, specs, CTA forte, rodapé
   ============================================================ */

/* ---------- palavra que gira no hero ---------- */
.rota{
  display:inline-grid; vertical-align:top;
}
.rota__i{
  grid-area:1/1; opacity:0; transform:translateY(16px);
  background:linear-gradient(100deg,var(--coral) 10%,#FF8A5C 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:opacity .32s var(--ease-out), transform .32s var(--ease-out);
  white-space:nowrap;
}
.rota__i.is-on{ opacity:1; transform:none; }
.rota__i.is-out{ opacity:0; transform:translateY(-16px); }

/* em caixa alta o titulo fica mais largo: reduz para caber em duas linhas */
.hero .t1{ font-size:clamp(2rem, 4.1vw, 3.3rem); letter-spacing:-.028em; }
.hero__acoes{ margin-top:34px; }

/* ---------- cards de especificação ---------- */
.specs{
  margin-top:56px; display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
.spec{
  padding:26px 20px; border-radius:var(--r-m); text-align:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.spec:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); transform:translateY(-4px); }
.spec__ic{
  display:grid; place-items:center; width:42px; height:42px; margin:0 auto 16px;
  border-radius:var(--r-s); background:rgba(255,73,57,.16); color:#FF8A7C;
}
.spec__ic svg{ width:21px; height:21px; }
.spec b{
  display:block; font-family:var(--f-d); font-size:1.04rem; color:#fff;
  letter-spacing:-.016em; margin-bottom:6px;
}
.spec p{ font-size:.85rem; color:rgba(255,255,255,.6); line-height:1.5; }

/* ---------- título e CTA da tabela ---------- */
.tab__t{
  font-family:var(--f-d); font-size:clamp(1.3rem,2.2vw,1.72rem); color:var(--navy);
  text-align:center; letter-spacing:-.02em; margin-bottom:26px;
}
.cta-forte{ margin-top:44px; text-align:center; }
.btn--xl{
  padding:21px 46px; font-size:1.1rem; border-radius:var(--r-m);
  box-shadow:0 6px 24px rgba(226,49,34,.32);
}
.btn--xl:hover{ box-shadow:0 12px 34px rgba(226,49,34,.42); }

/* ---------- aviso da calculadora ---------- */
.calc__aviso{
  margin-top:26px; text-align:center; font-size:.9rem; line-height:1.6;
  color:rgba(255,255,255,.62); max-width:74ch; margin-left:auto; margin-right:auto;
}
.calc__aviso b{ color:#fff; }

/* ---------- rodapé com endereço e instagram ---------- */
.rod__end{
  font-style:normal; font-size:.86rem; line-height:1.75;
  color:rgba(255,255,255,.5); text-align:center;
}
.rod__end a{ color:rgba(255,255,255,.72); text-decoration:none; transition:color .2s; }
.rod__end a:hover{ color:var(--coral); }
.rod__by a{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  transition:color .2s;
}
.rod__by a:hover{ color:var(--coral); }
.rod__by svg{ width:15px; height:15px; }

@media (max-width:1080px){
  .specs{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .specs{ grid-template-columns:1fr; gap:12px; margin-top:38px; }
  /* specs deslizam na horizontal, como as etapas */
  .specs{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:14px;
  }
  .specs::-webkit-scrollbar{ display:none; }
  .spec{
    flex:0 0 66%; scroll-snap-align:center;
    display:block; text-align:center; padding:22px 18px;
  }
  .spec__ic{ margin:0 auto 14px; width:42px; height:42px; }
  .spec__ic svg{ width:21px; height:21px; }
  .spec b{ margin-bottom:5px; font-size:1rem; }
  .spec p{ font-size:.85rem; }
  .nums{ grid-template-columns:1fr; }
  .btn--xl{ width:100%; padding:18px 24px; font-size:1rem; }
  .hero .t1{ font-size:clamp(2rem,8vw,2.6rem); }
}

/* ============================================================
   OBRAS — vídeo de um lado, mosaico do outro
   ============================================================ */
.obras{ display:grid; grid-template-columns:.86fr 1.14fr; gap:18px; align-items:stretch; }
.obras__video{
  position:relative; margin:0; overflow:hidden; border-radius:var(--r-m);
  background:var(--navy-900); min-height:520px;
}
.obras__video .ga__video{ width:100%; height:100%; object-fit:cover; display:block; }
.obras__mosaico{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.obras__mosaico .ga{ margin:0; position:relative; overflow:hidden; border-radius:var(--r-m); background:var(--navy-900); }
.obras__mosaico .ga picture, .obras__mosaico .ga img{ width:100%; height:100%; display:block; }
.obras__mosaico .ga img{ object-fit:cover; transition:transform 1.1s var(--ease-out); }
.obras__mosaico .ga:hover img{ transform:scale(1.06); }
.obras figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:38px 18px 15px;
  background:linear-gradient(180deg,transparent,rgba(1,15,43,.9)); color:#fff;
}
.obras figcaption b{ display:block; font-family:var(--f-d); font-size:.95rem; letter-spacing:-.01em; }
.obras__video.is-playing figcaption{ opacity:0; transition:opacity .3s; pointer-events:none; }
.obras figcaption span{ font-size:.79rem; color:rgba(255,255,255,.66); }

/* ============================================================
   MOBILE — passada de otimização
   ============================================================ */
@media (max-width:900px){
  .obras{ grid-template-columns:1fr; }
  .obras__video{ min-height:400px; }
}
@media (max-width:640px){
  /* respiro geral menor, para a página não ficar interminável */
  .sec{ padding:52px 0 56px; }
  .cab{ margin-bottom:30px; }
  .t2{ font-size:clamp(1.6rem,6.6vw,2rem); }
  .sub{ font-size:.97rem; }
  .lead{ font-size:1rem; }

  /* hero mais curto e centrado */
  .hero{ min-height:auto; padding:calc(var(--nav-h) + 18px) 0 46px; }
  .hero .t1{ font-size:clamp(1.7rem,7.4vw,2.2rem); line-height:1.1; }
  .hero__acoes{ margin-top:26px; }
  .hero__acoes .btn{ width:100%; }
  .shot{ max-width:215px; }
  .hero__brilho{ width:64vw; top:16%; }

  /* obras: vídeo cheio e mosaico 2×2 */
  .obras{ gap:12px; }
  .obras__video{ min-height:340px; }
  .obras__mosaico{ gap:12px; }
  .obras__mosaico .ga{ aspect-ratio:1; }
  .obras figcaption{ padding:30px 14px 12px; }
  .obras figcaption b{ font-size:.86rem; }

  /* trilhas e specs mais compactos */
  .trk{ padding:20px 18px; }
  .spec{ padding:14px 16px; }

  /* estudo: uma coluna, texto maior */
  .num{ padding:22px 20px; gap:10px; }
  .num__frase{ font-size:1.02rem; }

  /* calculadora e formulário com toque confortável */
  .calc__form{ padding:22px 18px; gap:22px; }
  .calc__out{ padding:24px 18px; }
  .pr input, .campo input, .campo select, .campo textarea{ font-size:16px; }  /* evita zoom no iOS */
  .orc__form{ padding:22px 18px; }

  /* no celular a tabela continua sendo TABELA: cada criterio e uma linha
     compacta com os dois valores lado a lado e a diferenca em destaque */
  .tab{ overflow:visible; box-shadow:none; border-radius:var(--r-m); padding-bottom:0; }
  .comp{ min-width:0; background:var(--paper); font-size:.88rem; }
  .comp thead{ display:none; }
  .comp tbody{ display:block; }
  .comp tbody tr{
    display:grid; grid-template-columns:1fr 1fr;
    gap:0 8px; width:100%; padding:11px 14px;
    border-bottom:1px solid var(--line);
  }
  .comp tbody tr:last-child{ border-bottom:0; }

  /* nome do criterio ocupa a linha toda, acima dos valores */
  .comp tbody th{
    grid-column:1 / -1;
    padding:0 0 7px; border:0; font-size:.76rem; color:var(--ink-3);
    font-family:var(--f-d); letter-spacing:.04em; text-transform:uppercase;
  }
  /* os dois valores dividem a largura */
  .comp tbody td{
    padding:7px 10px; border:0; border-radius:var(--r-s);
    margin:0; font-size:.92rem; line-height:1.3;
  }
  .comp tbody td::before{
    content:'Alvenaria'; display:block; margin-bottom:2px;
    font-size:.64rem; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; color:var(--ink-3);
  }
  .comp tbody td.comp__nos{ background:var(--navy-50); }
  .comp tbody td.comp__nos::before{ content:'Confortech'; color:var(--navy); }
  /* a diferenca fecha a linha, ocupando a largura inteira */
  .comp tbody td.comp__dif{
    grid-column:1 / -1; margin-top:7px; background:var(--coral-100);
    display:flex; align-items:baseline; gap:7px;
  }
  .comp tbody td.comp__dif::before{
    content:'Diferença'; color:var(--coral-700); margin-bottom:0;
  }
  .comp tbody tr:hover td.comp__nos{ background:var(--navy-50); }

  /* linha de total em destaque */
  .comp tbody tr.comp__total{
    background:var(--navy); border-bottom:0; border-radius:var(--r-m);
    margin-top:2px; padding:14px;
  }
  .comp tbody tr.comp__total th{ color:rgba(255,255,255,.6); }
  .comp tbody tr.comp__total td{ color:rgba(255,255,255,.72); }
  .comp tbody tr.comp__total td::before{ color:rgba(255,255,255,.5); }
  .comp tbody tr.comp__total td.comp__nos{ background:rgba(255,255,255,.12); }
  .comp tbody tr.comp__total td.comp__nos::before{ color:#fff; }
  .comp tbody tr.comp__total td.comp__nos b{ color:#fff; }
  .comp tbody tr.comp__total td.comp__dif{ background:rgba(255,73,57,.22); }
  .comp tbody tr.comp__total td.comp__dif::before{ color:rgba(255,255,255,.72); }
  .comp tbody tr.comp__total td.comp__dif b{ color:#fff; }

  .tab__t{ font-size:1.18rem; margin-bottom:18px; }
  .calc__aviso{ font-size:.86rem; }
}

/* ============================================================
   PÁGINA DE OBRIGADO
   ============================================================ */
.pag-obrigado{ background:var(--navy-deep); }
.nav--simples{ position:static; background:transparent; box-shadow:none; }
.nav--simples .nav__in{ justify-content:flex-start; }

.obg{
  min-height:calc(100svh - var(--nav-h)); display:flex; align-items:center;
  padding:40px 0 72px;
  background:
    radial-gradient(ellipse 70% 60% at 82% 8%, rgba(255,73,57,.12), transparent 62%),
    radial-gradient(ellipse 80% 70% at 12% 92%, rgba(10,58,140,.3), transparent 64%),
    linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 58%, var(--navy-900) 100%);
}
.obg__in{ max-width:760px; text-align:center; color:#fff; }
.obg__ic{
  width:74px; height:74px; margin:0 auto 30px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg,#22C55E,#16A34A);
  box-shadow:0 12px 34px rgba(34,197,94,.32);
  animation:obgPop .6s var(--ease-out) both;
}
.obg__ic svg{ width:34px; height:34px; }
@keyframes obgPop{
  from{ opacity:0; transform:scale(.6); }
  60%{ transform:scale(1.08); }
  to{ opacity:1; transform:none; }
}
.obg h1{ color:#fff; margin-bottom:18px; }
.obg__sub{
  color:rgba(255,255,255,.74); font-size:1.04rem; line-height:1.66;
  max-width:56ch; margin:0 auto;
}

.obg__passos{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin:44px 0; text-align:left;
}
.obg__passos li{
  display:flex; gap:14px; padding:20px 18px; border-radius:var(--r-m);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
}
.obg__passos span{
  flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--coral); color:#fff;
  font-family:var(--f-d); font-weight:800; font-size:.8rem;
}
.obg__passos b{
  display:block; font-family:var(--f-d); font-size:.98rem; color:#fff;
  letter-spacing:-.014em; margin-bottom:4px;
}
.obg__passos p{ font-size:.87rem; color:rgba(255,255,255,.6); line-height:1.5; }

.obg__acoes{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.obg__end{
  margin-top:44px; padding-top:28px; border-top:1px solid rgba(255,255,255,.14);
  font-style:normal; font-size:.9rem; color:rgba(255,255,255,.6); line-height:1.7;
}
.obg__end b{ display:block; font-family:var(--f-d); color:#fff; margin-bottom:6px; }
.obg__end a{ color:rgba(255,255,255,.78); }

@media (max-width:760px){
  .obg__passos{ grid-template-columns:1fr; gap:12px; margin:34px 0; }
  .obg__acoes .btn{ width:100%; }
  .obg{ padding:24px 0 56px; }
}

/* ============================================================
   MOBILE — mais respiro: fontes e imagens menores
   ============================================================ */
@media (max-width:640px){
  .sec{ padding:56px 0 60px; }
  .wrap{ padding:0 18px; }
  .cab{ margin-bottom:30px; }

  /* tipografia um passo abaixo */
  .t2{ font-size:clamp(1.3rem,5.2vw,1.58rem); }
  .sub{ font-size:.88rem; line-height:1.6; }
  .lead{ font-size:.9rem; }
  .hero .t1{ font-size:clamp(1.4rem,6vw,1.76rem); }
  .inst__p{ font-size:.88rem; }
  .inst__p:first-child{ font-size:.95rem; }
  .lista li{ font-size:.88rem; }
  .fx h3{ font-size:1.02rem; }
  .fx p{ font-size:.87rem; }
  .anat__it h3{ font-size:.95rem; }
  .anat__it p{ font-size:.85rem; }
  .faq summary{ font-size:.94rem; }
  .faq details p{ font-size:.9rem; }
  .btn{ font-size:.9rem; padding:13px 22px; }
  .btn--lg{ padding:15px 26px; font-size:.95rem; }

  /* imagens com menos peso na tela */
  .shot{ max-width:150px; }
  .anat__img img{ max-height:230px; }
  .sistema__img img{ max-height:280px; }
  .trk__peca{ width:60px; }
  .trk__peca img{ max-height:200px; }
  .obras__video{ min-height:250px; }

  /* sombras mais discretas na tela pequena */
  .shot img, .anat__img img{ filter:drop-shadow(0 10px 20px rgba(0,0,0,.24)); }
  .shot::after, .anat__img::after{ opacity:.55; }

  /* respiro entre blocos */
  .specs{ margin-top:36px; }
  .benef{ margin-top:44px; }
  .acab{ margin-top:40px; }
  .vs{ margin-bottom:40px; }
  .cta-meio, .cta-forte{ margin-top:38px; }
  .anat{ gap:30px; }
  .sistema{ gap:30px; }
  .tab__t{ margin-top:8px; }
  .nota{ margin-top:26px; }
  .faq details p{ padding-bottom:20px; }
  .nums{ gap:10px; }
  .num{ padding:20px 18px; }
  .num__frase{ font-size:.97rem; }
  .num__exp{ font-size:.85rem; }
  .obg__passos li{ padding:16px 16px; }
}

/* pontos dos carrosséis — só no celular */
.carr__pontos{ display:none; }
@media (max-width:640px){
  .carr__pontos{ display:flex; justify-content:center; gap:8px; margin:2px 0 4px; }
  .carr__pontos span{
    width:7px; height:7px; border-radius:50%;
    background:var(--navy-100); transition:all .3s var(--ease);
  }
  .carr__pontos span.is-on{ width:22px; border-radius:4px; background:var(--coral-700); }
  .sec--dark .carr__pontos span, .sec--navy .carr__pontos span{ background:rgba(255,255,255,.24); }
  .sec--dark .carr__pontos span.is-on, .sec--navy .carr__pontos span.is-on{ background:var(--coral); }
}

/* ============================================================
   ENTRADA DAS SEÇÕES — animações por tipo de conteúdo
   ============================================================ */

/* o reveal base ganha um leve zoom, que dá sensação de aproximação */
.reveal{ transform:translateY(26px) scale(.994); }
.reveal.is-in{ transform:none; }

/* --- cabeçalho: tag, título e subtítulo entram em cascata --- */
.cab.is-in > *{ animation:sobeSuave .7s var(--ease-out) both; }
.cab.is-in > *:nth-child(1){ animation-delay:.02s; }
.cab.is-in > *:nth-child(2){ animation-delay:.12s; }
.cab.is-in > *:nth-child(3){ animation-delay:.22s; }
@keyframes sobeSuave{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

/* --- listas de argumentos: cada item entra depois do anterior --- */
.lista.is-in li, .reveal.is-in .lista li{ animation:entraLado .6s var(--ease-out) both; }
.reveal.is-in .lista li:nth-child(1){ animation-delay:.08s; }
.reveal.is-in .lista li:nth-child(2){ animation-delay:.18s; }
.reveal.is-in .lista li:nth-child(3){ animation-delay:.28s; }
.reveal.is-in .lista li:nth-child(4){ animation-delay:.38s; }
@keyframes entraLado{
  from{ opacity:0; transform:translateX(-14px); }
  to{ opacity:1; transform:none; }
}

/* --- grades de cards: entram um a um --- */
.tri.is-in .tri__c,
.specs.is-in .spec,
.nums.is-in .num,
.apps.is-in li{ animation:sobeCard .62s var(--ease-out) both; }
.tri.is-in .tri__c:nth-child(1), .specs.is-in .spec:nth-child(1),
.nums.is-in .num:nth-child(1), .apps.is-in li:nth-child(1){ animation-delay:.06s; }
.tri.is-in .tri__c:nth-child(2), .specs.is-in .spec:nth-child(2),
.nums.is-in .num:nth-child(2), .apps.is-in li:nth-child(2){ animation-delay:.16s; }
.tri.is-in .tri__c:nth-child(3), .specs.is-in .spec:nth-child(3),
.nums.is-in .num:nth-child(3), .apps.is-in li:nth-child(3){ animation-delay:.26s; }
.specs.is-in .spec:nth-child(4), .nums.is-in .num:nth-child(4),
.apps.is-in li:nth-child(4){ animation-delay:.36s; }
.specs.is-in .spec:nth-child(5), .apps.is-in li:nth-child(5){ animation-delay:.46s; }
.apps.is-in li:nth-child(6){ animation-delay:.56s; }
@keyframes sobeCard{
  from{ opacity:0; transform:translateY(22px) scale(.97); }
  to{ opacity:1; transform:none; }
}

/* --- camadas do bloco: a lista 01–05 desce em cascata --- */
.anat.is-in .anat__it{ animation:entraLado .6s var(--ease-out) both; }
.anat.is-in .anat__it:nth-child(1){ animation-delay:.14s; }
.anat.is-in .anat__it:nth-child(2){ animation-delay:.24s; }
.anat.is-in .anat__it:nth-child(3){ animation-delay:.34s; }
.anat.is-in .anat__it:nth-child(4){ animation-delay:.44s; }
.anat.is-in .anat__it:nth-child(5){ animation-delay:.54s; }
/* a peça entra girando de leve */
.anat.is-in .anat__img{ animation:entraPeca .9s var(--ease-out) both; }
@keyframes entraPeca{
  from{ opacity:0; transform:translateY(26px) rotate(-1.6deg) scale(.94); }
  to{ opacity:1; transform:none; }
}

/* --- comparativo: as etapas caem uma a uma --- */
.vs.is-in .trk__fluxo li{ animation:sobeEtapa .5s var(--ease-out) both; }
.vs.is-in .trk__fluxo li:nth-child(1){ animation-delay:.16s; }
.vs.is-in .trk__fluxo li:nth-child(2){ animation-delay:.24s; }
.vs.is-in .trk__fluxo li:nth-child(3){ animation-delay:.32s; }
.vs.is-in .trk__fluxo li:nth-child(4){ animation-delay:.40s; }
.vs.is-in .trk__fluxo li:nth-child(5){ animation-delay:.48s; }
.vs.is-in .trk__fluxo li:nth-child(6){ animation-delay:.56s; }
@keyframes sobeEtapa{
  from{ opacity:0; transform:translateY(-10px); }
  to{ opacity:1; transform:none; }
}
.vs.is-in .trk__selo{ animation:sobeCard .6s var(--ease-out) .68s both; }

/* --- tabela: linhas entram em sequência --- */
.tab.is-in tbody tr{ animation:sobeLinha .5s var(--ease-out) both; }
.tab.is-in tbody tr:nth-child(1){ animation-delay:.06s; }
.tab.is-in tbody tr:nth-child(2){ animation-delay:.13s; }
.tab.is-in tbody tr:nth-child(3){ animation-delay:.20s; }
.tab.is-in tbody tr:nth-child(4){ animation-delay:.27s; }
.tab.is-in tbody tr:nth-child(5){ animation-delay:.34s; }
.tab.is-in tbody tr:nth-child(6){ animation-delay:.41s; }
@keyframes sobeLinha{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}

/* --- galeria de obras: cada peça aparece com leve zoom --- */
.obras.is-in > *{ animation:sobeCard .7s var(--ease-out) both; }
.obras.is-in .obras__video{ animation-delay:.06s; }
.obras.is-in .obras__mosaico .ga:nth-child(1){ animation:sobeCard .6s var(--ease-out) .16s both; }
.obras.is-in .obras__mosaico .ga:nth-child(2){ animation:sobeCard .6s var(--ease-out) .26s both; }
.obras.is-in .obras__mosaico .ga:nth-child(3){ animation:sobeCard .6s var(--ease-out) .36s both; }
.obras.is-in .obras__mosaico .ga:nth-child(4){ animation:sobeCard .6s var(--ease-out) .46s both; }

/* --- FAQ: perguntas entram em cascata --- */
.faq__lista.is-in details{ animation:sobeLinha .5s var(--ease-out) both; }
.faq__lista.is-in details:nth-child(1){ animation-delay:.05s; }
.faq__lista.is-in details:nth-child(2){ animation-delay:.11s; }
.faq__lista.is-in details:nth-child(3){ animation-delay:.17s; }
.faq__lista.is-in details:nth-child(4){ animation-delay:.23s; }
.faq__lista.is-in details:nth-child(5){ animation-delay:.29s; }
.faq__lista.is-in details:nth-child(6){ animation-delay:.35s; }
.faq__lista.is-in details:nth-child(7){ animation-delay:.41s; }
.faq__lista.is-in details:nth-child(8){ animation-delay:.47s; }
.faq__lista.is-in details:nth-child(9){ animation-delay:.53s; }

/* --- formulário: campos entram em bloco --- */
.orc__form.is-in > *{ animation:sobeLinha .5s var(--ease-out) both; }
.orc__form.is-in > *:nth-child(1){ animation-delay:.06s; }
.orc__form.is-in > *:nth-child(2){ animation-delay:.12s; }
.orc__form.is-in > *:nth-child(3){ animation-delay:.18s; }
.orc__form.is-in > *:nth-child(4){ animation-delay:.24s; }
.orc__form.is-in > *:nth-child(5){ animation-delay:.30s; }

/* --- imagens laterais: entram do lado --- */
.sistema__img.is-in{ animation:entraDireita .85s var(--ease-out) both; }
.sistema--inv .sistema__img.is-in{ animation:entraEsquerda .85s var(--ease-out) both; }
@keyframes entraDireita{
  from{ opacity:0; transform:translateX(28px) scale(.97); }
  to{ opacity:1; transform:none; }
}
@keyframes entraEsquerda{
  from{ opacity:0; transform:translateX(-28px) scale(.97); }
  to{ opacity:1; transform:none; }
}

/* --- CTAs pulsam de leve ao entrar, chamando o clique --- */
.cta-forte.is-in .btn{ animation:pulsaCta .8s var(--ease-out) .2s both; }
@keyframes pulsaCta{
  0%{ opacity:0; transform:translateY(14px) scale(.96); }
  60%{ opacity:1; transform:translateY(0) scale(1.03); }
  100%{ opacity:1; transform:none; }
}

/* quem pediu menos movimento recebe tudo estático */
@media (prefers-reduced-motion:reduce){
  .cab.is-in > *, .reveal.is-in .lista li, .tri.is-in .tri__c, .specs.is-in .spec,
  .nums.is-in .num, .apps.is-in li, .anat.is-in .anat__it, .anat.is-in .anat__img,
  .vs.is-in .trk__fluxo li, .vs.is-in .trk__selo, .tab.is-in tbody tr,
  .obras.is-in > *, .obras.is-in .obras__mosaico .ga, .faq__lista.is-in details,
  .orc__form.is-in > *, .sistema__img.is-in, .cta-forte.is-in .btn{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ============================================================
   ESTUDO COMPARATIVO — dados reais de duas paredes iguais
   ============================================================ */
.tab__sub{
  text-align:center; color:var(--ink-2); font-size:1rem; line-height:1.6;
  max-width:62ch; margin:-14px auto 26px;
}
.tab__sub b{ color:var(--ink); }

/* coluna de diferença: o ganho em destaque */
.comp__dif{ background:rgba(3,35,96,.04); color:var(--ink-2); }
.comp thead th.comp__dif{ color:var(--coral-700); background:var(--coral-100); }
.comp tbody td.comp__dif b{ color:var(--coral-700); font-weight:700; }

/* linha do custo total: o número que decide */
.comp__total th, .comp__total td{
  background:var(--navy) !important; color:#fff !important;
  font-size:1rem; padding-block:20px !important;
}
.comp__total th{ font-family:var(--f-d); }
.comp__total td b, .comp__total td.comp__dif b{ color:#fff !important; font-size:1.06rem; }

.tab__nota{
  margin-top:24px; text-align:center; font-size:.95rem; line-height:1.65;
  color:var(--ink-2); max-width:70ch; margin-inline:auto;
}
.tab__nota b{ color:var(--coral-700); }

/* par antes e depois */
/* ---------- rótulo das três frentes do comparativo ---------- */
.passo-rot{
  display:flex; align-items:center; gap:12px; margin:0 0 20px;
  font-family:var(--f-d); font-weight:700; font-size:.92rem;
  letter-spacing:.02em; color:var(--ink-3);
}
.passo-rot span{
  flex:none; display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--navy); color:#fff; font-size:.78rem;
}
.passo-rot--2, .passo-rot--3{ margin-top:56px; }

/* ---------- as duas paredes: resultado, não comparação de etapas ---------- */
.prova-obra{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:26px;
  align-items:stretch;
}
.prova-obra figure{
  margin:0; padding:14px; border-radius:var(--r-l);
  border:1px solid var(--line); background:var(--paper);
  display:flex; flex-direction:column; height:100%;
}
.prova-obra figcaption{ display:flex; flex-direction:column; flex:1; }
.prova-obra img{
  width:100%; height:300px; object-fit:cover; border-radius:var(--r-m);
}
.prova-obra figcaption{ margin-top:15px; padding:0 4px 4px; }
.prova-obra b{
  display:block; font-family:var(--f-d); font-size:1.06rem; color:var(--navy);
  letter-spacing:-.016em; margin-bottom:7px;
}
.po__txt{ font-size:.9rem; color:var(--ink-2); line-height:1.58; }

/* o que cada parede consumiu para chegar naquele ponto */
.po__feito{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line);
  font-size:.88rem; color:var(--navy); font-weight:600;
}
.po__feito span{
  display:block; font-family:var(--f-d); font-size:.68rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:3px;
}
/* sinal de aprovado / reprovado no canto da foto */
.prova-obra figure{ position:relative; }
.po__sinal{
  position:absolute; top:24px; right:24px; z-index:2;
  width:38px; height:38px; min-width:38px; max-width:38px;
  height:38px; min-height:38px; max-height:38px;
  border-radius:50%; overflow:hidden; flex:none;
  display:grid; place-items:center; color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
}
/* trava o tamanho do icone: sem isso, se o CSS demora, o SVG estoura */
.po__sinal svg{
  width:19px; height:19px; min-width:19px; min-height:19px;
  max-width:19px; max-height:19px; display:block; flex:none;
}
.po__sinal--sim{ background:#16A34A; }
.po__sinal--nao{ background:var(--coral-700); }

.po--bom{ border-color:var(--navy-700) !important; box-shadow:0 10px 30px rgba(3,35,96,.14); }
.po--ruim{ background:#FDFAF9; }
.po--ruim b{ color:var(--ink-2); }
.po__feito--caro{ color:var(--coral-700); border-top-color:rgba(226,49,34,.2); }

/* ---------- parágrafo que fecha a seção ---------- */
.fecha{
  margin-top:34px; padding:24px 28px; border-radius:var(--r-l);
  background:var(--navy-50); border:1px solid var(--navy-100);
  font-size:1rem; line-height:1.68; color:var(--ink-2);
  max-width:74ch; margin-left:auto; margin-right:auto; text-align:center;
}
.fecha b{ color:var(--navy); }

@media (max-width:640px){
  .passo-rot{ font-size:.86rem; gap:10px; margin-bottom:16px; }
  .passo-rot span{ width:26px; height:26px; font-size:.72rem; }
  .passo-rot--2, .passo-rot--3{ margin-top:40px; }
  .prova-obra{ grid-template-columns:1fr; gap:14px; margin-top:20px; align-items:stretch; }
  .prova-obra figure{ padding:10px; height:auto; }
  .po__sinal{
    top:18px; right:18px;
    width:33px; min-width:33px; max-width:33px;
    height:33px; min-height:33px; max-height:33px;
  }
  .po__sinal svg{
    width:16px; height:16px;
    min-width:16px; min-height:16px; max-width:16px; max-height:16px;
  }
  .prova-obra img{ height:230px; }
  .prova-obra b{ font-size:1rem; }
  .po__txt{ font-size:.87rem; }
  .po__feito{ margin-top:12px; padding-top:10px; font-size:.85rem; }
  .fecha{ margin-top:24px; padding:18px 18px; font-size:.92rem; text-align:left; }
}

@media (max-width:760px){
  .prova-obra{ gap:14px; margin-top:32px; }
  .prova-obra img{ height:260px; }
}
@media (max-width:640px){
  .tab__sub{ font-size:.9rem; margin:-8px auto 20px; }
  .tab__nota{ font-size:.88rem; margin-top:18px; }
  .prova-obra{ grid-template-columns:1fr; }
  .prova-obra img{ height:300px; }
  /* na tabela empilhada, a diferença vira a terceira faixa */
  .comp tbody td.comp__dif::before{ content:'Diferença'; color:var(--coral-700); }
  .comp tbody td.comp__dif{ background:var(--coral-100); }
  .comp__total th, .comp__total td{ padding-block:12px !important; }
  .comp__total td.comp__dif{ background:rgba(255,255,255,.14) !important; }
  .comp__total td.comp__dif::before{ color:rgba(255,255,255,.7); }
}