/*
 * Shopping Camelão — Novosite
 * main.css v1.0.0
 * Design System Premium · Bootstrap 5 · Mobile-First
 */

/* =========================================================================
   1. VARIÁVEIS & RESET
   ========================================================================= */
:root {
    /* Paleta institucional */
    --azul:           #0F2C52;
    --azul-medio:     #163B6B;
    --azul-claro:     #1E4F8A;
    --dourado:        #C6A756;
    --dourado-escuro: #D4AF37;
    --dourado-suave:  #EDD882;

    /* Neutros */
    --cinza-escuro:   #343A40;
    --cinza-medio:    #6C757D;
    --cinza-claro:    #F1F3F5;
    --cinza-borda:    #E9ECEF;
    --branco:         #FFFFFF;
    --preto-suave:    #0D1117;

    /* Tipografia */
    --font-base:      'Roboto', 'Inter', sans-serif;
    --fw-light:       300;
    --fw-regular:     400;
    --fw-semibold:    600;
    --fw-bold:        700;

    /* Espaço */
    --radius:         12px;
    --radius-sm:      8px;
    --radius-lg:      20px;
    --radius-pill:    50px;

    /* Sombras */
    --shadow-xs:      0 1px 4px rgba(0,0,0,.06);
    --shadow-sm:      0 2px 12px rgba(0,0,0,.08);
    --shadow-md:      0 6px 24px rgba(0,0,0,.10);
    --shadow-lg:      0 12px 40px rgba(0,0,0,.14);
    --shadow-azul:    0 6px 24px rgba(15, 44, 82, .20);
    --shadow-dourado: 0 6px 24px rgba(198, 167, 86, .30);

    /* Transição padrão */
    --trans:          all .25s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family:    var(--font-base);
    font-weight:    var(--fw-regular);
    font-size:      16px;
    line-height:    1.6;
    color:          var(--cinza-escuro);
    background:     var(--branco);
    overflow-x:     hidden;
    -webkit-font-smoothing: antialiased;
}

/* =========================================================================
   2. UTILITÁRIOS GLOBAIS
   ========================================================================= */
.text-azul       { color: var(--azul) !important; }
.text-dourado    { color: var(--dourado) !important; }
.bg-azul         { background-color: var(--azul) !important; }
.bg-azul-medio   { background-color: var(--azul-medio) !important; }
.bg-dourado      { background-color: var(--dourado) !important; }
.bg-cinza-claro  { background-color: var(--cinza-claro) !important; }

.border-dourado  { border-color: var(--dourado) !important; }
.border-azul     { border-color: var(--azul) !important; }

.fw-300 { font-weight: 300; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.rounded-custom  { border-radius: var(--radius); }
.rounded-lg      { border-radius: var(--radius-lg) !important; }
.rounded-pill-custom { border-radius: var(--radius-pill); }

.shadow-custom   { box-shadow: var(--shadow-sm); }

.overflow-hidden-xy { overflow: hidden; }

/* Linha decorativa dourada */
.accent-line {
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--dourado), var(--dourado-escuro));
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}

.accent-line-left {
    margin: 0;
}

/* =========================================================================
   3. BOTÕES
   ========================================================================= */
.btn {
    font-family:    var(--font-base);
    font-weight:    var(--fw-semibold);
    letter-spacing: .03em;
    border-radius:  var(--radius-sm);
    transition:     var(--trans);
    padding:        .65rem 1.5rem;
}

/* Botão primário — Azul */
.btn-primary {
    background:     var(--azul);
    border-color:   var(--azul);
    color:          var(--branco);
}
.btn-primary:hover,
.btn-primary:focus {
    background:     var(--azul-medio);
    border-color:   var(--azul-medio);
    color:          var(--branco);
    box-shadow:     var(--shadow-azul);
    transform:      translateY(-1px);
}

