/* ═══════════════════════════════════════════════════════════════════
   JML CORE · núcleo visual extraído do index.html da JML
   Blanco Performance · v1.0

   Para reaproveitar em outro cliente: troque só o bloco MARCA abaixo.
   Tudo o resto é neutro e não cita a JML em lugar nenhum.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Syncopate local, com a CDN do Google como reserva ── */
@font-face{
  font-family:'Syncopate';font-style:normal;font-weight:400;font-display:swap;
  src:url('../syncopate-400.ttf') format('truetype'),
      url('https://fonts.gstatic.com/s/syncopate/v24/pe0sMIuPIYBCpEV5eFdyAg.ttf') format('truetype');
}
@font-face{
  font-family:'Syncopate';font-style:normal;font-weight:700;font-display:swap;
  src:url('../syncopate-700.ttf') format('truetype'),
      url('https://fonts.gstatic.com/s/syncopate/v24/pe0pMIuPIYBCpEV5eFdKvtKaAw.ttf') format('truetype');
}

/* ═══════════════ MARCA · o único bloco que muda por cliente ═══════════════ */
:root{
  --brand:#208FFF;
  --brand-dark:#0D5DB5;
  --brand-glow:rgba(32,143,255,.22);
  --brand-subtle:rgba(32,143,255,.07);
  --brand-rgb:32,143,255;

  --ink:#F0F2F5;        /* branco frio, nunca #FFFFFF */
  --bg:#0A0B0D;         /* grafite profundo, nunca #000000 */
  --n-100:#E6EAF0;
  --n-200:#C2CAD6;
  --n-700:#1E2530;
  --n-900:#0D1018;
  --dim:#8A93A6;

  --font-display:'Syncopate',sans-serif;
  --font-body:'Manrope',sans-serif;
}

/* ═══════════════ MOVIMENTO · curvas e durações do site ═══════════════ */
:root{
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-out-power4:cubic-bezier(0.25,0.46,0.45,0.94);
  --dur-fast:.5s;
  --dur-mid:.85s;
  --dur-slow:1.5s;

  --hair:rgba(255,255,255,.07);
  --hair-2:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.04);
  --radius:3px;
}

/* ═══════════════ RESET E BASE ═══════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* qualquer display definido em componente passaria por cima do atributo hidden */
[hidden]{display:none !important;}
html{scroll-behavior:auto;} /* o Lenis cuida da rolagem */
body{
  background-color:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-weight:400;line-height:1.6;
  overflow-x:hidden;isolation:isolate;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,video{max-width:100%;display:block;}
a{color:inherit;}

.jml-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px);}
.jml-section{padding:clamp(64px,9vw,128px) 0;position:relative;}

/* ═══════════════ TIPOGRAFIA ═══════════════ */
.jml-display{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  line-height:.96;letter-spacing:-.01em;
}
.jml-h1,.jml-h2{
  font-family:var(--font-body);font-weight:800;
  letter-spacing:-.03em;line-height:1.05;
}
/* equilibra as linhas do título: nada de palavra sozinha na última linha */
.jml-h1,.jml-h2,.jml-h3{text-wrap:balance;}
.jml-section p,.jml-card p{text-wrap:pretty;}
.jml-h1{font-size:clamp(26px,4.4vw,52px);}
.jml-h2{font-size:clamp(30px,5.4vw,64px);}
.jml-h3{font-family:var(--font-body);font-weight:700;font-size:clamp(17px,2vw,20px);letter-spacing:-.01em;line-height:1.3;}
.jml-h1 em,.jml-h2 em,.jml-h3 em{font-style:normal;color:var(--brand);}

/* rótulo de seção · 0.42em é a assinatura da casa */
.jml-label{
  font-family:var(--font-body);font-size:.58rem;font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;color:var(--ink);
  display:inline-block;
}
/* variante com o brilho que passa, como no site */
/* o brilho é um realce que passa, nunca um apagão: em qualquer quadro
   da animação o texto continua legível */
.jml-label.shine{
  background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 42%,
    #FFFFFF 50%,var(--ink) 58%,var(--ink) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:eyebrowShimmer 3.5s linear 2s infinite;
}
.jml-tag{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-body);font-size:.5rem;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--brand);
}
.jml-statlabel{
  font-family:var(--font-body);font-size:.55rem;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--dim);
}

/* filete com o facho que atravessa */
.jml-rule{position:relative;height:1px;background:var(--hair);max-width:120px;overflow:hidden;}
.jml-rule::after{
  content:"";position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  animation:rulePass 3.4s var(--ease-out-power4) infinite;
}

