/* ===================================================================
   NEW ORTHOPEDIC — Site institucional
   Paleta: verde-limão / azul / cinza  |  Layout clean + parallax
   =================================================================== */

:root{
  /* Brand */
  --ink:        #0d1726;   /* near-black navy (dark sections) */
  --ink-2:      #13203a;
  --blue:       #284a86;   /* primary blue */
  --blue-deep:  #1c3361;
  --blue-soft:  #5c6e9e;   /* logo blue */
  --lime:       #9fcb3b;   /* verde-limão (logo) */
  --lime-bright:#bce14a;
  --lime-deep:  #7ba429;

  /* Neutrals */
  --gray-900:#111827;
  --gray-700:#374151;
  --gray-600:#54616e;
  --gray-500:#6b7480;
  --gray-400:#9aa4b0;
  --line:#e4e9ef;
  --bg:#ffffff;
  --bg-alt:#f4f7f9;
  --bg-tint:#eef3f6;

  --radius:18px;
  --radius-sm:12px;
  --radius-lg:28px;
  --shadow-sm:0 2px 10px rgba(16,32,60,.06);
  --shadow:0 18px 50px -22px rgba(16,32,60,.30);
  --shadow-lg:0 40px 80px -30px rgba(16,32,60,.45);
  --ring:0 0 0 4px rgba(159,203,59,.30);

  --maxw:1240px;
  --gut:clamp(20px,5vw,64px);

  --ff-display:"Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --ff-body:"Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--ff-body); color:var(--gray-700);
  background:var(--bg); font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
ul{margin:0; padding:0; list-style:none}

h1,h2,h3,h4{font-family:var(--ff-display); color:var(--ink); line-height:1.08; font-weight:700; letter-spacing:-.02em; margin:0}
h1{font-size:clamp(2.2rem,5.2vw,4.2rem)}
h2{font-size:clamp(1.8rem,3.8vw,3rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
p{margin:0 0 1rem}

.container{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}
.section{padding-block:clamp(64px,9vw,130px)}
.section--alt{background:var(--bg-alt)}
.section--ink{background:var(--ink); color:#c7d0dc}
.center{text-align:center}
.lead{font-size:1.14rem; color:var(--gray-600)}

/* Eyebrow / kicker */
.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--ff-body); font-weight:700; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--blue);
  margin-bottom:1.1rem;
}
.kicker::before{content:""; width:26px; height:2px; background:var(--lime); border-radius:2px}
.section--ink .kicker{color:var(--lime-bright)}

.title-mask{display:block; overflow:hidden}