/* Botão dourado — CTA principal */
.btn-dourado {
    background:     linear-gradient(135deg, var(--dourado), var(--dourado-escuro));
    border:         2px solid transparent;
    color:          var(--azul);
    font-weight:    var(--fw-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size:      .85rem;
    padding:        .75rem 2rem;
    border-radius:  var(--radius-pill);
}
.btn-dourado:hover,
.btn-dourado:focus {
    background:     linear-gradient(135deg, var(--dourado-escuro), var(--dourado));
    box-shadow:     var(--shadow-dourado);
    transform:      translateY(-2px);
    color:          var(--preto-suave);
}

/* Botão outline azul */
.btn-outline-azul {
    border:     2px solid var(--azul);
    color:      var(--azul);
    background: transparent;
}
.btn-outline-azul:hover {
    background: var(--azul);
    color:      var(--branco);
    transform:  translateY(-1px);
    box-shadow: var(--shadow-azul);
}

/* Botão outline dourado */
.btn-outline-dourado {
    border:     2px solid var(--dourado);
    color:      var(--dourado);
    background: transparent;
    font-weight: var(--fw-semibold);
}
.btn-outline-dourado:hover {
    background: var(--dourado);
    color:      var(--azul);
    transform:  translateY(-1px);
    box-shadow: var(--shadow-dourado);
}

/* Botão WhatsApp */
.btn-whatsapp {
    background: #25D366;
    border:     none;
    color:      var(--branco);
    font-weight: var(--fw-semibold);
}
.btn-whatsapp:hover {
    background: #1ebe57;
    color:      var(--branco);
    transform:  translateY(-1px);
}

/* =========================================================================
   4. TOPBAR + NAVBAR / HEADER
   ========================================================================= */

/* ----------- Topbar ----------- */
.site-topbar {
    background:   var(--azul);
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding:       .45rem 0;
    font-size:     .78rem;
    transition:    max-height .3s ease, opacity .3s ease, padding .3s ease;
    overflow:      hidden;
    max-height:    50px;
}
.site-topbar.topbar-hidden {
    max-height: 0;
    padding:    0;
    opacity:    0;
}
.site-topbar .container {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
}
.topbar-left,
.topbar-right {
    display:    flex;
    align-items: center;
    gap:        1rem;
}
.topbar-item {
    color:       rgba(255,255,255,.72);
    text-decoration: none;
    display:     flex;
    align-items: center;
    gap:         .35rem;
}
.topbar-item i { color: var(--dourado); font-size: .8rem; }
a.topbar-item:hover { color: var(--branco); }
.topbar-sep { color: rgba(255,255,255,.2); }
.topbar-social {
    color:       rgba(255,255,255,.65);
    font-size:   .95rem;
    transition:  color .2s ease;
}
.topbar-social:hover { color: var(--dourado); }
.topbar-unit-link {
    color:           var(--dourado);
    font-weight:     var(--fw-semibold);
    font-size:       .75rem;
    letter-spacing:  .04em;
    text-decoration: none;
    border:          1px solid rgba(198,167,86,.4);
    padding:         .2rem .65rem;
    border-radius:   var(--radius-pill);
    transition:      all .2s ease;
}
.topbar-unit-link:hover {
    background:  rgba(198,167,86,.12);
    color:       var(--dourado-suave);
}
@media (max-width: 767px) {
    .topbar-left .topbar-sep,
    .topbar-left .topbar-item:not(:first-child) { display: none; }
}

/* ----------- Header wrapper (sticky) ----------- */
.site-header {
    position:    sticky;
    top:         0;
    z-index:     1030;
    width:       100%;
}

/* ----------- Navbar ----------- */
.navbar-camelao {
    background:     var(--azul);
    box-shadow:     0 2px 12px rgba(0,0,0,.18);
    padding-top:    .75rem;
    padding-bottom: .75rem;
    transition:     all .3s ease;
    position:       relative;
}

/* Navbar transparente quando estiver logo abaixo do topo da página */
.navbar-camelao.is-transparent {
    background:  rgba(15,44,82,.88);
    box-shadow:  none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.navbar-camelao.scrolled {
    padding-top:    .55rem;
    padding-bottom: .55rem;
    box-shadow:     0 4px 20px rgba(0,0,0,.22);
    background:     var(--azul) !important;
}

/* Logo */
.navbar-brand-camelao {
    display:         flex;
    align-items:     center;
    gap:             .65rem;
    text-decoration: none;
    flex-shrink:     0;
}
.brand-logo { height: 42px; width: auto; display: block; }

/* Links de navegação */
.navbar-camelao .nav-link {
    color:          rgba(255,255,255,.82) !important;
    font-weight:    var(--fw-semibold);
    font-size:      .875rem;
    letter-spacing: .01em;
    padding:        .42rem .78rem !important;
    border-radius:  var(--radius-sm);
    transition:     color .2s ease, background .2s ease;
    position:       relative;
    border:         none;
    background:     transparent;
    cursor:         pointer;
    line-height:    1.4;
}
.navbar-camelao .nav-link:hover,
.navbar-camelao .nav-link.active {
    color:      var(--branco) !important;
    background: rgba(255,255,255,.09);
}
.navbar-camelao .nav-link.active {
    color:      var(--dourado) !important;
    background: rgba(198,167,86,.12);
}

/* Dropdown toggle (botão "Mais") */
.nav-dropdown-toggle { display: flex; align-items: center; gap: .3rem; }
.nav-chevron         { font-size: .6rem; transition: transform .2s ease; }
.nav-dropdown-toggle[aria-expanded="true"] .nav-chevron,
.nav-mega-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

.navbar-camelao .nav-item.dropdown { position: relative; }

/* Painel dropdown */
.dropdown-menu-camelao {
    position:      absolute !important;
    top:           100%;
    left:          0;
    background:    #fff;
    border:        none;
    border-radius: var(--radius);
    box-shadow:    0 8px 32px rgba(15,44,82,.14), 0 2px 8px rgba(0,0,0,.06);
    padding:       .4rem;
    min-width:     210px;
    margin-top:    .4rem !important;
    animation:     dropdownFadeIn .18s ease;
    z-index:       1050;
}
@keyframes dropdownFadeIn {
    from { opacity:0; transform:translateY(-6px); }
    to   { opacity:1; transform:translateY(0); }
}
.dropdown-menu-camelao .dropdown-item {
    border-radius: var(--radius-sm);
    font-size:     .87rem;
    font-weight:   var(--fw-semibold);
    color:         var(--azul);
    padding:       .58rem .85rem;
    transition:    background .15s ease;
    display:       flex;
    align-items:   center;
}
.dropdown-menu-camelao .dropdown-item i { color: var(--dourado); font-size: .95rem; width: 1.1em; }
.dropdown-menu-camelao .dropdown-item:hover,
.dropdown-menu-camelao .dropdown-item:focus { background: rgba(15,44,82,.06); color: var(--azul); }
.dropdown-menu-camelao .dropdown-divider   { margin: .25rem .5rem; border-color: var(--cinza-borda); }

/* ----------- Mega-menu Segmentos ----------- */
.nav-mega-wrapper {
    position: static;
}
.nav-mega-trigger {
    display:     flex;
    align-items: center;
    gap:         .3rem;
    white-space: nowrap;
}

.mega-menu {
    position:    fixed;
    top:         auto; /* Posicionado via JS */
    left:        0;
    right:       0;
    background:  var(--branco);
    box-shadow:  0 12px 40px rgba(15,44,82,.18);
    border-top:  2px solid var(--dourado);
    border-radius: 0 0 var(--radius) var(--radius);
    z-index:     1040;
    opacity:     0;
    visibility:  hidden;
    transform:   translateY(-8px);
    transition:  opacity .22s ease, transform .22s ease, visibility .22s ease;
    pointer-events: none;
    max-height:  70vh;
    overflow-y:  auto;
}
.mega-menu.is-open {
    opacity:        1;
    visibility:     visible;
    transform:      translateY(0);
    pointer-events: auto;
}
.mega-menu-inner  { padding: 1.5rem 2rem; }
.mega-menu-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   1.25rem;
    padding-bottom:  .75rem;
    border-bottom:   1px solid var(--cinza-borda);
    font-weight:     var(--fw-bold);
    color:           var(--azul);
    font-size:       .95rem;
}
.mega-menu-ver-todos {
    font-size:       .8rem;
    color:           var(--dourado);
    text-decoration: none;
    font-weight:     var(--fw-semibold);
    display:         flex;
    align-items:     center;
    gap:             .25rem;
    transition:      color .2s ease;
}
.mega-menu-ver-todos:hover { color: var(--dourado-escuro); }

.mega-menu-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:                   .5rem;
}
.mega-seg-item {
    display:         flex;
    align-items:     center;
    gap:             .65rem;
    padding:         .6rem .75rem;
    border-radius:   var(--radius-sm);
    text-decoration: none;
    color:           var(--cinza-escuro);
    transition:      background .18s ease, transform .18s ease;
    font-size:       .83rem;
    font-weight:     var(--fw-semibold);
    border:          1px solid transparent;
}
.mega-seg-item:hover {
    background:    var(--cinza-claro);
    border-color:  var(--cinza-borda);
    transform:     translateX(3px);
    color:         var(--azul);
}
.mega-seg-icon {
    width:          36px;
    height:         36px;
    border-radius:  var(--radius-sm);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      1rem;
    flex-shrink:    0;
}
.mega-seg-nome { flex: 1; line-height: 1.2; }
.mega-seg-count {
    background:  var(--cinza-claro);
    color:       var(--cinza-medio);
    font-size:   .7rem;
    font-weight: var(--fw-bold);
    padding:     .1rem .4rem;
    border-radius: var(--radius-pill);
    min-width:   22px;
    text-align:  center;
}

