:root{--bg:#f7fafa;--ink:#1d2b4a;--rose:#3f5f9a;--plum:#2b8c8f;--sage:#8fcfc9;--sand:#e6f2f1;--r:28px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:400 1.05rem/1.6 Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden}
h1,h2,h3{font-family:Fraunces,serif;font-weight:600;line-height:1.1}
em{font-style:italic;background:linear-gradient(90deg,var(--rose),var(--plum));-webkit-background-clip:text;background-clip:text;color:transparent}
a{color:inherit}
#bg{position:fixed;inset:0;z-index:-1;width:100%;height:100%}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--rose),var(--plum));z-index:99}

.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(1100px,94%);display:flex;justify-content:space-between;align-items:center;padding:.7rem 1.4rem;border-radius:999px;background:#ffffffb8;backdrop-filter:blur(14px);box-shadow:0 8px 30px #0001;z-index:50;transition:.4s}
.nav.hide{transform:translate(-50%,-140%)}
.nav nav{display:flex;gap:1.4rem;align-items:center}
.nav nav a{text-decoration:none;font-weight:500;font-size:.95rem}
.logo{text-decoration:none;font-family:Fraunces,serif}

.btn{display:inline-block;padding:1rem 1.8rem;border-radius:999px;background:linear-gradient(135deg,var(--rose),var(--plum));color:#fff!important;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:1rem;box-shadow:0 10px 30px #2b8c8f55;transition:transform .2s,box-shadow .2s}
.btn:hover{box-shadow:0 14px 40px #2b8c8f77}
.btn-sm{padding:.55rem 1.1rem;font-size:.9rem}
.btn.ghost{background:transparent;color:var(--ink)!important;box-shadow:inset 0 0 0 2px var(--plum)}

.hero{min-height:100vh;display:grid;place-items:center;position:relative;padding:7rem 1.5rem 4rem;text-align:center;overflow:hidden}
.hero-in{max-width:880px;position:relative;z-index:2}
.hero h1{font-size:clamp(2.6rem,7vw,5.5rem);margin:.6rem 0 1.2rem}
.eyebrow{letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;color:var(--plum);font-weight:700}
.lead{font-size:1.2rem;max-width:620px;margin:0 auto 2rem;opacity:.85}
.cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.rot{display:inline-block;color:var(--rose);font-style:italic;transition:opacity .4s,transform .4s}
.rot.out{opacity:0;transform:translateY(.4em)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:float 14s ease-in-out infinite}
.b1{width:420px;height:420px;background:var(--rose);top:-80px;left:-100px}
.b2{width:380px;height:380px;background:var(--sage);bottom:-60px;right:-60px;animation-delay:-5s}
.b3{width:300px;height:300px;background:#7fc4c6;top:40%;left:55%;animation-delay:-9s}
@keyframes float{50%{transform:translate(50px,-40px) scale(1.15)}}
.scroll-hint{position:absolute;bottom:1.5rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.scroll-hint span{width:2px;height:40px;background:var(--plum);animation:drip 1.6s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.marquee{background:var(--ink);color:#fff;overflow:hidden;padding:1rem 0;transform:rotate(-1.2deg);margin:0 -2%}
.track{display:flex;gap:3rem;width:max-content;animation:slide 28s linear infinite;font-family:Fraunces,serif;font-size:1.5rem}
.track span::after{content:"✦";margin-left:3rem;color:var(--rose)}
@keyframes slide{to{transform:translateX(-50%)}}

.counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;max-width:1100px;margin:4rem auto;padding:0 1.5rem;text-align:center}
.count b{font:600 3.4rem Fraunces,serif;color:var(--plum)}
.count small{display:block;opacity:.7}

.sec{padding:6rem 1.5rem;max-width:1150px;margin:0 auto}
.sec h2{font-size:clamp(2rem,5vw,3.5rem);text-align:center;margin-bottom:3rem}
.sec.dark{max-width:none;background:radial-gradient(circle at 20% 0,#245a73,#101c36);color:#fff}
.sec.dark>*{max-width:1100px;margin-inline:auto}
.sec.dark em{background:linear-gradient(90deg,#b9ccf2,#9fe3e0);-webkit-background-clip:text;background-clip:text}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem}
.card{background:#fff;border-radius:var(--r);padding:2rem;box-shadow:0 10px 40px #1d2b4a14;transition:transform .3s;transform-style:preserve-3d;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,0),#3f5f9a22,transparent 55%);opacity:0;transition:.3s}
.card:hover::before{opacity:1}
.card .ic{font-size:2.6rem;display:block;margin-bottom:1rem}
.card h3{font-size:1.5rem;margin-bottom:.5rem}

.apps{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:4rem;align-items:center}
.phone{background:#111;border-radius:42px;padding:12px;box-shadow:0 30px 80px #0008;animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-14px) rotate(1.5deg)}}
.screen{background:#f4fbfb;color:var(--ink);border-radius:32px;padding:1.4rem 1rem;display:grid;gap:.7rem;min-height:480px;align-content:start}
.app-h{font:600 1.4rem Fraunces,serif;margin-bottom:.4rem}
.lesson{display:flex;align-items:center;gap:.7rem;background:#fff;border-radius:16px;padding:.8rem;box-shadow:0 4px 14px #0001}
.lesson i{width:10px;height:10px;border-radius:50%;background:var(--sage)}
.lesson div{flex:1;line-height:1.2}.lesson small{opacity:.6}
.lesson button{border:0;background:var(--sand);padding:.35rem .7rem;border-radius:99px;font-size:.75rem}
.lesson.on{outline:2px solid var(--sage)}
.app-f{margin-top:auto;background:linear-gradient(135deg,var(--rose),var(--plum));color:#fff;text-align:center;padding:.9rem;border-radius:16px;font-weight:700;animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 12px #3f5f9a33}}
.app-text{display:grid;gap:1.2rem}
.feat{background:#ffffff12;border:1px solid #ffffff22;border-radius:var(--r);padding:1.6rem;backdrop-filter:blur(6px)}
.feat h3{font-size:1.4rem;margin-bottom:.4rem}.feat p{opacity:.85}

.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.tile{border-radius:var(--r);padding:2rem;background:var(--sand);transition:transform .3s}
.tile:hover{transform:translateY(-6px) rotate(-.6deg)}
.tile span{font-size:2.4rem}.tile h3{font-size:1.5rem;margin:.6rem 0 .4rem}
.t1{grid-column:span 2;grid-row:span 2;background:linear-gradient(135deg,#cfeceb,#d9e3f7);display:flex;flex-direction:column;justify-content:flex-end;min-height:360px}
.t2{grid-column:span 2;background:#dfeee9}.t3{background:#fff}.t4{background:#1d2b4a;color:#fff}

.contact{text-align:center}
.form{max-width:520px;margin:auto;display:grid;gap:1rem}
.form input,.form select{padding:1rem 1.3rem;border-radius:18px;border:2px solid #0000;background:#fff;font:inherit;box-shadow:0 6px 20px #0000000d;outline:0;transition:.2s}
.form input:focus,.form select:focus{border-color:var(--plum)}
#msg{min-height:1.5rem;color:var(--rose);font-weight:500}
footer{text-align:center;padding:2rem;opacity:.7}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:820px){
  .apps{grid-template-columns:1fr}.phone{max-width:320px;margin:auto}
  .bento{grid-template-columns:1fr 1fr}.t1,.t2{grid-column:span 2}.t1{min-height:220px}
  .nav nav a:not(.btn){display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}

.hero{background:linear-gradient(180deg,#f7fafacc,#f7fafaf2),url(../img/hero-studio.webp) center/cover}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gallery figure{border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:4/3;box-shadow:0 10px 40px #1d2b4a1f}
.gallery figure:nth-child(1){grid-column:span 2;aspect-ratio:auto}.gallery figure:nth-child(6){grid-column:span 3;aspect-ratio:21/8}
.gallery img,.tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.gallery figure:hover img{transform:scale(1.08)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.2rem 1rem .8rem;color:#fff;font-weight:500;background:linear-gradient(transparent,#101c36cc)}
.tile{position:relative;overflow:hidden}
.tile.ph{color:#fff;background-size:cover;background-position:center}
.tile.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 20%,#101c36d9)}
.tile.ph>*{position:relative}
.facade{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center;margin-top:3rem}
.facade img{width:100%;border-radius:var(--r);box-shadow:0 20px 60px #1d2b4a33}
.facade h3{font-size:2rem;margin-bottom:.6rem}
@media(max-width:820px){.gallery{grid-template-columns:1fr 1fr}.facade{grid-template-columns:1fr}}

.card{padding:0}.card .ph{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.card h3,.card p{padding:0 1.4rem}.card h3{margin-top:1.2rem}.card p{padding-bottom:1.6rem}


.logo{display:flex;align-items:center;gap:.6rem}
.logo img{height:42px;width:auto;display:block}
.hero-logo{width:160px;height:auto;background:#fff;padding:6px;border-radius:24px;box-shadow:0 14px 50px #1d2b4a2e;margin:0 auto .8rem;display:block;animation:bob 6s ease-in-out infinite}
.foot-logo{display:block;margin:0 auto .8rem;width:90px;height:auto;border-radius:12px;background:#fff}
@media(max-width:520px){.logo span{display:none}}


.logo img{height:30px}
.hero-logo{width:150px;height:auto;background:none;padding:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 8px 18px #1d2b4a30)}
.foot-logo{background:none;border-radius:0;width:80px}

.logo img{height:50px;width:auto}

.faq-list{max-width:820px;margin:0 auto;display:grid;gap:.8rem}
.faq details{background:#fff;border-radius:18px;padding:1.1rem 1.4rem;box-shadow:0 8px 30px #1d2b4a12}
.faq summary{cursor:pointer;font-weight:700;color:var(--ink);list-style:none}
.faq summary::after{content:"+";float:right;color:var(--rose);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:.7rem;opacity:.85}

.local-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:2rem;align-items:stretch;max-width:1100px;margin:0 auto}
.local-info{background:#fff;border-radius:var(--r);padding:2rem;box-shadow:0 10px 40px #1d2b4a14;display:grid;gap:1.1rem;align-content:center}
.local-info address{font-style:normal}
.local-info a:not(.btn){color:var(--rose);font-weight:700}
.map{border-radius:var(--r);overflow:hidden;box-shadow:0 10px 40px #1d2b4a14;min-height:340px}
.map iframe{width:100%;height:100%;min-height:340px;border:0;display:block}
@media(max-width:800px){.local-grid{grid-template-columns:1fr}}

.sub{max-width:680px;margin:-.5rem auto 2rem;text-align:center;opacity:.85}

.feat .btn{margin-top:.9rem}.nav-aluno{font-weight:600;color:var(--plum)}