/**
 * sub_shared.css — NegóciosRio Portal Engine
 * CSS base compartilhado por todas as subpages (sub_*.php)
 * :root com vars dinâmicas permanece inline no mod_head_sub.php
 */

/* ── Reset & base ─────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--primary-font);color:var(--text-color);background-color:var(--background-color);line-height:1.6}
a{text-decoration:none}
.container{max-width:1140px;margin:0 auto;padding:0 15px}
section{padding:80px 0}
h1,h2,h3,h4{font-family:var(--secondary-font);font-weight:700;color:var(--dark-color)}
h1{font-size:3rem}
h2{font-size:2.5rem;text-align:center;margin-bottom:10px}
h3{font-size:1.2rem;font-weight:400;color:var(--secondary-color);text-align:center;max-width:800px;margin:0 auto 40px}
p{margin-bottom:1rem}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{display:inline-block;padding:12px 28px;border-radius:50px;font-weight:600;transition:all .3s;cursor:pointer;border:none}
.btn-primary{background:var(--primary-color);color:#fff;box-shadow:0 4px 15px rgba(0,123,255,.3)}
.btn-primary:hover{filter:brightness(.88);transform:translateY(-2px);color:#fff}

/* ── Section title ───────────────────────────────────────── */
.section-title{margin-bottom:40px}
.section-title h2{position:relative;display:inline-block;padding-bottom:15px}
.section-title h2::after{content:'';position:absolute;display:block;width:60px;height:3px;background:var(--primary-color);bottom:0;left:50%;transform:translateX(-50%)}
.highlight-primary{color:var(--primary-color);font-weight:700}

/* ── Preloader ───────────────────────────────────────────── */
#preloader{position:fixed;inset:0;z-index:9999;background:#fff;display:flex;justify-content:center;align-items:center;transition:opacity .75s ease}
#preloader.hidden{opacity:0;pointer-events:none}
.preloader-logo{width:150px;animation:pulse 1.5s infinite ease-in-out}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* ── Header / Navbar — MOBILE FIRST (26/08/2026) ─────────────
 * Substituído pelo mesmo bloco de estadual.css: as subpáginas usam o
 * MESMO mod_navbar.php do portal principal (mesmo <script>, mesmo
 * hambúrguer, mesmo ajuste dinâmico de fonte do título no desktop),
 * mas até aqui tinham um CSS antigo, "desktop-first", sem breakpoint —
 * o header ficava sempre em 1.9rem e sem o comportamento mobile
 * correto (overlay, hambúrguer). Agora segue o mesmo padrão. */