/* selo com o ponto pulsando */
.jml-pill{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(var(--brand-rgb),.3);background:var(--brand-subtle);
  padding:8px 16px;border-radius:2px;
}
.jml-pill .dot{
  width:6px;height:6px;border-radius:50%;background:var(--brand);
  animation:pulseDot 2.2s var(--ease-out-power4) infinite;
}

/* ═══════════════ BOTÃO ═══════════════ */
.jml-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:1rem;
  overflow:hidden;cursor:pointer;border:none;border-radius:0;
  background:var(--brand);color:#fff;text-decoration:none;
  font-family:var(--font-body);font-size:.7rem;font-weight:700;
  letter-spacing:.25em;text-transform:uppercase;
  padding:1.35rem 2.5rem;
  transition:transform .3s ease,background .3s ease;
  will-change:transform;
}
.jml-btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  animation:btnShimmer 3.6s var(--ease-out-power4) infinite;
}
.jml-btn:hover{background:var(--brand-dark);transform:translateY(-2px);}
.jml-btn:active{transform:translateY(0);}
.jml-btn[disabled]{opacity:.5;pointer-events:none;}
/* contorno de foco na cor da marca, não o padrão do navegador */
.jml-btn:focus{outline:none;}
.jml-btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
.jml-btn.pulse{animation:pulsePop 2s infinite;}
.jml-btn.block{width:100%;}
.jml-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair-2);}
.jml-btn.ghost::after{display:none;}
.jml-btn.ghost:hover{background:var(--glass);border-color:var(--brand);}
.jml-btn.mini{padding:.8rem 1.4rem;font-size:.55rem;letter-spacing:.3em;}

/* ═══════════════ CARTÃO DE VIDRO ═══════════════ */
.jml-card{
  position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--hair);background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  filter:blur(.6px) brightness(.88);
  padding:clamp(24px,3vw,34px);
  transition:transform .55s var(--ease-out-expo),border-color .45s ease,
             background .45s ease,box-shadow .55s ease,filter .45s ease;
}
.jml-card:hover{
  filter:none;transform:translateY(-4px);
  border-color:rgba(var(--brand-rgb),.34);
  background:rgba(255,255,255,.06);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.jml-card.flat{filter:none;background:var(--n-900);backdrop-filter:none;}
.jml-card.flat:hover{transform:none;box-shadow:none;}

/* ═══════════════ CAMPO DE FORMULÁRIO ═══════════════ */
.jml-field{margin-bottom:20px;}
.jml-field label{
  display:block;font-family:var(--font-body);font-size:.55rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.35);
  margin-bottom:10px;transition:color .3s ease;
}
.jml-field:focus-within label{color:var(--brand);}
.jml-field .hint{
  display:block;margin-top:6px;font-weight:400;font-size:11.5px;
  letter-spacing:.02em;text-transform:none;color:var(--dim);
}
.jml-field input,.jml-field select,.jml-field textarea{
  width:100%;background:var(--bg);border:1px solid var(--hair);border-radius:2px;
  padding:15px 16px;color:var(--ink);font-family:var(--font-body);font-size:15.5px;
  transition:border-color .35s var(--ease-out-expo),background .35s ease,box-shadow .35s ease;
}
.jml-field textarea{min-height:104px;resize:vertical;line-height:1.6;}
.jml-field input:focus,.jml-field select:focus,.jml-field textarea:focus{
  outline:none;border-color:var(--brand);background:#0C1016;
  box-shadow:0 0 0 3px var(--brand-subtle);
}
.jml-field input::placeholder,.jml-field textarea::placeholder{color:#56606E;}
.jml-field select{
  appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23208FFF' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;
}
.jml-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* ═══════════════ TOPO DE VIDRO ═══════════════ */
.jml-topbar{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(10,11,13,.72);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--hair);
}
.jml-topbar .in{
  max-width:1180px;margin:0 auto;
  padding:14px clamp(20px,4vw,48px);
  display:flex;align-items:center;gap:18px;
}
.jml-brand{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;}
.jml-brand i{font-style:normal;color:var(--brand);}

/* ═══════════════ ORBES DE FUNDO ═══════════════ */
.jml-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(90px);background:var(--brand-glow);}

