/* Sidi Dias — Portfólio de Ensino 2027 (web). 1rem = 10px do Figma (coluna de 431px). */
:root{
  --col:min(100vw,600px);
  --sage:#9EAE90; --sage3:#66765A; --mist:#DFE5D7; --stone:#E9E6DA; --ivory:#F5F4EC; --paper:#FCFAF4; --tap:#F2F1E9;
  --olive:#2C3329; --olive2:#3A4336; --ink:#2E2F2B; --muted:#6E706A; --gray:#D2D2CB; --pale:#C5CEBA; --line:#CCD5C1; --deep:#434A3F;
  --side:max(2.2rem,calc((100vw - var(--col)) / 2 + 2.2rem));
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:calc(var(--col) / 43.1);-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:"Host Grotesk",system-ui,sans-serif;font-size:1.5rem;line-height:2.3rem;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,p,ul,figure{margin:0;padding:0;font-weight:400}
ul{list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
b,strong{font-weight:600}
.ac{color:var(--sage);font-weight:600}
.ic{display:block;flex:none}
.ph{overflow:hidden;flex:none}
.ph img{width:100%;height:100%;object-fit:cover}
.bg-paper{background:var(--paper)}.bg-ivory{background:var(--ivory)}.bg-stone{background:var(--stone)}.bg-mist{background:var(--mist)}
.eb{font-size:1.05rem;line-height:1.6rem;letter-spacing:.231rem;text-transform:uppercase;color:var(--sage)}
.t40{font-size:4rem;line-height:4.1rem;letter-spacing:-.1rem}

/* ===== capa ===== */
.cover{background:var(--olive)}
.cv-ph{position:relative;height:72rem;background:var(--sage);overflow:hidden}
.cv-swirl{position:absolute;left:calc(50% - 21.55rem);top:22.9rem;width:43.1rem;height:49.1rem;color:var(--olive);overflow:visible}
.sw-g{transform-box:fill-box;transform-origin:50% 50%}
.cv-logo{position:absolute;left:calc(50% - 21.55rem + 9.4rem);top:4.7rem;width:24.2rem;color:var(--olive)}
.cv-wm{display:block;width:100%;height:auto;overflow:visible}
.wl{clip-path:inset(-20% -10% 0 -10%)}
.cv-img{position:absolute;left:calc(50% - 21.55rem - 10.4rem);top:8.6rem;width:66.7rem;height:63.4rem;max-width:none;object-fit:cover;filter:drop-shadow(-1.4rem 1.4rem 4rem rgba(0,0,0,.14))}
.cv-body{display:grid;gap:2.8rem;padding:4.4rem var(--side)}
.cv-t{display:grid;gap:1.4rem}
.cover h1{font-size:4.6rem;line-height:4.6rem;letter-spacing:-.16rem;font-weight:300;color:var(--ivory)}
.cover h1 .lt{font-weight:300}
.cv-lead{font-size:1.5rem;line-height:2.2rem;color:var(--gray)}
.sum a{position:relative;display:flex;gap:1.4rem;padding:1.4rem 0;transition:padding .5s var(--ease)}
.sum a::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(210,210,203,.25);transform-origin:left;transform:scaleX(var(--sx,1))}
.sum a:hover{padding-left:.8rem}
.sum-n{font-size:1.2rem;line-height:2.2rem;font-weight:600;color:var(--sage)}
.sum-t{display:grid;gap:.2rem}
.sum-t b{font-weight:400;font-size:1.7rem;line-height:2.2rem;color:var(--ivory)}
.sum-t small{font-size:1.15rem;line-height:1.6rem;color:rgba(210,210,203,.75)}

/* ===== conheça ===== */
.about{background:var(--paper);display:grid;gap:2.4rem;padding:4.8rem var(--side)}
.ab-h{display:grid;gap:1.6rem}
.ab-row{display:flex;gap:1rem}
.ab-ph{width:20.9rem;height:27.2rem;border-radius:.9rem}
.stats{flex:1;display:grid;gap:1rem;align-content:start}
.stats li{background:var(--tap);border-radius:.9rem;padding:1.3rem 1.4rem;display:grid;gap:.2rem}
.stats b{font-weight:400;font-size:2.2rem;line-height:2.6rem;letter-spacing:-.05rem;color:var(--sage3)}
.stats span{font-size:1.15rem;line-height:1.5rem;color:var(--muted)}
.ab-p{display:grid;gap:1.6rem;color:var(--muted)}
.ab-p b{color:var(--ink)}
.ab-note{display:flex;gap:1.2rem;align-items:center;padding:1.6rem 1.8rem;background:var(--mist);border-radius:.9rem;color:var(--sage3)}
.ab-note p{font-size:1.4rem;line-height:2rem;color:var(--ink)}

/* ===== aberturas de capítulo ===== */
.opener{background:var(--olive);display:grid;gap:1.8rem;padding:4.8rem var(--side) 4.4rem;scroll-margin-top:0}
.op-row{display:flex;gap:1.4rem;align-items:flex-end}
.op-num{font-size:8.4rem;line-height:7.6rem;letter-spacing:-.4rem;font-weight:300;color:var(--sage);font-variant-numeric:tabular-nums}
.op-t{display:grid;gap:.6rem;padding-bottom:.6rem}
.op-eb{font-size:1.05rem;line-height:1.6rem;letter-spacing:.231rem;text-transform:uppercase;color:var(--sage)}
.opener h2{font-size:3.6rem;line-height:3.8rem;letter-spacing:-.1rem;color:var(--ivory)}
.op-items{font-size:1.3rem;line-height:1.9rem;color:rgba(210,210,203,.85)}
.op-ph{width:38.7rem;height:25rem;border-radius:.9rem}
.sv{display:flex;gap:1.2rem;padding:1.6rem 1.8rem;background:var(--olive2);border-radius:1rem;color:var(--sage)}
.sv>div{display:grid;gap:.4rem}
.sv b{font-size:1.4rem;line-height:2rem;color:var(--ivory)}
.sv p{font-size:1.3rem;line-height:1.9rem;color:var(--gray)}

/* ===== produto ===== */
.prod{display:grid;gap:2.2rem;padding:4.4rem var(--side)}
.prod.g20{gap:2rem}
.hd{display:flex;gap:1.6rem;align-items:flex-start}
.hd-ph{width:12.5rem;height:16.4rem;border-radius:.9rem}
.hd-t{flex:1;display:grid;gap:1rem;align-content:start}
.pills{display:flex;flex-wrap:wrap;gap:.6rem}
.pills li{padding:.5rem 1.1rem;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(102,118,90,.55);font-size:1rem;line-height:1.4rem;letter-spacing:.12rem;text-transform:uppercase;font-weight:600;color:var(--sage3)}
.hd-title{color:var(--ink)}
.t34{font-size:3.4rem;line-height:3.6rem;letter-spacing:-.09rem}
.t30{font-size:3rem;line-height:3.3rem;letter-spacing:-.08rem}
.t28{font-size:2.8rem;line-height:3.1rem;letter-spacing:-.08rem}
.hd-sub{font-size:1.1rem;line-height:1.6rem;letter-spacing:.1rem;text-transform:uppercase;font-weight:600;color:var(--sage3)}
.lead{font-size:2.1rem;line-height:2.7rem;letter-spacing:-.03rem;color:var(--ink)}
.p15{font-size:1.5rem;line-height:2.3rem;color:var(--muted)}
.p15 b,.p145 b{color:var(--ink)}
.card{display:grid;gap:1.2rem;padding:2.2rem 2rem;border-radius:1rem}
.card h4{font-size:1.7rem;line-height:2.3rem;font-weight:600;color:var(--ink)}
.card p{font-size:1.4rem;line-height:2.1rem;color:var(--muted)}
.card b{color:var(--ink)}
.acro{display:flex;background:var(--tap);border-radius:.9rem;padding:1.8rem 0 1.6rem}
.acro>div{flex:1;display:grid;gap:1rem;padding:0 1.4rem;position:relative}
.acro>div+div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:#DDDCCE;transform-origin:top;transform:scaleY(var(--sy,1))}
.acro-l{font-size:4rem;line-height:4.1rem;letter-spacing:-.1rem;color:var(--sage);display:inline-block}
.acro-w{font-size:1.1rem;line-height:1.5rem;text-transform:uppercase;letter-spacing:.04rem;color:var(--ink)}
.method{display:grid;gap:1.2rem;padding:2.2rem 1.8rem;background:var(--pale);border-radius:1rem}
.method h4{font-size:1.7rem;line-height:2.3rem;font-weight:600;color:var(--olive)}
.m-intro{font-size:1.4rem;line-height:2.1rem;color:var(--deep)}
.method ul{display:grid;gap:1.2rem}
.method li{display:flex;gap:1.2rem;align-items:flex-start;padding:1.4rem 1.6rem;background:rgba(252,250,244,.55);border-radius:.9rem}
.m-l{width:4rem;height:4rem;flex:none;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:1.8rem;line-height:2.2rem;font-weight:600;color:var(--sage3)}
.method li>div{display:grid;gap:.3rem}
.method li b{font-size:1.5rem;line-height:2rem;color:var(--olive)}
.method li p{font-size:1.35rem;line-height:2rem;color:var(--deep)}
.learn{display:grid;gap:.6rem}
.learn h4{font-size:1.7rem;line-height:2.3rem;font-weight:600}
.learn li{position:relative;display:flex;gap:1.2rem;padding:1.1rem 0;font-size:1.4rem;line-height:2rem;color:var(--ink)}
.learn li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left;transform:scaleX(var(--sx,1))}
.learn li .ic{color:var(--sage3);margin-top:.1rem}
.eb-fmt{font-size:1.05rem;line-height:1.6rem;letter-spacing:.231rem;text-transform:uppercase;color:var(--sage3)}
.fmt{display:grid;gap:1.4rem;padding:2.2rem 2rem;border-radius:1.2rem;background:var(--mist)}
.f-h{display:flex;gap:1rem;align-items:center;color:var(--sage3)}
.f-h b{font-size:1.6rem;line-height:2rem;color:var(--ink);white-space:pre}
.f-d{font-size:1.4rem;line-height:2.1rem;color:var(--muted)}
.f-p{position:relative;display:grid;gap:.8rem;padding-top:1.4rem}
.f-p::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(102,118,90,.35);transform-origin:left;transform:scaleX(var(--sx,1))}
.f-inv{font-size:1rem;line-height:1.4rem;letter-spacing:.2rem;text-transform:uppercase;font-weight:600;color:var(--sage3)}
.f-row{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.f-row>span{font-size:1.3rem;line-height:1.8rem;color:var(--muted)}
.num{font-size:2.6rem;line-height:3rem;letter-spacing:-.05rem;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.num b{font-weight:400}
.f-note{font-size:1.2rem;line-height:1.7rem;color:var(--muted);opacity:.85}
.fmt.dark,.price{background:var(--olive)}
.fmt.dark .f-h{color:var(--sage)}
.fmt.dark .f-h b{color:var(--ivory)}
.fmt.dark .f-d,.fmt.dark .f-row>span,.price .f-row>span,.fmt.dark .f-note,.price .f-note{color:var(--gray)}
.fmt.dark .f-p::before{background:rgba(210,210,203,.3)}
.fmt.dark .f-inv,.price .f-inv{color:var(--sage)}
.fmt.dark .num,.price .num{color:var(--ivory)}
.price{display:grid;gap:.8rem;padding:2rem;border-radius:1.2rem}
.price .num{font-size:2.8rem;line-height:3.2rem;letter-spacing:-.06rem}
.note{display:flex;gap:1.2rem;align-items:flex-start;padding:1.6rem 1.8rem;background:var(--mist);border-radius:1rem;color:var(--sage3)}
.note p{font-size:1.4rem;line-height:2.1rem;color:var(--ink)}
.inf{border-radius:1rem;padding:.4rem 1.8rem}
.inf li{position:relative;display:flex;gap:1rem;padding:1.2rem 0;color:var(--sage3)}
.inf li+li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(210,210,203,.8)}
.inf p{font-size:1.35rem;line-height:1.9rem;color:var(--muted)}
.inf b{color:var(--ink)}
.foot-n{font-size:1.15rem;line-height:1.7rem}
.foot-n.muted{color:var(--muted)}

/* botão — texto que rola no hover (referência) */
.btn{position:relative;isolation:isolate;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.5rem 2rem 1.5rem 2.2rem;border-radius:99px;background:var(--olive);color:var(--sage)}
.btn::before{content:"";position:absolute;inset:0;background:var(--sage3);transform:translateY(101%);transition:transform .55s var(--ease);z-index:-1}
.btn:hover::before{transform:none}
.btn-roll{display:grid;height:1.6rem;overflow:hidden;font-size:1.2rem;line-height:1.6rem;letter-spacing:.14rem;text-transform:uppercase;font-weight:600;color:var(--ivory)}
.btn-roll span{transition:transform .55s var(--ease)}
.btn:hover .btn-roll span{transform:translateY(-100%)}
.btn .ic{transition:transform .55s var(--ease)}
.btn:hover .ic{transform:rotate(45deg);color:var(--ivory)}

/* acompanhamento */
.acomp{background:var(--sage);display:grid;gap:1.4rem;padding:3.6rem var(--side);color:var(--paper)}
.ac-h{display:flex;gap:1.2rem;align-items:center}
.ac-ic{width:4.4rem;height:4.4rem;flex:none;border-radius:50%;background:var(--paper);display:grid;place-items:center;color:var(--sage3)}
.acomp h3{font-size:2rem;line-height:2.5rem;letter-spacing:-.03rem;color:var(--paper)}
.acomp p{font-size:1.5rem;line-height:2.3rem}
.acomp .foot-n{font-size:1.15rem;line-height:1.7rem;opacity:.8}

/* cursos online */
.oc{background:var(--paper);display:grid;gap:1.4rem;padding:2.8rem max(1.6rem,calc((100vw - var(--col)) / 2 + 1.6rem))}
.oc-card{display:grid;gap:2rem;padding:2.6rem 2rem 2.2rem;border-radius:1.4rem}
.lead19{font-size:1.9rem;line-height:2.5rem;letter-spacing:-.02rem;color:var(--ink)}
.p145{font-size:1.45rem;line-height:2.2rem;color:var(--muted)}

/* rodapé (igual ao site de serviços) */
.local{background:var(--olive);color:var(--gray);padding:3.7rem var(--side)}
.local .eb{margin-bottom:2rem}
.local .t40{color:var(--gray)}
.ct{margin-top:2.1rem;display:grid;gap:1.2rem}
.ct a{position:relative;display:flex;align-items:flex-start;gap:1rem;min-height:5.2rem;padding:1rem 0 .9rem;transition:padding .5s var(--ease)}
.ct a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(210,210,203,.35);transform-origin:left;transform:scaleX(var(--sx,1))}
.ct .ic{color:var(--sage);margin-top:.7rem}
.ct a>span{display:grid}
.ct b{font-weight:400;font-size:1.25rem;line-height:1.6rem;color:var(--sage)}
.ct .nw{white-space:nowrap}
.ct small{font-size:1.1rem;line-height:1.4rem;color:var(--gray)}
.ct a:hover{padding-left:.8rem}
.ct a:hover small{text-decoration:underline;text-underline-offset:.3rem}
.foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:2.4rem;padding:0 .1rem 0 .4rem}
.foot-logo{width:8.6rem;color:var(--gray)}
.foot-mono{width:3.4rem;height:3.4rem;color:var(--sage)}

/* animação */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split .w>i{display:inline-block;font-style:normal;will-change:transform}
.lit .lw{opacity:.18}
.reduced .lit .lw{opacity:1}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .lit .lw{opacity:1}
}