/* Reset e Básicos */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; overflow-x: hidden; }
body { background: #111110; font-family: 'Inter', sans-serif; color: #e3e0d8; width: 100%; min-height: 100vh; overflow-x: hidden; }
.site { width: 100%; }

/* NAV */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 48px; border-bottom: 1px solid rgba(255,255,255,.06); position: sticky; top: 0; background: rgba(17, 17, 16, 0.95); backdrop-filter: blur(10px); z-index: 100; }
.nav-logo { font-size: 15px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; text-decoration: none; color: #e3e0d8; display: flex; align-items: baseline; gap: 8px; line-height: 1.2; }
.nav-subtitle { font-size: 10px; font-weight: 400; opacity: .4; letter-spacing: .02em; }
.nav-links { display: flex; gap: 28px; list-style: none; align-items: center; }
.nav-links a { font-size: 12px; color: #e3e0d8; text-decoration: none; opacity: .45; cursor: pointer; transition: opacity .2s; padding: 14px 6px; margin: -14px -6px; display: inline-block; }
.nav-links a:hover { opacity: 1; }
.nav-cta { background: #e3e0d8; color: #111110 !important; font-size: 11px; font-weight: 600; padding: 8px 18px; border-radius: 100px; opacity: 1 !important; }

/* HERO */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 56px 48px 48px; align-items: center; min-height: 520px; border-bottom: 1px solid rgba(255,255,255,.06); }
.hero-left { display: flex; flex-direction: column; gap: 24px; opacity: 0; animation: fadeUpIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes fadeUpIn { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
.hero-eyebrow { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; opacity: .3; }
.hero-headline { font-size: 72px; font-weight: 700; line-height: 1.0; letter-spacing: -.04em; max-width: 1200px; }
.hero-headline em { font-style: normal; opacity: .35; font-weight: 300; font-size: 32px; display: block; margin-top: 40px; letter-spacing: -.02em; }

.blog-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 100px; padding: 10px 20px; font-size: 13px; color: #e3e0d8; text-decoration: none; opacity: .8; cursor: pointer; transition: background .2s, opacity .2s; width: fit-content; }
.blog-badge:hover { background: rgba(255,255,255,.1); opacity: 1; }
.blog-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #7ecf7e, #70b8d8); flex-shrink: 0; }
.blog-badge-arrow { opacity: .4; font-size: 12px; }

.hero-desc { font-size: 15px; line-height: 1.75; opacity: .45; font-weight: 300; max-width: 600px; }
.hero-btns { display: flex; gap: 12px; margin-top: 8px; }
.hbtn { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; padding: 14px 28px; border-radius: 10px; cursor: pointer; transition: opacity .2s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.hbtn:hover { opacity: .8; }
.hbtn-p { background: #e3e0d8; color: #111110; border: none; }
.hbtn-g { background: transparent; color: #e3e0d8; border: 1px solid rgba(255,255,255,.18); }

/* STAGE & ANIMATIONS */
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.hero-right { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; height: 440px; transform: scale(1.1); transform-origin: center right; }

/* Fader UI */
.hero-unlocker { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 24px; opacity: 0; animation: fadeIn 0.9s ease 1.4s forwards; z-index: 10; width: 100%; justify-content: center; }
.fader-track { width: 8px; height: 150px; background: rgba(255,255,255,0.08); border-radius: 10px; position: relative; border: 1px solid rgba(255,255,255,0.15); box-shadow: inset 0 4px 12px rgba(0,0,0,0.5); }
.fader-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 0%; background: #e3e0d8; border-radius: 10px; opacity: 0.2; pointer-events: none; }
.fader-thumb { width:44px; height:28px; background:#e3e0d8; border-radius:6px; position:absolute; bottom:0; left:50%; transform:translateX(-50%); cursor:grab; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.4); border:1.5px solid rgba(0,0,0,0.8); color:#111110; touch-action:none; transition:background 0.2s; }
.fader-thumb:active { cursor:grabbing; background:#fff; }
.fader-thumb svg { width:14px; height:14px; transform:rotate(90deg); opacity:0.6; }
.fader-label { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#e3e0d8; opacity:0.5; font-weight:500; }

.stage { width: 100%; height: 320px; position: relative; transition: opacity 0.1s linear; }
.stack { position: absolute; inset: 0; }
.layer { position: absolute; left: 0; right: 0; height: 50px; border-radius: 12px; display: flex; align-items: center; padding: 0 14px; gap: 10px; opacity: 0; transition: transform .75s cubic-bezier(.4,0,.2,1), opacity .75s ease; }
.l1{top:0;background:rgba(28,48,28,.95);border:1px solid rgba(126,207,126,.25);} .l2{top:68px;background:rgba(22,22,50,.95);border:1px solid rgba(136,136,232,.25);} .l3{top:136px;background:rgba(46,22,22,.95);border:1px solid rgba(232,136,136,.25);} .l4{top:204px;background:rgba(18,34,48,.95);border:1px solid rgba(112,184,216,.25);}
.dot{width:28px;height:28px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.d1{background:rgba(126,207,126,.12)} .d2{background:rgba(136,136,232,.12)} .d3{background:rgba(232,136,136,.12)} .d4{background:rgba(112,184,216,.12)}
.dot svg{width:14px;height:14px;}
.lname{font-size:12px;font-weight:600;flex-shrink:0;}
.n1{color:#aaeaaa} .n2{color:#b4b4f4} .n3{color:#f2b4b4} .n4{color:#a4d4ec}
.ldesc{font-size:10px;opacity:.45;flex:1;text-align:right;}
.c1{color:#7ecf7e} .c2{color:#8888e8} .c3{color:#e88888} .c4{color:#70b8d8}

.player-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .6s ease;pointer-events:none;}
.player-stage.show{opacity:1;pointer-events:auto;}
.dev{position:absolute;transition:opacity .5s ease,transform .5s cubic-bezier(.4,0,.2,1);opacity:0;transform:scale(.96) translateY(8px);pointer-events:none;}
.dev.active{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;}
.wb{animation:wa 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%;}
@keyframes wa{0%,100%{transform:scaleY(1)}50%{transform:scaleY(0.22)}}

.mobile{display:flex;flex-direction:column;align-items:center;}
.mob-shell{width:136px;background:#161614;border:1.5px solid rgba(255,255,255,.1);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 16px 48px rgba(0,0,0,.75);}
.mob-notch{width:54px;height:5px;background:#0a0a09;border-radius:0 0 8px 8px;margin:0 auto;flex-shrink:0;}
.mob-screen{flex:1;background:#0a0a09;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;min-height:180px;}
.mob-screen::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.008) 3px,rgba(255,255,255,.008) 4px);}
.mob-ctrl{padding:5px 8px 3px;background:#161614;border-top:1px solid rgba(255,255,255,.04);}
.mob-home{display:flex;align-items:center;justify-content:center;padding:5px 0 7px;background:#161614;}
.mob-btn{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);}
.tablet{background:#161614;border:1.5px solid rgba(255,255,255,.09);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 12px 36px rgba(0,0,0,.6);width:290px;}
.tab-screen{flex:1;background:#0a0a09;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;min-height:0;}
.tab-screen::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.008) 3px,rgba(255,255,255,.008) 4px);}
.tab-cam{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#1a1a18;border:1px solid rgba(255,255,255,.12);z-index:5;}
.tab-cam::after{content:'';width:3px;height:3px;border-radius:50%;background:rgba(112,184,216,.55);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.tv-wrap{display:flex;flex-direction:column;align-items:center;}
.tv{background:#161614;border:2px solid rgba(255,255,255,.08);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;width:370px;box-shadow:0 20px 56px rgba(0,0,0,.7);}
.tv-screen{flex:1;background:#0a0a09;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;min-height:0;}
.tv-screen::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.008) 3px,rgba(255,255,255,.008) 4px);}
.tv-neck{width:40px;height:12px;background:#1e1e1c;border-radius:0 0 4px 4px;}
.tv-base-el{width:80px;height:5px;background:#252522;border-radius:4px;}

.stripe{height:2.5px;background:linear-gradient(90deg,#7ecf7e,#8888e8,#e88888,#70b8d8);flex-shrink:0;}
.wf{display:flex;align-items:center;gap:3px;z-index:1;}
.b{width:3px;border-radius:3px;background:#e3e0d8;animation:wa 1.6s ease-in-out infinite;flex-shrink:0;}
.ba{opacity:.6;}.b:not(.ba){opacity:.1;}
.b:nth-child(1){height:8px;animation-delay:.00s}.b:nth-child(2){height:16px;animation-delay:.06s}
.b:nth-child(3){height:28px;animation-delay:.12s}.b:nth-child(4){height:44px;animation-delay:.18s}
.b:nth-child(5){height:56px;animation-delay:.24s}.b:nth-child(6){height:64px;animation-delay:.30s}
.b:nth-child(7){height:58px;animation-delay:.36s}.b:nth-child(8){height:48px;animation-delay:.42s}
.b:nth-child(9){height:60px;animation-delay:.48s}.b:nth-child(10){height:66px;animation-delay:.54s}
.b:nth-child(11){height:58px;animation-delay:.60s}.b:nth-child(12){height:50px;animation-delay:.66s}
.b:nth-child(13){height:62px;animation-delay:.72s}.b:nth-child(14){height:52px;animation-delay:.78s}
.b:nth-child(15){height:40px;animation-delay:.84s}.b:nth-child(16){height:26px;animation-delay:.90s}
.b:nth-child(17){height:14px;animation-delay:.96s}.b:nth-child(18){height:8px;animation-delay:1.02s}
.pbtn{position:absolute;background:rgba(227,224,216,.93);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.4);cursor:pointer;z-index:3;}
.sbadges{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:3px;z-index:4;}
.sb{display:flex;align-items:center;gap:4px;background:rgba(0,0,0,.55);border-radius:100px;padding:2px 7px 2px 4px;}
.sb-dot{width:5px;height:5px;border-radius:50%;}
.sb span{font-size:7px;opacity:.7;}
.stime{position:absolute;bottom:6px;left:8px;font-size:9px;opacity:.3;z-index:4;}
.ctrls{padding:9px 13px;background:#161614;border-top:1px solid rgba(255,255,255,.05);flex-shrink:0;}
.pbar{height:3px;background:rgba(255,255,255,.08);border-radius:2px;margin-bottom:8px;position:relative;overflow:hidden;}
.pfill{position:absolute;top:0;left:0;height:100%;width:0%;background:linear-gradient(90deg,#7ecf7e,#8888e8,#e88888,#70b8d8);border-radius:2px;transition:width .1s linear;}
.crow{display:flex;align-items:center;gap:8px;}
.csm{width:26px;height:26px;background:#e3e0d8;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.csm svg{width:9px;height:9px;margin-left:1px;}
.cinfo{flex:1;min-width:0;}
.ctitle{font-size:10px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.csub{font-size:8px;opacity:.28;margin-top:1px;}
.ctime{font-size:9px;opacity:.3;flex-shrink:0;}
.pills{display:flex;gap:3px;margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.05);flex-wrap:wrap;}
.pill{font-size:8px;font-weight:500;border-radius:100px;padding:2px 8px;}
.pg{background:rgba(126,207,126,.1);color:#7ecf7e} .pp{background:rgba(136,136,232,.1);color:#8888e8}
.pr{background:rgba(232,136,136,.1);color:#e88888} .pbc{background:rgba(112,184,216,.1);color:#70b8d8}

.tbtn{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:.08em;padding:10px 22px;border-radius:100px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#e3e0d8;cursor:pointer;display:flex;align-items:center;gap:8px;opacity:.6;transition:opacity .2s,background .2s;}
.tbtn:hover{opacity:1;background:rgba(255,255,255,.09);} .tbtn.on{opacity:1;}
.bst{width:14px;height:2.5px;border-radius:2px;background:linear-gradient(90deg,#7ecf7e,#8888e8,#e88888,#70b8d8);transition:transform .4s;}
.tbtn.on .bst{transform:scaleX(-1);}

/* MARQUEE */
.marquee{overflow:hidden;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);padding:13px 0;}
.mtrack{display:inline-flex;gap:40px;animation:mq 22s linear infinite;white-space:nowrap;}
.mtrack span{font-size:11px;opacity:.2;letter-spacing:.04em;}
@keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* SECTIONS (Projetos, Experiências, etc) */
.section-header{display:flex;align-items:center;gap:16px;padding:40px 48px 20px;}
.section-label{font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.3;white-space:nowrap;font-weight:500;}
.section-line{flex:1;height:1px;background:rgba(255,255,255,.07);}
.section-count{font-size:10px;opacity:.25;}

.portfolio-showcase { padding: 0 48px 48px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ps-layout { display: grid; grid-template-columns: 200px 1fr 340px; gap: 48px; align-items: center; }

/* Tabs */
.ps-tabs { display: flex; flex-direction: column; gap: 4px; }
.ps-tab { background: transparent; border: none; text-align: left; padding: 18px 24px; border-radius: 14px; cursor: pointer; transition: all 0.3s ease; position: relative; display: flex; flex-direction: column; gap: 6px; color: rgba(227,224,216,0.35); font-family: 'Inter', sans-serif; border-left: 2px solid transparent; border-radius: 0 14px 14px 0; }
.ps-tab:hover { color: rgba(227,224,216,0.8); background: rgba(255,255,255,0.02); }
.ps-tab.active { color: #e3e0d8; background: rgba(255,255,255,0.04); border-left: 2px solid #e3e0d8; }
.ps-tab-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.ps-tab-sub { font-size: 11px; opacity: 0.6; font-weight: 400; }

/* Visual Stack */
.ps-visuals { position: relative; height: 380px; display: flex; align-items: center; justify-content: center; perspective: 1000px; }
.ps-stack { position: relative; width: 100%; max-width: 440px; height: 300px; transform-style: preserve-3d; }
.ps-item-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: #161614; display: flex; justify-content: center; align-items: center; transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 24px 48px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.06); }

/* Info Card */
.ps-info-card { background: #161614; border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; padding: 48px 40px; display: flex; flex-direction: column; box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
.ps-info-title { font-size: 32px; font-weight: 700; color: #e3e0d8; margin-bottom: 6px; letter-spacing: -0.03em; }
.ps-info-role { font-size: 11px; opacity: 0.5; margin-bottom: 24px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; }
.ps-info-desc { font-size: 14px; line-height: 1.7; opacity: 0.5; margin-bottom: 32px; font-weight: 300; }
.ps-info-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 40px; }
.ps-tag { font-size: 10px; background: rgba(255,255,255,0.04); padding: 5px 12px; border-radius: 100px; opacity: 0.8; border: 1px solid rgba(255,255,255,0.08); }
.ps-info-btn { display: inline-flex; justify-content: center; align-items: center; padding: 14px 28px; background: #e3e0d8; color: #111110; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; transition: opacity 0.2s; align-self: flex-start; }
.ps-info-btn:hover { opacity: 0.8; }

.experiences{padding:0 48px 40px;border-bottom:1px solid rgba(255,255,255,.06);}
.exp-item{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.exp-item:first-child{border-top:1px solid rgba(255,255,255,.05);}
.exp-role{font-size:13px;font-weight:500;}
.exp-period{font-size:11px;opacity:.3;white-space:nowrap;margin-left:16px;}

.about{padding:40px 48px;display:grid;grid-template-columns:auto 1fr auto;gap:48px;align-items:center;border-bottom:1px solid rgba(255,255,255,.06);}
.about-photo{width:160px;height:160px;border-radius:100px;background-image:url('../img/profile.png');background-size:cover;background-position:center;border:2px solid rgba(255,255,255,.08);flex-shrink:0;box-shadow:0 12px 24px rgba(0,0,0,.3);}
.about-text{font-size:15px;line-height:1.7;opacity:.65;font-weight:300;max-width:760px;}
.about-btns{display:flex;flex-direction:column;gap:10px;}
.about-btn{display:flex;align-items:center;gap:10px;font-size:12px;color:#e3e0d8;background:#1e1e1c;border:none;border-radius:10px;padding:11px 18px;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;text-decoration:none}
.about-btn-icon{width:14px;height:14px;opacity:.35;flex-shrink:0;}

.tools{padding:0 48px 40px;border-bottom:1px solid rgba(255,255,255,.06);}
.tools-scroll{overflow:hidden;}
.tools-track{display:inline-flex;gap:8px;animation:mq 18s linear infinite;white-space:nowrap;}
.tool-tag{font-size:11px;border:1px solid rgba(255,255,255,.08);border-radius:100px;padding:5px 14px;opacity:.45;white-space:nowrap;}

/* CONTACT */
.contact { background: #e3e0d8; border-radius: 20px; padding: 64px 48px; display: flex; justify-content: space-between; align-items: center; color: #111110; margin: 40px 48px 80px; gap: 32px; }
.contact-left { display:flex; flex-direction:column; gap:24px; align-self:center; }
.contact-cta{font-size:72px;font-weight:700;letter-spacing:-.04em;color:#111110;line-height:1.0;max-width:1200px;}

.contact-blog-link { display:inline-flex; align-items:center; gap:8px; background:rgba(17,17,16,.08); border:1px solid rgba(17,17,16,.15); border-radius:100px; padding:7px 16px; font-size:11px; font-weight:500; color:#111110; text-decoration:none; cursor:pointer; width:fit-content; transition:background .2s; }
.contact-blog-link:hover { background:rgba(17,17,16,.14); }
.contact-blog-link-dot { width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,#7ecf7e,#70b8d8); flex-shrink:0; }

.contact-right{display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
.contact-label{font-size:10px;color:#111110;opacity:.4;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;}
.contact-value{font-size:13px;font-weight:500;color:#111110;margin-bottom:14px;}
.contact-btns{display:flex;gap:8px;justify-content:flex-end;}
.contact-btn{font-size:11px;font-weight:500;padding:9px 18px;border-radius:10px;border:1.5px solid #111110;background:transparent;color:#111110;cursor:pointer;font-family:'Inter',sans-serif;text-decoration:none;display:inline-block;}
.contact-btn.fill{background:#111110;color:#e3e0d8;border-color:transparent;}
.contact-btn.fill:hover { opacity: .8; background: #111110; }
.contact-photo-placeholder { align-self: stretch; height: 260px; background-color: rgba(0,0,0,0.1); border-radius: 16px; margin: 24px 0 24px 0; background-size: cover; background-position: center; border: 1px solid rgba(0,0,0,.04); background-image: url('../img/profile.png'); }

.footer{padding:20px 48px;display:flex;justify-content:space-between;align-items:center;opacity:.3;}
.footer-copy{font-size:11px;}
.footer-loc{font-size:11px;}

/* ══ BLOG PAGE SPECIFIC ══ */
.blog-nav { display:flex; align-items:center; justify-content:space-between; padding:20px 48px; border-bottom:1px solid rgba(255,255,255,.06); position:sticky; top:0; background:rgba(17,17,16,0.95); backdrop-filter:blur(10px); z-index:100;}
.blog-back { display:flex; align-items:center; gap:8px; font-size:12px; opacity:.45; text-decoration:none; cursor:pointer; transition:opacity .2s; background:none; border:none; color:#e3e0d8; font-family:'Inter',sans-serif; }
.blog-back:hover { opacity:1; }

.blog-hero { padding:56px 48px 48px; border-bottom:1px solid rgba(255,255,255,.06); }
.blog-eyebrow { font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.3; margin-bottom:16px; }
.blog-title { font-size:72px; font-weight:700; line-height:1.0; letter-spacing:-.04em; margin-bottom:16px; max-width:1200px; }
.blog-sub { font-size:14px; line-height:1.7; opacity:.4; font-weight:300; max-width:520px; }

.blog-posts { padding:0 48px 48px; display:flex; flex-direction:column; gap:1px; background:rgba(255,255,255,.06); }
.blog-post { background:#111110; padding:28px 32px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:start; cursor:pointer; transition:background .15s; text-decoration:none; color:inherit; }
.blog-post:hover { background:#161614; }
.blog-post-tag { font-size:10px; letter-spacing:.12em; text-transform:uppercase; opacity:.35; margin-bottom:10px; }
.blog-post-title { font-size:18px; font-weight:600; letter-spacing:-.02em; line-height:1.3; margin-bottom:8px; }
.blog-post-desc { font-size:13px; opacity:.4; font-weight:300; line-height:1.65; }
.blog-post-meta { text-align:right; }
.blog-post-date { font-size:11px; opacity:.3; margin-bottom:8px; }
.blog-post-arrow { font-size:18px; opacity:.2; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 0 48px 48px; }
.blog-featured { background:#181816; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:opacity .2s, transform .2s; height: 100%; border: 1px solid rgba(255,255,255,0.04); }
.blog-featured:hover { transform:translateY(-6px); opacity:.95; }
.blog-featured-img { height:180px; background:linear-gradient(135deg,#1a2a1a,#1a1a2e,#2a1a1a); display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; }
.blog-featured-label { font-size:10px; opacity:.2; letter-spacing:.1em; text-transform:uppercase; }
.blog-featured-stripe { height:2.5px; background:linear-gradient(90deg,#7ecf7e,#8888e8,#e88888,#70b8d8); }
.blog-featured-body { padding:24px 28px; flex:1; display:flex; flex-direction:column; }
.blog-featured-tag { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#7ecf7e; opacity:.7; margin-bottom:12px; font-weight: 500; }
.blog-featured-title { font-size:20px; font-weight:700; letter-spacing:-.02em; line-height:1.3; margin-bottom:12px; }
.blog-featured-desc { font-size:13px; opacity:.5; font-weight:300; line-height:1.6; margin-bottom: 0; }

/* ══ SINGLE POST PAGE SPECIFIC ══ */
.single-post-hero { padding: 56px 48px; max-width: 800px; margin: 0 auto; }
.single-post-tag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7ecf7e; opacity: .8; margin-bottom: 16px; }
.single-post-title { font-size: 42px; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; margin-bottom: 24px; }
.single-post-meta { display: flex; gap: 24px; font-size: 12px; opacity: .4; font-weight: 300; border-bottom: 1px solid rgba(255,255,255,.06); padding-bottom: 32px; }

.single-post-content { padding: 40px 48px 80px; max-width: 800px; margin: 0 auto; font-size: 15px; line-height: 1.8; opacity: .85; font-weight: 300; }
.single-post-content p { margin-bottom: 24px; }
.single-post-content h2 { font-size: 24px; font-weight: 600; margin: 48px 0 24px; color: #fff; letter-spacing: -.02em; }

/* ══ LIGHT THEME — HIERARQUIA TONAL COMPLETA ══
   Nivel 1 - Fundo pagina:    #e8e4de
   Nivel 2 - Cards/blocos:    #f2efe9
   Nivel 3 - Hover/ativos:    #dedad3
   Nivel 4 - Bordas:          #c8c4bc
   Nivel 5 - Texto sec:       #5a5750
   Nivel 6 - Texto primario:  #1a1714
*/
body.light-theme { background: #e8e4de; color: #1a1714; }
body.light-theme .nav, body.light-theme .blog-nav { background: rgba(232,228,222,0.96); border-bottom: 1px solid #c8c4bc; }
body.light-theme .nav-logo { color: #1a1714; }
body.light-theme .nav-links a { color: #3d3a36; opacity: 1; font-weight: 500; }
body.light-theme .nav-links a:hover { color: #1a1714; opacity: 1; }
body.light-theme .nav-cta { background: #1a1714 !important; color: #f2efe9 !important; opacity: 1 !important; }
body.light-theme .lang-btn { color: #3d3a36; opacity: 0.9; }
body.light-theme .hero { border-bottom-color: #c8c4bc; }
body.light-theme .hero-headline { color: #1a1714; }
body.light-theme .hero-headline em { color: #5a5750; opacity: 1; }
body.light-theme .hero-eyebrow { color: #5a5750; opacity: 1; }
body.light-theme .hero-desc { color: #4a4743; opacity: 1; font-weight: 400; }
body.light-theme .hbtn-p { background: #1a1714; color: #f2efe9; border: none; }
body.light-theme .hbtn-g { color: #3d3a36; border-color: #c8c4bc; opacity: 1; }
body.light-theme .blog-badge { background: #f2efe9; color: #3d3a36; border-color: #c8c4bc; opacity: 1; }
body.light-theme .blog-badge:hover { background: #dedad3; }
body.light-theme .marquee { border-color: #c8c4bc; }
body.light-theme .mtrack span { color: #5a5750; opacity: 1; }
body.light-theme .section-label { color: #1a1714; opacity: 1; font-weight: 600; }
body.light-theme .section-line { background: #c8c4bc; }
body.light-theme .section-count { color: #7a766f; opacity: 1; }
body.light-theme .portfolio-showcase { border-bottom-color: #c8c4bc; }
body.light-theme .ps-tab { color: rgba(26,23,20,0.4); }
body.light-theme .ps-tab:hover { color: rgba(26,23,20,0.8); background: rgba(0,0,0,0.02); }
body.light-theme .ps-tab.active { color: #1a1714; background: rgba(0,0,0,0.04); border-left: 2px solid #1a1714; }
body.light-theme .ps-item-frame { box-shadow: 0 24px 48px rgba(0,0,0,0.1); border-color: #c8c4bc; }
body.light-theme .ps-info-card { background: #f2efe9; border-color: #c8c4bc; box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
body.light-theme .ps-info-title { color: #1a1714; }
body.light-theme .ps-info-role { color: #5a5750; }
body.light-theme .ps-info-desc { color: #4a4743; }
body.light-theme .ps-tag { background: rgba(0,0,0,0.04); color: #5a5750; border-color: #c8c4bc; opacity: 1; }
body.light-theme .ps-info-btn { background: #1a1714; color: #f2efe9; }
body.light-theme .experiences { border-top-color: #c8c4bc; border-bottom-color: #c8c4bc; }
body.light-theme .exp-item { border-color: #d0ccc6; }
body.light-theme .exp-role { color: #1a1714; font-weight: 500; }
body.light-theme .exp-period { color: #7a766f; opacity: 1; }
body.light-theme .about { border-color: #c8c4bc; }
body.light-theme .about-photo { border-color: rgba(0,0,0,0.08); box-shadow: 0 12px 24px rgba(0,0,0,0.05); }
body.light-theme .about-text { color: #4a4743; opacity: 1; font-weight: 400; }
body.light-theme .about-btn { background: #dedad3; color: #1a1714; border: 1px solid #c8c4bc; }
body.light-theme .about-btn:hover { background: #d0ccc6; }
body.light-theme .tools { border-color: #c8c4bc; }
body.light-theme .tool-tag { color: #5a5750; border-color: #c8c4bc; opacity: 1; background: #e8e4de; }
body.light-theme .blog-featured { background: #f2efe9 !important; border: 1px solid #c8c4bc; color: #1a1714; }
body.light-theme .blog-featured:hover { background: #dedad3 !important; border-color: #b8b4ac; }
body.light-theme .blog-featured-img { background: linear-gradient(135deg, #dedad3, #d0ccc6, #c8c4bc); }
body.light-theme .blog-featured-label { color: #7a766f; opacity: 1; }
body.light-theme .blog-featured-tag { color: #4a7a4a; opacity: 1; }
body.light-theme .blog-featured-title { color: #1a1714; }
body.light-theme .blog-featured-desc { color: #4a4743; opacity: 1; font-weight: 400; }
body.light-theme .blog-post { background: #f2efe9 !important; border-bottom: 1px solid #c8c4bc; color: #1a1714; }
body.light-theme .blog-post:hover { background: #dedad3 !important; }
body.light-theme .blog-post-tag { color: #7a766f; opacity: 1; }
body.light-theme .blog-post-title { color: #1a1714; }
body.light-theme .blog-post-desc { color: #4a4743; opacity: 1; font-weight: 400; }
body.light-theme .blog-post-date { color: #7a766f; opacity: 1; }
body.light-theme .blog-post-arrow { color: #7a766f; opacity: 1; }
body.light-theme .blog-hero { border-color: #c8c4bc; }
body.light-theme .blog-eyebrow { color: #7a766f; opacity: 1; }
body.light-theme .blog-title { color: #1a1714; }
body.light-theme .blog-sub { color: #4a4743; opacity: 1; }
body.light-theme .single-post-tag { color: #4a7a4a; opacity: 1; }
body.light-theme .single-post-title { color: #1a1714; }
body.light-theme .single-post-meta { color: #7a766f; opacity: 1; border-color: #c8c4bc; }
body.light-theme .single-post-content { color: #2a2724; opacity: 1; font-weight: 400; }
body.light-theme .single-post-content h2 { color: #1a1714; }
body.light-theme .single-post-content p { color: #2a2724; }
body.light-theme .tbtn { background: #f2efe9; color: #3d3a36; border-color: #c8c4bc; opacity: 1; }
body.light-theme .tbtn:hover { background: #dedad3; }
body.light-theme .l1 { background: rgba(200,235,200,.75); border-color: rgba(80,165,80,.35); }
body.light-theme .l2 { background: rgba(210,210,245,.75); border-color: rgba(80,80,195,.35); }
body.light-theme .l3 { background: rgba(245,210,210,.75); border-color: rgba(195,80,80,.35); }
body.light-theme .l4 { background: rgba(200,225,245,.75); border-color: rgba(60,145,210,.35); }
body.light-theme .lname { color: #1a1714; }
body.light-theme .ldesc { color: #5a5750; opacity: 1; }
body.light-theme .contact { background: #1a1714; }
body.light-theme .contact-cta { color: #f2efe9; }
body.light-theme .contact-label { color: #8a867f; }
body.light-theme .contact-value { color: #f2efe9; }
body.light-theme .contact-blog-link { background: rgba(255,255,255,.1); color: #f2efe9; border-color: rgba(255,255,255,.2); }
body.light-theme .contact-blog-link:hover { background: rgba(255,255,255,.18); }
body.light-theme .contact-btn { border-color: rgba(255,255,255,.3); color: #f2efe9; }
body.light-theme .contact-btn:hover { background: rgba(255,255,255,.08); }
body.light-theme .contact-btn.fill { background: #f2efe9; color: #1a1714; }
body.light-theme .contact-photo-placeholder { background-color: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); }
body.light-theme .footer { background: #e8e4de; border-top: 1px solid #c8c4bc; }
body.light-theme .footer-copy, body.light-theme .footer-loc { color: #7a766f; opacity: 1; }
body.light-theme .lang-menu { background: #f2efe9; border-color: #c8c4bc; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
body.light-theme .lang-opt { color: #3d3a36; }
body.light-theme .lang-opt:hover { background: #dedad3; }
body.light-theme .page-btn { background: #f2efe9 !important; color: #3d3a36 !important; border-color: #c8c4bc !important; }
body.light-theme span.page-btn { background: #1a1714 !important; color: #f2efe9 !important; }

/* RESPONSIVIDADE E ACESSIBILIDADE */
a.case-card { text-decoration: none; color: inherit; }

@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 40px 24px; min-height: auto; text-align: left; }
  .hero-headline { font-size: 68px; max-width: 100%; }
  .hero-headline em { font-size: 38px; }
  .stage { height: 400px; }
  .about { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px; justify-items: start; }
  .about-photo { width: 120px; height: 120px; }
  .contact { flex-direction: column; gap: 40px; padding: 48px 32px; align-items: flex-start; margin: 24px 24px 80px; }
  .contact-right { align-items: flex-start; text-align: left; width: 100%; }
  .contact-cta { font-size: 68px; max-width: 100%; }
  .contact-btns { justify-content: flex-start; flex-wrap: wrap; }
  .contact-photo-placeholder { height: 200px; margin: 16px 0; max-width: 400px; width: 100%; }
  .nav { padding: 20px 24px; }
  .ps-layout { grid-template-columns: 1fr; gap: 40px; }
  .ps-tabs { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .ps-tab { border-left: none; border-bottom: 2px solid transparent; border-radius: 14px 14px 0 0; padding: 12px 20px; }
  .ps-tab.active { border-left: none; border-bottom: 2px solid #e3e0d8; }
  body.light-theme .ps-tab.active { border-left: none; border-bottom: 2px solid #1a1714; }
  .portfolio-showcase, .experiences, .tools, .section-header { padding-left: 24px; padding-right: 24px; }
  .ps-info-card { padding: 40px 24px; }
  .ps-info-title { font-size: 28px; }
  .single-post-hero, .single-post-content { padding-left: 24px; padding-right: 24px; }
  .blog-hero, .blog-posts, .blog-nav { padding-left: 24px; padding-right: 24px; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); padding: 0 24px 48px; gap: 24px; }
}

@media (max-width: 600px) {
  .hero-headline { font-size: 52px; }
  .hero-headline em { font-size: 28px; }
  .contact-cta { font-size: 52px; }
  .nav-links { gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
  .blog-grid { grid-template-columns: 1fr; }
}

/* BLOG POST ALIGNMENT & MEDIA */
.single-post-content p { text-align: justify; hyphens: auto; }
.single-post-content img { max-width: 100%; height: auto; border-radius: 14px; margin: 32px 0; display: block; }
.single-post-content ul, .single-post-content ol { margin-bottom: 24px; padding-left: 20px; text-align: left; }
.single-post-title { text-align: left; }
.single-post-content h2 { text-align: left; }

/* DROPDOWN IDIOMA */
.lang-dropdown { position: relative; }
.lang-btn { background: none; border: none; color: inherit; opacity: .6; cursor: pointer; display: flex; align-items: center; gap: 4px; font-size: 13px; font-family: 'Inter', sans-serif; font-weight: 500; padding: 12px; margin: -12px; }
.lang-btn:hover { opacity: 1; }
.lang-menu { position: absolute; top: calc(100% + 12px); right: 0; background: #161614; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 6px; display: none; flex-direction: column; gap: 2px; min-width: 120px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 200; }
body.light-theme .lang-menu { background: #f5f5f4; border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.lang-menu.show { display: flex; }
.lang-opt { background: transparent; border: none; color: inherit; padding: 8px 12px; border-radius: 6px; cursor: pointer; text-align: left; font-size: 12px; font-weight: 500; font-family: 'Inter', sans-serif; text-decoration: none; display: block; }
.lang-opt:hover { background: rgba(255,255,255,0.06); }
body.light-theme .lang-opt:hover { background: rgba(0,0,0,0.06); }

/* Fader Light Theme */
body.light-theme .fader-track { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); box-shadow: inset 0 2px 8px rgba(0,0,0,0.1); }
body.light-theme .fader-thumb { background: #1a1714; color: #f2efe9; border-color: transparent; }
body.light-theme .fader-thumb:active { background: #000; }
body.light-theme .fader-progress { background: #1a1714; opacity: 0.15; }
body.light-theme .fader-label { color: #1a1714; opacity: 0.6; }

/* ════════════════════════ ARTE SECTION ════════════════════════ */
.arte-section { display: flex; align-items: center; justify-content: center; padding: 48px 0 40px; border-bottom: 1px solid rgba(255,255,255,.06); }

@keyframes arte-pulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(227,224,216,0.18); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(227,224,216,0); }
}

.arte-trigger { background: none; border: none; cursor: pointer; padding: 0; display: flex; }
.arte-circle-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(227,224,216,0.82);
  animation: arte-pulse 3.5s ease-in-out infinite;
  transition: background 0.3s ease;
}
.arte-trigger:hover .arte-circle-btn { background: rgba(227,224,216,1); animation-play-state: paused; transform: scale(1.1); box-shadow: 0 0 0 8px rgba(227,224,216,0.12); }

/* Overlay */
.arte-overlay { position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; display: flex; align-items: center; justify-content: center; }
.arte-overlay.open { opacity: 1; pointer-events: auto; }

/* Blurred dark backdrop — click to close */
.arte-backdrop { position: absolute; inset: 0; background: rgba(10,10,9,.82); backdrop-filter: blur(8px); }

/* The white circle that expands from center */
.arte-ring {
  position: relative; z-index: 2;
  width: 0; height: 0;
  border-radius: 50%;
  border: none;
  /* Fade from pure white center → fully transparent at edge, backdrop shows through */
  background: radial-gradient(circle at center,
    #f8f7f3 0%,
    rgba(248,247,243,0.96) 30%,
    rgba(248,247,243,0.6)  60%,
    rgba(248,247,243,0.1)  82%,
    transparent            100%
  );
  transition: width .6s cubic-bezier(.2,.8,.2,1), height .6s cubic-bezier(.2,.8,.2,1);
  overflow: visible;   /* no hard clip — gradient fades naturally */
  display: flex; flex-direction: column;
}
.arte-overlay.open .arte-ring { width: min(92vw, 880px); height: min(92vw, 880px); }

/* Header & gallery hidden for now — circle is empty */
.arte-ring-header { display: none; }
.arte-gallery { display: none; }

body.light-theme .arte-section { border-color: rgba(0,0,0,.06); }
body.light-theme .arte-circle-btn { background: #111110; }
body.light-theme .arte-inner-label { color: #f5f4f0; }
body.light-theme .arte-label { color: #111110; }

/* Standardized Titles */
.blog-title, .project-title { font-size: 72px; font-weight: 700; line-height: 1.0; letter-spacing: -0.04em; margin-bottom: 24px; }
@media (max-width: 768px) {
  .blog-title, .project-title { font-size: 48px; }
}

/* =========================================================================
   ACESSIBILIDADE (ABNT / WCAG)
   ========================================================================= */
*:focus-visible {
  outline: 3px solid #ff4a00;
  outline-offset: 4px;
}

body.light-theme *:focus-visible {
  outline: 3px solid #0056b3;
  outline-offset: 4px;
}