/* ═══════════════ NAVEGAÇÃO · igual ao site: transparente no topo, vidro ao rolar ═══════════════ */
.jml-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:1.4rem 2.8rem;
}
.jml-nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(8,10,13,.92);
  backdrop-filter:blur(32px) saturate(1.6);-webkit-backdrop-filter:blur(32px) saturate(1.6);
  border-bottom:1px solid rgba(255,255,255,.06);
  opacity:0;transition:opacity .6s ease;
}
.jml-nav.is-solid::before{opacity:1;}
.jml-nav .logo{display:inline-flex;align-items:center;}
.jml-nav .logo img{height:26px;width:auto;display:block;filter:brightness(0) invert(1);}
.jml-nav .links{display:flex;list-style:none;justify-content:center;}
.jml-nav .links a{
  position:relative;font-size:.58rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;text-decoration:none;padding:.5rem 1.4rem;
}
.jml-nav .links a::after{
  content:"";position:absolute;bottom:4px;left:1.4rem;right:1.4rem;height:1px;background:#fff;
  transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease-out-expo);
}
.jml-nav .links a:hover::after{transform:scaleX(1);}
.jml-nav .direita{display:flex;justify-content:flex-end;}
/* botão vazado da navegação, como o AGENDAR do site */
.jml-nav .cta{
  font-size:.5rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.85);
  padding:.55rem 1rem;transition:background .3s ease,color .3s ease;
}
.jml-nav .cta:hover{background:#fff;color:var(--bg);}

/* ═══════════════ HERÓI · título em duas linhas, como "MAIS QUE UM CONSERTO." ═══════════════ */
.jml-title{position:relative;line-height:0;text-align:center;}
.jml-title .linha{
  display:block;white-space:nowrap;
  font-family:var(--font-display);font-weight:700;line-height:1;
  letter-spacing:0;text-transform:uppercase;color:var(--ink);
}
/* Syncopate é muito larga: o tamanho que cabe depende do texto.
   Estes são os do site. Pra outro texto, meça a largura em 100px e ajuste
   na página, como o processo-seletivo.html faz. */
.jml-title .linha:first-child{font-size:clamp(1.9rem,11vw,14rem);}
.jml-title .linha:last-child{font-size:clamp(1.3rem,7.3vw,9.4rem);}
/* camada fantasma atrás do título, deslocada e borrada */
.jml-title .sombra{position:absolute;inset:0;pointer-events:none;z-index:0;}
.jml-title .sombra .linha{color:rgba(240,242,245,.12);opacity:.2;filter:blur(1px);transform:translate(2px,3px);mix-blend-mode:screen;}
.jml-title .frente{position:relative;z-index:1;}

/* filete azul com o reflexo branco que passa */
.jml-deco{width:6rem;height:1px;background:var(--brand);opacity:.65;margin:1.6rem auto 1.4rem;position:relative;overflow:hidden;}
.jml-deco::after{
  content:"";position:absolute;top:0;left:0;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,var(--ink),transparent);
  transform:translateX(-150%);animation:shimmer 3.5s ease-in-out 3s infinite;
}

/* botão claro do herói, como "ORÇAMENTO SEM COMPROMISSO." */
.jml-btn.light{
  background:#fff;color:#121212;border:1px solid #fff;
  font-weight:400;font-size:.58rem;letter-spacing:.42em;padding:.85rem 2rem;
  transition:all .4s ease;
}
.jml-btn.light::after{
  background:linear-gradient(105deg,transparent 20%,rgba(0,0,0,.08) 50%,transparent 80%);
  animation:heroBtnShimmer 5s ease-in-out 2.8s infinite;
}
.jml-btn.light:hover{background:rgba(255,255,255,.05);color:#fff;box-shadow:0 8px 30px rgba(255,255,255,.25);}
.jml-btn .seta{display:inline-block;transition:transform .4s var(--ease-out-expo);opacity:.75;}
.jml-btn:hover .seta{transform:translateX(4px);opacity:1;}

/* "DESLIZE" com a linha escaneando */
.jml-scroll{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;}
.jml-scroll span{font-size:.5rem;letter-spacing:.35em;text-transform:uppercase;color:var(--n-200);opacity:.65;}
.jml-scroll i{width:1px;height:2.5rem;background:var(--n-700);position:relative;overflow:hidden;}
.jml-scroll i::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:var(--brand);animation:scanDown 1.8s ease-in-out infinite;}

/* grade gravada no fundo do herói */
.jml-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,rgba(0,0,0,.5) 0%,transparent 70%);
          mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,rgba(0,0,0,.5) 0%,transparent 70%);}

/* ═══════════════ REVELAÇÃO · estado inicial só com JS ativo ═══════════════
   :not(.jml-in) é o que devolve o hover depois da animação. Sem isso o GSAP
   deixa transform inline no elemento e nenhum :hover com translate funciona. */
