:root{--bg:#092e3a;--bg-dark:#061e27;--bg-mid:#0e3f50;--bg-light:#164e62;--gold:#c9a84c;--gold-l:#e2c46a;--gold-d:#9e7e2e;--gold-α:rgba(201,168,76,0.12);--cream:#f5f2ea;--txt:rgba(235,228,210,0.93);--txt-dim:rgba(235,228,210,0.62);--txt-faint:rgba(235,228,210,0.28);--serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost','Helvetica Neue',sans-serif;--ease:cubic-bezier(0.22,1,0.36,1);--r:12px;--r-lg:20px;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{font-family:var(--sans);background:var(--bg-dark);color:var(--txt);overflow-x:hidden;}
/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.5rem,5vw,4rem);height:72px;background:rgba(6,30,39,0.92);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid rgba(201,168,76,0.15);}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}.nav-logo img{height:52px;width:auto;}
.nav-links{display:flex;align-items:center;list-style:none;}
.nav-links a{display:block;padding:.4rem 1.05rem;font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-dim);text-decoration:none;transition:color .25s;}
.nav-links a:hover,.nav-links a.active{color:var(--gold-l);}
.btn-nav{padding:.5rem 1.4rem;border:1px solid var(--gold-d);border-radius:50px;font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);text-decoration:none;background:transparent;transition:background .25s,color .25s,border-color .25s;white-space:nowrap;}
.btn-nav:hover{background:var(--gold);color:var(--bg-dark);border-color:var(--gold);}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--txt);border-radius:2px;transition:transform .3s,opacity .3s;}
.nav-mobile{display:none;position:fixed;inset:0;z-index:99;background:rgba(6,30,39,0.97);backdrop-filter:blur(20px);flex-direction:column;align-items:center;justify-content:center;gap:2rem;}
.nav-mobile.open{display:flex;}
.nav-mobile a{font-family:var(--serif);font-size:2rem;font-weight:400;color:var(--txt);text-decoration:none;transition:color .2s;}
.nav-mobile a:hover{color:var(--gold);}
@media(max-width:860px){.nav-links,.btn-nav{display:none;}.nav-toggle{display:flex;}}
/* HERO */
.article-hero{position:relative;padding:8rem clamp(1.5rem,7vw,6rem) 3.5rem;background:var(--bg-dark);overflow:hidden;}
.article-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--bg-dark) 0%,var(--bg-mid) 60%,var(--bg) 100%);}
.article-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.3),transparent);}
.article-hero-line{position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,transparent,var(--gold),transparent);}
.article-hero-content{position:relative;z-index:1;max-width:800px;}
.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-faint);margin-bottom:1.2rem;flex-wrap:wrap;}
.breadcrumb a{color:var(--txt-faint);text-decoration:none;transition:color .2s;}.breadcrumb a:hover{color:var(--gold);}.breadcrumb svg{opacity:.4;}
.article-cat-badge{display:inline-flex;align-items:center;padding:.3rem .9rem;border-radius:50px;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.2rem;border:1px solid transparent;}
.article-hero h1{font-family:var(--serif);font-size:clamp(1.9rem,3.8vw,3.2rem);font-weight:400;color:var(--cream);line-height:1.15;margin-bottom:1.5rem;}
.article-hero h1 em{font-style:italic;color:var(--gold-l);font-weight:300;}
.article-meta-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.meta-author{display:flex;align-items:center;gap:.6rem;}
.meta-avatar{width:36px;height:36px;border-radius:50%;background:var(--gold-α);border:1px solid rgba(201,168,76,0.25);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:.85rem;color:var(--gold);}
.meta-name{font-size:.82rem;font-weight:500;color:var(--txt-dim);}
.meta-sep{width:1px;height:16px;background:rgba(235,228,210,0.15);}
.meta-item{font-size:.78rem;color:var(--txt-faint);display:flex;align-items:center;gap:.4rem;}
.meta-item svg{color:var(--gold);opacity:.7;}
/* LAYOUT */
.article-layout{display:grid;grid-template-columns:1fr 300px;gap:clamp(2rem,4vw,4rem);padding:clamp(3rem,5vw,4.5rem) clamp(1.5rem,7vw,6rem);max-width:1160px;margin:0 auto;align-items:start;}
@media(max-width:900px){.article-layout{grid-template-columns:1fr;}}
/* CONTENT */
.article-content h2{font-family:var(--serif);font-size:clamp(1.4rem,2.3vw,1.9rem);font-weight:400;color:var(--cream);line-height:1.2;margin:2.5rem 0 .9rem;}
.article-content h3{font-family:var(--serif);font-size:1.2rem;font-weight:500;color:var(--cream);margin:1.8rem 0 .7rem;}
.article-content p{font-size:.93rem;line-height:1.9;color:var(--txt-dim);margin-bottom:1.2rem;}
.article-content ul,.article-content ol{padding-left:1.4rem;margin-bottom:1.4rem;display:flex;flex-direction:column;gap:.55rem;}
.article-content li{font-size:.93rem;line-height:1.75;color:var(--txt-dim);}
.article-content ul li::marker{color:var(--gold);}
.article-content ol li::marker{color:var(--gold);font-weight:600;}
.article-content strong{color:var(--cream);font-weight:600;}
.article-content em{color:var(--gold-l);font-style:italic;}
.article-content blockquote{border-left:3px solid var(--gold);padding:.8rem 1.4rem;margin:1.8rem 0;background:var(--gold-α);border-radius:0 var(--r) var(--r) 0;}
.article-content blockquote p{color:var(--txt);margin:0;font-size:.95rem;}
.article-divider{width:50px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);margin:2.5rem 0;}
/* SIDEBAR */
.article-sidebar{position:sticky;top:96px;display:flex;flex-direction:column;gap:1.4rem;}
.sidebar-card{background:var(--bg);border:1px solid rgba(235,228,210,0.07);border-radius:var(--r);padding:1.5rem;}
.sidebar-card h4{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;}
.sidebar-cta{background:var(--bg-mid);border-color:rgba(201,168,76,0.15);}
.sidebar-cta p{font-size:.82rem;color:var(--txt-dim);line-height:1.6;margin-bottom:1.4rem;}
.btn-gold{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.4rem;background:var(--gold);color:var(--bg-dark);border-radius:50px;font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:opacity .25s;}
.btn-gold:hover{opacity:.88;}
.author-info{display:flex;flex-direction:column;gap:.8rem;}
.author-avatar-lg{width:52px;height:52px;border-radius:50%;background:var(--gold-α);border:1px solid rgba(201,168,76,0.25);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.1rem;color:var(--gold);}
.author-name{font-size:.9rem;font-weight:500;color:var(--cream);}
.author-spec{font-size:.73rem;color:var(--gold);letter-spacing:.06em;margin-top:.2rem;}
.author-bio{font-size:.79rem;color:var(--txt-faint);line-height:1.65;}
.tags-list{display:flex;flex-wrap:wrap;gap:.5rem;}
.tag{padding:.3rem .8rem;border-radius:50px;background:rgba(235,228,210,0.05);border:1px solid rgba(235,228,210,0.08);font-size:.72rem;color:var(--txt-faint);}
/* RELATED */
.related-section{padding:clamp(2.5rem,4vw,3.5rem) clamp(1.5rem,7vw,6rem);border-top:1px solid rgba(201,168,76,0.08);}
.related-label{font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem;}
.related-title{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:400;color:var(--cream);margin-bottom:2rem;}
.related-title em{font-style:italic;color:var(--gold-l);font-weight:300;}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem;}
.related-card{display:block;padding:1.4rem;background:var(--bg);border:1px solid rgba(235,228,210,0.06);border-radius:var(--r);text-decoration:none;transition:border-color .25s,transform .25s;}
.related-card:hover{border-color:rgba(201,168,76,0.22);transform:translateY(-3px);}
.related-cat{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem;}
.related-name{font-family:var(--serif);font-size:1rem;font-weight:400;color:var(--cream);line-height:1.3;}
/* FOOTER */
.footer{background:var(--bg-dark);padding:3.5rem clamp(1.5rem,7vw,6rem) 2rem;border-top:1px solid rgba(201,168,76,0.1);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem;}
.footer-logo img{height:52px;margin-bottom:1rem;}
.footer-desc{font-size:.82rem;color:var(--txt-faint);line-height:1.7;max-width:260px;}
.footer-col h4{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;}
.footer-col ul a{font-size:.82rem;color:var(--txt-faint);text-decoration:none;transition:color .2s;}
.footer-col ul a:hover{color:var(--gold-l);}
.footer-bottom{padding-top:2rem;border-top:1px solid rgba(235,228,210,0.06);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
.footer-copy{font-size:.75rem;color:var(--txt-faint);}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;gap:2rem;}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr;}}
/* WA */
.whatsapp-float{position:fixed;bottom:2rem;right:2rem;z-index:200;width:54px;height:54px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,0.4);transition:transform .3s;text-decoration:none;}
.whatsapp-float:hover{transform:scale(1.1);}
.whatsapp-float svg{width:28px;height:28px;fill:white;}