/* ==========================================================================
   Conservalle Construtora: modelo CONSTRUTORA (template-base/modelos/construtora)
   Visual atual: fotos de obra em tela cheia com camada escura por cima,
   tipografia grande e cartões de canto reto. Toda a paleta sai das tres
   cores do site.json via color-mix().
   ========================================================================== */

:root{
  --primaria:#1E4E8C;
  --secundaria:#1A2330;
  --destaque:#E3A62B;

  --noite: color-mix(in oklab, var(--secundaria) 96%, black);
  --noite-2: color-mix(in oklab, var(--secundaria) 88%, var(--primaria));
  --papel: color-mix(in oklab, var(--primaria) 3%, white);
  --papel-2: color-mix(in oklab, var(--primaria) 8%, white);
  --tinta: color-mix(in oklab, var(--secundaria) 94%, black);
  --tinta-suave: color-mix(in oklab, var(--secundaria) 52%, white);
  --borda: color-mix(in oklab, var(--secundaria) 13%, white);
  --claro: color-mix(in oklab, var(--primaria) 6%, white);

  --e1:.5rem; --e2:.75rem; --e3:1rem; --e4:1.5rem; --e5:2.5rem; --e6:4rem;
  --sec-y: clamp(4rem, 9vw, 7.5rem);
  --wrap:1220px;
  --raio:4px;

  --f-titulo:"Space Grotesk", system-ui, sans-serif;
  --f-texto:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs:.76rem; --t-sm:.9rem; --t-base:1.04rem;
  --t-lg: clamp(1.1rem, 1.5vw, 1.3rem);
  --t-h3: clamp(1.2rem, 1.7vw, 1.4rem);
  --t-h2: clamp(2rem, 4vw, 3.2rem);
  --t-h1: clamp(2.6rem, 6vw, 5rem);

  --rapida: 200ms ease;
  --suave: 640ms cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 var(--t-base)/1.65 var(--f-texto);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--destaque);outline-offset:3px}
h1,h2,h3{font-family:var(--f-titulo);font-weight:700;line-height:1.05;letter-spacing:-.035em;margin:0 0 var(--e3);text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.02em}
p{margin:0 0 var(--e3);text-wrap:pretty}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:clamp(18px,4vw,36px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--e2);top:var(--e2);z-index:99;background:white;padding:var(--e2) var(--e3)}
.rotulo{display:block;font-size:var(--t-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--primaria);margin-bottom:var(--e3)}

.faixa-exemplo{background:var(--destaque);color:var(--noite);text-align:center;font-size:var(--t-xs);font-weight:500;padding:var(--e1) var(--e3)}
.faixa-exemplo a{font-weight:700;margin-left:var(--e1)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e1);
  font:600 var(--t-sm)/1 var(--f-texto);letter-spacing:.02em;text-decoration:none;cursor:pointer;white-space:nowrap;
  background:var(--primaria);color:white;border:1px solid var(--primaria);
  padding:var(--e3) var(--e4);border-radius:var(--raio);min-height:50px;
  transition:background var(--rapida), border-color var(--rapida), transform var(--rapida);
}
.btn:hover{background:color-mix(in oklab, var(--primaria) 82%, black);transform:translateY(-2px)}
.btn-sm{min-height:40px;padding:var(--e2) var(--e3)}
.btn-destaque{background:var(--destaque);border-color:var(--destaque);color:var(--noite)}
.btn-destaque:hover{background:color-mix(in oklab, var(--destaque) 86%, white)}
.btn-vidro{background:color-mix(in oklab, white 14%, transparent);border-color:color-mix(in oklab, white 45%, transparent);color:white;backdrop-filter:blur(6px)}
.btn-vidro:hover{background:color-mix(in oklab, white 24%, transparent)}