.jml-js [data-jml-reveal]:not(.jml-in){opacity:0;transform:translateY(30px);}
.jml-title .ch,.jml-display .ch{display:inline-block;will-change:clip-path;}
.jml-title .w,.jml-display .w{display:inline-block;white-space:nowrap;}

/* ═══════════════ AVISO DE COOKIES · com consentimento de verdade ═══════════════ */
.jml-cookie{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:9998;
  align-items:center;justify-content:space-between;gap:2rem;
  padding:1.25rem 2.8rem;padding-bottom:calc(1.25rem + env(safe-area-inset-bottom));
  background:rgba(8,10,13,.92);
  backdrop-filter:blur(32px) saturate(1.6);-webkit-backdrop-filter:blur(32px) saturate(1.6);
  border-top:1px solid rgba(255,255,255,.06);
}
.jml-cookie.on{display:flex;}
.jml-cookie p{font-size:.72rem;line-height:1.75;letter-spacing:.04em;color:rgba(240,242,245,.7);flex:1;min-width:0;}
.jml-cookie .acoes{display:flex;gap:.9rem;flex-shrink:0;}
.jml-cookie button{
  font-family:var(--font-body);font-size:.5rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  padding:.75rem 1.4rem;cursor:pointer;border:1px solid rgba(255,255,255,.35);
  background:transparent;color:#fff;transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.jml-cookie button:hover{background:#fff;color:var(--bg);border-color:#fff;}
.jml-cookie button.aceitar{background:var(--brand);border-color:var(--brand);}
.jml-cookie button.aceitar:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;}

/* ═══════════════ WHATSAPP FLUTUANTE ═══════════════ */
.jml-whats{
  position:fixed;right:24px;bottom:28px;z-index:9997;width:52px;height:52px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  transition:background .35s ease,transform .25s var(--ease-out-expo),bottom .4s var(--ease-out-expo);
}
.jml-whats:hover{background:#1DA851;transform:translateY(-2px);}
.jml-whats svg{width:26px;height:26px;fill:#fff;}
/* enquanto o aviso de cookies está aberto, o botão sobe e não cobre o texto */
body.jml-cookie-aberto .jml-whats{bottom:calc(var(--jml-cookie-h,96px) + 16px);}

/* ═══════════════ ANIMAÇÕES · verbatim do site ═══════════════ */
@keyframes btnShimmer{0%{left:-70%;opacity:0;}15%{opacity:1;}100%{left:140%;opacity:0;}}
@keyframes pulsePop{
  0%{box-shadow:0 0 0 0 rgba(var(--brand-rgb),.4);}
  70%{box-shadow:0 0 0 15px rgba(var(--brand-rgb),0);}
  100%{box-shadow:0 0 0 0 rgba(var(--brand-rgb),0);}
}
@keyframes eyebrowShimmer{0%{background-position:100% center;}100%{background-position:-100% center;}}
@keyframes pulseDot{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 6px rgba(var(--brand-rgb),.6);}
  50%{opacity:.5;transform:scale(.65);box-shadow:0 0 3px rgba(var(--brand-rgb),.3);}
}
@keyframes rulePass{0%{transform:translateX(-120%);opacity:0;}15%{opacity:1;}85%{opacity:1;}100%{transform:translateX(722%);opacity:0;}}
@keyframes shimmer{0%{transform:translateX(-150%);opacity:0;}30%{opacity:1;}100%{transform:translateX(350%);opacity:0;}}
@keyframes heroBtnShimmer{0%{left:-80%;}60%,100%{left:140%;}}
@keyframes scanDown{0%{top:-100%;}100%{top:100%;}}

/* ═══════════════ RESPONSIVO ═══════════════ */
@media(max-width:767px){
  .jml-row{grid-template-columns:1fr;}
  .jml-nav{padding:1.2rem 1.5rem;}
  .jml-nav .links{display:none;}
  .jml-cookie{flex-direction:column;align-items:flex-start;gap:1rem;padding:1.2rem 1.4rem 1.5rem;
    padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));}
  .jml-whats{right:16px;}
}
@media(prefers-reduced-motion:reduce){
  .jml-btn::after,.jml-rule::after,.jml-pill .dot,.jml-label.shine,.jml-btn.pulse,
  .jml-deco::after,.jml-scroll i::after{animation:none;}
  .jml-card{filter:none;}
  .jml-label.shine{-webkit-text-fill-color:var(--ink);}
  .jml-js [data-jml-reveal]:not(.jml-in){opacity:1;transform:none;}
}