/* ============================================================
   PAPER2PUBLISH — SHARED STYLES v3
   Matches paper2publish.com exactly.
   Used by: /blog/index.html, /blog/post.html
   NOT used by admin (admin is self-contained)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 16px; scroll-behavior: smooth }
img { max-width: 100%; display: block }
a { text-decoration: none; color: inherit }
button { font-family: inherit }

:root {
    --blue: #0047AB; --blue-d: #002f80; --blue-l: #1a5fbf;
    --paper: #FAFAF8; --paper2: #F2EFE8;
    --ink: #0A0A0A; --ink3: #3A3A3A; --ink4: #6A6A6A; --ink5: #9A9A9A;
    --rule: #E0DDD8; --gold: #C9A227; --nav: 64px;
    --fd: 'Playfair Display', Georgia, serif;
    --fb: 'DM Sans', system-ui, sans-serif;
    --fm: 'DM Mono', 'Courier New', monospace;
    --ease: cubic-bezier(.16, 1, .3, 1)
}

@media(max-width:900px) { :root { --nav: 56px } }

body {
    font-family: var(--fb); background: var(--paper); color: var(--ink);
    line-height: 1.6; cursor: none; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
@media(hover:none) { body { cursor: auto } }
::selection { background: var(--blue); color: #fff }
::-webkit-scrollbar { width: 3px }
::-webkit-scrollbar-thumb { background: var(--blue) }

/* CURSOR */
.cur, .cur-ring {
    position: fixed; border-radius: 50%; pointer-events: none; z-index: 99999;
    transform: translate(-50%,-50%); mix-blend-mode: difference; will-change: left,top
}
.cur { width: 12px; height: 12px; background: #fff; transition: width .2s, height .2s }
.cur-ring { width: 40px; height: 40px; border: 1.5px solid #fff; transition: width .35s, height .35s }
body:has(a:hover) .cur, body:has(button:hover) .cur { width: 22px; height: 22px }
body:has(a:hover) .cur-ring, body:has(button:hover) .cur-ring { width: 60px; height: 60px }
@media(max-width:600px) { .cur, .cur-ring { display: none } }

/* SCROLL BAR */
.scroll-bar {
    position: fixed; top: 0; left: 0; height: 2px; background: var(--blue);
    transform-origin: left; transform: scaleX(0); z-index: 10000;
    transition: transform .08s linear; width: 100%
}

/* TICKER */
.ticker {
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 4500;
    background: rgba(0,20,60,.95); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.08); height: 34px;
    display: flex; align-items: center; overflow: hidden
}
.ticker-badge {
    font-family: var(--fm); font-size: .56rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--gold); padding: 0 1rem;
    flex-shrink: 0; display: flex; align-items: center; gap: .4rem
}
.ticker-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
    animation: tdot 1.5s ease-in-out infinite
}
@keyframes tdot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.6)} }
.ticker-sep { width: 1px; height: 16px; background: rgba(255,255,255,.1); flex-shrink: 0 }
.ticker-scroll { overflow: hidden; flex: 1 }
.ticker-track {
    display: flex; width: max-content;
    animation: tsroll 60s linear infinite
}
.ticker-track:hover { animation-play-state: paused }
@keyframes tsroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item {
    font-family: var(--fm); font-size: .58rem; letter-spacing: .08em;
    color: rgba(255,255,255,.65); white-space: nowrap; padding: 0 2.5rem;
    display: flex; align-items: center; gap: .5rem;
    border-right: 1px solid rgba(255,255,255,.07)
}
.ticker-item::before { content: '●'; color: rgba(0,71,171,.6); font-size: .4rem }
@media(max-width:600px) { .ticker { display: none } }

/* NAV */
.nav {
    position: fixed; top: 0; left: 0; width: 100%; height: var(--nav); z-index: 5000;
    transition: background .4s, border-color .4s, box-shadow .4s;
    border-bottom: 1px solid transparent
}
.nav.lit {
    background: rgba(250,250,248,.97); backdrop-filter: blur(12px);
    border-color: var(--rule); box-shadow: 0 1px 24px rgba(0,0,0,.04)
}
.nav-in {
    max-width: 1440px; margin: 0 auto; padding: 0 clamp(1.2rem,3vw,3rem);
    height: 100%; display: flex; align-items: center; justify-content: space-between
}
.nav-logo {
    display: flex; align-items: center; gap: .6rem; font-family: var(--fm);
    font-size: .78rem; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; color: #fff; transition: color .4s
}
.nav-logo img { height: 32px; width: auto }
.nav.lit .nav-logo { color: var(--blue) }
.nav-links { display: flex; list-style: none; gap: 2rem; align-items: center }
.nav-links a {
    font-family: var(--fm); font-size: .7rem; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(255,255,255,.75);
    transition: color .3s; position: relative
}
.nav-links a::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 0;
    height: 1px; background: currentColor; transition: width .3s var(--ease)
}
.nav-links a:hover, .nav-links a.active { color: #fff }
.nav-links a:hover::after, .nav-links a.active::after { width: 100% }
.nav.lit .nav-links a { color: var(--ink4) }
.nav.lit .nav-links a:hover, .nav.lit .nav-links a.active { color: var(--blue) }
.nav-cta {
    color: var(--blue) !important; background: #fff !important;
    font-family: var(--fm) !important; font-size: .7rem !important;
    letter-spacing: .1em !important; text-transform: uppercase !important;
    padding: .55rem 1.3rem; border: none; transition: all .3s !important
}
.nav-cta:hover { background: var(--blue) !important; color: #fff !important }
.nav-cta::after { display: none !important }
.nav.lit .nav-cta { background: var(--blue) !important; color: #fff !important }
.nav.lit .nav-cta:hover { background: var(--blue-d) !important }

/* HAMBURGER */
.hbg { display: none; flex-direction: column; gap: 5px; cursor: none; padding: 4px; background: none; border: none }
.hbg span { display: block; width: 24px; height: 1px; background: #fff; transition: all .3s }
.nav.lit .hbg span { background: var(--blue) }
.hbg.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px) }
.hbg.open span:nth-child(2) { opacity: 0 }
.hbg.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px) }
@media(max-width:900px) { .nav-links { display: none } .hbg { display: flex } }