/* --- topo --------------------------------------------------------------- */
.topo{position:fixed;top:0;left:0;right:0;z-index:50;transition:background var(--rapida), box-shadow var(--rapida)}
.topo-in{display:flex;align-items:center;gap:var(--e4);min-height:88px}
.topo.rolado{background:color-mix(in oklab, white 94%, transparent);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--borda)}
.marca{margin-right:auto;display:flex;align-items:center}
.marca-logo{height:58px;width:auto;filter:brightness(0) invert(1);transition:filter var(--rapida)}
.topo.rolado .marca-logo{filter:none}
.nav{display:flex;align-items:center;gap:var(--e4);font-size:var(--t-sm);font-weight:500}
.nav a{text-decoration:none;color:color-mix(in oklab, white 82%, transparent)}
.nav a:hover{color:white}
.nav a.btn{color:white}
.topo.rolado .nav a{color:var(--tinta-suave)}
.topo.rolado .nav a:hover{color:var(--primaria)}
.topo.rolado .nav a.btn{color:white}
.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
.menu-btn span{width:24px;height:2px;background:white;border-radius:2px;transition:var(--rapida)}
.topo.rolado .menu-btn span{background:var(--tinta)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- hero com foto ------------------------------------------------------ */
.hero{
  position:relative;color:white;isolation:isolate;
  min-height:min(100vh,860px);display:flex;flex-direction:column;justify-content:flex-end;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--noite) 82%, transparent) 0%,
      color-mix(in oklab, var(--noite) 55%, transparent) 45%,
      color-mix(in oklab, var(--noite) 88%, transparent) 100%),
    var(--foto) center/cover no-repeat,
    var(--noite);
}
.hero-in{padding-block:clamp(8rem,16vw,11rem) var(--e6);max-width:1100px}
.hero .rotulo{color:var(--destaque)}
.hero h1{max-width:18ch}
.hero h1 span{color:color-mix(in oklab, white 70%, var(--destaque))}
.lead{font-size:var(--t-lg);max-width:56ch;color:color-mix(in oklab, white 84%, transparent)}
.acoes{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e5)}
.hero-numeros{border-top:1px solid color-mix(in oklab, white 22%, transparent);background:color-mix(in oklab, var(--noite) 55%, transparent);backdrop-filter:blur(6px)}
.numeros-in{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3)}
.num{padding:var(--e4) 0}
.num + .num{border-left:1px solid color-mix(in oklab, white 18%, transparent);padding-left:var(--e4)}
.num strong{display:block;font-family:var(--f-titulo);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.1;color:var(--destaque)}
.num span{font-size:var(--t-sm);color:color-mix(in oklab, white 76%, transparent)}

/* --- secoes ------------------------------------------------------------- */
.sec{padding-block:var(--sec-y)}
.sec-cabeca{max-width:62ch;margin-bottom:var(--e5)}
.sec-cabeca p{margin:0;color:var(--tinta-suave);font-size:var(--t-lg)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1px;background:var(--borda);border:1px solid var(--borda)}
.card{background:white;padding:var(--e5) var(--e4);transition:background var(--rapida)}
.card:hover{background:var(--papel-2)}
.card-n{display:block;font-family:var(--f-titulo);font-size:var(--t-sm);font-weight:600;color:var(--destaque);letter-spacing:.1em;margin-bottom:var(--e4)}
.card h3{margin-bottom:var(--e2)}
.card p{margin:0;color:var(--tinta-suave);font-size:var(--t-sm)}

/* --- faixa com foto ----------------------------------------------------- */
.faixa-foto{
  position:relative;color:white;padding-block:var(--sec-y);
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--noite) 88%, transparent) 30%, color-mix(in oklab, var(--noite) 25%, transparent)),
    var(--foto) center/cover no-repeat,
    var(--noite);
}
.faixa-in{max-width:56ch}
.faixa-in p{color:color-mix(in oklab, white 82%, transparent);font-size:var(--t-lg)}
.selos{list-style:none;padding:0;margin:var(--e4) 0 0;display:flex;flex-wrap:wrap;gap:var(--e2)}
.selos li{font-size:var(--t-sm);font-weight:600;padding:var(--e1) var(--e3);border:1px solid color-mix(in oklab, white 35%, transparent);border-radius:999px}

/* --- trilha ------------------------------------------------------------- */
.trilha{list-style:none;counter-reset:p;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--e4)}
.trilha li{counter-increment:p;padding-top:var(--e5);border-top:2px solid var(--borda);position:relative}
.trilha li::before{
  content:counter(p,decimal-leading-zero);position:absolute;top:var(--e3);left:0;
  font-family:var(--f-titulo);font-size:var(--t-h3);font-weight:700;color:var(--primaria);
}
.trilha li::after{content:"";position:absolute;top:-2px;left:0;width:42px;height:2px;background:var(--destaque)}
.trilha h3{margin:var(--e2) 0 var(--e1)}
.trilha p{margin:0;font-size:var(--t-sm);color:var(--tinta-suave)}

