/* Isoluma · Landing Isocube
   Adobe Clean, azul #576ce9, laranja #e09944, chumbo #282828, cinza #EDEDED */

@font-face{font-family:"Adobe Clean";font-weight:300;font-style:normal;font-display:swap;src:url("../assets/fonts/AdobeClean-Light.otf") format("opentype")}
@font-face{font-family:"Adobe Clean";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/AdobeClean-Regular.otf") format("opentype")}
@font-face{font-family:"Adobe Clean";font-weight:500;font-style:normal;font-display:swap;src:url("../assets/fonts/AdobeClean-Medium.otf") format("opentype")}
@font-face{font-family:"Adobe Clean";font-weight:700;font-style:normal;font-display:swap;src:url("../assets/fonts/AdobeClean-Bold.otf") format("opentype")}
@font-face{font-family:"Adobe Clean";font-weight:800;font-style:normal;font-display:swap;src:url("../assets/fonts/AdobeClean-ExtraBold.otf") format("opentype")}

:root{
  --chumbo:#282828;
  --azul:#576ce9;
  --azul-btn:#5064e3;      /* mesmo azul, 4.9:1 com texto branco */
  --azul-hover:#3f52cc;
  --grad:linear-gradient(100deg,#3f52cc 0%,#5f74ee 100%);
  --grad-text:linear-gradient(95deg,#3f52cc 0%,#7d90f5 100%);
  --sombra-btn:0 1px 2px rgba(48,64,170,.28),0 10px 22px -8px rgba(63,82,204,.55);
  --sombra-btn-hover:0 2px 4px rgba(48,64,170,.28),0 16px 30px -8px rgba(63,82,204,.6);
  --laranja:#e09944;
  --cinza:#ededed;
  --bg:#f5f5f5;
  --surface:#ffffff;
  --branco:#fff;
  --texto:#282828;
  --texto-2:#575757;
  --linha:#e2e2e2;

  --font:"Adobe Clean","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:16px;
  --gutter:clamp(20px,4vw,48px);
  --section:clamp(88px,12vw,168px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px;scrollbar-color:var(--azul) var(--cinza)}
body{margin:0;font-family:var(--font);font-weight:400;font-size:1.0625rem;line-height:1.6;color:var(--texto);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,figure,blockquote{margin:0}
a{color:inherit}
::selection{background:var(--azul);color:#fff}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--cinza)}
::-webkit-scrollbar-thumb{background:var(--azul);border-radius:8px;border:3px solid var(--cinza)}

.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:1360px}
.section{padding-block:var(--section)}
.skip{position:absolute;left:12px;top:-60px;background:var(--chumbo);color:#fff;padding:10px 16px;border-radius:8px;z-index:100;transition:top .2s}
.skip:focus{top:12px}

/* tipografia */
.h2{font-weight:700;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.lead{font-weight:300;font-size:clamp(1.25rem,2.1vw,1.625rem);line-height:1.5;color:var(--texto)}

/* botões */
.btn{display:inline-flex;align-items:center;gap:.65em;background:var(--grad);color:#fff;font-weight:700;font-size:1rem;line-height:1;text-decoration:none;padding:.95em 1.4em;border-radius:999px;box-shadow:var(--sombra-btn);transition:filter .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn .arr{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.btn:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:var(--sombra-btn-hover)}
.btn:hover .arr{transform:translate(2px,-2px)}
.btn:active{transform:translateY(0) scale(.98);box-shadow:0 1px 2px rgba(48,64,170,.3),0 4px 10px -4px rgba(63,82,204,.5);filter:none}
.btn-sm{font-size:.9375rem;padding:.85em 1.2em}
.btn-lg{font-size:1.1875rem;padding:1.1em 1.7em}
.btn-light{background:#fff;color:var(--chumbo);box-shadow:0 1px 2px rgba(0,0,0,.18),0 10px 22px -8px rgba(20,28,90,.55)}
.btn-light:hover{background:#fff;filter:none;box-shadow:0 2px 4px rgba(0,0,0,.18),0 16px 30px -8px rgba(20,28,90,.6)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(245,245,245,.94);transition:box-shadow .3s}
.site-header.is-stuck{box-shadow:0 1px 0 var(--linha)}
.header-in{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand img{height:52px;width:auto}

/* hero */
.hero{padding-top:clamp(40px,7vw,96px)}
.hero .wrap:first-child{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-title{font-weight:800;font-size:clamp(2.6rem,7.2vw,5.5rem);line-height:1.02;letter-spacing:-.035em}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-title .line>span{display:block}
.hero-title em{font-style:normal;color:var(--azul-btn);background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-lead{max-width:62ch;margin-top:clamp(24px,3vw,36px)}
.hero-sub{max-width:80ch;margin-top:18px;color:var(--texto-2)}
.hero-cta{margin-top:clamp(28px,3.4vw,40px)}
.hero-media{margin-top:clamp(48px,7vw,88px);aspect-ratio:2/1;border-radius:var(--r)}

/* placeholders de imagem */
.ph{position:relative;display:grid;place-items:center;align-content:center;gap:14px;background:var(--cinza);color:var(--texto-2);text-align:center;overflow:hidden;padding:24px}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph img[data-parallax]{inset:-10% 0 auto 0;height:120%;will-change:transform}
.hero-media img{object-position:50% 62%}
.ph-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff}
.ph-ico svg{width:26px;height:26px;fill:none;stroke:var(--azul);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ph figcaption{font-weight:500;font-size:.9375rem;line-height:1.4}
.ph small{display:block;font-weight:400;font-size:.8125rem;opacity:.8;margin-top:2px}
.ph:has(img) .ph-ico,.ph:has(img) figcaption{display:none}

/* intro */
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,96px);align-items:start}
.intro-text{display:grid;gap:22px;padding-top:.5em}
.intro-text p:not(.lead){color:var(--texto-2);max-width:48ch}

/* benefícios */
.why{background:var(--surface);border-radius:clamp(24px,3vw,40px);margin-inline:clamp(8px,1.5vw,20px)}
.why-title{max-width:16ch;margin-bottom:clamp(40px,5vw,72px)}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.card{display:flex;flex-direction:column;background:var(--bg);border-radius:var(--r);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(40,40,40,.28)}
.card .ph{flex:1;min-height:260px;border-radius:0;transition:background .4s}
.card:hover .ph{background:#e3e3e3}
.card-body{padding:clamp(24px,2.6vw,36px);display:grid;gap:10px}
.ic{width:30px;height:30px;fill:none;stroke:var(--azul);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.card h3{font-weight:700;font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.3;letter-spacing:-.015em}
.card p{color:var(--texto-2);max-width:46ch}
.c-a{grid-column:span 7}.c-b{grid-column:span 5}.c-c{grid-column:span 5}.c-d{grid-column:span 7}
.c-b .ph,.c-c .ph{min-height:220px}
.why-cta{margin-top:clamp(40px,5vw,64px);display:flex;justify-content:center}

/* depoimentos */
.proof-title{max-width:18ch;margin-bottom:clamp(36px,5vw,64px)}
.quote{background:var(--chumbo);color:#fff;border-radius:var(--r);padding:clamp(28px,5vw,72px);display:grid;gap:clamp(24px,3vw,36px)}
.quote-mark{width:44px;fill:var(--laranja)}
.quote blockquote{display:grid;gap:16px clamp(32px,6vw,88px);grid-template-columns:1.1fr .9fr;align-content:start}
.quote blockquote p:first-child{grid-row:1/span 3}
.quote blockquote p:not(:first-child){grid-column:2;max-width:46ch}
@media (max-width:900px){.quote blockquote{grid-template-columns:1fr}.quote blockquote p:first-child{grid-row:auto}.quote blockquote p:not(:first-child){grid-column:auto}}
.quote blockquote p{font-weight:300;font-size:clamp(1.1875rem,1.9vw,1.5rem);line-height:1.55}
.quote blockquote p:first-child{font-weight:500;font-size:clamp(1.5rem,2.8vw,2.25rem);line-height:1.25;letter-spacing:-.015em}
.quote figcaption{display:grid;gap:2px;padding-top:clamp(8px,2vw,20px)}
.quote figcaption strong{font-weight:700;font-size:1.125rem}
.quote figcaption span{color:#c9c9c9;font-size:.9375rem}

/* sobre */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,96px);align-items:center}
.about-media{aspect-ratio:6/7;border-radius:var(--r)}
.about-text{display:grid;gap:22px}
.about-text .h2{margin-bottom:6px}
.about-text p:not(.lead){color:var(--texto-2);max-width:52ch}

/* cta final */
.section-end{padding-bottom:clamp(56px,8vw,112px)}
.final-panel{position:relative;overflow:hidden;background:var(--grad);color:#fff;border-radius:var(--r);padding:clamp(40px,8vw,112px) clamp(24px,6vw,96px);display:grid;justify-items:start;gap:clamp(20px,2.4vw,28px)}
.final-bg{position:absolute;inset:0;z-index:0;padding:0 clamp(24px,10vw,160px) 0 0;background:var(--grad);color:#fff;place-items:center end}
.final-bg .ph-ico{background:rgba(255,255,255,.18)}
.final-bg .ph-ico svg{stroke:#fff}
.final-bg figcaption{color:#fff}
.final-bg img{object-position:78% 50%}
.final-bg:has(img)::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(63,82,204,.94) 0%,rgba(80,100,227,.72) 55%,rgba(80,100,227,.25) 100%)}
.final-panel>:not(.final-bg){position:relative;z-index:1}
.final-panel .h2{max-width:18ch;font-weight:800;font-size:clamp(2.1rem,5vw,4rem);letter-spacing:-.03em}
.final-panel .lead{color:#fff;max-width:40ch}
.final-panel .btn{margin-top:10px}

/* footer */
.site-footer{border-top:1px solid var(--linha);padding-block:40px}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.foot-in img{height:52px;width:auto}
.foot-in p{color:var(--texto-2);font-size:.9375rem}
.foot-in a{font-weight:500;color:var(--texto);text-underline-offset:3px;text-decoration-thickness:1px}
.foot-in a:hover{color:var(--azul)}
.foot-in .copy{margin-left:auto}

/* movimento: padrão visível, só esconde quando o JS está ativo */
.js .hero-title .line>span{transform:translateY(105%);transition:transform 1s var(--ease)}
.js .hero-title .line:nth-child(2)>span{transition-delay:.08s}
.js .hero-title .line:nth-child(3)>span{transition-delay:.16s}
.js.loaded .hero-title .line>span{transform:none}
.js .hero-lead,.js .hero-sub,.js .hero-cta{opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.js .hero-lead{transition-delay:.3s}.js .hero-sub{transition-delay:.4s}.js .hero-cta{transition-delay:.5s}
.js.loaded .hero-lead,.js.loaded .hero-sub,.js.loaded .hero-cta{opacity:1;transform:none;filter:none}
.js .hero-media{clip-path:inset(12% 6% 0 6% round 28px);opacity:.4;transition:clip-path 1.3s var(--ease) .55s,opacity 1s var(--ease) .55s}
.js.loaded .hero-media{clip-path:inset(0 0 0 0 round 16px);opacity:1}

.js [data-reveal]{opacity:0;filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.js [data-reveal="rise"]{transform:translateY(32px)}
.js [data-reveal="pop"]{transform:translateY(48px) scale(.96)}
.js [data-reveal].in{opacity:1;transform:none;filter:none}
.js .card[data-reveal].in{transition:opacity 1s var(--ease),filter 1s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}

/* rolagem suave controlada por JS: desliga o smooth nativo para não brigar */
html.smooth{scroll-behavior:auto!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
  .js .hero-title .line>span,.js .hero-lead,.js .hero-sub,.js .hero-cta,.js [data-reveal]{transform:none!important;opacity:1!important;filter:none!important}
  .js .hero-media{clip-path:none!important;opacity:1!important}
}

/* responsivo */
.only-xs{display:none}
@media (max-width:900px){
  .intro-grid,.about-grid{grid-template-columns:1fr}
  .about-media{aspect-ratio:4/3}
  .c-a,.c-b,.c-c,.c-d{grid-column:1/-1}
  .card .ph,.c-b .ph,.c-c .ph{min-height:220px}
    .hero-media{aspect-ratio:4/3}
}
@media (max-width:480px){
  .hide-xs{display:none}
  .only-xs{display:inline}
    .btn-lg{width:100%;justify-content:center}
  .hero-cta{width:100%}
  .why-cta .btn,.final-panel .btn{width:100%}
  .foot-in .copy{margin-left:0}
  .header-in{height:76px}
}