/* Direção: estúdio 3D interativo (referência lusion.co) com a identidade do Instagram da Silvia.
   Hero claro com objetos 3D brilhantes e o símbolo coral em 3D; seções escuras; grotesca limpa + itálico serifado + mono.
   Um tema só, escolhido de propósito: hero claro e corpo escuro. */
:root{
  --paper:#EDEBE6;
  --paper-2:#E3E0D9;
  --night:#0A0D10;
  --night-2:#11161A;
  --night-3:#182026;
  --coral:#F0784F;
  --cream:#ECE6D8;
  --ink:#0A0D10;
  --fg:#F2EEE6;
  --muted-d:#AAB2B7;
  --muted-l:#4E514E;
  --line-d:#1F272D;
  --line-l:#CFCBC2;
  --sans:"Host Grotesk", "Segoe UI", system-ui, sans-serif;
  --serif:"Newsreader", Georgia, serif;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --ease:cubic-bezier(.2,.75,.15,1);
}
*{box-sizing:border-box}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0; background:var(--night); color:var(--fg); font-family:var(--sans); font-size:18px; line-height:1.6; text-rendering:optimizeLegibility; font-feature-settings:"ss01","kern"; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0; font-weight:500; letter-spacing:-0.025em; text-wrap:balance}
.it{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-0.01em}
.wrap{max-width:1320px; margin:0 auto; padding-inline:20px}
@media (min-width:760px){ .wrap{padding-inline:40px} }
.mono{font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase}
:focus-visible{outline:2px solid var(--coral); outline-offset:3px; border-radius:8px}
::selection{background:var(--coral); color:var(--ink)}

/* ---------- preloader ---------- */
.loader{position:fixed; inset:0; z-index:100; background:var(--night); color:var(--fg); display:grid; place-items:center; animation:loaderOut .01s 3s forwards}
.loader.done{transform:translateY(-100%); transition:transform 1s var(--ease)}
.loader .count{position:absolute; left:20px; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); font-family:var(--sans); font-weight:300; font-size:clamp(72px, 14vw, 180px); line-height:.9; letter-spacing:-0.05em; font-variant-numeric:tabular-nums}
.loader .lmark{width:72px; height:72px}
.loader .bar{position:absolute; left:0; bottom:0; height:2px; background:var(--coral); width:0}
@keyframes loaderOut{to{visibility:hidden; opacity:0}}

/* ---------- marca ---------- */
.mk{display:inline-block; width:1em; height:1em; vertical-align:-0.14em}
.mk .arc{fill:none; stroke:var(--coral); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:66 100}
.mk .dot{fill:var(--coral)}
.spin{animation:spin 2.6s cubic-bezier(.6,.1,.3,.9) infinite; transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- cursor ---------- */
.cur, .cur-ring{position:fixed; left:0; top:0; pointer-events:none; z-index:90; border-radius:50%; transform:translate(-50%,-50%)}
.cur{width:6px; height:6px; background:var(--coral)}
.cur-ring{width:38px; height:38px; border:1px solid color-mix(in srgb, var(--coral) 70%, transparent); transition:width .35s var(--ease), height .35s var(--ease), background .35s, border-color .35s; display:grid; place-items:center; font:500 10px var(--mono); letter-spacing:.1em; color:var(--ink); text-transform:uppercase}
.cur-ring.big{width:88px; height:88px; background:var(--coral); border-color:var(--coral)}
@media (hover:none), (pointer:coarse){ .cur, .cur-ring{display:none} }

/* ---------- nav ---------- */
.nav{position:fixed; left:0; right:0; top:0; z-index:40; padding-top:env(safe-area-inset-top, 0px); pointer-events:none}
.nav .wrap{display:flex; justify-content:space-between; align-items:center; padding-block:18px; gap:12px}
.nav a, .nav button{pointer-events:auto}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:500; font-size:17px; letter-spacing:-0.02em; color:var(--ink); mix-blend-mode:normal; transition:color .4s}
.logo .mk{font-size:26px}
.nav.dark .logo{color:var(--fg)}
.pills{display:flex; gap:8px}
.pill{display:inline-flex; align-items:center; gap:8px; font:500 13px var(--mono); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:12px 18px; border-radius:999px; border:0; cursor:pointer; transition:transform .35s var(--ease), background .3s, color .3s}
.pill:hover{transform:scale(1.04)}
.pill.talk{background:var(--ink); color:var(--fg)}
.pill.talk i{width:7px; height:7px; border-radius:50%; background:var(--coral)}
.pill.menu-btn{background:#fff; color:var(--ink)}
.pill.menu-btn .lines{display:grid; gap:4px}
.pill.menu-btn .lines b{display:block; width:14px; height:1.5px; background:currentColor; transition:transform .35s var(--ease)}
.nav.dark .pill.talk{background:var(--coral); color:var(--ink)}
.nav.dark .pill.talk i{background:var(--ink)}
@media (max-width:560px){ .pill.talk span{display:none} .pill.talk{padding:12px 14px} }

/* full menu */
.fmenu{position:fixed; inset:0; z-index:35; background:var(--night); color:var(--fg); display:flex; flex-direction:column; justify-content:flex-end; padding:100px 0 calc(32px + env(safe-area-inset-bottom, 0px)); clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease); visibility:hidden}
.fmenu.open{clip-path:inset(0 0 0 0); visibility:visible}
.fmenu nav{display:grid}
.fmenu nav a{display:flex; align-items:baseline; justify-content:space-between; gap:16px; text-decoration:none; font-size:clamp(44px, 9vw, 104px); font-weight:400; letter-spacing:-0.035em; line-height:1.05; padding-block:6px; border-bottom:1px solid var(--line-d); transform:translateY(30px); opacity:0; transition:transform .8s var(--ease), opacity .8s, color .3s}
.fmenu nav a .mono{color:var(--muted-d)}
.fmenu nav a:hover{color:var(--coral)}
.fmenu.open nav a{transform:none; opacity:1}
.fmenu.open nav a:nth-child(2){transition-delay:.05s}.fmenu.open nav a:nth-child(3){transition-delay:.1s}.fmenu.open nav a:nth-child(4){transition-delay:.15s}.fmenu.open nav a:nth-child(5){transition-delay:.2s}.fmenu.open nav a:nth-child(6){transition-delay:.25s}
.fmenu .foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:28px; color:var(--muted-d)}

