@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}
:root{--sun:#F26A1B;--sun2:#FF9A3D;--btn:#C2500A;--btn-h:#A94308;--ai:#0B1F3A;--blue:#2457C5;--sky:#E6EEFB;--washi:#FBF6EE;--white:#fff;--mut:#51607A;--line:#0B1F3A22}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font:17px/1.7 "DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ai);background:var(--washi);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.logo{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:700;line-height:1.12}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem);letter-spacing:-.015em}
h2{font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.01em}
h3{font-size:1.3rem}
p{max-width:62ch}
a{color:inherit}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
.wrap{width:min(1120px,92%);margin:auto}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ai);color:#fff;padding:10px 16px;border-radius:4px;z-index:20}
.skip:focus{left:8px}

/* Cabeçalho */
header{position:sticky;top:0;z-index:10;background:#FBF6EEEE;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;gap:12px;font-size:1.3rem;text-decoration:none;letter-spacing:.02em}
.logo i{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--sun2),var(--sun))}
.logo small{font:500 .95rem "DM Sans",sans-serif;color:var(--mut)}
nav{display:flex;gap:28px;align-items:center}
nav a{text-decoration:none;font-weight:500;padding:4px 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current]{border-color:var(--sun)}
.btn{display:inline-block;background:var(--btn);color:#fff;padding:14px 28px;border-radius:4px;text-decoration:none;border:0;cursor:pointer;font:700 1rem "DM Sans",sans-serif;transition:background .2s;line-height:1.3;text-align:center}
.btn:hover{background:var(--btn-h)}
.btn.alt{background:transparent;color:var(--ai);box-shadow:inset 0 0 0 2px var(--ai)}
.btn.alt:hover{background:var(--ai);color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}
nav .btn,nav .btn:hover{padding:9px 20px;color:#fff;border:0}
.burger{display:none;background:none;border:0;font-size:1.8rem;color:inherit;cursor:pointer;padding:6px 10px}

/* Início */
.hero{padding:80px 0 60px}
.hero .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}
.hero p{font-size:1.2rem;margin:24px 0 32px;color:var(--mut)}
.hero .btn+.btn{margin-left:12px}
.hero-art{position:relative;aspect-ratio:1;max-width:440px;width:100%;margin:auto}
.sun{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle at 38% 32%,var(--sun2),var(--sun) 58%,#D9560A);animation:rise 1.8s cubic-bezier(.2,.8,.2,1) both;overflow:hidden}
.sun:before,.sun:after{content:"";position:absolute;height:15px;border-radius:9px;background:var(--washi)}
.sun:before{left:-10%;width:75%;top:62%}
.sun:after{right:-10%;width:60%;top:76%}
@keyframes rise{from{transform:translateY(40%);opacity:0}}
.waves{height:110px;background:url(../assets/seigaiha.svg) repeat-x 0 0/1200px 110px;margin-bottom:-1px}
.navy{background:var(--ai);color:#fff;padding:60px 0 100px}
.navy .lead{color:#B9C7E2}
section{padding:90px 0}
.lead{color:var(--mut);margin:14px 0 44px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.col{padding:10px 34px;border-left:1px solid #ffffff30}
.col:first-child{border:0;padding-left:0}
.col p{color:#B9C7E2}
.col h3{margin:12px 0 6px}
.ic{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.col .ic{color:var(--sun2)}
.rows a{display:grid;grid-template-columns:64px 1fr 1.4fr;gap:20px;align-items:center;padding:26px 0;border-top:1px solid var(--line);text-decoration:none;transition:background .2s,padding .2s}
.rows a:last-child{border-bottom:1px solid var(--line)}
.rows a:hover{background:#F26A1B14;padding-left:16px}
.rows .ic{color:var(--sun);width:36px;height:36px}
.rows p{color:var(--mut)}
.sec-tight{padding-top:0}

/* Carrossel de modelos (porta-CD) */
.hint{margin-top:18px;color:var(--mut);font-size:.95rem}
.hint a{font-weight:700}

/* CTA */
.cta{background:var(--ai);color:#fff;text-align:center;padding:80px 24px;border-radius:6px;position:relative;overflow:hidden}
.cta:before{content:"";position:absolute;left:50%;bottom:-210px;width:340px;height:340px;margin-left:-170px;border-radius:50%;background:var(--sun);opacity:.95}
.cta>*{position:relative}
.cta h2{max-width:20ch;margin:auto}
.cta p{margin:16px auto 30px;color:#C9D6EE}

/* Páginas internas */
.page{padding:80px 0 56px;border-bottom:1px solid var(--line)}
.page p{margin-top:16px;color:var(--mut);font-size:1.1rem}
.page h1{font-size:clamp(2.3rem,5vw,3.8rem)}
.grid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.split{display:grid;gap:60px;grid-template-columns:1.1fr 1fr;align-items:start}
.sunart{position:relative;aspect-ratio:1;max-width:380px;width:100%;margin:auto;border-radius:50%;background:radial-gradient(circle at 38% 32%,var(--sun2),var(--sun) 60%,#D9560A);box-shadow:0 0 0 18px #F26A1B1c,0 0 0 40px #2457C514}

/* Modelos */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.chips button{font:500 .95rem "DM Sans",sans-serif;padding:8px 18px;border-radius:99px;border:1.5px solid var(--line);background:transparent;color:var(--ai);cursor:pointer}
.chips button:hover{border-color:var(--ai)}
.chips button[aria-pressed="true"]{background:var(--ai);color:#fff;border-color:var(--ai)}
.cards{display:grid;gap:30px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{background:var(--white);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:var(--sky)}
.card .info{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card p{color:var(--mut);font-size:.97rem;flex:1}
.card .tag{font-size:.85rem;color:var(--mut)}
.card .btn{align-self:flex-start;margin-top:10px;padding:10px 20px;font-size:.95rem}
.empty{color:var(--mut)}

/* Como funciona */
.steps{list-style:none;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:26px 0;border-top:1px solid var(--line);counter-increment:s}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li:before{content:counter(s);font:700 2.4rem/1 "Fraunces",serif;color:var(--sun)}
.steps p{color:var(--mut)}
.two{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.two h3{margin-bottom:14px}
.list{list-style:none;padding:0;display:grid;gap:10px}
.list li{padding-left:26px;position:relative}
.list li:before{content:"";position:absolute;left:0;top:.7em;width:12px;height:2px;background:var(--sun)}
.list.no li:before{background:var(--mut)}
.faq{max-width:760px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:14px 0;font-weight:700}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font:400 1.6rem/1 "DM Sans",sans-serif;color:var(--sun)}
details[open] summary:after{content:"\2212"}
details p{color:var(--mut);padding-bottom:20px}

/* História e privacidade */
.prose{max-width:720px}
.prose h2{font-size:1.6rem;margin:44px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{max-width:none}
.prose p+p{margin-top:14px}
.prose ul{padding-left:22px;display:grid;gap:6px;margin-top:12px}
.prose a{color:var(--blue)}
.stamp{color:var(--mut);margin-top:40px;font-size:.95rem}

/* Formulário */
form{display:grid;gap:22px}
label{font-weight:700;display:grid;gap:4px}
label .opt{font-weight:400;color:var(--mut)}
input,select,textarea{font:inherit;padding:10px 2px;border:0;border-bottom:2px solid var(--line);background:transparent;color:var(--ai);border-radius:0}
input:focus,select:focus,textarea:focus{border-color:var(--sun);outline:0}
.check{display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:.95rem}
.check input{width:20px;height:20px;margin-top:4px;flex:none;accent-color:var(--btn)}
.check a{color:var(--blue)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{padding:14px 18px;border-left:4px solid var(--sun);background:#F26A1B14;font-size:.97rem}
.direct h2{font-size:1.8rem}
.direct p{margin:14px 0}
.direct .mute{color:var(--mut)}

/* Rodapé */
footer{background:var(--ai);color:#B9C7E2;padding:40px 0 30px}
footer .grid{margin-bottom:30px;gap:30px}
footer h3{color:#fff;margin-bottom:10px;font-size:1.1rem}
footer a{display:block;text-decoration:none;padding:3px 0}
footer a:hover{color:var(--sun2)}
.copy{border-top:1px solid #ffffff22;padding-top:20px;font-size:.9rem}

@media(max-width:820px){
.burger{display:block}
nav{position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--washi);padding:22px 4%;gap:16px;display:none;border-bottom:1px solid var(--line)}
nav.open{display:flex}
.hero .wrap,.split{grid-template-columns:minmax(0,1fr)}
.hero{padding:50px 0 30px}
.rows a{grid-template-columns:52px 1fr}
.rows a p{grid-column:2}
.col{border:0;padding:20px 0}
.hero .btn+.btn{margin:12px 0 0}
.hero-art{max-width:300px}
section{padding:64px 0}
}
@media(prefers-reduced-motion:reduce){.sun{animation:none}html{scroll-behavior:auto}*{transition:none!important}}

/* Carrossel de trabalhos: rolagem nativa, em loop infinito, com profundidade leve (sem preserve-3d).
   O JS (js/carrossel.js) repete a lista, anda sozinho e aplica scale, rotateY e opacity nos cartões visíveis.
   Sem scroll-snap de propósito: ele brigaria com o movimento automático.
   Miniaturas em img/modelos/mini/ (720 px). */
.pcd{--bg:#0B1F3A;--glow:#21457f;--ink:#fff;--line:rgba(255,255,255,.35);position:relative;display:flex;flex-direction:column;padding:36px 0 6px;border-radius:6px;overflow:hidden;
background:radial-gradient(ellipse at 50% 42%,var(--glow),var(--bg) 72%) var(--bg);color:var(--ink)}
.pcd .cr{outline-offset:-4px}
.pcd .cr-track{--pad:max(20px,calc((100% - 1120px) / 2));list-style:none;margin:0;padding:18px var(--pad) 30px;display:flex;gap:20px;overflow-x:auto;scroll-behavior:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.pcd .cr-track::-webkit-scrollbar{display:none}
.pcd .cr-track.drag{cursor:grabbing;user-select:none;-webkit-user-select:none}
.pcd .cr-card{flex:0 0 clamp(260px,30vw,360px)}
.pcd .cr-card a{display:block;height:100%;box-shadow:0 22px 34px -24px rgba(0,0,0,.85);color:#fff;text-decoration:none;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);border-top:3px solid rgb(var(--tr));transition:transform .2s ease,border-color .2s ease}
.pcd .cr-card a:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.5);border-top-color:rgb(var(--tr))}
/* o JS põe transform e opacity em cada cartão visível (profundidade); com o mouse em cima ele clareia */
.pcd .cr-card:hover{opacity:1!important}
.pcd .cr-card img{display:block;width:100%;height:auto;aspect-ratio:720/379;object-fit:cover;background:rgba(var(--tr),.3);-webkit-user-drag:none;user-select:none}
.pcd .cr-info{display:block;padding:16px 18px 18px}
.pcd .cr-info strong{display:block;font-family:"Fraunces",Georgia,serif;font-size:1.12rem;line-height:1.2;margin-bottom:6px}
.pcd .cr-info>span{display:block;font-size:.92rem;line-height:1.45;color:#B9C7E2}
.pcd .cr-info em{display:block;margin-top:12px;font-style:normal;font-weight:700;font-size:.92rem;color:#FFB27A}
.pcd .ctl{display:flex;justify-content:center;gap:16px;padding:6px 20px 28px}
.pcd .ar{width:50px;height:50px;border-radius:50%;border:1.5px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:1.2rem;cursor:pointer;transition:background .2s,color .2s}
.pcd .ar:hover{background:var(--ink);color:var(--bg)}
.pcd a:focus-visible,.pcd button:focus-visible,.pcd .cr:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:820px){.pcd{padding-top:28px}.pcd .cr-card{flex-basis:78vw}}

/* ===== Polimento ===== */
h1,h2{text-wrap:balance}p{text-wrap:pretty}
::selection{background:var(--sun);color:#fff}
h1 em{font-style:normal;color:var(--btn)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 .8rem/1 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--btn);margin-bottom:22px}
.eyebrow:before{content:"";width:34px;height:2px;background:var(--sun)}
.hero{position:relative;overflow:hidden;background:radial-gradient(55% 75% at 80% 42%,#FF9A3D2e,transparent 70%)}
.hero p{max-width:50ch}
.proof{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:34px;font-size:.92rem;color:var(--mut)}
.proof li{display:flex;align-items:center;gap:8px}
.proof li:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sun)}
.sun{box-shadow:0 0 0 16px #F26A1B1f,0 0 0 40px #2457C512,0 50px 100px -30px #F26A1Baa;animation:rise 1.8s cubic-bezier(.2,.8,.2,1) both,breathe 8s 2s ease-in-out infinite alternate}
@keyframes breathe{to{box-shadow:0 0 0 22px #F26A1B26,0 0 0 52px #2457C50d,0 60px 110px -30px #F26A1Bcc}}
.btn{border-radius:6px;box-shadow:0 8px 20px -10px #C2500A99;transition:background .2s,transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px #C2500Acc}
.btn.alt,.btn.alt:hover{box-shadow:inset 0 0 0 2px var(--ai)}
.logo i{box-shadow:0 0 0 4px #F26A1B22}
header{transition:box-shadow .3s}header:hover{box-shadow:0 10px 30px -22px #0B1F3A}
.burger{min-width:44px;min-height:44px}
.col .ic{filter:drop-shadow(0 0 14px #FF9A3D55)}
.rows a:hover h3{color:var(--btn)}
.rows .ic{transition:transform .3s}.rows a:hover .ic{transform:scale(1.12) rotate(-4deg)}
.card{transition:box-shadow .3s,border-color .3s,transform .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -24px #0B1F3A66;border-color:#0B1F3A44}
.card img{transition:transform .6s}.card:hover img{transform:scale(1.03)}
.cta{box-shadow:0 30px 60px -34px #0B1F3A}
.cta:after{content:"";position:absolute;inset:0;z-index:0;background:url(../assets/seigaiha.svg) repeat-x 0 100%/900px 80px;opacity:.2;pointer-events:none}
.cta>*{z-index:1}
@keyframes up{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@supports(animation-timeline:view()){.col,.rows a,.card,.steps li,.two>div,.cta,.hero .wrap>div:first-child{animation:up linear both;animation-timeline:view();animation-range:entry 0% entry 65%}}
@media(prefers-reduced-motion:reduce){.sun{animation:none}.col,.rows a,.card,.steps li,.two>div,.cta,.hero .wrap>div:first-child{animation:none}.btn:hover,.card:hover{transform:none}}

/* ===== Acrílico ===== */
:root{--r:14px;--gl:linear-gradient(135deg,#ffffffd9 0,#ffffff80 55%,#ffffffa6 100%);--gl-h:linear-gradient(135deg,#fffffff2 0,#ffffffa6 55%,#ffffffcc 100%);--edge:inset 0 1px 0 #fff,inset 1px 0 0 #ffffffb0,inset 0 -1px 0 #0B1F3A14,0 18px 36px -22px #0B1F3A66;--edge-h:inset 0 1px 0 #fff,inset 1px 0 0 #fff,0 26px 44px -22px #0B1F3A80,0 0 0 4px #F26A1B1c}
body{isolation:isolate}
body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;background:radial-gradient(38% 34% at 82% 12%,#FF9A3D66,transparent 70%),radial-gradient(34% 40% at 8% 38%,#2457C533,transparent 70%),radial-gradient(40% 36% at 70% 88%,#F26A1B40,transparent 70%),radial-gradient(30% 30% at 20% 90%,#6FA8FF38,transparent 70%)}
header{background:linear-gradient(180deg,#ffffffc2,#ffffff80);border-bottom:1px solid #ffffffc0;box-shadow:0 1px 0 #0B1F3A14,0 14px 30px -26px #0B1F3A;-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
.card,.rows a,.steps li,details,.note,.prose,form,.chips button{-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
.card,.rows a,.steps li,details,.note,.prose,form{background:var(--gl);border:1px solid #ffffffc0;border-radius:var(--r);box-shadow:var(--edge)}
.note{border-left:4px solid var(--sun)}
.rows a{padding:22px 28px;margin-bottom:12px}
.rows a:last-child{border-bottom:1px solid #ffffffc0}
.steps li{padding:22px 26px;margin-bottom:12px}
.steps li:last-child{border-bottom:1px solid #ffffffc0}
.faq{border-top:0}
details{padding:0 22px;margin-bottom:10px}
.prose{padding:clamp(24px,4vw,48px)}
form{padding:clamp(22px,3vw,34px)}
.card:hover,.rows a:hover,.steps li:hover{background:var(--gl-h);border-color:#fff;box-shadow:var(--edge-h)}
.rows a:hover{padding-left:34px}
.steps li{transition:box-shadow .3s,transform .3s}.steps li:hover{transform:translateY(-2px)}
.chips button{background:#ffffff73;border-color:#ffffffc0;box-shadow:inset 0 1px 0 #fff}
.btn{background:linear-gradient(180deg,#ffffff30,#ffffff00 55%),var(--btn);border-radius:8px;box-shadow:inset 0 1px 0 #ffffff80,inset 0 -10px 16px -10px #0000004d,0 10px 22px -10px #C2500Acc}
.btn:hover{background:linear-gradient(180deg,#ffffff2b,#ffffff00 55%),var(--btn-h)}
.btn.alt{background:#ffffff66;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 2px var(--ai),inset 0 1px 0 #fff}
.btn.alt:hover{background:var(--ai)}
.logo i{box-shadow:0 0 0 4px #F26A1B22,inset 0 2px 3px #ffffffb3,inset 0 -3px 6px #D9560A80}
.hero-art:before{content:"";position:absolute;inset:-9%;border-radius:50%;background:linear-gradient(145deg,#ffffffa6,#ffffff26);border:1px solid #ffffffcc;box-shadow:inset 0 2px 0 #fff,0 40px 80px -40px #0B1F3Aaa;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.sun{background:radial-gradient(circle at 30% 20%,#ffffffa6,#ffffff00 36%),radial-gradient(circle at 38% 32%,var(--sun2),var(--sun) 58%,#D9560A)}
.sunart{background:radial-gradient(circle at 30% 20%,#ffffffa6,#ffffff00 36%),radial-gradient(circle at 38% 32%,var(--sun2),var(--sun) 60%,#D9560A)}
.navy{background:radial-gradient(34% 90% at 86% 78%,#2457C5b8,transparent 70%),radial-gradient(30% 80% at 8% 88%,#F26A1B55,transparent 70%),var(--ai)}
.col,.col:first-child{background:linear-gradient(145deg,#ffffff2b,#ffffff0d);border:1px solid #ffffff38;border-radius:var(--r);padding:28px;box-shadow:inset 0 1px 0 #ffffff55,0 24px 40px -28px #000;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.cols{gap:18px}
.cta{border-radius:22px;border:1px solid #ffffff3d;background:linear-gradient(115deg,#ffffff2b 0,#ffffff00 38%),var(--ai);box-shadow:inset 0 1px 0 #ffffff55,0 30px 60px -34px #0B1F3A}
.cta:before{box-shadow:0 0 90px 30px #F26A1B88}
footer{background:radial-gradient(45% 110% at 88% 100%,#F26A1B3d,transparent 70%),var(--ai)}
.pcd{border-radius:22px;box-shadow:0 40px 80px -40px #0B1F3A,inset 0 0 0 1px #ffffff40}
@supports not (backdrop-filter:blur(1px)){:root{--gl:linear-gradient(135deg,#fffffff2,#ffffffd9);--gl-h:#fff}header{background:#fbf6eef5}}
@media(prefers-reduced-transparency:reduce){header,.card,.rows a,.steps li,details,.note,.prose,form,.chips button,.col,.hero-art:before{-webkit-backdrop-filter:none;backdrop-filter:none}.card,.rows a,.steps li,details,.note,.prose,form{background:#fffffff2}}

/* =====================================================================
   SOL v2: o dia inteiro na rolagem
   O sol nasce no topo, desce conforme a página e se põe atrás das ondas.
   Tudo aqui é aditivo: sem js/sol.js o site continua como era.
   ===================================================================== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .32s ease both}
::view-transition-new(root){animation:vt-in .5s .04s ease both}
::view-transition-group(sol){animation-duration:1s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* Camada fixa: céu + sol (fica atrás do texto e dos vidros, na frente dos fundos) */
.sol{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sol__sky{position:absolute;inset:0;opacity:0;will-change:opacity}
.sol__sky--dawn{opacity:1;background:radial-gradient(38% 34% at 82% 12%,#FF9A3D66,transparent 70%),radial-gradient(34% 40% at 8% 38%,#2457C533,transparent 70%),radial-gradient(40% 36% at 70% 88%,#F26A1B40,transparent 70%),radial-gradient(30% 30% at 20% 90%,#6FA8FF38,transparent 70%)}
.sol__sky--day{background:radial-gradient(60% 50% at 26% 16%,#8FBAFF70,transparent 70%),radial-gradient(48% 44% at 90% 56%,#FFE6B85e,transparent 70%),radial-gradient(40% 40% at 10% 80%,#6FA8FF30,transparent 70%)}
.sol__sky--gold{background:radial-gradient(70% 55% at 88% 60%,#FF9A3D78,transparent 72%),radial-gradient(60% 50% at 6% 86%,#F26A1B40,transparent 70%),linear-gradient(180deg,transparent 40%,#FFB36B30)}
.sol__sky--dusk{background:radial-gradient(60% 46% at 82% 90%,#F26A1B78,transparent 70%),linear-gradient(180deg,transparent 28%,#E8531A33 66%,#0B1F3A66 100%)}
.sol__body{position:absolute;left:0;top:0;width:400px;height:400px;opacity:0;will-change:transform,opacity;view-transition-name:sol}
.sol__glow{position:absolute;inset:-75%;border-radius:50%;background:radial-gradient(circle,rgba(255,176,90,.62) 0,rgba(242,106,27,.26) 33%,transparent 66%)}
.sol__disc{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}

/* Rodapé noturno (estrelas ficam atrás do texto) */
footer{position:relative;z-index:1;overflow:hidden}
footer .wrap{position:relative;z-index:1}
footer:before{content:"";position:absolute;inset:0;z-index:0;opacity:var(--night,0);pointer-events:none;background-image:radial-gradient(1.6px 1.6px at 6% 8%,#fff,transparent),radial-gradient(1.2px 1.2px at 18% 6%,#fff,transparent),radial-gradient(1.8px 1.8px at 31% 9%,#fff,transparent),radial-gradient(1.2px 1.2px at 46% 5%,#fff,transparent),radial-gradient(1.6px 1.6px at 58% 8%,#fff,transparent),radial-gradient(1.2px 1.2px at 72% 6%,#fff,transparent),radial-gradient(1.8px 1.8px at 84% 9%,#fff,transparent),radial-gradient(1.2px 1.2px at 95% 7%,#fff,transparent),radial-gradient(1.6px 1.6px at 70% 62%,#fff,transparent),radial-gradient(1.2px 1.2px at 82% 78%,#fff,transparent),radial-gradient(1.6px 1.6px at 92% 66%,#fff,transparent),radial-gradient(1.2px 1.2px at 88% 90%,#fff,transparent),radial-gradient(1.2px 1.2px at 66% 86%,#fff,transparent),radial-gradient(1.6px 1.6px at 4% 44%,#fff,transparent),radial-gradient(1.2px 1.2px at 6% 72%,#fff,transparent)}

/* Com o sol de rolagem ligado, o sol do hero vira o sol da página */
html.sol-on body:before{display:none}
html.sol-on .hero-art .sun{opacity:0;animation:none}
html.sol-on .hero-art:before,html.sol-on .hero-art:after{display:none}
html.sol-on .hero{padding-bottom:104px;background:radial-gradient(55% 75% at 80% 42%,#FF9A3D1f,transparent 70%)}
@media(max-width:820px){html.sol-on .hero-art{display:none}html.sol-on .hero{padding-top:40px}}

/* Título: palavras que sobem de uma máscara */
html.js:not(.ready) :is(.hero,.page) h1{opacity:0}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em 0 .16em;margin-bottom:-.16em}
.w>span{display:inline-block}
@keyframes word-in{from{transform:translateY(115%) rotate(4deg)}to{transform:none}}
html.ready .w>span{animation:word-in 1.05s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.25s + var(--i,0) * 75ms)}
h1 em{background-image:linear-gradient(90deg,var(--sun),var(--sun2));background-repeat:no-repeat;background-position:0 96%;background-size:0 .07em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.ready h1 em{animation:uline 1.1s 1.3s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes uline{to{background-size:100% .07em}}

/* Aparecer ao rolar (entra por JS; some depois para não brigar com o hover) */
html.js .rv{opacity:0;translate:0 34px;scale:.985;transition:opacity .9s cubic-bezier(.2,.8,.2,1),translate .9s cubic-bezier(.2,.8,.2,1),scale .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
html.js .rv.in{opacity:1;translate:0 0;scale:1}
html.js :is(.col,.rows a,.card,.steps li,.two>div,.cta,.hero .wrap>div:first-child){animation:none}

/* Ícones se desenham */
html.js :is(.col,.rows a) .ic{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}
html.js .drawn .ic{animation:drawic 1.3s .15s cubic-bezier(.2,.8,.2,1) both}
@keyframes drawic{from{opacity:1;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}

/* Cabeçalho enxuto ao rolar */
header .bar{transition:height .35s cubic-bezier(.2,.8,.2,1)}
html.scrolled header .bar{height:62px}
html.scrolled header{box-shadow:0 1px 0 #0B1F3A14,0 18px 34px -24px #0B1F3A}
@media(max-width:820px){nav{transition:top .35s}html.scrolled nav{top:62px}}

/* Botões: brilho que passa */
.btn{position:relative;overflow:hidden}
.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff55 50%,transparent 70%);transform:translateX(-130%);transition:transform .75s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.btn:hover:after{transform:translateX(130%)}
.btn.alt:after{background:linear-gradient(110deg,transparent 30%,#F26A1B30 50%,transparent 70%)}

/* Luz do sol que segue o ponteiro nos vidros */
@media(hover:hover){
  .card:hover,.rows a:hover,.cy:hover,.steps li:hover{--sp:1;background-image:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgb(242 106 27 / calc(.17 * var(--sp,0))),transparent 70%),var(--gl-h)}
  .col:hover{--sp:1;background-image:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgb(255 154 61 / calc(.3 * var(--sp,0))),transparent 70%),linear-gradient(145deg,#ffffff2b,#ffffff0d)}
}

/* Indicador de rolagem no hero */
.cue{position:absolute;left:calc((100% - min(1120px,92%)) / 2);bottom:26px;z-index:1;display:none;align-items:center;gap:14px;font-size:.9rem;font-weight:600;color:var(--mut);text-decoration:none;transition:opacity .5s}
html.sol-on .cue{display:inline-flex}
.cue i{position:relative;width:24px;height:38px;border:1.5px solid var(--ai);border-radius:99px;opacity:.75;flex:none}
.cue i:after{content:"";position:absolute;left:50%;top:7px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--sun);animation:cue 1.9s cubic-bezier(.5,0,.3,1) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(15px);opacity:0}100%{transform:translateY(15px);opacity:0}}
html.scrolled .cue{opacity:0;pointer-events:none}


/* Etapas: o sol nasce em quatro tempos (a posição de cada sol acompanha a rolagem) */
.cycle{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:8px}
.cy{display:flex;flex-direction:column;gap:6px;padding:14px 14px 26px;background:var(--gl);border:1px solid #ffffffc0;border-radius:var(--r);box-shadow:var(--edge);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
.cy .eyebrow{margin:18px 8px 4px}
.cy h3,.cy p{padding-inline:8px}
.cy p{color:var(--mut);font-size:.97rem}
.dawn{--k:0;position:relative;height:156px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,var(--s1),var(--s2));box-shadow:inset 0 1px 0 #ffffff66,inset 0 0 0 1px #ffffff26}
.dawn:before{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(135deg,#ffffff38,#ffffff00 42%);pointer-events:none}
.dawn i{position:absolute;left:50%;bottom:-18px;width:62px;height:62px;margin-left:-31px;border-radius:50%;z-index:1;background:radial-gradient(circle at 30% 20%,#ffffffa6,#ffffff00 36%),radial-gradient(circle at 38% 32%,var(--sun2),var(--sun) 58%,#D9560A);box-shadow:0 0 46px 12px #FF9A3D99;transform:translateY(calc(var(--k) * var(--v) * -62px))}
.dawn:after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;z-index:2;background:url(../assets/seigaiha.svg) repeat-x 0 100%/380px 46px}
.cy:nth-child(1) .dawn{--v:.3;--s1:#071427;--s2:#1B3A76}
.cy:nth-child(2) .dawn{--v:.62;--s1:#1E3F86;--s2:#E98A4A}
.cy:nth-child(3) .dawn{--v:.92;--s1:#4D86E6;--s2:#FFCB94}
.cy:nth-child(4) .dawn{--v:1.32;--s1:#3E7BE0;--s2:#BEE0FF}
@media(max-width:980px){.cycle{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cycle{grid-template-columns:1fr}.dawn{height:136px}}

/* Como funciona: o número vira o sol da etapa */
.steps li{position:relative}
.steps li:before{content:"";width:60px;height:60px;border-radius:14px;box-shadow:inset 0 1px 0 #ffffff66;background:linear-gradient(var(--ai),var(--ai)) bottom/100% 15px no-repeat,radial-gradient(circle at 50% calc(100% - var(--h,4px)),var(--sun2) 0,var(--sun) 12px,transparent 13px),linear-gradient(180deg,var(--s1,#0B1F3A),var(--s2,#2457C5))}
.steps li:nth-child(1){--h:3px;--s1:#071427;--s2:#1B3A76}
.steps li:nth-child(2){--h:16px;--s1:#1E3F86;--s2:#E98A4A}
.steps li:nth-child(3){--h:27px;--s1:#4D86E6;--s2:#FFCB94}
.steps li:nth-child(4){--h:40px;--s1:#3E7BE0;--s2:#BEE0FF}

/* Rodapé de noite: o sol já se pôs */
footer{transition:none}

@media(prefers-reduced-motion:reduce){
  .w>span{animation:none!important}
  h1 em{animation:none!important;background-size:100% .07em}
  html.js .rv{opacity:1;translate:none;scale:1;transition:none}
  html.js :is(.col,.rows a) .ic{opacity:1;stroke-dasharray:none;stroke-dashoffset:0}
  .cue i:after{animation:none}
  .btn:after{display:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* CTA: o sol de baixo sobe quando o bloco entra na tela */
.cta:before{transform:translateY(calc((1 - var(--ck,1)) * 120px));transition:none}
.cta:before{box-shadow:0 0 calc(40px + 70px * var(--ck,1)) calc(10px + 24px * var(--ck,1)) #F26A1B88}

/* Respiro entre o título e a lista de etapas / perguntas */
section h2+.steps,section h2+.faq{margin-top:28px}

/* Sol do topo sem anéis em volta (vale também sem JavaScript) */
.hero-art:before{display:none}
.hero .sun{box-shadow:0 50px 100px -30px #F26A1Baa;animation:rise 1.8s cubic-bezier(.2,.8,.2,1) both}

/* Divisor entre as três ideias e o trabalho: parado, só uma linha e um sol */
.divider{display:flex;align-items:center;gap:18px;width:min(1120px,92%);margin:68px auto 0}
.divider span{flex:1;height:1px;background:linear-gradient(90deg,transparent,#0B1F3A30 35%)}
.divider span:last-child{background:linear-gradient(270deg,transparent,#0B1F3A30 35%)}
.divider i{flex:none;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--sun2),var(--sun));box-shadow:0 0 16px #FF9A3D99}
.divider+section{padding-top:60px}

/* Menu em tablet: com 5 links + botão não cabe em 821–1020px, então usa o menu do celular */
@media(min-width:821px) and (max-width:1020px){
  .burger{display:block}
  nav{position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--washi);padding:22px 4%;gap:16px;display:none;border-bottom:1px solid var(--line)}
  nav.open{display:flex}
  html.scrolled nav{top:62px}
}

/* Carrossel de trabalhos: largura total da tela, como a faixa azul das três ideias */
#modelos .pcd{border-radius:0;box-shadow:none;margin-top:8px}

/* Trabalhos: botões do cartão lado a lado */
.card .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.card .acts .btn{margin-top:0}

form[data-form][hidden]{display:none}

/* Trabalhos: ao voltar de um modelo, o cartão de onde a pessoa saiu fica à vista e destacado */
.card{scroll-margin-top:96px}
.card:target{box-shadow:0 0 0 3px #C2500A}

input,select,textarea{max-width:100%;min-width:0}