/* ----------- Busca expansível ----------- */
.navbar-search-wrap {
    position:   relative;
    max-width:  0;
    overflow:   hidden;
    transition: max-width .3s ease, opacity .3s ease;
    opacity:    0;
}
.navbar-search-wrap.is-open {
    max-width: 280px;
    opacity:   1;
}
.navbar-search-form {
    display:        flex;
    align-items:    center;
    background:     rgba(255,255,255,.1);
    border:         1px solid rgba(255,255,255,.2);
    border-radius:  var(--radius-pill);
    overflow:       hidden;
    height:         36px;
    white-space:    nowrap;
}
.navbar-search-form:focus-within {
    background:   rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.38);
    box-shadow:   0 0 0 3px rgba(198,167,86,.25);
}
.navbar-search-input {
    background:  transparent;
    border:      none;
    outline:     none;
    color:       var(--branco);
    font-size:   .82rem;
    padding:     0 .75rem;
    width:       220px;
    height:      100%;
}
.navbar-search-input::placeholder { color: rgba(255,255,255,.45); }
.navbar-search-btn {
    background:  transparent;
    border:      none;
    color:       rgba(255,255,255,.8);
    padding:     0 .75rem;
    height:      100%;
    cursor:      pointer;
    transition:  color .2s ease;
}
.navbar-search-btn:hover { color: var(--dourado); }

/* Botão ícone genérico na navbar */
.btn-icon-nav {
    width:          36px;
    height:         36px;
    border-radius:  50%;
    background:     rgba(255,255,255,.1);
    border:         1px solid rgba(255,255,255,.18);
    color:          rgba(255,255,255,.85);
    font-size:      .95rem;
    display:        flex;
    align-items:    center;
    justify-content: center;
    cursor:         pointer;
    transition:     all .2s ease;
}
.btn-icon-nav:hover {
    background:   rgba(255,255,255,.2);
    color:        var(--branco);
    border-color: rgba(255,255,255,.35);
}
.btn-icon-nav.is-active {
    background:   rgba(198,167,86,.2);
    border-color: rgba(198,167,86,.5);
    color:        var(--dourado);
}

/* Badge de unidade no header */
.unit-badge {
    background:     rgba(198,167,86,.15);
    border:         1px solid rgba(198,167,86,.35);
    color:          var(--dourado);
    font-size:      .72rem;
    font-weight:    var(--fw-semibold);
    padding:        .25rem .65rem;
    border-radius:  var(--radius-pill);
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space:    nowrap;
}

/* Hamburger */
.navbar-toggler-camelao {
    border:         none;
    padding:        .45rem;
    color:          var(--branco);
    font-size:      1.4rem;
    background:     rgba(255,255,255,.1);
    border-radius:  var(--radius-sm);
}
.navbar-toggler-camelao:focus { box-shadow: none; }

/* Botão "Trocar" unidade na navbar */
.btn-trocar {
    display:         inline-flex;
    align-items:     center;
    gap:             .3rem;
    background:      rgba(255,255,255,.1);
    border:          1px solid rgba(255,255,255,.2);
    color:           rgba(255,255,255,.85) !important;
    font-size:       .78rem;
    font-weight:     var(--fw-semibold);
    padding:         .35rem .8rem;
    border-radius:   var(--radius-sm);
    transition:      background .2s ease, border-color .2s ease, color .2s ease;
    text-decoration: none;
    white-space:     nowrap;
    cursor:          pointer;
}
.btn-trocar:hover {
    background:   rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.38);
    color:        var(--branco) !important;
}

    top:           100%;
    left:          0;
    background:    #fff;
    border:        none;
    border-radius: var(--radius);
    box-shadow:    0 8px 32px rgba(15,44,82,.14), 0 2px 8px rgba(0,0,0,.06);
    padding:       .4rem;
    min-width:     210px;
    margin-top:    .4rem !important;
    animation:     dropdownFadeIn .18s ease;
    z-index:       1050;
}
@keyframes dropdownFadeIn {
    from { opacity:0; transform:translateY(-6px); }
    to   { opacity:1; transform:translateY(0); }
}
.dropdown-menu-camelao .dropdown-item {
    border-radius: var(--radius-sm);
    font-size:     .87rem;
    font-weight:   var(--fw-semibold);
    color:         var(--azul);
    padding:       .58rem .85rem;
    transition:    background .15s ease;
    display:       flex;
    align-items:   center;
}
.dropdown-menu-camelao .dropdown-item i {
    color: var(--dourado);
    font-size: .95rem;
    width: 1.1em;
}
.dropdown-menu-camelao .dropdown-item:hover,
.dropdown-menu-camelao .dropdown-item:focus {
    background: rgba(15,44,82,.06);
    color:      var(--azul);
}
.dropdown-menu-camelao .dropdown-divider {
    margin:       .25rem .5rem;
    border-color: var(--cinza-borda);
}

/* Botão "Trocar" unidade na navbar */
.btn-trocar {
    display:         inline-flex;
    align-items:     center;
    gap:             .3rem;
    background:      rgba(255,255,255,.1);
    border:          1px solid rgba(255,255,255,.2);
    color:           rgba(255,255,255,.85) !important;
    font-size:       .78rem;
    font-weight:     var(--fw-semibold);
    padding:         .35rem .8rem;
    border-radius:   var(--radius-sm);
    transition:      background .2s ease, border-color .2s ease, color .2s ease;
    text-decoration: none;
    white-space:     nowrap;
    cursor:          pointer;
}
.btn-trocar:hover {
    background:   rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.38);
    color:        var(--branco) !important;
}

/* Badge de unidade no header */
.unit-badge {
    background:     rgba(198,167,86,.15);
    border:         1px solid rgba(198,167,86,.35);
    color:          var(--dourado);
    font-size:      .72rem;
    font-weight:    var(--fw-semibold);
    padding:        .25rem .65rem;
    border-radius:  var(--radius-pill);
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space:    nowrap;
}

/* Hamburger */
.navbar-toggler-camelao {
    border:         none;
    padding:        .45rem;
    color:          var(--branco);
    font-size:      1.4rem;
    background:     rgba(255,255,255,.1);
    border-radius:  var(--radius-sm);
}
.navbar-toggler-camelao:focus { box-shadow: none; }