/* ---------- hero ---------- */
.hero{position:relative; min-height:min(100svh, 940px); background:radial-gradient(120% 90% at 70% 30%, #F6F4F0 0%, var(--paper) 45%, var(--paper-2) 100%); color:var(--ink); overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end}
#gl{position:absolute; inset:0; width:100%; height:100%; display:block}
.blobs{position:absolute; inset:0; pointer-events:none}
.blobs i{position:absolute; border-radius:50%; filter:blur(2px)}
.hero .content{position:relative; z-index:2; pointer-events:none; padding-block:120px 36px}
.hero h1{font-size:clamp(50px, 9.6vw, 150px); line-height:.96; font-weight:500; letter-spacing:-0.04em; max-width:11ch}
.hero h1 .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em}
.hero h1 .w > span{display:inline-block; transform:translateY(110%); transition:transform 1.1s var(--ease)}
.ready .hero h1 .w > span{transform:none}
.hero h1 .it{color:var(--coral)}
.hero .row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-top:34px}
.hero .sub{max-width:42ch; font-size:19px; line-height:1.55; color:#1E2121; opacity:0; transform:translateY(16px); transition:opacity 1s .5s, transform 1s .5s var(--ease)}
.ready .hero .sub{opacity:1; transform:none}
.hero .scroll{display:flex; align-items:center; gap:12px; color:var(--muted-l)}
.hero .scroll i{width:1px; height:44px; background:var(--line-l); position:relative; overflow:hidden}
.hero .scroll i::after{content:""; position:absolute; left:0; top:-50%; width:1px; height:50%; background:var(--ink); animation:drip 1.8s var(--ease) infinite}
@keyframes drip{to{top:100%}}
.hero .tagline{position:absolute; top:96px; right:40px; z-index:2; text-align:right; color:var(--muted-l); display:grid; gap:4px}
@media (max-width:760px){ .hero .tagline{display:none} }
.no-js .hero h1 .w > span, .reduce .hero h1 .w > span{transform:none}
.no-js .hero .sub, .reduce .hero .sub{opacity:1; transform:none}

/* ---------- statement ---------- */
.statement{padding-block:clamp(90px, 14vw, 180px)}
.statement .mono{color:var(--coral); margin-bottom:28px; display:flex; align-items:center; gap:10px}
.statement p.big{font-size:clamp(30px, 4.6vw, 64px); line-height:1.18; letter-spacing:-0.025em; font-weight:400; max-width:22ch}
.statement p.big .wd{opacity:.28; transition:opacity .25s}
.statement p.big .wd.on{opacity:1}
.statement p.big .it{color:var(--coral)}
.reduce .statement p.big .wd{opacity:1}


/* ---------- mosaico (sobre) ---------- */
.mosaic-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px; margin:clamp(64px, 9vw, 110px) 0 24px}
.mosaic-head h3{font-size:clamp(28px, 3.4vw, 44px); letter-spacing:-0.03em; line-height:1.05}
.mosaic-head h3 .it{color:var(--coral)}
.mosaic-head p{color:var(--muted-d); max-width:38ch}
.mosaic{display:grid; grid-template-columns:repeat(2, 1fr); grid-auto-rows:clamp(150px, 44vw, 220px); grid-auto-flow:dense; gap:10px}
@media (min-width:760px){ .mosaic{grid-template-columns:repeat(4, 1fr); grid-auto-rows:clamp(180px, 19vw, 250px); gap:12px} }
.tile-m{position:relative; overflow:hidden; border-radius:18px; background:var(--night-2); isolation:isolate; box-sizing:border-box}
.tile-m img, .tile-m video{position:absolute; left:0; top:-8%; width:100%; height:116%; object-fit:cover; transform:translateY(var(--py, 0px)) scale(1.02); transition:transform 1.1s var(--ease); will-change:transform}
.tile-m:hover img, .tile-m:hover video{transform:translateY(var(--py, 0px)) scale(1.08)}
.tile-m::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 55%, rgba(10,13,16,.75)); opacity:.6; transition:opacity .5s; z-index:1}
.tile-m:hover::after{opacity:1}
.tile-m .cap{position:absolute; left:14px; right:14px; bottom:12px; z-index:2; display:flex; justify-content:space-between; align-items:end; gap:8px; color:var(--fg); transform:translateY(6px); opacity:.88; transition:transform .5s var(--ease), opacity .5s}
.tile-m:hover .cap{transform:none; opacity:1}
.tile-m .cap b{font-weight:500; font-size:15px; line-height:1.2}
.tile-m .cap .mono{font-size:11px; color:var(--coral); white-space:nowrap}
.tile-m .vtag{position:absolute; top:12px; left:12px; z-index:2; display:flex; align-items:center; gap:6px; font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:6px 10px; border-radius:999px; background:rgba(10,13,16,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--fg)}
.tile-m .vtag i{width:7px; height:7px; border-radius:50%; background:var(--coral); animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.m-xl{grid-column:span 2; grid-row:span 2}
.m-t{grid-column:span 1; grid-row:span 2}
.m-s{grid-column:span 1; grid-row:span 1}
.m-w, .m-w4{grid-column:span 2; grid-row:span 1}



/* sobre: texto à esquerda (fixo) e mosaico à direita */
.about-split{display:grid; gap:48px}
@media (min-width:1000px){
  .about-split{grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:56px; align-items:start}
  .about-l{position:sticky; top:110px}
  .statement p.big{font-size:clamp(30px, 2.9vw, 46px)}
  .about-r .mosaic-head{margin-top:0}
  .about-r .mosaic{grid-template-columns:repeat(3, 1fr); grid-auto-rows:clamp(150px, 12vw, 200px)}
}
.about-l, .about-r{min-width:0}


/* ---------- serviços: carrossel ---------- */
.railnav.dark button{border-color:var(--line-d); color:var(--fg)}
.railnav.dark button:hover{background:var(--coral); color:var(--ink); border-color:var(--coral)}
.srail{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 20px 8px; scrollbar-width:none; cursor:grab}
.srail::-webkit-scrollbar{display:none}
.srail.drag{cursor:grabbing; scroll-snap-type:none}
@media (min-width:760px){ .srail{padding-inline:40px} }
@media (min-width:1400px){ .srail{padding-inline:calc((100vw - 1240px) / 2)} }
.scard{flex:0 0 min(84vw, 440px); scroll-snap-align:start; border-radius:24px; overflow:hidden; background:var(--night-2); border:1px solid var(--line-d); display:flex; flex-direction:column; transition:transform .6s var(--ease), border-color .4s}
.scard:hover{transform:translateY(-6px); border-color:color-mix(in srgb, var(--coral) 50%, var(--line-d))}
.scard .ph{position:relative; aspect-ratio:4 / 3; overflow:hidden; background:radial-gradient(90% 80% at 30% 20%, #1E262C, var(--night-3))}
.scard .ph img, .scard .ph video{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--ease)}
.scard:hover .ph img, .scard:hover .ph video{transform:scale(1.06)}
.scard .ph img.contain{object-fit:contain; background:#FFFFFF; padding:8px}
.scard:hover .ph img.contain{transform:scale(1.03)}
.scard .ph .art{position:absolute; inset:0; display:grid; place-items:center}
.scard .ph .art svg{width:34%; height:34%; stroke:var(--coral); fill:none; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; opacity:.95}
.scard .ph .art .num{position:absolute; right:18px; bottom:6px; font-size:110px; font-weight:500; letter-spacing:-0.05em; line-height:1; color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--fg) 22%, transparent)}
.scard .ph .orb{position:absolute; width:60%; aspect-ratio:1; border-radius:50%; filter:blur(50px); background:var(--coral); opacity:.22; left:-10%; top:-15%}
.scard .ph .idx{position:absolute; left:16px; top:14px; z-index:2; font:500 12px var(--mono); letter-spacing:.08em; padding:6px 10px; border-radius:999px; background:rgba(10,13,16,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--fg)}
.scard .body{padding:24px 24px 26px; display:grid; gap:12px}
.scard h3{font-size:clamp(24px, 2.3vw, 30px); line-height:1.1; letter-spacing:-0.025em}
.scard p{color:var(--muted-d); font-size:16px}
.scard ul{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:8px; border-top:1px solid var(--line-d); padding-top:14px}
.scard li{display:flex; gap:10px; font-size:15px; color:color-mix(in srgb, var(--fg) 88%, transparent)}
.scard li::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--coral); margin-top:.6em}
.sprog{height:2px; background:var(--line-d); border-radius:2px; margin-top:28px; overflow:hidden}
.sprog i{display:block; height:100%; width:12%; background:var(--coral); border-radius:2px; transition:width .2s}


