/* Camada visual da página: oficina, conectores e trilhas, nas cores da marca. */
:root{--steel:#8daac4;--ice:#dbe9f4;--deep:#071827;--signal:#4f8fbd}
html{scroll-padding-top:70px}
body{font-family:Segoe UI,Arial,Helvetica,sans-serif;background:#f3f7fa}
.section{position:relative;isolation:isolate}
.situation,.bonus-section,.faq-section{overflow:hidden}
.section>.wrap{position:relative;z-index:1}
.section h2{font-weight:800;text-wrap:balance}
.site-header{position:sticky;top:0;background:#081827ee;border-bottom:1px solid #7194b33b;backdrop-filter:blur(14px);box-shadow:0 8px 25px #04111d24}
.brand-symbol{filter:drop-shadow(0 3px 9px #c0dcf84a);transition:filter .25s ease,transform .25s ease}
.brand-symbol:hover{filter:drop-shadow(0 4px 13px #c0dcf88c);transform:scale(1.06)}

/* Headline e imagem do produto. */
.hero{position:relative;isolation:isolate;background:radial-gradient(ellipse at 82% 43%,#345d7c 0,transparent 37%),radial-gradient(ellipse at 7% 72%,#183650 0,transparent 42%),linear-gradient(145deg,#071725,#0d263d 62%,#071725)}
.hero::before{content:"";position:absolute;inset:0;background:url('assets/circuit-trace.svg') repeat;background-size:520px 320px;opacity:.13;pointer-events:none}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:linear-gradient(90deg,transparent,#7197b8 28%,#d8e8f5 51%,#7197b8 76%,transparent);opacity:.6}
.hero-grid{position:relative;z-index:1;align-items:center}
.hero-copy{position:relative;z-index:2}
.hero .eyebrow{width:max-content;max-width:100%;padding:8px 13px;border:1px solid #9bbad154;border-radius:999px;background:#dceaf510;color:#d7e9f6;box-shadow:inset 0 1px #fff1}
.hero h1{font-weight:900;text-shadow:0 3px 16px #0003}
.hero h1 em{color:#d8edff}
.hero-lead{border-left:3px solid #8db5d5;padding-left:18px}
.hero-actions .button{min-height:58px;padding-inline:24px;background:#dcecf7;box-shadow:0 13px 34px #04111d77,0 0 0 1px #fff5;letter-spacing:.01em}
.hero-actions .button:hover{background:#fff;box-shadow:0 17px 42px #04111d99,0 0 0 2px #b4d5ed}
.hero-actions .button span{display:inline-block;transition:transform .25s ease}
.hero-actions .button:hover span{transform:translate(3px,-3px)}
.hero-visual-stack{min-width:0;align-self:center}
.hero-mockup{filter:drop-shadow(0 24px 30px #020b1580)}
.hero-mockup::before{content:"";position:absolute;inset:12% 14%;border-radius:50%;background:#aacce14f;filter:blur(44px);animation:hero-halo 6s ease-in-out infinite alternate}
.hero-mockup .mockup-cover{animation:hero-cover 6s ease-in-out infinite}
.hero-source-note{display:flex;align-items:center;justify-content:center;width:max-content;max-width:calc(100% - 24px);margin:-8px auto 0;padding:12px 22px;border:1px solid #58ad7d;border-radius:999px;background:linear-gradient(110deg,#176b49,#23845b);box-shadow:0 10px 24px #07121c55;position:relative;z-index:4}
.hero .hero-source-note p{margin:0;color:#fff;font-size:13px;line-height:1.3;font-weight:800;text-align:center}

/* A dúvida na bancada. */
.situation{background:radial-gradient(circle at 17% 78%,#d9e8f2 0,transparent 34%),linear-gradient(180deg,#f9fbfd,#eaf1f6)}
.situation::before{content:"";position:absolute;left:-10%;bottom:0;width:47%;height:60%;background:url('assets/connector-blueprint.svg') center/contain no-repeat;opacity:.075;pointer-events:none}
.situation h2{position:relative;padding-top:23px}
.situation h2::before{content:"";position:absolute;left:0;top:0;width:58px;height:5px;border-radius:10px;background:linear-gradient(90deg,#244d71,#8fb5d0)}
.situation h2 span{color:#4d7597}
.bench-list{border:0;display:grid;gap:8px}
.bench-list li{border:1px solid #d7e3eb;border-left:3px solid #6c96b6;border-radius:9px;padding:10px 14px 10px 28px;background:#fffefe;box-shadow:0 4px 14px #193d5910;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.bench-list li::before{left:12px;top:19px;background:#4e83ac;width:6px;height:6px;box-shadow:0 0 0 3px #dcebf5}
.bench-list li:hover{transform:translateX(4px);border-color:#91b4cf;box-shadow:0 8px 20px #193d5920}
.photo-panel-situation{border:5px solid #fff;box-shadow:0 22px 55px #0921393d,0 0 0 1px #7195b344}
.photo-panel-situation::after{content:"";position:absolute;inset:14px;border:1px solid #e8f1f663;border-radius:8px;pointer-events:none}

/* Três passos: sequência visual de leitura. */
.context-section{background:linear-gradient(140deg,#dfeaf2,#eef4f8 58%,#d9e7f0)}
.context-section::before{content:"";position:absolute;inset:0;background:url('assets/circuit-trace.svg') repeat;background-size:520px 320px;opacity:.075;pointer-events:none}
.context-section h2{position:relative;padding-left:20px}
.context-section h2::before{content:"";position:absolute;left:0;top:.13em;bottom:.08em;width:5px;border-radius:8px;background:#436f92}
.context-cards{position:relative}
.context-card{border-color:#c4d7e5;box-shadow:0 14px 32px #0d35521a;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.context-card::before{height:5px;background:linear-gradient(90deg,#214765,#8caec7)}
.context-card::after{content:"";position:absolute;right:-60px;bottom:-65px;width:190px;height:150px;background:url('assets/connector-blueprint.svg') center/contain no-repeat;opacity:.09;pointer-events:none}
.context-card:hover{transform:translateY(-5px);border-color:#8aacc4;box-shadow:0 23px 42px #0d35522b}
.context-number{background:#daeaf5;color:#173d5b;box-shadow:0 0 0 1px #b8d1e3}

/* Ficha real em uma bancada escura. */
.how-section{background:radial-gradient(ellipse at 90% 12%,#1e4b6a 0,transparent 36%),linear-gradient(155deg,#071827,#14344d 58%,#071827);color:#fff}
.how-section::before{content:"";position:absolute;inset:0;background:url('assets/circuit-trace.svg') repeat;background-size:520px 320px;opacity:.09;pointer-events:none}
.how-intro h2{color:#fff}
.how-intro>p:last-child{color:#cfdeea}
.ficha-board{border:1px solid #c6dbea55;background:#dce9f1;box-shadow:0 28px 65px #020b16a0,0 0 0 7px #8dabc21a}
.ficha-board-main{box-shadow:0 12px 34px #0a294627}
.ficha-pin{box-shadow:0 0 0 4px #9ac3df77,0 3px 12px #0614219c}
.ficha-pin-2,.ficha-pin-3{animation:pin-signal 3.5s ease-in-out infinite}
.ficha-pin-3{animation-delay:1.1s}
.ficha-callout{border-color:#bdd2e2;box-shadow:0 6px 18px #15355016;transition:transform .25s ease,box-shadow .25s ease}
.ficha-callout{overflow:hidden}
.ficha-callout:hover{transform:translateY(-4px);box-shadow:0 13px 27px #15355032}
.ficha-example-note{color:#cbddea!important}

/* Galeria e uso na oficina. */
.samples-section{background:linear-gradient(135deg,#e9f1f7,#f7fafc 56%,#e8f1f7)}
.samples-section::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#48779a0e 1px,transparent 1px),linear-gradient(90deg,#48779a0e 1px,transparent 1px);background-size:34px 34px;pointer-events:none}
.samples-section .section-head h2{position:relative;padding-top:20px;max-width:690px}
.samples-section .section-head h2::before{content:"";position:absolute;top:0;left:0;width:58px;height:5px;border-radius:8px;background:#4a789a}
.sample-card{border-color:#c9dbe8;box-shadow:0 9px 25px #173c5618;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.sample-card:hover{transform:translateY(-5px);border-color:#85a9c3;box-shadow:0 18px 39px #173c562c}
.sample-card button{position:relative;background:#f1f6fa}
.sample-card button::after{content:"↗";position:absolute;right:13px;top:13px;display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#173c59;color:#fff;font-size:16px;font-weight:800;box-shadow:0 5px 12px #102d4470;transition:transform .25s ease}
.sample-card button:hover::after{transform:translate(2px,-2px)}
.workshop-section{background:radial-gradient(circle at 8% 12%,#2b5674 0,transparent 40%),linear-gradient(135deg,#102e45,#071827);color:#fff}
.workshop-section::before{content:"";position:absolute;inset:0;background:url('assets/circuit-trace.svg') repeat;background-size:520px 320px;opacity:.08;pointer-events:none}
.workshop-section h2{color:#fff;max-width:870px}
.workshop-grid figure{border:1px solid #b4ccdd66;background:#dce7ef;box-shadow:0 20px 40px #03101e66;transition:transform .25s ease,box-shadow .25s ease}
.workshop-grid figure:hover{transform:translateY(-5px);box-shadow:0 27px 50px #03101e99}
.workshop-grid figcaption{color:#24435e}

/* Bônus e planos. */
.bonus-section{background:linear-gradient(155deg,#f4f8fb,#dae8f1 60%,#eef5f9)}
.bonus-section::before{content:"";position:absolute;right:-5%;top:0;width:40%;height:45%;background:url('assets/connector-blueprint.svg') center/contain no-repeat;opacity:.045;pointer-events:none}
.bonus-heading h2{color:#132e45}
.bonus-card{border:1px solid #bdd2e2;box-shadow:0 15px 36px #0b2f491e;transition:transform .25s ease,box-shadow .25s ease}
.bonus-card:hover{transform:translateY(-5px);box-shadow:0 22px 43px #0b2f4930}
.bonus-image{background:linear-gradient(145deg,#d6e4ee,#f0f6fa)}
.bonus-content{border-top:3px solid #668fb0}
.offer-section{background:radial-gradient(ellipse at 50% 32%,#f9fcfe 0,transparent 48%),linear-gradient(155deg,#d5e5ef,#edf4f8 54%,#dbe8f1)}
.offer-section::before{content:"";position:absolute;inset:0;background:url('assets/circuit-trace.svg') repeat;background-size:520px 320px;opacity:.055;pointer-events:none}
.offer-intro h2{color:#102c43}
.offer-plan{box-shadow:0 16px 39px #10334b23;transition:transform .25s ease,box-shadow .25s ease}
.offer-plan:hover{transform:translateY(-4px);box-shadow:0 22px 49px #10334b36}
.offer-plan-complete{border-color:#315f83;box-shadow:0 24px 54px #10334b38,0 0 0 5px #6b9cc11c}
.offer-plan-complete{animation:plan-focus 6s ease-in-out infinite alternate}
.offer-plan-complete:hover{box-shadow:0 31px 65px #10334b4a,0 0 0 5px #6b9cc133}
.offer-highlight{box-shadow:0 7px 18px #0b2e4966}
.offer-plan-complete .offer-buy{background:linear-gradient(110deg,#194765,#33769e);box-shadow:0 9px 22px #0a355477}
.offer-plan-complete .offer-buy:hover{background:linear-gradient(110deg,#123c59,#276a91);box-shadow:0 12px 28px #0a35549c}
.offer-buy span{transition:transform .25s ease}
.offer-buy:hover span{transform:translateX(5px)}
.offer-assurance span{box-shadow:0 7px 17px #14375012}

/* FAQ e rodapé. */
.faq-section{background:linear-gradient(180deg,#f9fbfd,#eaf2f7)}
.faq-section::before{content:"";position:absolute;right:-8%;bottom:0;width:43%;height:45%;background:url('assets/connector-blueprint.svg') center/contain no-repeat;opacity:.045;pointer-events:none}
.faq-grid>div:first-child{position:relative}
.faq-grid>div:first-child::before{content:"";position:absolute;left:0;top:-20px;width:56px;height:5px;border-radius:8px;background:#5b86a7}
.faq-list{border-top-color:#a8c2d4}
.faq-list details{border-bottom-color:#c7d8e5;transition:background .2s ease,box-shadow .2s ease}
.faq-list details:hover,.faq-list details[open]{background:#fff;box-shadow:0 6px 18px #153b5512}
.faq-list summary{padding-left:14px;color:#17344d}
.faq-list details p{padding-left:14px}
.site-footer{border-top:2px solid #799ab34d;background:linear-gradient(120deg,#071827,#102e46)}

@keyframes hero-cover{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(-3deg)}}
@keyframes hero-halo{from{opacity:.55;transform:scale(.93)}to{opacity:1;transform:scale(1.06)}}
@keyframes pin-signal{0%,100%{box-shadow:0 0 0 4px #9ac3df55,0 3px 12px #0614219c}50%{box-shadow:0 0 0 9px #9ac3df18,0 3px 12px #0614219c}}
@keyframes plan-focus{from{box-shadow:0 24px 54px #10334b38,0 0 0 5px #6b9cc11c}to{box-shadow:0 24px 54px #10334b38,0 0 0 5px #6b9cc144}}
@media(max-width:900px){.hero-source-note{margin:0 auto}.hero .hero-source-note p{font-size:11px}.bench-list li{font-size:14px}}
@media(max-width:650px){
  html{scroll-padding-top:62px}
  .hero-grid{gap:14px;padding-bottom:45px}
  .hero .eyebrow{font-size:10px}
  .hero-lead{padding-left:13px}
  .hero-mockup{height:345px}
  .hero-source-note{margin:-5px auto 0;padding:11px 16px}
  .hero .hero-source-note p{font-size:12px;line-height:1.5}
  .situation::before{width:78%;left:-29%;opacity:.04}
  .bench-list li{font-size:14px;padding:10px 10px 10px 27px}
  .context-section h2{padding-left:15px}
  .context-card:hover,.sample-card:hover,.bonus-card:hover,.offer-plan:hover,.workshop-grid figure:hover{transform:none}
  .ficha-board{box-shadow:0 17px 34px #020b1680}
  .workshop-grid figure{box-shadow:0 12px 25px #03101e55}
  .bonus-content{border-top:0;border-left:3px solid #668fb0}
  .sample-card button::after{width:24px;height:24px;right:7px;top:7px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.hero-mockup::before,.hero-mockup .mockup-cover,.ficha-pin-2,.ficha-pin-3,.offer-plan-complete{animation:none}.brand-symbol,.bench-list li,.context-card,.ficha-callout,.sample-card,.sample-card button::after,.workshop-grid figure,.bonus-card,.offer-plan,.offer-buy span,.hero-actions .button span{transition:none!important}}