/* ===========================================================
   HDR LOCAÇÕES — style.css
   Metodologia Z1 · Modo Canteiro (escuro) fixo, sem toggle
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800;900&family=Inter:wght@400;500;600&display=swap');

:root{
  --font-display:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
  --radius:14px;

  --bg:#16140f;
  --bg-2:#1e1b14;
  --bg-3:#26221a;
  --card:#1c1911;
  --text:#f5f1e6;
  --text-dim:#a89f8b;
  --orange:#f2811d;
  --orange-2:#ffb35c;
  --line:rgba(245,241,230,0.10);
  --shadow:rgba(0,0,0,0.45);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
section{position:relative; z-index:2;}
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* textura de grão sutil */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.45; mix-blend-mode:overlay;
}

/* ===== BARRA DE PROGRESSO ===== */
#progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--orange),var(--orange-2));
  z-index:999; transition:width .1s linear;
}

/* ===== HEADER ===== */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 6vw;
  background:linear-gradient(180deg, var(--bg) 0%, transparent 100%);
  backdrop-filter:blur(6px);
}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:40px; width:auto;}
nav{display:flex; align-items:center; gap:28px;}
nav a{font-size:.85rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; position:relative; padding-bottom:4px;}
nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--orange); transition:width .3s ease;
}
nav a:hover::after{width:100%;}
.nav-cta{
  padding:10px 20px !important; background:var(--orange); color:#151109 !important;
  border-radius:100px; text-transform:none !important; font-weight:700 !important;
}
.nav-cta::after{display:none;}

@media (max-width:840px){
  nav a:not(.nav-cta){display:none;}
}

/* ===== TRILHO LATERAL (desktop) ===== */
#rail{
  position:fixed; right:26px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:16px; z-index:90;
}
#rail button{
  width:9px; height:9px; border-radius:50%; border:none;
  background:var(--line); cursor:pointer; transition:.3s; padding:0;
}
#rail button.active{ background:var(--orange); box-shadow:0 0 10px var(--orange); transform:scale(1.4);}
@media (max-width:1000px){ #rail{display:none;} }

/* ===== HERO ===== */
.hero{
  min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; gap:40px;
  align-items:center;
  padding:150px 6vw 90px; position:relative;
  background:
    repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 46px),
    radial-gradient(ellipse at 20% 20%, var(--bg-3), var(--bg) 60%);
}
.hero-copy{ min-width:0; }
@media (max-width:980px){
  .hero{ grid-template-columns:1fr; padding-top:130px; }
  .hero-visual{ order:-1; max-width:420px; margin:0 auto 10px; }
}

/* ===== ILUSTRAÇÃO TÉCNICA DO HERO (blueprint) ===== */
.hero-visual{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/34px 34px,
    var(--bg-3);
  overflow:hidden; aspect-ratio:1/1;
}
.hero-visual svg{
  width:100%; height:100%; display:block;
  transform-origin:55% 60%;
  animation:blueprint-zoom 22s ease-in-out infinite alternate;
}
@keyframes blueprint-zoom{
  from{ transform:scale(1); }
  to{ transform:scale(1.06); }
}
.ill-line{ fill:none; stroke:var(--orange); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.ill-line-soft{ fill:none; stroke:var(--text-dim); stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; }
.ill-fill{ fill:var(--bg-2); stroke:var(--orange); stroke-width:2; stroke-linejoin:round; }
.ill-fill-2{ fill:var(--bg); stroke:var(--orange); stroke-width:1.6; stroke-linejoin:round; }
.ill-dim text{ font-family:'Inter',monospace; font-size:13px; fill:var(--text-dim); letter-spacing:.5px; }
.ill-dim line{ stroke:var(--text-dim); stroke-width:1; }
.ill-tag text{ font-family:'Inter',monospace; font-size:11px; fill:var(--orange); letter-spacing:1px; }

@media (prefers-reduced-motion: reduce){
  .hero-visual svg{ animation:none; }
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:2px; color:var(--orange); margin-bottom:22px;
}
.eyebrow::before{content:''; width:28px; height:2px; background:var(--orange);}
h1{
  font-family:var(--font-display); font-weight:900; letter-spacing:-1px;
  font-size:clamp(2.6rem, 6.5vw, 5.2rem); line-height:1.02; max-width:15ch;
}
h1 em{ font-style:normal; color:var(--orange); }
.hero p.lead{
  margin-top:26px; max-width:48ch; font-size:1.15rem; color:var(--text-dim);
}
.hero-cta{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; gap:10px; padding:16px 30px;
  border-radius:100px; font-weight:700; font-size:.95rem; cursor:pointer;
  border:1px solid transparent; position:relative; overflow:hidden;
}
.btn-primary{ background:var(--orange); color:#151109; }
.btn-primary::before{
  content:''; position:absolute; inset:0; border-radius:100px;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35), transparent 60%);
  opacity:0; transition:opacity .3s;
}
.btn-primary:hover::before{opacity:1;}
.btn-ghost{ border-color:var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange); }

.trust-strip{
  margin-top:64px; display:flex; gap:40px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid var(--line);
}
.trust-strip div{font-size:.82rem; color:var(--text-dim); font-weight:600; text-transform:uppercase; letter-spacing:.5px;}
.trust-strip div span{display:block; color:var(--text); font-size:1rem; text-transform:none; letter-spacing:0; margin-top:4px; font-weight:400;}