/* =========================================================================
   5. SIDEBAR MOBILE
   ========================================================================= */
.sidebar-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(4px);
    z-index:    1040;
    opacity:    0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.sidebar-overlay.active {
    opacity:    1;
    visibility: visible;
}

.sidebar-mobile {
    position:       fixed;
    top:            0;
    left:           0;
    width:          300px;
    max-width:      85vw;
    height:         100vh;
    background:     var(--azul);
    z-index:        1050;
    transform:      translateX(-100%);
    transition:     transform .35s cubic-bezier(.4,0,.2,1);
    display:        flex;
    flex-direction: column;
    overflow-y:     auto;
    box-shadow:     6px 0 40px rgba(0,0,0,.35);
}
.sidebar-mobile.active {
    transform:      translateX(0);
}

.sidebar-header {
    padding:            1.25rem 1.5rem;
    border-bottom:      1px solid rgba(255,255,255,.1);
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    flex-shrink:        0;
}

.sidebar-close {
    background:     rgba(255,255,255,.1);
    border:         none;
    color:          var(--branco);
    width:          36px;
    height:         36px;
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      1.1rem;
    cursor:         pointer;
    transition:     var(--trans);
}
.sidebar-close:hover { background: rgba(255,255,255,.2); }

.sidebar-nav {
    padding:    1rem 0;
    flex:       1;
}
.sidebar-nav a {
    display:        flex;
    align-items:    center;
    gap:            .75rem;
    color:          rgba(255,255,255,.85);
    text-decoration: none;
    font-weight:    var(--fw-semibold);
    font-size:      .95rem;
    padding:        .9rem 1.5rem;
    transition:     var(--trans);
    border-left:    3px solid transparent;
}
.sidebar-nav a:hover,
.sidebar-nav a.active {
    color:          var(--branco);
    background:     rgba(255,255,255,.07);
    border-left-color: var(--dourado);
}
.sidebar-nav a i {
    font-size:  1.05rem;
    color:      var(--dourado);
    flex-shrink: 0;
    width:      20px;
    text-align: center;
}

.sidebar-footer {
    padding:        1.25rem 1.5rem;
    border-top:     1px solid rgba(255,255,255,.1);
    flex-shrink:    0;
}
.sidebar-unit-info {
    font-size:  .8rem;
    color:      rgba(255,255,255,.55);
}
.sidebar-unit-info strong {
    color:      var(--dourado);
    display:    block;
    font-size:  .88rem;
    margin-bottom: .15rem;
}
.sidebar-horarios {
    display:        flex;
    flex-direction: column;
    gap:            .2rem;
}
.sidebar-horario-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    gap:             .5rem;
    font-size:       .75rem;
    color:           rgba(255,255,255,.55);
    border-bottom:   1px solid rgba(255,255,255,.06);
    padding-bottom:  .18rem;
}
.sidebar-horario-dia {
    color:       rgba(255,255,255,.75);
    font-weight: 500;
    white-space: nowrap;
}
.sidebar-horario-hora {
    color:       rgba(255,255,255,.9);
    font-weight: 600;
    white-space: nowrap;
}
.sidebar-horario-hora.fechado {
    color: rgba(255,80,80,.8);
}

/* Grid de segmentos na sidebar */
.sidebar-segmentos {
    padding:      .75rem 1.5rem 1rem;
    border-top:   1px solid rgba(255,255,255,.1);
}
.sidebar-segmentos-titulo {
    font-size:      .72rem;
    font-weight:    var(--fw-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.35);
    margin-bottom:  .6rem;
}
.sidebar-segmentos-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   .35rem;
}
.sidebar-seg-item {
    display:         flex;
    align-items:     center;
    gap:             .45rem;
    padding:         .45rem .6rem;
    border-radius:   var(--radius-sm);
    text-decoration: none;
    color:           rgba(255,255,255,.75);
    font-size:       .75rem;
    font-weight:     var(--fw-semibold);
    background:      rgba(255,255,255,.05);
    border:          1px solid rgba(255,255,255,.06);
    transition:      all .18s ease;
    line-height:     1.2;
}
.sidebar-seg-item:hover {
    background:   rgba(255,255,255,.12);
    color:        var(--branco);
    border-color: rgba(198,167,86,.3);
}
.sidebar-seg-item i { font-size: .9rem; flex-shrink: 0; }

/* Body lock */
body.sidebar-open { overflow: hidden; }

/* =========================================================================
   6. HERO / SLIDER / BANNERS
   ========================================================================= */

/* ----------- Carousel de banners reais (imagens do BD) ----------- */
.banner-carousel {
    width:       100%;
    line-height: 0;
    position:    relative;
}
.banner-carousel .carousel-inner,
.banner-carousel .carousel-item { line-height: 0; }

.banner-carousel-img {
    width:       100%;
    height:      auto;
    max-height:  420px;
    object-fit:  cover;
    object-position: center top;
    display:     block;
}
@media (max-width: 767px) {
    .banner-carousel-img { max-height: 200px; }
}
@media (min-width: 1200px) {
    .banner-carousel-img { max-height: 480px; }
}

/* Controles do carousel com estilo Camelão */
.banner-carousel .carousel-control-prev,
.banner-carousel .carousel-control-next {
    width:       48px;
    height:      48px;
    top:         50%;
    transform:   translateY(-50%);
    background:  rgba(15,44,82,.55);
    border-radius: 50%;
    opacity:     .8;
    margin:      0 12px;
}
.banner-carousel .carousel-control-prev { left: 0; }
.banner-carousel .carousel-control-next { right: 0; }
.banner-carousel .carousel-control-prev:hover,
.banner-carousel .carousel-control-next:hover {
    background: rgba(15,44,82,.85);
    opacity:    1;
}
.banner-carousel .carousel-indicators [data-bs-target] {
    width:          28px;
    height:         3px;
    border-radius:  2px;
    background:     rgba(255,255,255,.5);
    border-top:     0;
    border-bottom:  0;
}
.banner-carousel .carousel-indicators .active {
    background:  var(--dourado);
    width:       44px;
}

/* ----------- Banner estático (modo 'estatico' em $bannerMode) ----------- */
.banner-estatico {
    width:    100%;
    display:  block;
    line-height: 0;
}
.banner-estatico a {
    display: block;
    line-height: 0;
}
.banner-estatico-img {
    width:      100%;
    height:     auto;
    max-height: 480px;          /* mesma altura máxima do slider */
    object-fit: cover;
    object-position: center;
    display:    block;
}
@media (max-width: 768px) {
    .banner-estatico-img { max-height: 220px; }
}