/* visualizações dos serviços */
.viz{position:absolute; inset:0; padding:18px 18px 16px; display:flex; flex-direction:column; gap:9px; font:400 12.5px/1.45 var(--mono); color:var(--fg); background:radial-gradient(120% 90% at 20% 0%, #1B2329, #0D1215); overflow:hidden}
.viz .vh{display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted-d); font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding-bottom:8px; border-bottom:1px solid var(--line-d); margin-top:26px}
.viz .vh .dot{width:7px; height:7px; border-radius:50%; background:#3FB97A; margin-right:auto; order:-1; display:none}
.viz .tl{display:flex; gap:5px; margin-right:auto}
.viz .tl i{width:8px; height:8px; border-radius:50%; background:#3A444B}
.viz .tl i:first-child{background:var(--coral)}
.viz .s1, .viz .s2, .viz .s3, .viz .s4, .viz .s5{animation:vIn 9s var(--ease) infinite backwards}
.viz .s1{animation-delay:.2s}.viz .s2{animation-delay:1.1s}.viz .s3{animation-delay:2s}.viz .s4{animation-delay:2.9s}.viz .s5{animation-delay:3.8s}
@keyframes vIn{0%{opacity:0; transform:translateY(8px)} 8%{opacity:1; transform:none} 88%{opacity:1; transform:none} 96%,100%{opacity:0; transform:translateY(-4px)}}
/* rag */
.v-rag .q{align-self:flex-end; max-width:85%; background:var(--coral); color:var(--ink); padding:9px 12px; border-radius:14px 14px 4px 14px; font-family:var(--sans); font-size:13.5px}
.v-rag .st{display:flex; align-items:center; gap:8px; color:var(--muted-d); font-size:12px}
.v-rag .st b{color:var(--fg); font-weight:500}
.v-rag .st i{width:10px; height:10px; border-radius:50%; border:2px solid var(--muted-d); border-top-color:transparent; animation:spin 1s linear infinite}
.v-rag .st i.ok{border:0; background:#3FB97A; animation:none}
.v-rag .a{max-width:92%; background:var(--night-3); border:1px solid var(--line-d); padding:10px 12px; border-radius:14px 14px 14px 4px; font-family:var(--sans); font-size:13.5px; line-height:1.45}
.v-rag .src{display:inline-block; margin-top:8px; font:500 11px var(--mono); color:var(--coral); border:1px solid color-mix(in srgb, var(--coral) 40%, transparent); border-radius:999px; padding:3px 8px}
/* terminal */
.v-term .ln{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.v-term .k{color:#8AB4F8} .v-term .g{color:#3FB97A} .v-term .c{color:var(--coral)}
.v-term .ln:first-of-type{color:var(--fg)}
/* segurança */
.v-sec .badge{font-size:10.5px; color:var(--ink); background:var(--coral); padding:3px 8px; border-radius:999px; letter-spacing:.06em}
.v-sec .row{display:grid; grid-template-columns:1fr 1.2fr auto; gap:8px; padding:6px 8px; border-radius:8px; background:color-mix(in srgb, var(--fg) 4%, transparent)}
.v-sec .row.hd{background:none; color:var(--muted-d); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; padding-block:0}
.v-sec .okk{color:#3FB97A} .v-sec .no{color:#FF6B6B}
.v-sec .ft{margin-top:auto; color:var(--muted-d); font-size:11px}
/* código */
.v-code pre{margin:0; font:400 12px/1.7 var(--mono); color:#C9D1D9; white-space:pre; overflow:hidden}
.v-code .n{color:#4A555D; display:inline-block; width:14px}
.v-code .k{color:#FF8F6B} .v-code .f{color:#8AB4F8} .v-code .s{color:#A5D6A7}
.v-code .cur{display:inline-block; width:7px; height:14px; background:var(--coral); vertical-align:-2px; margin-left:2px; animation:blink 1s steps(1) infinite}
@media (max-width:420px){ .viz{font-size:11.5px} .v-code pre{font-size:10.5px} }


/* ---------- entregas: bento ---------- */
.bento{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:900px){
  .bento{grid-template-columns:repeat(12, 1fr); grid-auto-rows:minmax(250px, auto)}
  .bt-sites{grid-column:span 7; grid-row:span 2}
  .bt-sys{grid-column:span 5}
  .bt-apps{grid-column:span 5}
  .bt-rag{grid-column:span 7}
  .bt-pay{grid-column:span 5}
  .bt-train{grid-column:span 6}
  .bt-meta{grid-column:span 6}
}
.bt{position:relative; overflow:hidden; isolation:isolate; border-radius:26px; background:var(--night-2); border:1px solid var(--line-d); padding:26px; display:flex; flex-direction:column; gap:20px; min-height:300px}
.bt::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), color-mix(in srgb, var(--coral) 18%, transparent), transparent 60%); opacity:0; transition:opacity .4s}
.bt:hover::before{opacity:1}
.bt-txt{position:relative; z-index:2; display:grid; gap:6px; max-width:36ch}
.bn{font-size:clamp(64px, 7vw, 104px); font-weight:500; letter-spacing:-0.05em; line-height:.9; font-variant-numeric:tabular-nums}
.bn sup{font-size:.42em; color:var(--coral); vertical-align:top; margin-left:2px}
.bn-word{color:var(--coral)}
.bt h3{font-size:clamp(22px, 2.2vw, 28px); letter-spacing:-0.025em; line-height:1.12; margin-top:6px}
.bt p{color:var(--muted-d); font-size:16px}

/* sites */
.bt-sites{min-height:560px}
.sites-wall{position:relative; flex:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; min-height:300px; overflow:hidden; mask-image:linear-gradient(transparent, #000 14%, #000 86%, transparent); -webkit-mask-image:linear-gradient(transparent, #000 14%, #000 86%, transparent); transform:rotate(-4deg) scale(1.08); margin:0 -10px -30px}
.scol{display:flex; flex-direction:column; gap:10px; animation:sUp 26s linear infinite}
.scol.rev{animation-direction:reverse; animation-duration:30s}
@keyframes sUp{to{transform:translateY(-50%)}}
.mini{border-radius:10px; background:#F3F0EA; overflow:hidden; aspect-ratio:4 / 3.2; flex:none; box-shadow:0 10px 30px -14px rgba(0,0,0,.6)}
.mini .mb{display:flex; gap:3px; padding:5px 6px; background:#E2DED6}
.mini .mb i{width:5px; height:5px; border-radius:50%; background:#C9C3B8}
.mini .mc{padding:8px; display:grid; gap:5px}
.mini b{display:block; height:28%; min-height:22px; border-radius:5px; background:#1A1F23}
.mini span{display:block; height:5px; border-radius:3px; background:#D2CCC1}
.mini span:nth-of-type(2){width:70%}
.mini em{display:block; width:40%; height:10px; border-radius:99px; background:var(--coral)}
.mini.l2{background:#11161A} .mini.l2 .mb{background:#1C2428} .mini.l2 b{background:var(--coral)} .mini.l2 span{background:#2A333A} .mini.l2 em{background:#F3F0EA}
.mini.l3 b{background:linear-gradient(120deg, #F0784F, #F6B48F)} .mini.l3 em{background:#1A1F23}
.mini.l4{background:#E9EEF2} .mini.l4 b{background:#2B4A6B} .mini.l4 em{background:#2B4A6B}

/* sistemas */
.status{display:grid; gap:8px; margin-top:auto}
.srow{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; background:color-mix(in srgb, var(--fg) 4%, transparent); border:1px solid var(--line-d); font-size:14px}
.srow i{width:8px; height:8px; border-radius:50%; background:#3FB97A; box-shadow:0 0 0 0 rgba(63,185,122,.6); animation:ping 2s infinite}
.srow:nth-child(2) i{animation-delay:.5s} .srow:nth-child(3) i{animation-delay:1s} .srow:nth-child(4) i{animation-delay:1.5s}
@keyframes ping{70%{box-shadow:0 0 0 7px rgba(63,185,122,0)} 100%{box-shadow:0 0 0 0 rgba(63,185,122,0)}}
.bars{display:flex; align-items:flex-end; gap:2px; height:16px}
.bars b{width:3px; border-radius:2px; background:var(--coral); animation:bar 1.4s ease-in-out infinite alternate}
.bars b:nth-child(1){height:40%} .bars b:nth-child(2){height:80%; animation-delay:.2s} .bars b:nth-child(3){height:55%; animation-delay:.4s} .bars b:nth-child(4){height:95%; animation-delay:.1s} .bars b:nth-child(5){height:60%; animation-delay:.3s} .bars b:nth-child(6){height:75%; animation-delay:.5s}
@keyframes bar{to{transform:scaleY(.45)}}
.bars b{transform-origin:bottom}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.chips span{font:500 11px var(--mono); letter-spacing:.05em; text-transform:uppercase; padding:5px 9px; border-radius:999px; border:1px solid var(--line-d); color:var(--muted-d)}

/* apps */
.bt-apps{flex-direction:row; align-items:stretch}
.bt-apps .bt-txt{flex:1}
.stores{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.stores span{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500; padding:8px 12px; border-radius:12px; background:var(--fg); color:var(--ink)}
.stores svg{width:15px; height:15px; fill:currentColor}
.phones{position:relative; width:46%; min-width:150px; margin:-6px -10px -40px 0}
.phone{position:absolute; width:58%; aspect-ratio:9 / 18.5; border-radius:22px; background:#05080A; border:3px solid #2A333A; padding:6px; box-shadow:0 20px 40px -18px rgba(0,0,0,.8)}
.phone .notch{position:absolute; top:7px; left:50%; width:34%; height:9px; border-radius:99px; background:#05080A; transform:translateX(-50%); z-index:2}
.phone .scr{height:100%; border-radius:16px; background:linear-gradient(170deg, #1C2429, #0E1316); padding:20px 9px 9px; display:flex; flex-direction:column; gap:6px}
.phone .scr b{height:16%; border-radius:10px; background:linear-gradient(120deg, var(--coral), #F6B48F)}
.phone .scr span{height:5px; border-radius:3px; background:#2E383F}
.phone .scr span:nth-of-type(2){width:65%}
.phone .scr .cards{display:grid; grid-template-columns:1fr 1fr; gap:5px; flex:1}
.phone .scr .cards i{border-radius:8px; background:#232C32}
.phone .scr em{height:16px; border-radius:99px; background:var(--coral); margin-top:auto}
.phone .scr.alt{background:linear-gradient(170deg, #F3F0EA, #E3DED4)}
.phone .scr.alt b{background:#11161A}
.phone .scr.alt span{background:#CFC8BB}
.phone .scr.alt em{background:#11161A}
.phone .scr .ring{width:58%; aspect-ratio:1; border-radius:50%; margin:6px auto; border:6px solid #D8D1C4; border-top-color:var(--coral); border-right-color:var(--coral); animation:spin 4s linear infinite}
.p1{right:30%; top:6%; transform:rotate(-8deg); animation:fl1 6s ease-in-out infinite alternate}
.p2{right:0; top:16%; transform:rotate(7deg); animation:fl2 7s ease-in-out infinite alternate}
@keyframes fl1{to{transform:rotate(-5deg) translateY(-10px)}}
@keyframes fl2{to{transform:rotate(10deg) translateY(8px)}}
@media (max-width:560px){ .bt-apps{flex-direction:column} .phones{width:100%; height:240px; margin:0 0 -50px} .phone{width:36%} .p1{right:42%} .p2{right:12%} }

/* rag */
.bt-rag{flex-direction:row; align-items:center}
.bt-rag .bt-txt{flex:0 0 38%}
.brain{flex:1; width:100%; max-width:100%; height:auto; min-width:0}
.brain .links path{stroke:color-mix(in srgb, var(--fg) 22%, transparent); stroke-width:1.2; fill:none}
.brain .links .faint{stroke-dasharray:3 5; stroke:color-mix(in srgb, var(--fg) 12%, transparent)}
.brain .pulses circle{fill:var(--coral); filter:drop-shadow(0 0 4px var(--coral))}
.brain .nodes circle{fill:var(--night-3); stroke:color-mix(in srgb, var(--fg) 25%, transparent)}
.brain .nodes text{fill:var(--fg); font:500 9.5px var(--sans); text-anchor:middle}
.brain .core circle{fill:var(--coral); stroke:none}
.brain .core text{fill:var(--ink); font-weight:600; font-size:11px}
.brain .core .halo{fill:color-mix(in srgb, var(--coral) 18%, transparent); animation:halo 2.4s ease-in-out infinite; transform-origin:center; transform-box:fill-box}
@keyframes halo{50%{transform:scale(1.15); opacity:.5}}
@media (max-width:700px){ .bt-rag{flex-direction:column; align-items:stretch} }

/* pagamentos */
.checkout{margin-top:auto; border-radius:18px; background:#F3F0EA; color:var(--ink); padding:16px; display:grid; gap:12px; box-shadow:0 20px 40px -20px rgba(0,0,0,.7)}
.co-top{display:flex; justify-content:space-between; align-items:baseline}
.co-top span{color:#6A6457; font-size:13px}
.co-top b{font-size:22px; font-weight:600; letter-spacing:-0.02em}
.gws{display:flex; gap:6px; flex-wrap:wrap}
.gws span{font-size:12.5px; font-weight:500; padding:6px 10px; border-radius:99px; border:1px solid #D3CBBA; animation:gw 6s infinite}
.gws .g2{animation-delay:2s} .gws .g3{animation-delay:4s}
@keyframes gw{0%,30%{background:var(--ink); color:#F3F0EA; border-color:var(--ink)} 34%,100%{background:transparent; color:var(--ink); border-color:#D3CBBA}}
.co-card{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid #E2DACB; font:500 13px var(--mono)}
.co-card i{width:26px; height:18px; border-radius:4px; background:linear-gradient(120deg, var(--coral), #F6B48F)}
.co-card em{margin-left:auto; font-style:normal; color:#6A6457}
.co-btn{position:relative; height:44px; border-radius:12px; overflow:hidden; font-weight:600}
.co-btn span{position:absolute; inset:0; display:grid; place-items:center; border-radius:12px}
.co-btn .pay{background:var(--ink); color:#F3F0EA; animation:payA 6s infinite}
.co-btn .ok{background:#3FB97A; color:#fff; animation:payB 6s infinite}
@keyframes payA{0%,45%{opacity:1} 50%,95%{opacity:0} 100%{opacity:1}}
@keyframes payB{0%,45%{opacity:0; transform:scale(.96)} 50%,95%{opacity:1; transform:none} 100%{opacity:0}}

/* treinamentos */
.mods{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:auto}
.mod{border-radius:14px; padding:12px; background:color-mix(in srgb, var(--fg) 4%, transparent); border:1px solid var(--line-d); display:grid; gap:4px; position:relative; overflow:hidden}
.mod span{font:500 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--coral)}
.mod b{font-weight:500; font-size:15px}
.mod i{display:block; height:4px; border-radius:4px; background:var(--line-d); margin-top:8px; position:relative; overflow:hidden}
.mod i::after{content:""; position:absolute; inset:0; width:var(--w); background:var(--coral); border-radius:4px; animation:grow 2.6s var(--ease) infinite alternate}
@keyframes grow{from{width:8%}}

/* meta */
.chat{margin-top:auto; display:grid; gap:8px; padding:14px; border-radius:18px; background:#0B1714; border:1px solid #17302A}
.ch-top{display:flex; gap:6px; margin-bottom:4px}
.ch-top span{font:500 11px var(--mono); letter-spacing:.05em; padding:4px 9px; border-radius:99px}
.ch-top .wa{background:#25D366; color:#062615}
.ch-top .ig{background:linear-gradient(90deg, #F58529, #DD2A7B, #8134AF); color:#fff}
.msg{max-width:80%; padding:8px 12px; font-size:14px; line-height:1.35; border-radius:14px; animation:vIn 10s var(--ease) infinite backwards}
.msg.in{background:#1F2C33; color:var(--fg); border-bottom-left-radius:4px}
.msg.out{justify-self:end; background:#005C4B; color:#E9FFF8; border-bottom-right-radius:4px}
.m1{animation-delay:.2s} .m2{animation-delay:1.4s} .m3{animation-delay:2.6s} .m4{animation-delay:3.8s}

/* ---------- abas blog / artigos ---------- */
.tabs{position:relative; display:inline-flex; gap:4px; padding:5px; border-radius:999px; background:var(--paper-2); border:1px solid var(--line-l); margin-bottom:28px}
.tabs button{position:relative; z-index:1; font:500 16px var(--sans); color:var(--muted-l); background:none; border:0; padding:12px 22px; border-radius:999px; cursor:pointer; transition:color .3s}
.tabs button[aria-selected="true"]{color:var(--fg)}
.tabs .ct{font:500 11px var(--mono); margin-left:6px; opacity:.7}
.tabs .ind{position:absolute; z-index:0; top:5px; bottom:5px; left:5px; width:0; border-radius:999px; background:var(--ink); transition:transform .5s var(--ease), width .5s var(--ease)}
.tp-bar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; color:var(--muted-l)}
.tp{animation:tpIn .6s var(--ease)}
@keyframes tpIn{from{opacity:.0001; transform:translateY(14px)}to{opacity:1; transform:none}}
.light .alist{border-color:var(--line-l)}
.light .arow{border-color:var(--line-l)}
.light .arow .mono, .light .arow p{color:var(--muted-l)}

/* ---------- nav: currículo ---------- */
.pill.cv{background:transparent; color:var(--ink); border:1px solid color-mix(in srgb, var(--ink) 30%, transparent)}
.nav.dark .pill.cv{color:var(--fg); border-color:color-mix(in srgb, var(--fg) 30%, transparent)}
@media (max-width:760px){ .pill.cv{display:none} }
.hero-ctas{display:flex; flex-wrap:wrap; gap:10px; pointer-events:auto; opacity:0; transform:translateY(16px); transition:opacity 1s .6s, transform 1s .6s var(--ease)}
.ready .hero-ctas, .reduce .hero-ctas{opacity:1; transform:none}
.btn.ghost-l{border:1px solid color-mix(in srgb, var(--ink) 30%, transparent); color:var(--ink)}
.btn.ghost-l:hover{border-color:var(--coral); color:var(--coral)}

/* ---------- currículo ---------- */
.cv-doc{max-width:860px !important}
.cv-head{display:grid; gap:10px; padding-bottom:28px; border-bottom:1px solid #D3CBBA}
.cv-head h1{margin-top:0 !important}
.cv-head .role{font-size:20px; color:#3E3A33}
.cv-head .meta{display:flex; flex-wrap:wrap; gap:8px 18px; color:#6A6457}
.cv-head .meta a{color:var(--ink)}
.cv-sec{display:grid; gap:16px; padding-block:30px; border-bottom:1px solid #D3CBBA}
@media (min-width:760px){ .cv-sec{grid-template-columns:180px 1fr; gap:28px} }
.cv-sec > h2{font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--coral); margin:0; padding-top:4px}
.cv-sec p{font-size:17px; line-height:1.6}
.job{display:grid; gap:4px; padding-bottom:18px; margin-bottom:18px; border-bottom:1px dashed #D3CBBA}
.job:last-child{border:0; margin:0; padding:0}
.job .top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 16px}
.job b{font-size:18px; font-weight:500}
.job .when{font:400 13px var(--mono); color:#6A6457; white-space:nowrap}
.job .org{color:#5C574C}
.job p{font-size:15.5px; color:#3E3A33; margin-top:4px}
.chips-cv{display:flex; flex-wrap:wrap; gap:8px}
.chips-cv span{font-size:14px; padding:7px 12px; border-radius:999px; border:1px solid #CFC6B4}
.cv-pdf{font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; border:1px solid var(--ink); color:var(--ink); border-radius:999px; padding:10px 16px}


/* ---------- blog e artigos: listagem tradicional ---------- */
.bl-head{display:grid; gap:14px 48px; align-items:end; margin-bottom:28px}
@media (min-width:900px){ .bl-head{grid-template-columns:1fr 1fr} }
.bl-head h2{font-size:clamp(36px, 4.6vw, 56px); letter-spacing:-0.035em; line-height:1; margin-top:8px}
.bl-head p{color:var(--muted-l); font-size:17px; max-width:52ch}
.bl-filter{display:flex; gap:24px; border-bottom:1px solid var(--line-l); margin-bottom:28px}
.bl-filter button{font:500 16px var(--sans); color:var(--muted-l); background:none; border:0; border-bottom:2px solid transparent; padding:10px 0 12px; margin-bottom:-1px; cursor:pointer}
.bl-filter button span{font:400 12px var(--mono); margin-left:4px; opacity:.7}
.bl-filter button[aria-pressed="true"]{color:var(--ink); border-bottom-color:var(--coral)}
.bl-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr))}
.bl-card{text-decoration:none; color:inherit; background:#FBFAF7; border:1px solid var(--line-l); border-radius:14px; padding:22px 22px 18px; display:flex; flex-direction:column; gap:10px; cursor:pointer; transition:border-color .2s, box-shadow .2s}
.bl-card:hover{border-color:var(--coral); box-shadow:0 8px 24px -16px rgba(10,13,16,.35)}
.bl-meta{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted-l)}
.bl-tag{font:500 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:6px}
.bl-tag.blog{background:#F9E3DA; color:#A8441F}
.bl-tag.artigo{background:#E3E7EC; color:#2B3A4A}
.bl-card h3{font-size:21px; line-height:1.25; letter-spacing:-0.015em; font-weight:500}
.bl-card:hover h3{text-decoration:underline; text-decoration-color:var(--coral); text-underline-offset:3px}
.bl-card p{color:var(--muted-l); font-size:15.5px; line-height:1.5}
.bl-foot{display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line-l); font-size:13.5px; color:var(--muted-l)}
.bl-go{color:var(--ink); font-weight:500}

/* ---------- section heads ---------- */
section.s{padding-block:clamp(80px, 11vw, 140px)}
.sh{display:grid; gap:20px; margin-bottom:clamp(40px, 6vw, 72px)}
@media (min-width:900px){ .sh{grid-template-columns:1fr auto; align-items:end} }
.sh h2{font-size:clamp(46px, 8vw, 120px); line-height:.96; letter-spacing:-0.04em}
.sh h2 .it{color:var(--coral)}
.sh .side{display:grid; gap:10px; max-width:36ch; color:var(--muted-d)}
.sh .side .mono{color:var(--fg)}
.light{background:var(--paper); color:var(--ink)}
.light .sh .side{color:var(--muted-l)}
.light .sh .side .mono{color:var(--ink)}

/* reveal (estado de repouso visível) */
@supports (animation-timeline: view()){
  .rv{animation:rv linear both; animation-timeline:view(); animation-range:entry 0% entry 45%}
  @keyframes rv{from{transform:translateY(48px); opacity:.3}to{transform:none; opacity:1}}
}

/* ---------- serviços ---------- */
.svcs{display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
@media (min-width:900px){ .svcs{grid-template-columns:repeat(3, 1fr)} }
.svc{position:relative; overflow:hidden; border-radius:22px; padding:30px 28px 32px; background:var(--night-2); border:1px solid var(--line-d); min-height:300px; display:flex; flex-direction:column; justify-content:space-between; gap:40px; isolation:isolate}
.svc::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(360px circle at var(--mx, 50%) var(--my, 120%), color-mix(in srgb, var(--coral) 28%, transparent), transparent 60%); opacity:0; transition:opacity .4s}
.svc:hover::before{opacity:1}
.svc .top{display:flex; justify-content:space-between; color:var(--muted-d)}
.svc .ico{width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:var(--night-3); border:1px solid var(--line-d)}
.svc .ico svg{width:26px; height:26px; stroke:var(--coral); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.svc h3{font-size:clamp(26px, 2.6vw, 32px); line-height:1.1; letter-spacing:-0.025em}
.svc p{color:var(--muted-d); font-size:16.5px; line-height:1.55; margin-top:12px}

/* ---------- entregas ---------- */
.feats{display:grid; gap:14px}
@media (min-width:900px){ .feats{grid-template-columns:1.25fr 1fr} .feats .card:first-child{grid-row:span 2} }
.card{position:relative; border-radius:26px; overflow:hidden; background:var(--night-2); border:1px solid var(--line-d); display:flex; flex-direction:column; min-height:340px; isolation:isolate}
.card .media{position:relative; flex:1; min-height:220px; overflow:hidden}
.card .media canvas, .card .media .viz{position:absolute; inset:0; width:100%; height:100%}
.card .info{padding:24px 26px 26px; display:grid; gap:10px; border-top:1px solid var(--line-d); background:var(--night-2)}
.card .info .row{display:flex; justify-content:space-between; gap:12px; color:var(--muted-d)}
.card h3{font-size:clamp(26px, 3vw, 38px); line-height:1.08; letter-spacing:-0.03em}
.card p{color:var(--muted-d); font-size:16.5px; max-width:52ch}
.card .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.card .tags span{font:500 12px var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; border-radius:999px; border:1px solid var(--line-d); color:var(--fg)}
.card .media{transition:transform 1s var(--ease)}
.card:hover .media{transform:scale(1.03)}

/* fluxo animado (card 1) */
.flowviz{position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(80% 70% at 50% 40%, #1C2228, var(--night-2))}
.flowviz .nodes{position:relative; display:grid; gap:14px; width:min(86%, 380px)}
.flowviz .n{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-radius:14px; background:color-mix(in srgb, var(--fg) 5%, transparent); border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); backdrop-filter:blur(6px); font-weight:500}
.flowviz .n small{font:400 12px var(--mono); letter-spacing:.06em; color:var(--muted-d); text-transform:uppercase}
.flowviz .n.hot{border-color:var(--coral); background:color-mix(in srgb, var(--coral) 16%, transparent); box-shadow:0 0 40px -8px color-mix(in srgb, var(--coral) 60%, transparent)}
.flowviz .pulse{position:absolute; left:28px; top:0; bottom:0; width:2px; background:linear-gradient(var(--coral), transparent); background-size:2px 60px; background-repeat:no-repeat; animation:pulse 2.4s linear infinite; opacity:.8}
@keyframes pulse{from{background-position:0 -60px}to{background-position:0 110%}}
.orbs{position:absolute; inset:0; overflow:hidden}
.orbs i{position:absolute; border-radius:50%; filter:blur(40px); opacity:.55; animation:float 12s ease-in-out infinite alternate}
@keyframes float{to{transform:translate(30px,-20px) scale(1.15)}}
.bigword{position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(70px, 10vw, 140px); font-weight:500; letter-spacing:-0.06em; color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--fg) 40%, transparent); line-height:.9; text-align:center}
.bigword b{color:var(--coral); -webkit-text-stroke:0; font-weight:500}

.dlist{list-style:none; margin:40px 0 0; padding:0; border-top:1px solid var(--line-d)}
.dlist li{display:grid; gap:6px 24px; padding-block:24px; border-bottom:1px solid var(--line-d); position:relative; transition:transform .5s var(--ease)}
@media (min-width:900px){ .dlist li{grid-template-columns:120px 1fr 1fr 140px; align-items:baseline} .dlist li:hover{transform:translateX(16px)} }
.dlist .mono{color:var(--coral)}
.dlist h3{font-size:clamp(22px, 2.4vw, 28px); letter-spacing:-0.02em; line-height:1.1}
.dlist p{color:var(--muted-d); font-size:16px}
.dlist .where{font:500 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted-d)}
@media (min-width:900px){ .dlist .where{text-align:right} }

/* ---------- números ---------- */
.nums{display:grid; gap:1px; background:var(--line-l); border-block:1px solid var(--line-l); grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
.nm{background:var(--paper); padding:34px 24px 30px; display:grid; gap:12px; align-content:space-between; min-height:240px}
.nm b{font-size:clamp(80px, 10vw, 140px); font-weight:400; letter-spacing:-0.045em; line-height:.85; font-variant-numeric:tabular-nums}
.nm b sup{font-size:.36em; color:var(--coral); vertical-align:top; margin-left:4px; font-weight:500}
.nm span{color:var(--muted-l); max-width:24ch}

/* ---------- blog (carrossel) ---------- */
.rail{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 20px 26px; scrollbar-width:none; cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing; scroll-snap-type:none}
@media (min-width:760px){ .rail{padding-inline:40px} }
@media (min-width:1400px){ .rail{padding-inline:calc((100vw - 1240px) / 2)} }
.post{all:unset; flex:0 0 min(78vw, 340px); scroll-snap-align:start; aspect-ratio:4 / 5; border-radius:20px; padding:18px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; cursor:pointer; box-sizing:border-box; transition:transform .6s var(--ease)}
.post:hover{transform:translateY(-8px)}
.post:focus-visible{outline:2px solid var(--coral); outline-offset:3px}
.post.dark{background:var(--night-2); color:var(--fg); border:1px solid var(--line-d)}
.post.cream{background:var(--cream); color:var(--ink)}
.post.coral{background:var(--coral); color:var(--ink)}
.post .t,.post .b{display:flex; justify-content:space-between; gap:8px; font:500 11.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; opacity:.85}
.post .ttl{font-family:var(--serif); font-weight:400; font-size:clamp(30px, 3vw, 36px); line-height:1.02; letter-spacing:-0.02em}
.post .ttl em{display:block}
.post .art{flex:1; display:grid; place-items:center}
.post .art .mk{font-size:84px}
.post.coral .art .mk .arc{stroke:var(--ink)} .post.coral .art .mk .dot{fill:var(--ink)}
.post .art .code{font:400 12.5px/1.8 var(--mono); opacity:.8}
.post .art .code b{color:var(--coral); font-weight:500}
.post .art .n3{font-family:var(--serif); font-style:italic; font-size:120px; line-height:1; color:var(--coral)}
.post .art .shield{width:90px; height:90px; stroke:currentColor; fill:none; stroke-width:1.2; opacity:.85}
.post .go{opacity:1}
.railnav{display:flex; gap:8px}
.railnav button{width:48px; height:48px; border-radius:50%; border:1px solid var(--line-l); background:transparent; color:var(--ink); font-size:18px; cursor:pointer; transition:background .3s, color .3s}
.railnav button:hover{background:var(--ink); color:var(--paper)}

/* ---------- artigos ---------- */
.alist{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-d)}
.arow{all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:grid; gap:10px 28px; padding-block:clamp(26px, 3.4vw, 40px); border-bottom:1px solid var(--line-d); position:relative}
@media (min-width:900px){ .arow{grid-template-columns:140px 1fr 260px; align-items:center} }
.arow:focus-visible{outline:2px solid var(--coral); outline-offset:3px}
.arow .mono{color:var(--muted-d)}
.arow h3{font-size:clamp(30px, 4.6vw, 64px); line-height:1.02; letter-spacing:-0.035em; transition:transform .6s var(--ease), color .3s}
.arow h3 .it{color:var(--coral)}
.arow:hover h3{transform:translateX(14px)}
.arow p{color:var(--muted-d); font-size:16.5px}
.preview{position:fixed; left:0; top:0; z-index:30; width:260px; aspect-ratio:4 / 5; border-radius:18px; pointer-events:none; overflow:hidden; background:var(--cream); color:var(--ink); padding:16px; display:flex; flex-direction:column; justify-content:space-between; transform:translate(-50%,-50%) scale(.6); opacity:0; transition:opacity .3s, transform .5s var(--ease)}
.preview.on{opacity:1; transform:translate(-50%,-50%) scale(1)}
.preview .ttl{font-family:var(--serif); font-weight:400; font-size:30px; line-height:1.02}
.preview .ttl em{color:var(--coral)}
.preview .mk{font-size:56px}
@media (hover:none){ .preview{display:none} }

/* ---------- contato ---------- */
.contact{position:relative; overflow:hidden; padding-block:clamp(100px, 14vw, 180px) 40px}
.contact .mq{display:flex; width:max-content; animation:mq 22s linear infinite}
.contact .mq span{font-size:clamp(90px, 16vw, 230px); font-weight:500; letter-spacing:-0.045em; line-height:1; white-space:nowrap; padding-right:.3em; display:flex; align-items:center; gap:.3em}
.contact .mq .it{color:var(--coral)}
.contact .mq .mk{font-size:.7em}
@keyframes mq{to{transform:translateX(-50%)}}
.contact .cta{display:grid; gap:28px; margin-top:56px}
@media (min-width:900px){ .contact .cta{grid-template-columns:1fr auto; align-items:end} }
.contact .cta p{font-size:clamp(20px, 2.2vw, 26px); max-width:34ch; color:color-mix(in srgb, var(--fg) 82%, transparent)}
.btns{display:flex; flex-wrap:wrap; gap:10px}
.btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:500; font-size:16px; padding:18px 28px; border-radius:999px; transition:transform .4s var(--ease), background .3s, color .3s; border:0; cursor:pointer; font-family:var(--sans)}
.btn svg{width:18px; height:18px}
.btn.coral{background:var(--coral); color:var(--ink)}
.btn.ghost{border:1px solid var(--line-d); color:var(--fg)}
.btn.ghost:hover{border-color:var(--coral); color:var(--coral)}
.btn.dark{background:var(--ink); color:var(--fg)}
footer{border-top:1px solid var(--line-d)}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; padding-block:24px calc(28px + env(safe-area-inset-bottom, 0px)); color:var(--muted-d); font-size:14px}

/* ---------- leitor ---------- */
.reader{position:fixed; inset:0; z-index:60; background:var(--cream); color:var(--ink); overflow-y:auto; -webkit-overflow-scrolling:touch; clip-path:inset(100% 0 0 0); transition:clip-path .8s var(--ease); visibility:hidden}
.reader.open{clip-path:inset(0 0 0 0); visibility:visible}
.reader .bar{position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:calc(14px + env(safe-area-inset-top, 0px)) 20px 14px; background:color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid #D3CBBA}
.reader .prog{position:absolute; left:0; bottom:-1px; height:2px; width:0; background:var(--coral)}
.reader .close{font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; background:var(--ink); color:var(--cream); border:0; border-radius:999px; padding:11px 18px; cursor:pointer}
.reader article{max-width:720px; margin:0 auto; padding:56px 20px 110px}
.reader .kick{display:flex; flex-wrap:wrap; gap:8px 18px; color:#6A6457}
.reader h1{font-size:clamp(42px, 7vw, 76px); line-height:1.02; letter-spacing:-0.035em; margin-top:22px}
.reader h1 .it{color:var(--coral)}
.reader .dek{font-family:var(--serif); font-size:23px; line-height:1.4; color:#5C574C; margin-top:20px}
.reader .body{font-family:var(--serif); font-size:20px; line-height:1.68; margin-top:40px; padding-top:34px; border-top:1px solid #D3CBBA}
.reader .body p{margin:0 0 1.1em}
.reader .body h2{font-family:var(--sans); font-size:27px; font-weight:500; letter-spacing:-0.03em; margin:1.7em 0 .5em; line-height:1.15}
.reader .body ul, .reader .body ol{padding-left:1.2em; margin:0 0 1.1em}
.reader .body li{margin-bottom:.5em}
.reader .body strong{font-weight:400; background:linear-gradient(transparent 62%, color-mix(in srgb, var(--coral) 35%, transparent) 62%)}
.reader .body blockquote{margin:1.4em 0; font-size:30px; line-height:1.22; font-style:italic; color:var(--coral)}
.reader .sign{display:flex; align-items:center; gap:14px; margin-top:52px; padding-top:24px; border-top:1px solid #D3CBBA; font-size:15px}
.reader .sign .mk{font-size:36px}
.reader .next{margin-top:28px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition:none !important}
  .loader{display:none}
}
.bl-card:focus-visible{outline:2px solid var(--coral); outline-offset:3px}
.bl-empty{color:var(--muted-l)}

/* ---------- seletor de idioma ---------- */
.langs{display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:999px; background:color-mix(in srgb, var(--ink) 8%, transparent); pointer-events:auto}
.langs a{font:500 11.5px var(--mono); letter-spacing:.06em; text-decoration:none; color:var(--ink); padding:7px 9px; border-radius:999px; opacity:.65; transition:opacity .2s, background .2s}
.langs a:hover{opacity:1}
.langs a[aria-current="page"]{background:var(--ink); color:var(--fg); opacity:1}
.nav.dark .langs{background:color-mix(in srgb, var(--fg) 12%, transparent)}
.nav.dark .langs a{color:var(--fg)}
.nav.dark .langs a[aria-current="page"]{background:var(--fg); color:var(--ink)}
@media (max-width:560px){ .pills > .langs{display:none} }
.fm-langs{margin-bottom:18px}
.langs-lg{background:color-mix(in srgb, var(--fg) 10%, transparent)}
.langs-lg a{color:var(--fg); font-size:13px; padding:9px 14px}
.langs-lg a[aria-current="page"]{background:var(--coral); color:var(--ink)}
.fmenu nav .fm-langs a{display:inline-block; font-size:13px; border:0; padding:9px 14px; transform:none; opacity:.7; letter-spacing:.06em}
.fmenu nav .fm-langs a[aria-current="page"]{opacity:1}
.bl-lang{font:500 11px var(--mono); letter-spacing:.04em; color:var(--muted-l); border:1px solid var(--line-l); border-radius:6px; padding:3px 7px; margin-left:auto}

/* ---------- página de leitura (blog / artigos) ---------- */
.sr-svg{position:absolute; width:0; height:0}
body.pp{background:var(--cream); color:var(--ink)}
.pp-wrap{max-width:760px; margin:0 auto; padding-inline:20px}
.pp-bar{position:sticky; top:env(safe-area-inset-top, 0px); z-index:10; background:color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid #D3CBBA}
.pp-bar .pp-wrap{max-width:1100px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding-block:12px}
.pp-logo{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); font-weight:500}
.pp-logo .mk{font-size:22px}
.pp-right{display:flex; align-items:center; gap:12px}
.pp-back{font-size:14.5px; color:var(--ink); text-decoration:none; font-weight:500}
.pp-back:hover{color:var(--coral)}
@media (max-width:520px){ .pp-back{display:none} }
.pp-main{padding-block:48px 80px}
.pp-kick{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; font-size:14px; color:#6A6457}
.pp-article h1{font-size:clamp(36px, 6vw, 58px); line-height:1.05; letter-spacing:-0.03em; margin-top:18px}
.pp-article h1 .it{color:var(--coral)}
.pp-dek{font-family:var(--serif); font-size:22px; line-height:1.45; color:#5C574C; margin-top:16px}
.pp-body{font-family:var(--serif); font-size:20px; line-height:1.7; margin-top:36px; padding-top:30px; border-top:1px solid #D3CBBA}
.pp-body p, .pp-body ul, .pp-body ol{margin:0 0 1.1em}
.pp-body ul, .pp-body ol{padding-left:1.3em}
.pp-body li{margin-bottom:.45em}
.pp-body h2{font-family:var(--sans); font-size:27px; font-weight:500; letter-spacing:-0.02em; line-height:1.2; margin:1.6em 0 .5em}
.pp-body h3{font-family:var(--sans); font-size:21px; font-weight:500; margin:1.4em 0 .4em}
.pp-body strong{font-weight:500}
.pp-body a{color:var(--ink); text-decoration-color:var(--coral); text-underline-offset:3px}
.pp-body blockquote{margin:1.4em 0; padding-left:20px; border-left:3px solid var(--coral); font-style:italic; font-size:24px; line-height:1.35; color:#3E3A33}
.pp-body code{font-family:var(--mono); font-size:.85em; background:#E2DACA; padding:2px 6px; border-radius:4px}
.pp-body pre{background:#11161A; color:#E6E1D8; padding:16px; border-radius:10px; overflow-x:auto; font-size:14px}
.pp-body pre code{background:none; padding:0}
.pp-body img{max-width:100%; border-radius:10px}
.pp-sign{display:flex; align-items:center; gap:12px; margin-top:44px; padding-top:22px; border-top:1px solid #D3CBBA; font-family:var(--sans); font-size:15px}
.pp-sign .mk{font-size:32px}
.pp-next{display:grid; gap:4px; margin-top:28px; padding:18px 20px; border:1px solid #D3CBBA; border-radius:12px; text-decoration:none; color:var(--ink); background:#F4EFE4}
.pp-next span{font-size:13px; color:#6A6457}
.pp-next b{font-weight:500; font-size:18px}
.pp-next:hover{border-color:var(--coral)}
.pp-foot{border-top:1px solid #D3CBBA}
.pp-foot .pp-wrap{display:flex; justify-content:space-between; gap:12px; padding-block:22px 32px; font-size:14px; color:#6A6457}
.pp-foot a{color:var(--ink)}

/* símbolo: cor herdada via currentColor (o estilo não atravessa o <use>) */
.mk{color:var(--coral)}
.t-coral .mk, .post.coral .art .mk{color:var(--ink)}