/* MOBILE NAV */
.mob-nav {
    position: fixed; inset: 0; z-index: 4999; background: var(--blue-d);
    display: flex; flex-direction: column; justify-content: center;
    padding: 4rem clamp(1.5rem,4vw,3rem); opacity: 0; visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s
}
.mob-nav.open { opacity: 1; visibility: visible }
.mob-nav a {
    font-family: var(--fd); font-size: clamp(2rem,8vw,4rem); font-weight: 700;
    color: rgba(255,255,255,.25); display: block; padding: .5rem 0;
    border-bottom: 1px solid rgba(255,255,255,.06); transition: color .2s
}
.mob-nav a:hover, .mob-nav a.active { color: #fff }
.mob-nav-foot {
    margin-top: 2rem; font-family: var(--fm); font-size: .6rem;
    color: rgba(255,255,255,.2); letter-spacing: .1em; line-height: 1.8
}

/* WHATSAPP FLOAT */
.wa-float {
    position: fixed; bottom: 2.5rem; right: 2rem; z-index: 4400;
    width: 50px; height: 50px; background: var(--blue);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 18px rgba(0,71,171,.3);
    transition: transform .3s var(--ease), background .3s
}
.wa-float:hover { transform: scale(1.1); background: #25D366 }

/* FOOTER */
footer {
    background: var(--paper); border-top: 1px solid var(--rule);
    padding: clamp(4rem,7vh,6rem) clamp(1.2rem,3vw,3rem) clamp(2rem,3vh,2.5rem)
}
.ft-inner { max-width: 1440px; margin: 0 auto }
.ft-top {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem; padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem
}
@media(max-width:1100px) { .ft-top { grid-template-columns: 1fr 1fr; gap: 2rem } }
@media(max-width:600px) { .ft-top { grid-template-columns: 1fr; gap: 1.5rem } }
.ft-brand {
    font-family: var(--fm); font-size: .75rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--blue); margin-bottom: .6rem; display: block
}
.ft-tag { font-family: var(--fd); font-style: italic; font-size: .95rem; color: var(--ink4); line-height: 1.6; max-width: 260px }
.ft-desc { font-size: .78rem; color: var(--ink5); margin-top: .8rem; line-height: 1.7; max-width: 260px }
.ft-socs { display: flex; gap: .8rem; margin-top: 1.2rem }
.ft-soc {
    font-family: var(--fm); font-size: .6rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink4);
    border-bottom: 1px solid transparent; transition: all .2s
}
.ft-soc:hover { color: var(--blue); border-color: var(--blue) }
.ft-ct {
    font-family: var(--fm); font-size: .6rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--blue); margin-bottom: 1rem;
    display: block; opacity: .7
}
.ft-col ul { list-style: none }
.ft-col li { margin-bottom: .4rem }
.ft-col a { font-size: .82rem; color: var(--ink4); transition: color .2s }
.ft-col a:hover { color: var(--blue) }
.ft-bot {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .8rem
}
.ft-copy { font-family: var(--fm); font-size: .6rem; letter-spacing: .1em; color: var(--ink5) }
.ft-legal { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin-top: .6rem }
.ft-legal a { font-family: var(--fm); font-size: .58rem; letter-spacing: .08em; color: var(--ink5); transition: color .2s }
.ft-legal a:hover { color: var(--blue) }
.ft-legal-sep { font-size: .58rem; color: var(--rule) }

/* ANIMATIONS */
.rv { opacity: 0; transform: translateY(60px); transition: opacity 1s var(--ease), transform 1s var(--ease) }
.rv.in { opacity: 1 !important; transform: none !important }
.d1 { transition-delay: .15s } .d2 { transition-delay: .3s } .d3 { transition-delay: .45s }
@media(max-width:600px) { .rv { opacity: 1 !important; transform: none !important; transition: none !important } }

/* LABELS & BUTTONS */
.lbl { font-family: var(--fm); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; display: block; margin-bottom: 1.2rem }
.lbl.b { color: rgba(0,71,171,.5) }
.lbl.w { color: rgba(255,255,255,.35) }