/* Hero dinâmico */
.hero-slider {
    position:   relative;
    overflow:   hidden;
}

.hero-slider .carousel-item {
    height:     580px;
}

@media (max-width: 768px) {
    .hero-slider .carousel-item { height: 380px; }
}

.hero-slide-bg {
    position:   absolute;
    inset:      0;
    background-size:    cover;
    background-position: center;
    background-repeat:  no-repeat;
}

.hero-slide-bg::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg,
        rgba(15,44,82,.88) 0%,
        rgba(22,59,107,.65) 50%,
        rgba(15,44,82,.40) 100%);
}

.hero-slide-content {
    position:       relative;
    z-index:        2;
    height:         100%;
    display:        flex;
    align-items:    center;
    padding:        0 1rem;
}

.hero-tag {
    display:        inline-block;
    background:     rgba(198,167,86,.2);
    border:         1px solid rgba(198,167,86,.5);
    color:          var(--dourado);
    font-size:      .75rem;
    font-weight:    var(--fw-semibold);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding:        .3rem .9rem;
    border-radius:  var(--radius-pill);
    margin-bottom:  1rem;
}

.hero-titulo {
    font-size:      2.8rem;
    font-weight:    var(--fw-bold);
    color:          var(--branco);
    line-height:    1.15;
    margin-bottom:  1.1rem;
}

@media (max-width: 768px) {
    .hero-titulo { font-size: 1.75rem; }
}

.hero-subtitulo {
    font-size:      1.05rem;
    font-weight:    var(--fw-light);
    color:          rgba(255,255,255,.82);
    margin-bottom:  2rem;
    max-width:      520px;
}

@media (max-width: 768px) {
    .hero-subtitulo { font-size: .9rem; }
}

.carousel-indicators-custom {
    bottom:         20px;
}
.carousel-indicators-custom [data-bs-target] {
    width:          32px;
    height:         3px;
    border-radius:  2px;
    background:     rgba(255,255,255,.4);
    border:         none;
}
.carousel-indicators-custom .active {
    background:     var(--dourado);
    width:          50px;
}

.carousel-control-camelao {
    width:      5%;
    opacity:    .6;
}
.carousel-control-camelao:hover { opacity: 1; }

/* =========================================================================
   7. SEÇÃO DE ATALHOS RÁPIDOS
   ========================================================================= */
.atalhos-section {
    padding:    2.5rem 0;
    background: var(--branco);
    margin-top: -40px;
    position:   relative;
    z-index:    10;
}

.atalho-card {
    background:     var(--branco);
    border:         1px solid var(--cinza-borda);
    border-radius:  var(--radius);
    padding:        1.5rem 1rem;
    text-align:     center;
    transition:     var(--trans);
    text-decoration: none;
    color:          var(--cinza-escuro);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .6rem;
    box-shadow:     var(--shadow-xs);
    height:         100%;
}
.atalho-card:hover {
    border-color:   var(--dourado);
    box-shadow:     var(--shadow-md);
    transform:      translateY(-4px);
    color:          var(--azul);
}

.atalho-icon {
    width:          56px;
    height:         56px;
    background:     linear-gradient(135deg, var(--azul), var(--azul-medio));
    border-radius:  var(--radius);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      1.4rem;
    color:          var(--dourado);
    transition:     var(--trans);
}
.atalho-card:hover .atalho-icon {
    background: linear-gradient(135deg, var(--dourado), var(--dourado-escuro));
    color:      var(--azul);
}

.atalho-label {
    font-size:      .82rem;
    font-weight:    var(--fw-semibold);
    letter-spacing: .02em;
}

/* =========================================================================
   8. SEÇÕES GENÉRICAS
   ========================================================================= */
.section-pad { padding: 5rem 0; }
.section-pad-sm { padding: 3.5rem 0; }

.section-header { margin-bottom: 3rem; }

.section-eyebrow {
    font-size:      .78rem;
    font-weight:    var(--fw-semibold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--dourado);
    display:        block;
    margin-bottom:  .4rem;
}

.section-title {
    font-size:      2rem;
    font-weight:    var(--fw-bold);
    color:          var(--azul);
    line-height:    1.2;
    margin-bottom:  .75rem;
}

@media (max-width: 576px) {
    .section-title { font-size: 1.55rem; }
}

.section-subtitle {
    font-size:      1rem;
    font-weight:    var(--fw-light);
    color:          var(--cinza-medio);
    max-width:      540px;
    margin:         0 auto;
    line-height:    1.7;
}

/* =========================================================================
   9. CARDS DE LOJA
   ========================================================================= */
.loja-card {
    background:     var(--branco);
    border:         1px solid var(--cinza-borda);
    border-radius:  var(--radius);
    padding:        1.5rem;
    transition:     var(--trans);
    height:         100%;
    display:        flex;
    flex-direction: column;
    box-shadow:     var(--shadow-xs);
}
.loja-card:hover {
    border-color:   var(--azul-claro);
    box-shadow:     var(--shadow-md);
    transform:      translateY(-3px);
}