:root{--header-h:76px}
#header{position:fixed;top:0;left:0;width:100%;z-index:1030;padding:12px 0;background-color:rgba(33,37,41,.55);transition:background-color .3s ease,padding .3s ease,box-shadow .3s ease}
#header.scrolled{background-color:rgba(33,37,41,.95);padding:10px 0;box-shadow:0 2px 15px rgba(0,0,0,.15)}
#header .container{display:flex;justify-content:space-between;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0;transition:transform .3s ease}
.logo:hover{transform:scale(1.02)}
.logo img{width:40px!important;height:40px!important;flex:0 0 auto}
.logo-text{display:flex;flex-direction:column;margin:0;min-width:0}
#header .logo h1{margin:0 0 2px 0;font-size:1.05rem;line-height:1.1;color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#header .logo-subtitle{margin:0;font-size:.68rem;font-weight:600;color:#ffcc00;letter-spacing:.5px;text-transform:uppercase;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;padding:0;margin:0;border:0;background:transparent;color:#fff;line-height:0;cursor:pointer;-webkit-appearance:none;appearance:none;z-index:1041}
.mobile-nav-toggle:focus-visible{outline:2px solid #ffcc00!important;outline-offset:2px;border-radius:6px}
.mobile-nav-toggle svg{display:block;pointer-events:none}
.mobile-nav-toggle::before,.mobile-nav-toggle::after,.mobile-nav-toggle.fas::before,.mobile-nav-toggle.fa-bars::before,.mobile-nav-toggle.fa-xmark::before,.mobile-nav-toggle.fa-times::before{content:none!important;display:none!important}
.mobile-nav-toggle i{display:none!important}
.navmenu{display:none}
.navmenu ul{list-style:none;margin:0;padding:0;display:flex}
.navmenu a{color:#fff;font-weight:500;transition:color .3s}
.navmenu a:hover,.navmenu a.active{color:var(--primary-color)}
body.mobile-nav-active,html.mobile-nav-active{overflow:hidden}
body.mobile-nav-active #header .navmenu,#header.mobile-nav-active .navmenu,.navmenu.is-open{display:flex!important;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-width:none;margin:0;flex-direction:column;align-items:center;justify-content:flex-start;padding:92px 20px 40px;padding-top:calc(var(--header-h) + 16px);background:rgba(33,37,41,.97);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:1040}
body.mobile-nav-active #header .navmenu ul,#header.mobile-nav-active .navmenu ul,.navmenu.is-open ul{display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:4px;width:100%;list-style:none;margin:0;padding:0}
body.mobile-nav-active #header .navmenu li,#header.mobile-nav-active .navmenu li,.navmenu.is-open li{display:block;width:100%}
.navmenu li.nav-hidden{display:none!important}
body.mobile-nav-active #header .navmenu a,#header.mobile-nav-active .navmenu a,.navmenu.is-open a{display:block;padding:14px 12px;font-size:1.25rem;color:#fff!important}
body.mobile-nav-active #header .navmenu a:hover,.navmenu.is-open a.active{color:var(--primary-color)!important}
@media(min-width:992px){
  :root{--header-h:90px}
  #header{padding:20px 0;background-color:transparent}
  #header.scrolled{padding:15px 0}
  .logo{gap:16px}
  .logo img{width:50px!important;height:50px!important}
  #header .logo h1{font-size:1.9rem}
  #header .logo-subtitle{font-size:.9rem}
  .mobile-nav-toggle{display:none!important}
  .navmenu{display:block!important;position:static!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;width:auto!important;height:auto!important;padding:0!important;background:none!important;overflow:visible!important}
  .navmenu ul{flex-direction:row!important;gap:25px}
  .navmenu a{padding:0!important;font-size:1rem!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#header,.logo{transition:none}}

/* ── Hero subpage ────────────────────────────────────────── */
#hero{position:relative;padding:160px 0 100px;color:#fff;text-align:center;background-size:cover;background-position:center;z-index:1}
#hero::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:-1}
#hero h1{font-size:3rem;color:#fff;margin-top:10px}
#hero p{color:rgba(255,255,255,.9);font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:0}

.portfolio-card:hover{transform:translateY(-5px)}
.portfolio-card img{width:100%;height:250px;object-fit:cover;display:block;transition:transform .3s}
.portfolio-card:hover img{transform:scale(1.1)}
.portfolio-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9),transparent);color:#fff;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transition:opacity .3s;text-decoration:none}
.portfolio-card:hover .portfolio-card-overlay{opacity:1}
.portfolio-card-overlay h4{color:#fff;margin:0 0 5px;font-size:1.2rem}
.portfolio-card-overlay p{margin:0;font-size:.9rem;opacity:.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.portfolio-card-actions{position:absolute;top:15px;right:15px;display:flex;gap:10px;z-index:3}
.portfolio-card-actions a{color:#fff;background:rgba(0,0,0,.5);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background .3s,transform .3s,opacity .3s;transform:scale(0);opacity:0}
.portfolio-card:hover .portfolio-card-actions a{transform:scale(1);opacity:1}
.portfolio-card-actions a:nth-child(1){transition-delay:.1s}
.portfolio-card-actions a:nth-child(2){transition-delay:.2s}
.portfolio-card-actions a:hover{background:var(--primary-color)}

/* ── GLightbox popup ─────────────────────────────────────── */
.glightbox-container .popup-content{padding:2rem;text-align:center;max-width:600px;margin:auto}
.glightbox-container .popup-content img{max-width:120px;height:120px;object-fit:cover;border-radius:50%;margin-bottom:1rem;border:4px solid #fff;box-shadow:0 4px 15px rgba(0,0,0,.1)}
.glightbox-container .popup-content p{margin-bottom:2rem;text-align:left;font-size:1rem;color:#555}
.popup-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

/* ── Search box ──────────────────────────────────────────── */
#nova-busca .search-box-section{max-width:700px;margin:0 auto 50px}
#nova-busca .input-group .form-control,
#nova-busca .input-group .btn{height:50px}
#nova-busca .input-group .form-control{font-size:1.1rem}

/* ── Pagination ──────────────────────────────────────────── */
.pagination .page-link{color:var(--primary-color);border-color:#dee2e6}
.pagination .page-item.active .page-link{background:var(--primary-color);border-color:var(--primary-color);color:#fff}
.pagination .page-link:hover{background:rgba(0,102,204,.08)}

/* ── Footer ─────────────────────────────────────────────── */
#footer{background:var(--dark-color);color:#adb5bd;padding:50px 0 20px}
.footer-grid{display:grid;gap:30px;grid-template-columns:1fr;text-align:center;margin-bottom:40px}
#footer h4{color:#fff;margin-bottom:15px;font-size:1.2rem}
#footer a{color:#adb5bd}
#footer ul{list-style:none;padding:0}
#footer ul li{margin-bottom:10px}
#footer a:hover{color:#fff;padding-left:5px;transition:.2s}
.footer-copyright{text-align:center;padding-top:20px;border-top:1px solid #495057;font-size:.9rem}
.footer-seo-terms,.footer-seo-segmentos{margin-top:40px;padding-top:30px;border-top:1px solid #495057}
.footer-seo-terms__title,.footer-seo-segmentos__title{font-family:var(--secondary-font);font-weight:700;font-size:1.2rem;color:#fff;margin-bottom:15px;text-align:center}
.footer-seo-terms__menu,.footer-seo-segmentos__menu{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center}
.footer-seo-terms__link,.footer-seo-segmentos__link{display:inline-block;font-size:.9rem;color:#adb5bd;padding:4px 10px;border-radius:999px;border:1px solid rgba(173,181,189,.35);background:rgba(0,0,0,.15);transition:all .2s}
.footer-seo-terms__link--capitalized,.footer-seo-segmentos__link--capitalized{text-transform:capitalize}
.footer-seo-terms__link:hover,.footer-seo-segmentos__link:hover{color:#fff!important;border-color:var(--primary-color)!important;background:rgba(204,153,0,.2)!important}
.badge-count{font-weight:700;font-size:.7rem;margin-left:4px;padding:1px 4px;border-radius:3px;background:rgba(0,0,0,.3)}
.footer-seo-segmentos__link--alta{border-color:#28a745;background:rgba(40,167,69,.1)}
.footer-seo-segmentos__link--media{border-color:#ffc107;background:rgba(255,193,7,.1)}
.footer-seo-segmentos__link--baixa{border-color:#fd7e14;background:rgba(253,126,20,.1)}
.footer-seo-segmentos__link--zero{border-color:#6c757d;background:rgba(108,117,127,.1);opacity:.7}

/* ── Responsive ──────────────────────────────────────────── */
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr;text-align:left}}
@media(max-width:992px){h1{font-size:2.5rem}.footer-grid{grid-template-columns:1fr;text-align:center}}
/* #header .navmenu / .mobile-nav-toggle no mobile: já cobertos pelo bloco
   mobile-first do header acima (26/08/2026) — a regra antiga aqui duplicava
   e ficava desatualizada em relação a estadual.css. Mantido só o hero. */
@media(max-width:768px){#hero h1{font-size:2rem}}

/* ═══════════════════════════════════════════════════════════
   BANNER PUBLICITÁRIO — NegóciosRio
   Desktop: 3 banners por vez | Mobile: 1 banner por vez
   Swiper inicializado em estadual.js / sub_shared.js
   ═══════════════════════════════════════════════════════════ */

/* Seção container */
.section-banner {
    padding: 30px 0;
    background-color: var(--bg-light, #f8f9fa);
}

/* Swiper container */
.banner-swiper {
    width: 100%;
    padding-bottom: 40px !important; /* espaço para dots de paginação */
    overflow: hidden;
}

/* Slide individual */
.swiper-slide.banner-slide {
    height: 130px;          /* altura fixa — desktop */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Link wrapper — ocupa todo o slide */
.banner-slide a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
}
.banner-slide a:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}

/* Imagem — preenche o link sem distorcer */
.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;    /* mostra banner completo sem corte */
    display: block;
    border-radius: 10px;
}

/* Paginação */
.banner-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #ccc;
    opacity: 0.7;
    transition: all 0.3s ease;
}
.banner-pagination .swiper-pagination-bullet-active {
    width: 22px;
    border-radius: 4px;
    background-color: var(--primary-color, #003366);
    opacity: 1;
}

/* ── Responsivo ─────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Mobile: 1 banner, mais alto para melhor visualização */
    .swiper-slide.banner-slide {
        height: 180px;
    }
    .section-banner {
        padding: 20px 0;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet: 2 banners */
    .swiper-slide.banner-slide {
        height: 120px;
    }
}
@media (min-width: 1024px) {
    /* Desktop: 3 banners */
    .swiper-slide.banner-slide {
        height: 130px;
    }
}