/* --- equipe ------------------------------------------------------------- */
.equipe{background:var(--noite);color:white;padding-block:var(--sec-y)}
.equipe .rotulo{color:var(--destaque)}
.equipe-in{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--e6);align-items:center}
.equipe-in > div > p{color:color-mix(in oklab, white 80%, transparent)}
.lista-check{list-style:none;padding:0;margin:var(--e4) 0 0;display:grid;gap:var(--e2)}
.lista-check li{display:flex;gap:var(--e2);font-size:var(--t-sm)}
.lista-check li::before{
  content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:3px;
  background:var(--destaque) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.equipe-foto img{
  width:100%;border-radius:var(--raio);
  box-shadow:0 24px 50px rgba(0,0,0,.45), 0 0 0 1px color-mix(in oklab, white 12%, transparent);
}

/* --- clientes ----------------------------------------------------------- */
.clientes{background:var(--papel-2);border-block:1px solid var(--borda);overflow:hidden}
.esteira{
  margin-top:var(--e5);overflow:hidden;
  -webkit-mask:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
          mask:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.esteira-trilho{
  list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:clamp(2.5rem,6vw,5rem);
  width:max-content;animation:deslizar 42s linear infinite;
}
.esteira:hover .esteira-trilho{animation-play-state:paused}
.esteira img{
  height:clamp(40px,4.4vw,58px);width:auto;
  filter:grayscale(1);opacity:.62;transition:filter var(--rapida), opacity var(--rapida);
}
.esteira li:hover img{filter:none;opacity:1}
@keyframes deslizar{to{transform:translateX(-50%)}}

/* --- duvidas ------------------------------------------------------------ */
.duvidas-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--e6)}
.duvidas-in .sec-cabeca{margin-bottom:0}
.faq details{border-bottom:1px solid var(--borda)}
.faq summary{cursor:pointer;list-style:none;padding-block:var(--e4);font-weight:600;font-size:var(--t-lg);display:flex;justify-content:space-between;gap:var(--e3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--destaque);font-weight:700}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--tinta-suave);font-size:var(--t-sm);padding-bottom:var(--e4);margin:0;max-width:62ch}

/* --- chamada final ------------------------------------------------------ */
.cta{
  position:relative;color:white;text-align:center;padding-block:var(--sec-y);
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--noite) 88%, transparent), color-mix(in oklab, var(--noite) 70%, transparent)),
    var(--foto) center/cover no-repeat,
    var(--noite);
}
.cta p{max-width:52ch;margin:0 auto;color:color-mix(in oklab, white 82%, transparent);font-size:var(--t-lg)}
.cta .acoes{justify-content:center}

/* --- rodape ------------------------------------------------------------- */
.rodape{background:var(--noite);color:color-mix(in oklab, white 62%, transparent);font-size:var(--t-sm);padding-block:var(--e5)}
.rodape-in{display:flex;flex-wrap:wrap;gap:var(--e4) var(--e5);align-items:flex-start}
.rodape-logo{height:52px;width:auto;filter:brightness(0) invert(1);opacity:.85}
.rodape-col{display:grid;gap:4px}
.rodape-col strong{color:white;font-family:var(--f-titulo);font-size:var(--t-lg)}
.rodape a{text-decoration:none}
.rodape a:hover{color:white}
.social{display:flex;gap:var(--e3);margin-top:var(--e1)}
.copy{width:100%;padding-top:var(--e3);border-top:1px solid color-mix(in oklab, white 14%, transparent);font-size:var(--t-xs)}

.zap{
  position:fixed;right:var(--e4);bottom:var(--e4);z-index:60;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:#25d366;color:white;box-shadow:0 12px 30px rgba(37,211,102,.4);
  transition:transform var(--rapida);
}
.zap:hover{transform:scale(1.06)}

.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity var(--suave), transform var(--suave)}
.js [data-reveal].visivel{opacity:1;transform:none}

/* --- responsivo --------------------------------------------------------- */
@media (max-width:1000px){
  .trilha{grid-template-columns:1fr 1fr}
  .equipe-in,.duvidas-in{grid-template-columns:1fr}
  .equipe-foto{order:-1;max-width:520px}
}
@media (max-width:820px){
  .menu-btn{display:flex}
  .nav{
    position:absolute;top:88px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:var(--e2) clamp(18px,4vw,36px) var(--e4);background:white;box-shadow:0 20px 40px rgba(0,0,0,.16);
  }
  .nav.aberto{display:flex}
  .nav a{padding-block:var(--e3);border-bottom:1px solid var(--borda);color:var(--tinta)!important;font-size:var(--t-base)}
  .nav a.btn{margin-top:var(--e3);border-bottom:0;color:white!important;justify-content:center}
  .faixa-foto{background-attachment:scroll}
  .numeros-in{grid-template-columns:1fr}
  .num + .num{border-left:0;padding-left:0;border-top:1px solid color-mix(in oklab, white 18%, transparent)}
  .num{padding-block:var(--e3)}
  .hero-in{padding-block:8rem var(--e5)}
}
@media (max-width:620px){
  .trilha{grid-template-columns:1fr}
  .marcas li{font-size:var(--t-base)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
}