.loja-numero {
    display:        inline-block;
    background:     var(--cinza-claro);
    color:          var(--azul);
    font-size:      .72rem;
    font-weight:    var(--fw-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding:        .2rem .65rem;
    border-radius:  var(--radius-pill);
    margin-bottom:  .75rem;
}

.loja-nome {
    font-size:      1.05rem;
    font-weight:    var(--fw-bold);
    color:          var(--azul);
    margin-bottom:  .3rem;
    line-height:    1.3;
}

.loja-segmento {
    font-size:      .8rem;
    color:          var(--dourado);
    font-weight:    var(--fw-semibold);
    margin-bottom:  1rem;
    display:        flex;
    align-items:    center;
    gap:            .3rem;
}

.loja-info-item {
    font-size:      .82rem;
    color:          var(--cinza-medio);
    display:        flex;
    align-items:    flex-start;
    gap:            .5rem;
    margin-bottom:  .35rem;
}
.loja-info-item i {
    color:      var(--dourado);
    font-size:  .9rem;
    flex-shrink: 0;
    margin-top: 1px;
    width:      14px;
}

.loja-card .btn {
    margin-top: auto;
    width:      100%;
}

/* =========================================================================
   10. CARDS DE SEGMENTO
   ========================================================================= */
.segmento-card {
    background:     var(--branco);
    border:         1px solid var(--cinza-borda);
    border-radius:  var(--radius);
    padding:        2rem 1.5rem;
    text-align:     center;
    transition:     var(--trans);
    cursor:         pointer;
    text-decoration: none;
    color:          var(--cinza-escuro);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .75rem;
    box-shadow:     var(--shadow-xs);
    height:         100%;
}
.segmento-card:hover {
    border-color:   var(--azul);
    box-shadow:     var(--shadow-md);
    transform:      translateY(-5px);
    color:          var(--azul);
}

.segmento-icon-wrap {
    width:          64px;
    height:         64px;
    border-radius:  var(--radius);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      1.6rem;
    color:          var(--branco);
    transition:     var(--trans);
}
.segmento-card:hover .segmento-icon-wrap {
    transform:  scale(1.12);
}

.segmento-nome {
    font-size:      .92rem;
    font-weight:    var(--fw-semibold);
    text-align:     center;
}
.segmento-desc {
    font-size:      .78rem;
    color:          var(--cinza-medio);
    line-height:    1.5;
}
.segmento-count {
    font-size:      .72rem;
    font-weight:    var(--fw-bold);
    color:          var(--cinza-medio);
    background:     var(--cinza-claro);
    padding:        .15rem .55rem;
    border-radius:  var(--radius-pill);
}

/* =========================================================================
   11. CARDS DE BLOG / POST
   ========================================================================= */
.post-card {
    background:     var(--branco);
    border:         1px solid var(--cinza-borda);
    border-radius:  var(--radius);
    overflow:       hidden;
    transition:     var(--trans);
    height:         100%;
    display:        flex;
    flex-direction: column;
    box-shadow:     var(--shadow-xs);
}
.post-card:hover {
    border-color:   transparent;
    box-shadow:     var(--shadow-lg);
    transform:      translateY(-4px);
}

.post-card-img {
    height:         200px;
    overflow:       hidden;
}
.post-card-img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.post-card:hover .post-card-img img {
    transform:  scale(1.05);
}

.post-card-body {
    padding:        1.5rem;
    flex:           1;
    display:        flex;
    flex-direction: column;
}

.post-categoria {
    font-size:      .72rem;
    font-weight:    var(--fw-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--dourado);
    margin-bottom:  .6rem;
}

.post-titulo {
    font-size:      1rem;
    font-weight:    var(--fw-bold);
    color:          var(--azul);
    line-height:    1.4;
    margin-bottom:  .75rem;
    display:        -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:       hidden;
}

.post-resumo {
    font-size:      .85rem;
    color:          var(--cinza-medio);
    line-height:    1.6;
    flex:           1;
    display:        -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:       hidden;
}

.post-meta {
    display:        flex;
    align-items:    center;
    gap:            .5rem;
    font-size:      .75rem;
    color:          var(--cinza-medio);
    margin-bottom:  .75rem;
}
.post-meta i { color: var(--dourado); }

.post-card .btn {
    margin-top: 1rem;
    align-self: flex-start;
    font-size:  .8rem;
    padding:    .4rem 1.1rem;
}

/* =========================================================================
   12. PAGE HEADER (banner de topo nas páginas internas)
   ========================================================================= */
.page-header {
    background:         var(--azul);
    background-image:   linear-gradient(135deg, var(--azul) 0%, var(--azul-medio) 100%);
    padding:            4rem 0 3rem;
    position:           relative;
    overflow:           hidden;
}

.page-header::before {
    content:        '';
    position:       absolute;
    top:            -50%;
    right:          -10%;
    width:          500px;
    height:         500px;
    background:     radial-gradient(circle, rgba(198,167,86,.12) 0%, transparent 65%);
    pointer-events: none;
}

.page-header-eyebrow {
    font-size:      .75rem;
    font-weight:    var(--fw-semibold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--dourado);
    margin-bottom:  .4rem;
}

.page-header-title {
    font-size:      2.2rem;
    font-weight:    var(--fw-bold);
    color:          var(--branco);
    margin-bottom:  .5rem;
    line-height:    1.2;
}

@media (max-width: 576px) {
    .page-header-title  { font-size: 1.6rem; }
    .page-header       { padding: 3rem 0 2rem; }
}

.page-header-subtitle {
    font-size:      .95rem;
    color:          rgba(255,255,255,.75);
    font-weight:    var(--fw-light);
}

.breadcrumb-camelao .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.4);
}
.breadcrumb-camelao .breadcrumb-item a {
    color:          rgba(255,255,255,.6);
    text-decoration: none;
    transition:     color .2s;
}
.breadcrumb-camelao .breadcrumb-item a:hover {
    color: var(--dourado);
}
.breadcrumb-camelao .breadcrumb-item.active {
    color: rgba(255,255,255,.85);
}

/* =========================================================================
   13. FILTROS
   ========================================================================= */
.filtros-bar {
    background:     var(--cinza-claro);
    border:         1px solid var(--cinza-borda);
    border-radius:  var(--radius);
    padding:        1.25rem 1.5rem;
    margin-bottom:  2rem;
}

.filtros-bar .form-control,
.filtros-bar .form-select {
    border:         1px solid var(--cinza-borda);
    border-radius:  var(--radius-sm);
    font-family:    var(--font-base);
    font-size:      .88rem;
    transition:     var(--trans);
}
.filtros-bar .form-control:focus,
.filtros-bar .form-select:focus {
    border-color:   var(--azul);
    box-shadow:     0 0 0 3px rgba(15,44,82,.12);
}

.resultados-count {
    font-size:      .85rem;
    color:          var(--cinza-medio);
    font-weight:    var(--fw-semibold);
}
.resultados-count span {
    color:      var(--azul);
    font-weight: var(--fw-bold);
}

/* Estado vazio */
.empty-state {
    padding:    4rem 2rem;
    text-align: center;
}
.empty-state-icon {
    font-size:      3.5rem;
    color:          var(--cinza-borda);
    margin-bottom:  1.25rem;
}
.empty-state h5 {
    color:          var(--azul);
    font-weight:    var(--fw-bold);
    margin-bottom:  .5rem;
}
.empty-state p {
    color:          var(--cinza-medio);
    font-size:      .9rem;
}

/* =========================================================================
   14. PÁGINA DE SELEÇÃO DE UNIDADES (index)
   ========================================================================= */