/* ===== Buttons ===== */
.btn{
  --bg:var(--blue); --fg:#fff;
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  padding:.95rem 1.6rem; border-radius:999px; border:0;
  background:var(--bg); color:var(--fg); font-weight:700; font-size:.98rem;
  letter-spacing:.01em; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  box-shadow:0 12px 26px -12px rgba(40,74,134,.6);
}
.btn svg{width:18px;height:18px; transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:hover svg{transform:translateX(4px)}
.btn--lime{--bg:var(--lime); --fg:var(--ink); box-shadow:0 12px 26px -12px rgba(159,203,59,.8)}
.btn--ghost{--bg:transparent; --fg:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.btn--ghost:hover{--bg:rgba(255,255,255,.1)}
.btn--dark{--bg:var(--ink); --fg:#fff}
.btn--lg{padding:1.1rem 2rem; font-size:1.05rem}
.btn--block{width:100%; justify-content:center}

.link-arrow{display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color:var(--blue)}
.link-arrow svg{width:18px;height:18px; transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}

/* ===================================================================
   HEADER / NAV
   =================================================================== */
.header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s;
  padding:18px 0;
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:2rem}
.header.is-solid{background:rgba(255,255,255,.86); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line), var(--shadow-sm); padding:10px 0}
.brand{display:flex; align-items:center; z-index:2}
.brand img{height:62px; width:auto; transition:height .4s var(--ease)}
.header.is-solid .brand img{height:44px}
/* on transparent dark hero we need a light logo chip */
.brand .logo-on-dark{display:block}
.brand .logo-on-light{display:none}
.header.is-solid .brand .logo-on-dark{display:none}
.header.is-solid .brand .logo-on-light{display:block}

.nav{display:flex; align-items:center; gap:2.4rem}
.nav__links{display:flex; gap:2rem}
.nav__links a{
  position:relative; font-weight:600; font-size:.97rem; color:#fff; padding:.3rem 0;
  letter-spacing:.01em; transition:color .25s;
}
.header.is-solid .nav__links a{color:var(--gray-700)}
.nav__links a::after{content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:var(--lime); transition:width .3s var(--ease)}
.nav__links a:hover::after,.nav__links a.active::after{width:100%}
.nav__links a.active{color:var(--lime-bright)}
.header.is-solid .nav__links a.active{color:var(--blue)}

.nav__cta{display:inline-flex}
.burger{display:none; width:46px;height:46px; border:0; background:transparent; cursor:pointer; z-index:120; position:relative}
.burger span{display:block; height:2px; width:26px; margin:5px auto; background:#fff; border-radius:2px; transition:.35s var(--ease)}
.header.is-solid .burger span{background:var(--ink)}
.burger.open span{background:#fff}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:900px){
  .burger{display:block}
  .nav{
    position:fixed; inset:0; width:100%; height:100vh; height:100dvh;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem;
    background:var(--ink); padding:96px 24px 40px; overflow-y:auto;
    transform:translateX(100%); transition:transform .45s var(--ease); z-index:110;
  }
  .nav.open{transform:none}
  .nav__links{flex-direction:column; align-items:center; text-align:center; gap:1.4rem; width:100%}
  .nav__links a,.header .nav__links a,.header.is-solid .nav__links a{
    color:#fff; font-size:1.5rem; font-family:var(--ff-display); font-weight:700;
  }
  .header.is-solid .nav__links a.active,.nav__links a.active{color:var(--lime-bright)}
  .nav__links a::after{display:none}
  .nav__cta{margin-top:.6rem; font-size:1.05rem}
}

/* ===================================================================
   HERO  (slider + parallax)
   =================================================================== */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; color:#fff; overflow:hidden;
  background:radial-gradient(120% 100% at 80% 0%, #1c3361 0%, var(--ink) 60%)}
.hero__slides{position:absolute; inset:0}
.hero__slide{position:absolute; inset:0; opacity:0; transition:opacity 1.2s var(--ease); }
.hero__slide.active{opacity:1}
.hero__media{position:absolute; inset:-8% 0; background-size:cover; background-position:center; transform:scale(1.08); transition:transform 8s linear; will-change:transform}
.hero__slide.active .hero__media{transform:scale(1.16)}
.hero__slide::after{content:""; position:absolute; inset:0;
  background:
    linear-gradient(105deg, rgba(13,23,38,.92) 0%, rgba(13,23,38,.55) 45%, rgba(28,51,97,.30) 100%),
    linear-gradient(0deg, rgba(13,23,38,.55), transparent 55%);
}
.hero__grid{position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(120% 80% at 0% 50%,#000,transparent 75%);}
.hero__inner{position:relative; z-index:3; max-width:760px; padding-block:140px 80px}
.hero__tag{display:inline-flex; align-items:center; gap:.6rem; font-weight:700; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lime-bright); margin-bottom:1.4rem}
.hero__tag .dot{width:8px;height:8px;border-radius:50%;background:var(--lime); box-shadow:0 0 0 4px rgba(159,203,59,.25); animation:pulse 2.4s infinite}
.hero h1{color:#fff; font-size:clamp(2.4rem,5.6vw,4.6rem)}
.hero h1 .accent{color:var(--lime-bright)}
.hero__sub{font-size:clamp(1.05rem,1.6vw,1.32rem); color:#cdd6e2; max-width:560px; margin:1.4rem 0 2.2rem}
.hero__actions{display:flex; flex-wrap:wrap; gap:1rem}

/* slide content animation */
.hero__inner .reveal-word{display:inline-block; overflow:hidden}
.hero__slide:not(.active) .hero__inner{visibility:hidden}
.hero__inner > *{opacity:0; transform:translateY(26px)}
.hero__slide.active .hero__inner > *{animation:rise .9s var(--ease) forwards}
.hero__slide.active .hero__inner > *:nth-child(1){animation-delay:.15s}
.hero__slide.active .hero__inner > *:nth-child(2){animation-delay:.30s}
.hero__slide.active .hero__inner > *:nth-child(3){animation-delay:.45s}
.hero__slide.active .hero__inner > *:nth-child(4){animation-delay:.60s}

.hero__dots{position:absolute; z-index:4; bottom:42px; left:var(--gut); display:flex; gap:.7rem}
.hero__dots button{width:34px;height:4px;border:0;border-radius:4px;background:rgba(255,255,255,.35);cursor:pointer;transition:.3s;overflow:hidden;position:relative}
.hero__dots button.active{background:rgba(255,255,255,.4)}
.hero__dots button.active::after{content:"";position:absolute;inset:0;background:var(--lime);width:0;animation:fill 6s linear forwards}
.hero__scroll{position:absolute; z-index:4; right:var(--gut); bottom:42px; color:#cdd6e2; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; display:flex; align-items:center; gap:.6rem}
.hero__scroll .mouse{width:22px;height:34px;border:1.5px solid rgba(255,255,255,.5);border-radius:12px;position:relative}
.hero__scroll .mouse::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:3px;height:7px;background:var(--lime-bright);border-radius:2px;animation:scrolldot 1.8s infinite}
@media(max-width:640px){.hero__scroll{display:none}}

@keyframes rise{to{opacity:1;transform:none}}
@keyframes fill{to{width:100%}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(159,203,59,.5)}50%{box-shadow:0 0 0 8px rgba(159,203,59,0)}}
@keyframes scrolldot{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%,100%{opacity:0;transform:translate(-50%,12px)}}

/* ===================================================================
   TRUST STRIP
   =================================================================== */
.trust{background:var(--ink); color:#fff; position:relative; z-index:5}
.trust__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.08)}
.trust__item{background:var(--ink); padding:34px 28px; display:flex; gap:1rem; align-items:center}
.trust__item .ic{flex:none; width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:rgba(159,203,59,.14); color:var(--lime-bright)}
.trust__item .ic svg{width:24px;height:24px}
.trust__num{display:block; font-family:var(--ff-display); font-size:1.6rem; color:#fff; line-height:1.05; font-weight:700; margin-bottom:.3rem}
.trust__lbl{display:block; font-size:.9rem; color:#9fb0c4; line-height:1.35}
@media(max-width:820px){.trust__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.trust__grid{grid-template-columns:1fr}}

/* ===================================================================
   ABOUT (mini quem somos)
   =================================================================== */
.about{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center}
.about__media{position:relative}
.about__media .frame{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5}
.about__media .frame img{width:100%;height:100%;object-fit:cover}
.about__media .badge{position:absolute; bottom:-26px; left:-26px; background:#fff; border-radius:var(--radius); padding:20px 24px; box-shadow:var(--shadow); display:flex; gap:1rem; align-items:center; max-width:260px}
.about__media .badge .n{font-family:var(--ff-display); font-size:2.6rem; color:var(--blue); line-height:.9}
.about__media .badge .t{font-size:.86rem; color:var(--gray-600); font-weight:600}
.about__media .deco{position:absolute; top:-28px; right:-20px; width:120px; height:120px; border-radius:24px; background:linear-gradient(135deg,var(--lime),var(--lime-deep)); z-index:-1; opacity:.85}
.about__body p{color:var(--gray-600); font-size:1.06rem}
.about__list{display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1.4rem; margin:1.6rem 0 2rem}
.about__list li{display:flex; gap:.6rem; align-items:flex-start; font-weight:600; color:var(--gray-700); font-size:.98rem}
.about__list svg{flex:none; width:22px;height:22px; color:var(--lime-deep); margin-top:1px}
@media(max-width:860px){.about{grid-template-columns:1fr; gap:60px} .about__media{max-width:440px; margin-inline:auto} .about__list{grid-template-columns:1fr}}

/* ===================================================================
   DIFERENCIAIS
   =================================================================== */
.diff__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:54px}
.diff-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 30px 32px; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.diff-card::before{content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:linear-gradient(90deg,var(--lime),var(--blue)); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease)}
.diff-card:hover{transform:translateY(-8px); box-shadow:var(--shadow); border-color:transparent}
.diff-card:hover::before{transform:scaleX(1)}
.diff-card .ic{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:var(--bg-tint);color:var(--blue);margin-bottom:22px; transition:.4s var(--ease)}
.diff-card:hover .ic{background:var(--blue); color:#fff; transform:rotate(-6deg)}
.diff-card .ic svg{width:28px;height:28px}
.diff-card h3{font-size:1.22rem; margin-bottom:.5rem}
.diff-card p{font-size:.98rem; color:var(--gray-600); margin:0}
.diff-card .num{position:absolute; right:22px; top:18px; font-family:var(--ff-display); font-size:2.4rem; color:var(--bg-tint); font-weight:700}
@media(max-width:860px){.diff__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.diff__grid{grid-template-columns:1fr}}

/* ===================================================================
   PRODUCT cards + featured slider
   =================================================================== */
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.sec-head .lead{max-width:540px; margin:0}

.pslider{margin-top:48px; position:relative}
.pslider__track{display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 4px 24px; scrollbar-width:none}
.pslider__track::-webkit-scrollbar{display:none}
.prod-card{
  scroll-snap-align:start; flex:0 0 300px; min-width:0; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.prod-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.prod-card__img{aspect-ratio:1/1; background:#fff; position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.prod-card__img::after{content:""; position:absolute; inset:0; pointer-events:none}
.prod-card__img img{width:100%;height:100%;object-fit:contain; padding:50px 22px 22px; transition:transform .6s var(--ease); position:relative; z-index:1}
.prod-card:hover .prod-card__img img{transform:scale(1.04)}
.prod-card__tag{position:absolute; z-index:3; top:14px; left:14px; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--blue); background:rgba(255,255,255,.92); backdrop-filter:blur(4px); box-shadow:0 1px 6px rgba(16,32,60,.10); padding:.3rem .7rem; border-radius:999px}
.prod-card__body{padding:20px 22px 24px}
.prod-card__body h3{font-size:1.14rem; margin-bottom:.35rem}
.prod-card__body p{font-size:.9rem; color:var(--gray-500); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.prod-card__more{display:inline-flex; align-items:center; gap:.4rem; margin-top:14px; font-weight:700; font-size:.86rem; color:var(--lime-deep)}
.prod-card__more svg{width:16px;height:16px}

.pslider__nav{display:flex; gap:.6rem}
.pslider__nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink);display:grid;place-items:center;transition:.3s}
.pslider__nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pslider__nav button svg{width:20px;height:20px}

/* ===================================================================
   COVERAGE MAP
   =================================================================== */
.coverage{position:relative; overflow:hidden}
.coverage__grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,70px); align-items:center}
.coverage .mapwrap{position:relative}
.map-svg{width:100%; height:auto; overflow:visible}
.map-state{fill:rgba(255,255,255,.06); stroke:rgba(255,255,255,.18); stroke-width:1; transition:fill .5s}
.map-state.hot{fill:url(#limegrad); stroke:rgba(188,225,74,.6)}
.pin{cursor:default}
.pin .ring{fill:none; stroke:var(--lime-bright); stroke-width:2; transform-origin:center; transform-box:fill-box; opacity:0; animation:ping 2.6s var(--ease) infinite}
.pin .core{fill:var(--lime-bright); filter:drop-shadow(0 0 6px rgba(188,225,74,.8))}
.pin .label{fill:#fff; font:700 14px var(--ff-body); paint-order:stroke; stroke:rgba(13,23,38,.65); stroke-width:3.2px}
.pin .label.sub{font-size:10.5px; font-weight:700; fill:var(--lime-bright); stroke-width:2.6px}
.pin.blue .ring{stroke:#7fa0ff} .pin.blue .core{fill:#9db8ff; filter:drop-shadow(0 0 6px rgba(157,184,255,.8))}
@keyframes ping{0%{opacity:.9; r:5}70%{opacity:0; r:26}100%{opacity:0; r:26}}
.coverage__stats{display:flex; gap:2.4rem; margin-top:2rem; flex-wrap:wrap}
.coverage__stats .s b{font-family:var(--ff-display); font-size:2.2rem; color:var(--lime-bright); display:block; line-height:1}
.coverage__stats .s span{font-size:.9rem; color:#9fb0c4}
.coverage__pinlist{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem}
.coverage__pinlist span{font-size:.84rem; padding:.4rem .85rem; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:#cdd6e2}
@media(max-width:860px){.coverage__grid{grid-template-columns:1fr; gap:40px} .coverage .mapwrap{max-width:440px; margin-inline:auto}}

/* ===================================================================
   NEWS
   =================================================================== */
.news__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:50px}
.news-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.news-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.news-card__top{padding:26px 26px 0}
.news-card .meta{display:flex; gap:.7rem; align-items:center; font-size:.78rem; color:var(--gray-500); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:1rem}
.news-card .meta .src{color:var(--blue)}
.news-card .meta::before{content:""; width:8px;height:8px;border-radius:2px;background:var(--lime)}
.news-card h3{font-size:1.2rem; line-height:1.2; margin-bottom:.7rem}
.news-card p{font-size:.94rem; color:var(--gray-600)}
.news-card__foot{margin-top:auto; padding:0 26px 26px}
@media(max-width:860px){.news__grid{grid-template-columns:1fr}}

/* ===================================================================
   SOCIAL
   =================================================================== */
.social__head{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.social__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px}
.ig-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.ig-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.ig-card__head{display:flex; align-items:center; gap:.7rem; padding:14px 16px}
.ig-card__head .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--lime),var(--blue));display:grid;place-items:center;color:#fff;font-weight:800;font-family:var(--ff-display);font-size:.9rem}
.ig-card__head .nm{font-weight:700;font-size:.9rem;color:var(--ink)}
.ig-card__head .nm small{display:block;font-weight:500;color:var(--gray-500);font-size:.76rem}
.ig-card__media{aspect-ratio:1/1; overflow:hidden; position:relative; background:var(--bg-tint)}
.ig-card__media img{width:100%;height:100%;object-fit:cover; transition:transform .7s var(--ease)}
.ig-card:hover .ig-card__media img{transform:scale(1.06)}
.ig-card__actions{display:flex; gap:1rem; padding:12px 16px 4px; color:var(--gray-700)}
.ig-card__actions svg{width:22px;height:22px}
.ig-card__cap{padding:0 16px 18px; font-size:.9rem; color:var(--gray-600)}
.ig-card__cap b{color:var(--ink)}
@media(max-width:860px){.social__grid{grid-template-columns:1fr}}

/* ===================================================================
   CTA band
   =================================================================== */
.cta-band{position:relative; overflow:hidden; background:linear-gradient(120deg,var(--blue-deep),var(--blue) 60%,#2c5aa0); color:#fff; border-radius:var(--radius-lg); padding:clamp(40px,6vw,80px); display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.cta-band::after{content:""; position:absolute; right:-60px; top:-60px; width:280px;height:280px;border-radius:50%; background:radial-gradient(circle,var(--lime) 0%, transparent 70%); opacity:.28}
.cta-band h2{color:#fff; max-width:600px}
.cta-band p{color:#d4ddec; margin:.6rem 0 0; max-width:520px}
.cta-band .actions{position:relative; z-index:2}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer{background:var(--ink); color:#9fb0c4; padding-top:70px}
.footer__top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.08)}
.footer__brand img{height:54px; margin-bottom:18px}
.footer__brand p{font-size:.94rem; max-width:300px}
.footer h4{color:#fff; font-family:var(--ff-display); font-size:1.05rem; margin-bottom:1.1rem}
.footer__links a{display:block; padding:.34rem 0; font-size:.95rem; transition:color .25s, padding .25s}
.footer__links a:hover{color:var(--lime-bright); padding-left:6px}
.footer__contact li{display:flex; gap:.75rem; align-items:flex-start; margin-bottom:.9rem; font-size:.94rem}
.footer__contact svg{flex:none; width:20px;height:20px; color:var(--lime-bright); margin-top:2px}
.footer__contact a:hover{color:#fff}
.socials{display:flex; gap:.6rem; margin-top:1.2rem}
.socials a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.07);color:#cdd6e2;transition:.3s}
.socials a:hover{background:var(--lime); color:var(--ink); transform:translateY(-3px)}
.socials svg{width:20px;height:20px}
.footer__badge{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--lime-bright);border:1px solid rgba(188,225,74,.3);padding:.45rem .8rem;border-radius:999px}
.footer__bottom{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:24px 0 34px; font-size:.84rem; color:#6f7f93}
@media(max-width:860px){.footer__top{grid-template-columns:1fr 1fr; gap:34px}}
@media(max-width:520px){.footer__top{grid-template-columns:1fr}}

/* ===================================================================
   PAGE HERO (inner)
   =================================================================== */
.page-hero{position:relative; padding:160px 0 80px; color:#fff; overflow:hidden; background:var(--ink)}
.page-hero__bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.32; transform:scale(1.08)}
.page-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(13,23,38,.95),rgba(28,51,97,.6))}
.page-hero .container{position:relative; z-index:2}
.page-hero h1{color:#fff; max-width:760px}
.page-hero p{color:#cdd6e2; max-width:560px; margin-top:1rem; font-size:1.12rem}
.crumb{display:flex; gap:.5rem; align-items:center; font-size:.85rem; color:#9fb0c4; margin-bottom:1.2rem}
.crumb a:hover{color:var(--lime-bright)}
.crumb span{color:var(--lime-bright)}

/* ===== Story / MVV ===== */
.story{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center}
.story.rev .story__media{order:2}
.story__media .frame{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:5/4}
.story__media img{width:100%;height:100%;object-fit:cover}
.story__body p{color:var(--gray-600)}
@media(max-width:840px){.story{grid-template-columns:1fr; gap:40px} .story.rev .story__media{order:0}}

.mvv{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:54px}
.mvv-card{position:relative; border-radius:var(--radius); padding:38px 32px; color:#fff; overflow:hidden; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end}
.mvv-card .ic{position:absolute; top:30px; left:32px; width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.16)}
.mvv-card .ic svg{width:28px;height:28px;color:#fff}
.mvv-card h3{color:#fff; font-size:1.5rem; margin-bottom:.6rem}
.mvv-card p{color:rgba(255,255,255,.9); font-size:.96rem; margin:0}
.mvv-card.m{background:linear-gradient(150deg,var(--blue),var(--blue-deep))}
.mvv-card.v{background:linear-gradient(150deg,var(--lime-deep),#5c7d1f)}
.mvv-card.va{background:linear-gradient(150deg,var(--ink),var(--ink-2))}
@media(max-width:820px){.mvv{grid-template-columns:1fr}}

.values-list{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:40px}
.value-chip{display:flex; gap:1rem; align-items:flex-start; padding:22px 24px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; transition:.35s var(--ease)}
.value-chip:hover{border-color:var(--lime); transform:translateY(-4px); box-shadow:var(--shadow-sm)}
.value-chip .ic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--bg-tint);color:var(--blue);display:grid;place-items:center}
.value-chip .ic svg{width:24px;height:24px}
.value-chip h4{font-family:var(--ff-display); color:var(--ink); margin-bottom:.2rem}
.value-chip p{font-size:.92rem; color:var(--gray-600); margin:0}
@media(max-width:640px){.values-list{grid-template-columns:1fr}}

/* timeline */
.timeline{display:flex; gap:24px; margin-top:50px; flex-wrap:wrap}
.tl-step{flex:1 1 200px; position:relative; padding-top:28px}
.tl-step::before{content:""; position:absolute; top:6px; left:0; right:0; height:2px; background:var(--line)}
.tl-step::after{content:""; position:absolute; top:0; left:0; width:14px;height:14px;border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(159,203,59,.2)}
.tl-step b{font-family:var(--ff-display); color:var(--blue); font-size:1.1rem; display:block}
.tl-step span{font-size:.94rem; color:var(--gray-600)}

/* ===================================================================
   PRODUCTS PAGE
   =================================================================== */
.shop{display:grid; grid-template-columns:268px minmax(0,1fr); gap:44px; align-items:start}
.shop__aside{position:sticky; top:96px}
.cat-menu{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff}
.cat-menu h4{font-family:var(--ff-display); font-size:1rem; padding:18px 22px; border-bottom:1px solid var(--line); color:var(--ink); margin:0; background:var(--bg-alt)}
.cat-menu button{display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; border:0; background:transparent; padding:14px 22px; cursor:pointer; font-size:.96rem; font-weight:600; color:var(--gray-600); border-left:3px solid transparent; transition:.25s}
.cat-menu button:hover{background:var(--bg-alt); color:var(--ink)}
.cat-menu button.active{color:var(--blue); border-left-color:var(--lime); background:var(--bg-tint)}
.cat-menu button .c{font-size:.78rem; background:var(--bg-tint); color:var(--gray-500); border-radius:999px; padding:.1rem .5rem; font-weight:700}
.cat-menu button.active .c{background:var(--blue); color:#fff}
.aside-card{margin-top:22px; border-radius:var(--radius); padding:26px; background:linear-gradient(150deg,var(--blue),var(--blue-deep)); color:#fff}
.aside-card h4{color:#fff; font-family:var(--ff-display); margin-bottom:.5rem}
.aside-card p{font-size:.9rem; color:#cfd8e8; margin-bottom:1.1rem}

.shop__main .bar{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:1rem}
.shop__main .bar h2{font-size:1.6rem}
.shop__main .bar .count{color:var(--gray-500); font-size:.92rem}
.grid-products{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.grid-products .prod-card{flex:initial; min-width:0}
@media(max-width:1080px){.grid-products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:920px){
  .shop{grid-template-columns:minmax(0,1fr)}
  .shop__aside{position:static; min-width:0}
  .cat-menu{display:flex; overflow-x:auto; border-radius:999px; padding:6px; -webkit-overflow-scrolling:touch}
  .cat-menu h4{display:none}
  .cat-menu button{white-space:nowrap; border-left:0; border-radius:999px; padding:.6rem 1rem}
  .cat-menu button.active{border-left:0}
  .aside-card{display:none}
}
@media(max-width:560px){.grid-products{grid-template-columns:minmax(0,1fr); gap:16px}}

/* product modal */
.modal{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px}
.modal.open{display:flex}
.modal__backdrop{position:absolute; inset:0; background:rgba(8,15,28,.62); backdrop-filter:blur(4px); animation:fade .3s}
.modal__panel{position:relative; z-index:2; background:#fff; border-radius:var(--radius-lg); max-width:920px; width:100%; max-height:90vh; overflow:auto; display:grid; grid-template-columns:1fr 1fr; animation:pop .4s var(--ease)}
.modal__close{position:absolute; top:16px; right:16px; z-index:5; width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.9);cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.modal__close svg{width:22px;height:22px}
.modal__gallery{background:#fff; padding:22px; display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center}
.modal__gallery .main{width:100%; aspect-ratio:1/1; display:grid; place-items:center; background:#fff; border-radius:var(--radius)}
.modal__gallery .main img{max-width:100%; max-height:100%; object-fit:contain}
.modal__thumbs{display:flex; gap:10px}
.modal__thumbs button{width:60px;height:60px;border-radius:10px;border:1px solid var(--line);background:#fff;padding:6px;cursor:pointer;transition:.25s}
.modal__thumbs button.active{border-color:var(--blue); box-shadow:var(--ring)}
.modal__thumbs img{width:100%;height:100%;object-fit:contain}
.modal__info{padding:40px 38px}
.modal__info .tag{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);background:var(--bg-tint);padding:.3rem .7rem;border-radius:999px;display:inline-block;margin-bottom:1rem}
.modal__info h2{font-size:1.7rem; margin-bottom:.8rem}
.modal__info .desc{color:var(--gray-600); font-size:1rem}
.modal__info h4{font-family:var(--ff-display); font-size:1rem; color:var(--ink); margin:1.6rem 0 .6rem}
.spec{width:100%; border-collapse:collapse; font-size:.92rem}
.spec tr{border-bottom:1px solid var(--line)}
.spec td{padding:.6rem 0}
.spec td:first-child{color:var(--gray-500); width:45%}
.spec td:last-child{color:var(--ink); font-weight:600; text-align:right}
.modal__info .note{font-size:.8rem; color:var(--gray-400); margin-top:1.4rem}
@media(max-width:720px){.modal__panel{grid-template-columns:1fr; max-height:94vh} .modal__gallery{padding:24px}}
@keyframes pop{from{opacity:0; transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ===================================================================
   CONTACT
   =================================================================== */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,4vw,56px); align-items:start}
.contact-info{background:var(--ink); color:#c7d0dc; border-radius:var(--radius-lg); padding:42px 38px}
.contact-info h3{color:#fff; margin-bottom:1.4rem}
.contact-info .row{display:flex; gap:1rem; align-items:flex-start; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08)}
.contact-info .row:last-of-type{border-bottom:0}
.contact-info .ic{flex:none;width:46px;height:46px;border-radius:12px;background:rgba(159,203,59,.14);color:var(--lime-bright);display:grid;place-items:center}
.contact-info .ic svg{width:22px;height:22px}
.contact-info .row b{color:#fff; display:block; font-family:var(--ff-display); font-weight:600}
.contact-info .row a,.contact-info .row span{color:#aebac9; font-size:.96rem}
.contact-info .row a:hover{color:var(--lime-bright)}
.contact-info .socials{margin-top:1.6rem}

.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px 38px; box-shadow:var(--shadow-sm)}
.form-card .grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{margin-bottom:18px; position:relative}
.field label{display:block; font-size:.85rem; font-weight:700; color:var(--gray-700); margin-bottom:.4rem}
.field label .req{color:var(--lime-deep)}
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:inherit; font-size:.98rem; color:var(--ink); background:#fff; transition:.25s; outline:none;
}
.field textarea{resize:vertical; min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue); box-shadow:var(--ring)}
.form-note{font-size:.82rem; color:var(--gray-400); margin-top:.4rem}
.form-success{display:none; text-align:center; padding:30px}
.form-success.show{display:block; animation:pop .4s var(--ease)}
.form-success .ck{width:70px;height:70px;border-radius:50%;background:var(--lime);display:grid;place-items:center;margin:0 auto 18px}
.form-success .ck svg{width:36px;height:36px;color:var(--ink)}
.wa-btn{display:inline-flex; gap:.6rem; align-items:center; margin-top:1rem; font-weight:700; color:#1faa59}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr} .form-card .grid2{grid-template-columns:1fr}}

.map-embed{margin-top:40px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); height:380px}
.map-embed iframe{width:100%;height:100%;border:0; filter:grayscale(.2) contrast(1.02)}

/* ===================================================================
   SCROLL REVEAL + PARALLAX utils
   =================================================================== */
.reveal{opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}
[data-parallax]{will-change:transform}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important; transition-duration:.05s !important}
  .reveal{opacity:1; transform:none}
}

/* ===================================================================
   FLOATING WHATSAPP
   =================================================================== */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:120;
  display:inline-flex; align-items:center; gap:.6rem;
  background:#25d366; color:#0b2e16; font-weight:700; font-size:.95rem;
  padding:13px 18px 13px 14px; border-radius:999px; text-decoration:none;
  box-shadow:0 14px 30px -8px rgba(37,211,102,.6), 0 4px 12px rgba(0,0,0,.18);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-float svg{width:26px;height:26px;flex:none}
.wa-float .wa-float__txt{white-space:nowrap}
.wa-float:hover{transform:translateY(-3px); box-shadow:0 20px 40px -10px rgba(37,211,102,.7)}
.wa-float::before{content:""; position:absolute; inset:0; border-radius:999px; background:#25d366; z-index:-1; animation:waPulse 2.6s var(--ease) infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@media(max-width:600px){
  .wa-float{right:16px; bottom:16px; padding:14px; gap:0}
  .wa-float .wa-float__txt{display:none}
}

/* ===================================================================
   SELOS / CERTIFICAÇÕES
   =================================================================== */
.seals{background:var(--bg-alt)}
.seals__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:48px}
.seal{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.7rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 16px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s}
.seal:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--lime)}
.seal__ic{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(159,203,59,.18),rgba(40,74,134,.12)); color:var(--blue)}
.seal__ic svg{width:30px;height:30px}
.seal b{font-family:var(--ff-display); font-size:1rem; color:var(--ink); line-height:1.1}
.seal span{font-size:.8rem; color:var(--gray-500); line-height:1.3}
@media(max-width:1080px){.seals__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.seals__grid{grid-template-columns:repeat(2,1fr)}}