/* Citricus core — reset, type, container, grid, buttons, header/footer, utilities.
   One rule serves every section: variations arrive as inline custom properties. */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body,system-ui,sans-serif);color:var(--c-ink,#1a1c20);background:var(--c-bg,#fff);line-height:1.65;font-size:1.0625rem;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-head,inherit);line-height:1.15;margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(2rem,4.5vw,3.25rem)}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
a{color:var(--c-primary)}
:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}

/* ---------- Container ---------- */
.ctr-container{padding-block:var(--pt,var(--sp-lg)) var(--pb,var(--sp-lg));background:var(--bg,transparent)}
.ctr-container--bgimg{background-image:var(--bg-img);background-size:cover;background-position:center}
.ctr-inner{margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem);max-width:var(--w-normal,1140px)}
.ctr-container--wide>.ctr-inner{max-width:var(--w-wide,1360px)}
.ctr-container--narrow>.ctr-inner{max-width:var(--w-narrow,760px)}
.ctr-container--full>.ctr-inner{max-width:none;padding-inline:0}
.ctr-sticky{position:sticky;top:0;z-index:50}

/* ---------- Grid ---------- */
.ctr-grid{display:grid;grid-template-columns:repeat(var(--cols,2),1fr);gap:var(--gap,var(--sp-md))}
@media(max-width:980px){.ctr-grid{grid-template-columns:repeat(var(--cols-md,2),1fr)}}
@media(max-width:640px){.ctr-grid{grid-template-columns:repeat(var(--cols-sm,1),1fr)}}

/* ---------- Buttons ---------- */
.ctr-btn{display:inline-block;padding:.8em 1.6em;border-radius:var(--radius,8px);font-weight:600;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:filter .15s}
.ctr-btn--primary{background:var(--c-primary);color:#fff}
.ctr-btn--ghost{border-color:currentColor;color:inherit;background:transparent}
.ctr-btn:hover{filter:brightness(1.08)}

/* ---------- Default header / footer ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--c-bg,#fff);border-bottom:1px solid rgba(0,0,0,.08)}
.site-header-inner{max-width:var(--w-wide,1360px);margin-inline:auto;display:flex;align-items:center;gap:1.5rem;padding:.75rem clamp(1rem,4vw,2rem)}
.site-brand{font-family:var(--font-head);font-weight:700;font-size:1.25rem;text-decoration:none;color:inherit}
.site-nav{margin-left:auto}
.site-nav .menu{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0}
.site-nav a{text-decoration:none;color:inherit;font-weight:500}
.nav-toggle{display:none;background:none;border:0;padding:.4rem;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:currentColor;margin:5px 0;transition:transform .2s}
@media(max-width:860px){
 .nav-toggle{display:block;margin-left:auto}
 .site-nav .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--c-bg,#fff);flex-direction:column;gap:0;padding:1rem;border-bottom:1px solid rgba(0,0,0,.08)}
 .site-nav.is-open .menu{display:flex}
 .site-nav.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .site-nav.is-open .nav-toggle span:nth-child(2){opacity:0}
 .site-nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
.site-footer{background:var(--c-secondary,#141414);color:#fff;margin-top:var(--sp-lg)}
.site-footer-inner{max-width:var(--w-wide);margin-inline:auto;padding:var(--sp-md) clamp(1rem,4vw,2rem);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
.menu-footer{display:flex;gap:1.2rem;list-style:none;margin:0;padding:0}
.site-footer a{color:#fff;text-decoration:none}

/* ---------- Blog meta ---------- */
.ctr-article-meta{color:#777;font-size:.9rem}
.ctr-archive-title{margin-bottom:var(--sp-md)}
.ctr-pagination{margin-top:var(--sp-md);text-align:center}

/* ---------- Utilities ---------- */
@media(max-width:640px){.hide-mobile{display:none!important}}
@media(min-width:641px) and (max-width:980px){.hide-tablet{display:none!important}}
@media(min-width:981px){.hide-desktop{display:none!important}}
.ctr-anim{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.ctr-anim[data-anim="fade"]{transform:none}
.ctr-anim.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ctr-anim{opacity:1;transform:none;transition:none}}
.text-center{text-align:center}
.ctr-eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-primary);margin-bottom:.8rem}
.ctr-lead{font-size:1.2rem;opacity:.92}
.dark{color:#fff}

/* Heros de largura cheia mantem o conteudo dentro da grade do site. */
.ctr-blog-hero>.ctr-inner,
.ctr-shop-hero>.ctr-inner{max-width:var(--w-wide,1360px);padding-inline:clamp(1rem,4vw,2rem)}

/* ---------- Blog index polish ---------- */
.ctr-blog-hero{background:linear-gradient(135deg,var(--c-secondary,#1F2937),#101823);color:#fff}
.ctr-blog-hero h1{margin:0}
.ctr-blog-kicker{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-primary);margin:0 0 .5rem}
.ctr-card-date{font-size:.78rem;color:#8a94a0;margin:0 0 .35rem}
.ctr-card-more{font-weight:700;text-decoration:none;font-size:.9rem}
.ctr-loadmore-wrap{text-align:center;margin-top:var(--sp-md)}

/* ---------- Lightbox ---------- */
.ctr-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(8,12,18,.92);display:none;align-items:center;justify-content:center}
.ctr-lightbox.open{display:flex}
.ctr-lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.ctr-lightbox button{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;font-size:1.4rem;width:46px;height:46px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.ctr-lightbox button:hover{background:rgba(255,255,255,.28)}
.ctr-lb-close{top:18px;right:18px}
.ctr-lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.ctr-lb-next{right:16px;top:50%;transform:translateY(-50%)}