.index-page {
    min-height:     100vh;
    background:     var(--azul);
    background-image:
        radial-gradient(circle at 20% 50%, rgba(198,167,86,.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(22,59,107,.8) 0%, transparent 50%),
        linear-gradient(160deg, var(--preto-suave) 0%, var(--azul) 40%, var(--azul-medio) 100%);
    display:        flex;
    align-items:    center;
    justify-content: center;
    padding:        3rem 1rem;
}

.index-inner {
    width:      100%;
    max-width:  960px;
    text-align: center;
}

.index-logo {
    margin-bottom: 1rem;
}
.index-logo .logo-symbol-lg {
    width:          72px;
    height:         72px;
    background:     linear-gradient(135deg, var(--dourado), var(--dourado-escuro));
    border-radius:  16px;
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    font-size:      2rem;
    font-weight:    var(--fw-bold);
    color:          var(--azul);
    margin-bottom:  1rem;
    box-shadow:     var(--shadow-dourado);
}

.index-brand {
    font-size:      1.9rem;
    font-weight:    var(--fw-bold);
    color:          var(--branco);
    letter-spacing: .02em;
    margin-bottom:  .25rem;
}
.index-tagline {
    font-size:      .9rem;
    color:          rgba(255,255,255,.6);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight:    var(--fw-light);
    margin-bottom:  3rem;
}

.index-question {
    font-size:      1.05rem;
    font-weight:    var(--fw-semibold);
    color:          var(--dourado);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom:  2rem;
}

.unit-selector-card {
    background:     rgba(255,255,255,.05);
    border:         1px solid rgba(255,255,255,.1);
    border-radius:  var(--radius-lg);
    padding:        2.5rem 2rem;
    text-decoration: none;
    color:          var(--branco);
    transition:     var(--trans);
    display:        block;
    position:       relative;
    overflow:       hidden;
    backdrop-filter: blur(8px);
}
.unit-selector-card::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, rgba(198,167,86,.1), rgba(198,167,86,0));
    opacity:    0;
    transition: opacity .3s ease;
}
.unit-selector-card:hover {
    border-color:   var(--dourado);
    color:          var(--branco);
    transform:      translateY(-8px);
    box-shadow:     0 20px 60px rgba(0,0,0,.4);
}
.unit-selector-card:hover::before { opacity: 1; }

.unit-card-icon {
    font-size:      3rem;
    color:          var(--dourado);
    margin-bottom:  1.25rem;
    display:        block;
}

.unit-card-nome {
    font-size:      1.5rem;
    font-weight:    var(--fw-bold);
    margin-bottom:  .5rem;
    letter-spacing: .01em;
}

.unit-card-cidade {
    font-size:      .85rem;
    color:          rgba(255,255,255,.6);
    font-weight:    var(--fw-light);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom:  1.2rem;
}

.unit-card-info {
    font-size:      .82rem;
    color:          rgba(255,255,255,.65);
    line-height:    1.6;
}

.unit-card-cta {
    display:        inline-flex;
    align-items:    center;
    gap:            .5rem;
    background:     linear-gradient(135deg, var(--dourado), var(--dourado-escuro));
    color:          var(--azul);
    font-weight:    var(--fw-bold);
    font-size:      .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding:        .6rem 1.5rem;
    border-radius:  var(--radius-pill);
    margin-top:     1.5rem;
    transition:     var(--trans);
}
.unit-selector-card:hover .unit-card-cta {
    box-shadow: var(--shadow-dourado);
    transform:  scale(1.05);
}

/* Divisor "ou" */
.index-divider {
    display:        flex;
    align-items:    center;
    gap:            1rem;
    color:          rgba(255,255,255,.3);
    font-size:      .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.index-divider::before,
.index-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: rgba(255,255,255,.1);
}

/* =========================================================================
   15. SEÇÃO DE INFORMAÇÕES DA UNIDADE (home)
   ========================================================================= */
.info-unidade-card {
    background:     var(--azul);
    border-radius:  var(--radius);
    padding:        2rem;
    color:          var(--branco);
    height:         100%;
}
.info-unidade-item {
    display:        flex;
    gap:            1rem;
    align-items:    flex-start;
    padding:        1rem 0;
    border-bottom:  1px solid rgba(255,255,255,.08);
}
.info-unidade-item:last-child { border-bottom: none; }
.info-icon {
    width:          40px;
    height:         40px;
    background:     rgba(198,167,86,.15);
    border-radius:  8px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    color:          var(--dourado);
    font-size:      1rem;
    flex-shrink:    0;
}
.info-unidade-label {
    font-size:      .75rem;
    color:          rgba(255,255,255,.5);
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom:  .2rem;
}
.info-unidade-value {
    font-size:      .9rem;
    color:          var(--branco);
    font-weight:    var(--fw-semibold);
    line-height:    1.4;
}

/* Tabela de horários */
.horarios-table { width: 100%; font-size: .88rem; }
.horarios-table td { padding: .4rem 0; vertical-align: middle; }
.horarios-table td:first-child {
    color:      rgba(255,255,255,.7);
    padding-right: 1rem;
}
.horarios-table td:last-child {
    color:      var(--dourado);
    font-weight: var(--fw-semibold);
    text-align: right;
}

/* =========================================================================
   16. MAPA PLACEHOLDER
   ========================================================================= */
.mapa-placeholder {
    background:         var(--cinza-claro);
    border:             2px dashed var(--cinza-borda);
    border-radius:      var(--radius);
    height:             350px;
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    justify-content:    center;
    color:              var(--cinza-medio);
    gap:                .75rem;
}
.mapa-placeholder i  { font-size: 2.5rem; color: var(--cinza-borda); }
.mapa-placeholder p  { font-size: .85rem; font-style: italic; }

/* =========================================================================
   17. FORMULÁRIOS
   ========================================================================= */
.form-camelao .form-label {
    font-weight:    var(--fw-semibold);
    font-size:      .88rem;
    color:          var(--azul);
    margin-bottom:  .4rem;
}
.form-camelao .form-control,
.form-camelao .form-select {
    border:         1px solid var(--cinza-borda);
    border-radius:  var(--radius-sm);
    font-family:    var(--font-base);
    font-size:      .9rem;
    padding:        .7rem 1rem;
    transition:     var(--trans);
    background:     var(--branco);
}
.form-camelao .form-control:focus,
.form-camelao .form-select:focus {
    border-color:   var(--azul);
    box-shadow:     0 0 0 3px rgba(15,44,82,.10);
    outline:        none;
}
.form-camelao textarea { resize: vertical; min-height: 130px; }

/* =========================================================================
   18. DETALHE DA LOJA
   ========================================================================= */
