/* ============================================================
   Clorando — site estático (index + usinagem-cnc)
   Estilos base + estados interativos (antes calculados via React)
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#202124;background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Space Grotesk','Manrope',system-ui,sans-serif;margin:0;line-height:1.08}
p{margin:0}
a{color:#0798D2;text-decoration:none}
a:hover{color:#19A957}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}
:focus-visible{outline:3px solid #302F95;outline-offset:3px;border-radius:5px}
::selection{background:#A8D42E;color:#12331d}

/* ---- keyframes ---- */
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes riseL{from{opacity:0;transform:translateX(-38px)}to{opacity:1;transform:none}}
@keyframes riseR{from{opacity:0;transform:translateX(38px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes heroPar{to{transform:translateY(70px) scale(1.14)}}
@keyframes machinePar{to{transform:translateY(-26px)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(8deg)}}
@keyframes floatyY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(9px);opacity:.4}}
@keyframes dash{to{stroke-dashoffset:-260}}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
@keyframes pulseRing{0%,100%{box-shadow:0 0 0 0 rgba(168,212,46,.55)}70%{box-shadow:0 0 0 14px rgba(168,212,46,0)}}
@keyframes heroIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes machineIn{from{opacity:0;transform:translateX(50px) scale(.97)}to{opacity:1;transform:none}}
@keyframes drawLine{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes shine{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(230%) skewX(-18deg)}}
@keyframes doseBar{0%,100%{transform:scaleX(.62)}50%{transform:scaleX(.9)}}
@keyframes doseBar2{0%,100%{transform:scaleX(.55)}50%{transform:scaleX(.78)}}

@media (prefers-reduced-motion: reduce){
 *{animation-duration:.001s!important;animation-delay:0!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001s!important}
 [data-reveal]{opacity:1!important;transform:none!important}
}

/* ============================================================
   HEADER — transparente/alto no topo, branco/curto ao rolar
   ============================================================ */
#site-header{position:fixed;top:0;left:0;right:0;z-index:60;height:86px;background:transparent;
  box-shadow:none;transition:height .35s cubic-bezier(.4,0,.2,1),background .35s ease,box-shadow .35s ease;
  display:flex;align-items:center}
body.scrolled #site-header{height:62px;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.15) blur(12px);backdrop-filter:saturate(1.15) blur(12px);
  box-shadow:0 8px 30px rgba(16,24,40,.12)}

/* Nav desktop */
.nav-link{position:relative;font:600 13px/1 'Manrope',sans-serif;letter-spacing:.1px;padding:6px 1px;
  white-space:nowrap;transition:color .25s ease}
