/* ARBEX STUDIO — estilos dos projetos demonstrativos.
   Cada conceito tem linguagem visual própria e nenhum utiliza bibliotecas externas. */
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;-webkit-font-smoothing:antialiased}a{color:inherit}button,input{font:inherit}:focus-visible{outline:3px solid currentColor;outline-offset:4px}img{max-width:100%}.demo-ribbon{position:relative;z-index:20;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;background:#151412;color:#f5eadb;text-align:center;font:600 11px/1.5 Arial,sans-serif;letter-spacing:.06em}.demo-ribbon a{color:#d9b58b;text-decoration:underline;text-underline-offset:3px}.wrap{width:min(100% - 80px,1280px);margin:auto}.smallcaps{font-size:11px;letter-spacing:.15em;font-weight:700;text-transform:uppercase}.demo-cta{display:inline-flex;align-items:center;gap:35px;text-decoration:none;padding:16px 23px;font-size:13px;font-weight:700;border:1px solid currentColor}.demo-cta:hover{transform:translateY(-2px)}.demo-back{display:inline-flex;gap:7px;align-items:center;text-decoration:none;font-size:12px}.demo-end{padding:110px 0}.demo-end h2{font-size:clamp(35px,6vw,76px);line-height:1.08;letter-spacing:-.05em;max-width:820px;margin:0 0 28px}.demo-end p{max-width:600px;line-height:1.7}.demo-meta{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:25px 0;font-size:11px;letter-spacing:.08em}.demo-end .demo-cta{margin-top:26px}.demo-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px)}
/* 01 / NOVA FORMA — arquitetura tipográfica e planos solares. */
.arch{font-family:Arial,sans-serif;background:#e6e0d5;color:#24231f}.arch nav{display:flex;justify-content:space-between;align-items:center;height:88px;gap:24px;border-bottom:1px solid rgba(37,33,28,.3)}.arch-brand{font-weight:750;font-size:23px;letter-spacing:-.065em;text-decoration:none}.arch nav div{display:flex;gap:30px;font-size:12px}.arch nav a{text-decoration:none}.arch-hero{position:relative;overflow:hidden;min-height:650px;display:grid;grid-template-columns:.86fr 1.14fr;align-items:center}.arch-hero h1{position:relative;z-index:3;font:400 clamp(57px,6.5vw,108px)/.96 Georgia,serif;letter-spacing:-.067em;margin:18px 0 34px}.arch-hero h1 i{font-weight:400;color:#7d7263}.arch-hero p{max-width:370px;line-height:1.75;color:#5b564f}.arch-hero .demo-cta{margin-top:25px}.arch-art{position:relative;height:100%;min-height:650px;background:linear-gradient(130deg,#ccc4b8,#aaa396 80%)}.arch-art:before{content:"";position:absolute;left:5%;width:78%;top:8%;bottom:-9%;background:linear-gradient(110deg,#d6d1c5,#8f877b 65%,#cec6b8 96%);transform:skewY(-13deg);box-shadow:-22px 0 55px rgba(28,25,19,.12)}.arch-art:after{content:"";position:absolute;right:-16%;top:22%;bottom:0;width:55%;background:linear-gradient(90deg,#787368,#b9ae9b);transform:skewY(15deg)}.arch-columns{position:absolute;z-index:1;left:18%;right:8%;top:28%;bottom:0;background:repeating-linear-gradient(90deg,transparent 0 60px,rgba(30,28,25,.3) 60px 66px,transparent 66px 115px);opacity:.6;transform:skewY(-13deg)}.arch-section{padding:110px 0;border-top:1px solid #bab0a2}.arch-section h2{font:400 clamp(42px,5vw,75px)/1.08 Georgia,serif;letter-spacing:-.06em;margin:10px 0 35px}.arch-section p{max-width:480px;font-size:16px;line-height:1.8;color:#5f594f}.arch-mini-art{height:350px;background:linear-gradient(130deg,#b6ada0 2%,#d8cfc0 39%,#8b8377 41%,#aba196 60%,#e7e1d7);clip-path:polygon(12% 0,100% 0,100% 100%,0 100%,0 15%)}.arch .demo-end{background:#262520;color:#f2e9dd}.arch .demo-end p{color:#bfb6aa}
/* 02 / PULSE — produto digital com sistema tipográfico e grade funcional. */
.pulse{font-family:Arial,sans-serif;background:#09232b;color:#f0faf9}.pulse nav{height:84px;border-bottom:1px solid #38545a;display:flex;align-items:center;justify-content:space-between;gap:20px}.pulse-logo{font-size:28px;letter-spacing:-.08em;font-weight:750;text-decoration:none}.pulse-logo span{color:#6bdfc8}.pulse nav div{display:flex;gap:27px;font-size:12px}.pulse nav a{text-decoration:none}.pulse .demo-cta{border-color:#8becd7;color:#0a2e31;background:#99e9d7;border-radius:100px}.pulse-hero{padding:100px 0 70px;position:relative;overflow:hidden;background:radial-gradient(ellipse 46% 80% at 100% 15%,#265d66,transparent 90%)}.pulse-hero h1{font-size:clamp(58px,8vw,125px);letter-spacing:-.08em;line-height:.95;margin:22px 0 29px;max-width:1200px}.pulse-hero h1 em{font-style:normal;color:#87e4cf}.pulse-hero p{font-size:18px;color:#bed8d7;max-width:540px;line-height:1.68;margin-bottom:36px}.pulse-dashboard{margin:72px auto 0;max-width:1130px;display:grid;grid-template-columns:210px 1fr;border:1px solid #6a9291;background:#e9f3f1;color:#173740;border-radius:16px 16px 0 0;overflow:hidden;box-shadow:0 34px 95px rgba(0,0,0,.25)}.pulse-side{background:#d8eae6;padding:32px}.pulse-side span{display:block;margin:0 0 23px;height:9px;border-radius:4px;background:#b8d4cf;width:80%}.pulse-side span:nth-child(2){width:60%;background:#77aea7}.pulse-main{padding:38px 48px 55px}.pulse-top{display:flex;justify-content:space-between;align-items:center;gap:20px}.pulse-top strong{font-size:24px;letter-spacing:-.045em}.pulse-label{font-size:11px;letter-spacing:.12em;color:#397b73}.pulse-bars{height:230px;display:flex;align-items:end;gap:4%;border-bottom:1px solid #9fbcba;margin-top:45px}.pulse-bars i{flex:1;max-width:65px;display:block;border-radius:6px 6px 0 0;background:linear-gradient(#64c5b3,#1f807d)}.pulse-bars i:nth-child(1){height:28%}.pulse-bars i:nth-child(2){height:42%}.pulse-bars i:nth-child(3){height:39%}.pulse-bars i:nth-child(4){height:66%}.pulse-bars i:nth-child(5){height:51%}.pulse-bars i:nth-child(6){height:83%}.pulse-bars i:nth-child(7){height:71%}.pulse-bars i:nth-child(8){height:96%}.pulse-features{background:#eef5f2;color:#16343b;padding:110px 0}.pulse-features h2{font-size:clamp(42px,5vw,74px);line-height:1.05;letter-spacing:-.06em;margin:13px 0 45px}.pulse-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #b8ccc7}.pulse-feature-grid article{border-right:1px solid #b8ccc7;padding:26px 25px 0 0}.pulse-feature-grid article:not(:first-child){padding-left:25px}.pulse-feature-grid article:last-child{border:0}.pulse-feature-grid h3{font-size:23px;margin:44px 0 15px}.pulse-feature-grid p{line-height:1.7;color:#526a67}.pulse .demo-end{background:#0b2b32}
/* 03 / SOLA — brand wellness sereno, color block e traço botânico. */
.sola{font-family:Arial,sans-serif;background:#eee8dc;color:#443e35}.sola nav{height:85px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c8baaa;gap:20px}.sola-brand{font:400 43px Georgia,serif;letter-spacing:-.09em;text-decoration:none}.sola nav div{display:flex;gap:26px;font-size:12px}.sola nav a{text-decoration:none}.sola-hero{min-height:660px;display:grid;grid-template-columns:1fr .9fr;gap:4%;align-items:center}.sola-hero h1{font:400 clamp(70px,8vw,128px)/.95 Georgia,serif;letter-spacing:-.075em;margin:18px 0 30px}.sola-hero h1 i{color:#8d9077;font-weight:400}.sola-hero p{max-width:410px;color:#756a5e;font-size:17px;line-height:1.75;margin:0 0 36px}.sola .demo-cta{background:#636e55;color:#fff;border-color:#636e55}.sola-art{min-height:570px;position:relative;isolation:isolate;display:grid;place-items:center}.sola-circle{position:absolute;width:88%;aspect-ratio:1;top:10%;left:7%;border-radius:50%;background:radial-gradient(circle at 35% 27%,#f9f5e9,#d5c6b0 60%,#bdb29f);box-shadow:inset -25px -22px 65px rgba(107,84,61,.12)}.sola-silhouette{position:absolute;height:50%;width:25%;background:linear-gradient(110deg,#6b7e67,#a3a88a);border-radius:100% 2% 100% 5%;box-shadow:inset -20px 0 45px rgba(33,53,31,.18);transform-origin:bottom center;top:20%;left:40%;transform:rotate(-25deg)}.sola-silhouette:before,.sola-silhouette:after{content:"";position:absolute;background:linear-gradient(110deg,#728469,#bbc4a5);border-radius:100% 2% 100% 3%;width:75%;height:70%}.sola-silhouette:before{transform:rotate(-63deg);left:-100%;top:22%}.sola-silhouette:after{transform:rotate(44deg);left:83%;top:13%}.sola-art small{position:absolute;right:1%;bottom:11%;font-size:11px;letter-spacing:.16em;transform:rotate(90deg)}.sola-values{padding:110px 0;background:#dcd4c6}.sola-values h2{font:400 clamp(45px,5vw,78px)/1.08 Georgia,serif;letter-spacing:-.06em;margin:0 0 30px}.sola-values p{max-width:480px;line-height:1.8;color:#665e51}.sola-bottles{position:relative;min-height:350px;display:flex;gap:25px;align-items:center;justify-content:center}.sola-bottle{width:125px;height:240px;background:linear-gradient(90deg,#776951,#b8a98e 35%,#827961);border-radius:19px 19px 24px 24px;box-shadow:15px 24px 40px rgba(66,49,30,.16)}.sola-bottle:before{content:"";display:block;width:54px;height:30px;background:#777461;margin:-25px auto 0;border-radius:5px 5px 0 0}.sola-bottle:after{content:"sola.";display:block;text-align:center;font:400 32px Georgia,serif;color:#f6ebdb;margin-top:78px}.sola-bottle:nth-child(2){height:195px;width:110px;background:linear-gradient(90deg,#b7ad97,#e8dfca,#aea28e)}.sola .demo-end{background:#666f58;color:#f8f4ea}.sola .demo-end p{color:#e1e7d7}
@media(max-width:760px){.wrap{width:min(100% - 40px,600px)}.arch nav,.pulse nav,.sola nav{height:70px}.arch nav div,.pulse nav div,.sola nav div{gap:12px}.arch-hero,.sola-hero{grid-template-columns:1fr}.arch-hero{padding-top:64px}.arch-hero h1{font-size:clamp(65px,12vw,92px)}.arch-art{min-height:430px;margin-top:60px}.arch-section{padding:80px 0}.demo-col{grid-template-columns:1fr}.pulse-hero{padding:70px 0 50px}.pulse-hero h1{font-size:clamp(54px,12vw,90px)}.pulse-dashboard{grid-template-columns:70px 1fr}.pulse-side{padding:22px 9px}.pulse-main{padding:23px}.pulse-feature-grid{grid-template-columns:1fr}.pulse-feature-grid article,.pulse-feature-grid article:not(:first-child){padding:20px 0;border:0;border-bottom:1px solid #b8ccc7}.pulse-feature-grid h3{margin:16px 0 12px}.sola-hero{padding-top:60px}.sola-hero h1{font-size:clamp(68px,13vw,103px)}.sola-art{min-height:470px}.sola-values{padding:75px 0}.demo-end{padding:75px 0}.demo-meta{align-items:start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.demo-cta:hover{transform:none}}

/* V3.1 — microinterações discretas também nos três conceitos demonstrativos. */
@media (hover:hover) and (pointer:fine) {
    .demo-cta { transition: transform .3s cubic-bezier(.22,1,.36,1), filter .3s ease; }
    .demo-cta:hover { transform: translateY(-2px); filter: brightness(1.045); }
    .arch nav a:not(.arch-brand),
    .pulse nav a:not(.pulse-logo),
    .sola nav a:not(.sola-brand) { transition: opacity .22s ease; }
    .arch nav a:hover, .pulse nav a:hover, .sola nav a:hover { opacity: .72; }
}
@media (prefers-reduced-motion:reduce) {
    .demo-cta { transition:none !important; }
    .demo-cta:hover { transform:none !important; filter:none !important; }
}