.loja-detalhe-header {
    background:     var(--cinza-claro);
    border-bottom:  1px solid var(--cinza-borda);
    padding:        2.5rem 0;
}
.loja-badge-numero {
    display:        inline-block;
    background:     var(--azul);
    color:          var(--dourado);
    font-size:      .8rem;
    font-weight:    var(--fw-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding:        .3rem .85rem;
    border-radius:  var(--radius-pill);
    margin-bottom:  .75rem;
}
.loja-detalhe-nome {
    font-size:      2rem;
    font-weight:    var(--fw-bold);
    color:          var(--azul);
    margin-bottom:  .4rem;
}

/* =========================================================================
   19. FOOTER
   ========================================================================= */
.footer {
    background:     var(--preto-suave);
    color:          rgba(255,255,255,.7);
    padding-top:    4rem;
    padding-bottom: 0;
}

.footer-brand {
    display:        flex;
    align-items:    center;
    gap:            .75rem;
    margin-bottom:  1.25rem;
    text-decoration: none;
}
.footer .logo-symbol {
    width:          42px;
    height:         42px;
    background:     linear-gradient(135deg, var(--dourado), var(--dourado-escuro));
    border-radius:  10px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      1.2rem;
    font-weight:    var(--fw-bold);
    color:          var(--azul);
}
.footer-brand-text .brand-name {
    font-size:      1.1rem;
    font-weight:    var(--fw-bold);
    color:          var(--branco);
    display:        block;
}
.footer-brand-text .brand-sub {
    font-size:      .72rem;
    color:          rgba(255,255,255,.4);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.footer-desc {
    font-size:      .85rem;
    line-height:    1.7;
    color:          rgba(255,255,255,.55);
    max-width:      320px;
    margin-bottom:  1.5rem;
}

.footer-heading {
    font-size:      .8rem;
    font-weight:    var(--fw-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--dourado);
    margin-bottom:  1.25rem;
}

.footer-links {
    list-style:     none;
    padding:        0;
    margin:         0;
}
.footer-links li { margin-bottom: .5rem; }
.footer-links a {
    color:          rgba(255,255,255,.55);
    text-decoration: none;
    font-size:      .88rem;
    transition:     color .2s ease;
    display:        flex;
    align-items:    center;
    gap:            .4rem;
}
.footer-links a:hover {
    color:          var(--dourado);
}
.footer-links a i {
    font-size:  .75rem;
    color:      rgba(198,167,86,.5);
}

.footer-contact-item {
    display:        flex;
    gap:            .75rem;
    align-items:    flex-start;
    margin-bottom:  .85rem;
}
.footer-contact-item i {
    color:      var(--dourado);
    font-size:  1rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.footer-contact-item span {
    font-size:  .85rem;
    color:      rgba(255,255,255,.6);
    line-height: 1.5;
}

.footer-bottom {
    border-top:     1px solid rgba(255,255,255,.07);
    padding:        1.25rem 0;
    margin-top:     3rem;
    font-size:      .78rem;
    color:          rgba(255,255,255,.35);
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    flex-wrap:      wrap;
    gap:            .5rem;
}

/* =========================================================================
   20. COMO CHEGAR
   ========================================================================= */
.como-chegar-card {
    background:     var(--branco);
    border:         1px solid var(--cinza-borda);
    border-radius:  var(--radius);
    padding:        2rem;
    box-shadow:     var(--shadow-xs);
    height:         100%;
}
.horario-row {
    display:        flex;
    justify-content: space-between;
    align-items:    center;
    padding:        .65rem 0;
    border-bottom:  1px solid var(--cinza-borda);
    font-size:      .88rem;
}
.horario-row:last-child { border-bottom: none; }
.horario-dia  { color: var(--cinza-escuro); font-weight: var(--fw-semibold); }
.horario-hora { color: var(--azul); font-weight: var(--fw-bold); }

/* =========================================================================
   21. POST COMPLETO
   ========================================================================= */
.post-imagem-destaque {
    width:          100%;
    height:         420px;
    object-fit:     cover;
    border-radius:  var(--radius);
    margin-bottom:  2rem;
}
@media (max-width: 576px) {
    .post-imagem-destaque { height: 220px; }
}
.post-conteudo h3 {
    font-size:      1.2rem;
    font-weight:    var(--fw-bold);
    color:          var(--azul);
    margin-top:     1.75rem;
    margin-bottom:  .75rem;
}
.post-conteudo p {
    font-size:      .95rem;
    color:          var(--cinza-escuro);
    line-height:    1.8;
    margin-bottom:  1rem;
}
.post-conteudo ul {
    font-size:      .95rem;
    color:          var(--cinza-escuro);
    line-height:    1.8;
    padding-left:   1.25rem;
}
.post-conteudo ul li { margin-bottom: .4rem; }

/* =========================================================================
   22. SCROLL TO TOP
   ========================================================================= */
.scroll-top-btn {
    position:       fixed;
    bottom:         2rem;
    right:          2rem;
    width:          44px;
    height:         44px;
    background:     var(--azul);
    border:         none;
    border-radius:  50%;
    color:          var(--branco);
    font-size:      1.1rem;
    display:        flex;
    align-items:    center;
    justify-content: center;
    box-shadow:     var(--shadow-md);
    opacity:        0;
    visibility:     hidden;
    transform:      translateY(12px);
    transition:     all .3s ease;
    z-index:        1000;
    cursor:         pointer;
}
.scroll-top-btn.visible {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
}
.scroll-top-btn:hover {
    background: var(--dourado);
    color:      var(--azul);
    transform:  translateY(-3px);
}

/* =========================================================================
   23. ANIMAÇÕES DE ENTRADA
   ========================================================================= */
.fade-up {
    opacity:            0;
    transform:          translateY(24px);
    transition:         opacity .5s ease, transform .5s ease;
}
.fade-up.visible {
    opacity:    1;
    transform:  translateY(0);
}

/* stagger filhos */
.stagger-children > *:nth-child(1) { transition-delay: .05s; }
.stagger-children > *:nth-child(2) { transition-delay: .12s; }
.stagger-children > *:nth-child(3) { transition-delay: .19s; }
.stagger-children > *:nth-child(4) { transition-delay: .26s; }
.stagger-children > *:nth-child(5) { transition-delay: .33s; }
.stagger-children > *:nth-child(6) { transition-delay: .40s; }

/* =========================================================================
   24. RESPONSIVIDADE EXTRA
   ========================================================================= */
@media (max-width: 991px) {
    .navbar-collapse-desktop { display: none !important; }
}

@media (min-width: 992px) {
    .navbar-toggler-camelao { display: none !important; }
}

@media (max-width: 576px) {
    .section-pad      { padding: 3rem 0; }
    .section-pad-sm   { padding: 2rem 0; }
    .atalhos-section  { padding: 1.5rem 0; margin-top: -20px; }
    .loja-card        { padding: 1.2rem; }
}