.nav-link .bar{position:absolute;left:0;right:0;bottom:-5px;height:2.5px;background:#A8D42E;border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav-link.active .bar{transform:scaleX(1)}

/* Home: texto claro sobre o hero escuro, escuro ao rolar */
body.home .nav-link{color:rgba(255,255,255,.94)}
body.home .nav-link.active{color:#A8D42E}
body.home.scrolled .nav-link{color:#202124}
body.home.scrolled .nav-link.active{color:#19A957}
body.home .burger span{background:#fff}
body.home.scrolled .burger span{background:#202124}

/* CNC: hero claro → texto sempre escuro */
body.cnc .nav-link{color:#202124}
body.cnc .nav-link.active{color:#19A957}
body.cnc .burger span{background:#202124}

/* Botão CTA do header */
.header-cta{border:0;background:linear-gradient(120deg,#19A957,#0798D2);color:#fff;font:700 12.5px 'Manrope';
  padding:10px 16px;border-radius:999px;box-shadow:0 8px 20px rgba(25,169,87,.34);white-space:nowrap}

/* Hamburger */
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:40px;
  background:transparent;border:0}
.burger span{border-radius:3px;transition:background .3s}
.burger span:nth-child(1),.burger span:nth-child(2){width:26px;height:3px}
.burger span:nth-child(3){width:18px;height:3px}

/* Alterna nav desktop / botão mobile em 1080px */
.nav-desktop{display:flex;gap:clamp(6px,0.85vw,15px)!important}
.nav-mobile-btn{display:none}
@media (max-width:1200px){
  .nav-desktop{display:none}
  .nav-mobile-btn{display:flex}
}

/* ============================================================
   MENU MOBILE (overlay)
   ============================================================ */
#mobile-menu{position:fixed;inset:0;z-index:70;display:none;flex-direction:column;
  padding:22px clamp(20px,6vw,40px)}
#mobile-menu.open{display:flex;animation:fadeIn .3s ease}
body.home #mobile-menu{background:linear-gradient(160deg,#12331d,#0b3a63)}
body.cnc #mobile-menu{background:linear-gradient(160deg,#12153f,#0b3a63)}
#mobile-menu a{color:#fff;font:600 22px 'Space Grotesk';padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.1)}
#mobile-menu .mm-close{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);
  background:transparent;color:#fff;font:300 26px/1 'Manrope'}
#mobile-menu .mm-cta{margin-top:22px;border:0;background:#A8D42E;color:#12331d;font:800 16px 'Manrope';
  padding:16px;border-radius:14px}
body.menu-open{overflow:hidden}

/* ============================================================
   HOVER — cards sobem, imagens dão zoom (antes via JS)
   ============================================================ */
.card{transition:transform .35s ease,box-shadow .35s ease}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 48px rgba(16,24,40,.16)}
.zoom{overflow:hidden}
.zoom img{transition:transform .5s ease}
.zoom:hover img{transform:scale(1.07)}
.img-zoom{transition:transform .5s ease}
.img-zoom:hover{transform:scale(1.07)}

/* ============================================================
   PARALLAX — só onde há suporte a scroll-driven animations
   (evita “buraco” no hero em navegadores sem suporte)
   ============================================================ */
@supports (animation-timeline: scroll()){
  .parallax-hero{animation:heroPar linear both;animation-timeline:scroll(root);animation-range:0 760px;will-change:transform}
  .parallax-machine{animation:machinePar linear both;animation-timeline:scroll(root);animation-range:0 700px}
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
#lightbox{position:fixed;inset:0;z-index:90;background:rgba(6,16,11,.92);display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,60px)}
#lightbox.open{display:flex;animation:fadeIn .25s ease}
#lightbox .lb-btn{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.08);color:#fff}
#lightbox .lb-close{top:20px;right:20px;width:48px;height:48px;font:300 26px/1 'Manrope'}
#lightbox .lb-prev{left:16px;top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:22px}
#lightbox .lb-next{right:16px;top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:22px}
#lightbox figure{margin:0;max-width:1000px;text-align:center}
#lightbox img{max-width:100%;max-height:76vh;border-radius:14px;box-shadow:0 30px 60px rgba(0,0,0,.5);animation:pop .3s ease}
#lightbox figcaption{margin-top:16px;color:#fff;font:600 15px 'Manrope'}
#lightbox figcaption .lb-count{color:rgba(255,255,255,.55);font-weight:500;margin-left:8px}

/* ============================================================
   CNC — hotspots da máquina
   ============================================================ */
.spot-dot{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;
  border:2.5px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.35);animation:pulseRing 2.6s infinite;
  cursor:pointer;padding:0}
.spot-tip{position:absolute;transform:translate(-50%,-130%);background:#12153f;color:#fff;font:700 13px 'Manrope';
  padding:10px 15px;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.4);white-space:nowrap;
  animation:pop .25s ease;pointer-events:none;display:none;z-index:3}
.spot-tip.show{display:block}
.spot-tip::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;background:#12153f}
.spot-row{text-align:left;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:13px;padding:15px 18px;color:#fff;
  transition:background .3s ease,border-color .3s ease;cursor:pointer;width:100%}
.spot-row.active{background:rgba(168,212,46,.18);border-color:rgba(168,212,46,.65)}

/* ============================================================
   CNC — FAQ (native <details>)
   ============================================================ */
.faq details{background:#fff;border-radius:15px;box-shadow:0 8px 20px rgba(16,24,40,.05);overflow:hidden}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 22px;cursor:pointer;font:700 15.5px 'Manrope';color:#12331d}
.faq summary::-webkit-details-marker{display:none}
.faq summary .faq-ic{flex:0 0 auto;width:28px;height:28px;border-radius:9px;background:#eef4f0;color:#19A957;
  display:grid;place-items:center;font:700 16px/1 'Manrope';transition:transform .3s ease}
.faq details[open] summary .faq-ic{transform:rotate(45deg)}
.faq .faq-a{padding:0 22px 20px;font-size:14.5px;line-height:1.6;color:#5f6368}

/* Form field com erro */
.field-error{border-color:#c62828 !important}

/* Responsividade dos formulários: campos encolhem para caber (evita corte no mobile) */
form label{min-width:0}
form div{min-width:0}
form input:not([type=checkbox]):not([type=radio]),
form textarea,
form select{width:100%;max-width:100%}