/* ===== SECTION HEADINGS ===== */
.section-head{ max-width:60ch; margin-bottom:56px; }
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,3.6vw,2.6rem);
  letter-spacing:-.5px;
}
.section-head p{margin-top:14px; color:var(--text-dim); font-size:1.02rem;}

.wrap{ padding:110px 6vw; }

/* ===== EQUIPAMENTOS (cards) ===== */
.grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:26px;
}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 26px; position:relative; overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px var(--shadow); }
.card:hover::before{ transform:scaleX(1); }
.card .brace{
  position:absolute; top:14px; right:14px; width:22px; height:22px; opacity:.35; color:var(--orange);
}
.card .brace svg{width:100%; height:100%;}
.card .card-icon{
  width:52px; height:52px; margin-bottom:20px; color:var(--orange);
}
.card .card-icon svg{width:100%; height:100%;}
.card .tag{
  display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; color:var(--orange); background:rgba(242,129,29,.12);
  padding:5px 12px; border-radius:100px; margin-bottom:18px;
}
.card h3{font-family:var(--font-display); font-size:1.3rem; font-weight:800; margin-bottom:12px;}
.card p{color:var(--text-dim); font-size:.94rem;}

/* ===== COMO FUNCIONA (processo) ===== */
.steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:40px;
  counter-reset:step;
}
.step{position:relative; padding-left:56px;}
.step::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%;
  background:var(--card); border:1px solid var(--line); color:var(--orange);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-weight:800; font-size:1.05rem;
}
.step h3{font-family:var(--font-display); font-size:1.1rem; font-weight:700; margin-bottom:8px;}
.step p{color:var(--text-dim); font-size:.94rem;}

/* ===== DIFERENCIAIS ===== */
.diff-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:30px;
}
.diff{ display:flex; gap:16px; align-items:flex-start; }
.diff .ico{
  width:46px; height:46px; border-radius:12px; background:rgba(242,129,29,.12);
  display:flex; align-items:center; justify-content:center; color:var(--orange); flex-shrink:0;
}
.diff .ico svg{ width:22px; height:22px; }
.diff h3{font-family:var(--font-display); font-size:1.05rem; font-weight:700; margin-bottom:6px;}
.diff p{color:var(--text-dim); font-size:.92rem;}

/* ===== FAIXA CTA ===== */
.cta-band{
  background:linear-gradient(120deg, var(--orange), var(--orange-2));
  color:#151109; padding:70px 6vw; text-align:center;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 2px, transparent 2px 26px);
}
.cta-band h2{
  font-family:var(--font-display); font-weight:900; font-size:clamp(1.8rem,4vw,2.6rem);
  position:relative; z-index:2;
}
.cta-band p{ margin:14px 0 30px; font-size:1.05rem; position:relative; z-index:2; }
.cta-band .btn-primary{ background:#151109; color:#f5f1e6; position:relative; z-index:2; }

/* ===== CONTATO ===== */
.contact-block{
  display:grid; grid-template-columns:1fr 1fr; gap:50px;
}
@media (max-width:840px){ .contact-block{grid-template-columns:1fr;} }
.contact-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:40px;
}
.contact-line{ display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.contact-line .ico{ width:20px; margin-top:3px; color:var(--orange); flex-shrink:0;}
.contact-line div b{ display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); margin-bottom:3px;}
.contact-line div a{ color: var(--text); }
.contact-line div a:hover{ color: var(--orange); }

/* ===== RODAPÉ ===== */
footer{
  padding:50px 6vw 34px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
}
.foot-left{display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:var(--text-dim);}
.foot-left a{ color: var(--text-dim); }
.foot-left a:hover{ color: var(--orange); }
.z1-badge{
  display:flex; align-items:center; gap:12px; padding:8px 16px 8px 8px;
  background:linear-gradient(180deg,#1d1a34,#211d3c); border:1px solid rgba(255,255,255,.08);
  border-radius:100px;
}
.z1-badge .ic{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#b9a6f7,#6f5ce6); display:flex; align-items:center; justify-content:center;
}
.z1-badge .ic i{ width:4px; height:14px; border-radius:2px; background:#211d3c; display:block; }
.z1-badge .divider{width:1px; height:28px; background:rgba(255,255,255,.12);}
.z1-badge .txt{ line-height:1.25; }
.z1-badge .txt .l1{font-size:.6rem; letter-spacing:1px; color:#8b87a3; font-family:monospace;}
.z1-badge .txt .l2{
  font-weight:800; font-size:.95rem; background:linear-gradient(90deg,#b9a6f7,#6f5ce6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.z1-badge .txt .l3{font-size:.68rem; color:#d3d0e2;}

/* ===== WHATSAPP FLUTUANTE ===== */
#wa-float{
  position:fixed; right:26px; bottom:26px; z-index:200;
  width:60px; height:60px; border-radius:50%; background:var(--orange);
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px var(--shadow);
  transition:bottom .3s ease, opacity .3s ease;
}
#wa-float svg{width:28px; height:28px; color:#151109;}
#wa-float::before{
  content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--orange);
  opacity:.6; animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{ 0%{transform:scale(.9); opacity:.6;} 100%{transform:scale(1.5); opacity:0;} }

/* ===== REVEAL ===== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}