/* ZapGuia - Adaptive Public UI v1.0
   Camada visual compartilhada. Não altera regras, rotas ou dados. */
:root{
  --zg-primary:#4f46e5;
  --zg-primary-2:#6366f1;
  --zg-bg:#f6f8fc;
  --zg-surface:rgba(255,255,255,.94);
  --zg-text:#0f172a;
  --zg-muted:#64748b;
  --zg-border:rgba(15,23,42,.08);
  --zg-shadow:0 18px 50px rgba(15,23,42,.08);
  --zg-radius:24px;
  --zg-content:1240px;
}
html{scroll-behavior:smooth;background:var(--zg-bg)}
body{min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.device-desktop .container{max-width:var(--zg-content)}
a,button,.card,.cat-item,.city-card,.listing-card{ -webkit-tap-highlight-color:transparent }
img{max-width:100%}

/* Refinamento global */
.card-biz,.listing-card,.cat-item,.city-card,.search-pill,.search-input-group,.bg-white.rounded-4{
  border-color:var(--zg-border)!important;
}
.card-biz,.listing-card,.cat-item,.city-card{will-change:transform}
@media (hover:hover) and (pointer:fine){
  .card-biz:hover,.listing-card:hover,.cat-item:hover,.city-card:hover{transform:translateY(-5px);box-shadow:var(--zg-shadow)}
}

/* HOME - desktop/web */
body.device-desktop .header-app{
  padding:44px 0 86px;
  border-radius:0 0 42px 42px;
  text-align:left;
}
body.device-desktop .header-app .container{display:flex;align-items:center;gap:16px}
body.device-desktop .header-app .logo-box{margin:0;width:62px;height:62px}
body.device-desktop .header-app h4{font-size:1.8rem;margin:0!important}
body.device-desktop .search-float{margin-top:-34px}
body.device-desktop .search-pill{padding:14px 24px;box-shadow:0 18px 45px rgba(15,23,42,.12)}
body.device-desktop .cat-item{padding:22px 10px;border-radius:20px}
body.device-desktop .cat-item span{font-size:.74rem}
body.device-desktop .carousel img{min-height:220px}
body.device-desktop .nav-bottom{
  left:50%;right:auto;bottom:22px;transform:translateX(-50%);
  width:min(520px,calc(100vw - 40px));
  border-radius:22px;padding:10px 12px;
}
body.device-desktop .nav-center-ad{margin-top:-28px}
body.device-desktop main.container{padding-bottom:36px}

/* Listagens e busca em telas amplas */
body.device-desktop .search-header{padding:16px 0}
body.device-desktop .listing-card .card-img-wrapper{height:220px}
body.device-desktop .page-header{padding:54px 0}
body.device-desktop .mobile-bar,body.device-desktop .bottom-nav{display:none!important}

/* Página de empresa */
body.device-desktop .mySwiper{border-radius:28px!important;overflow:hidden}
body.device-desktop .swiper-slide img{max-height:520px;object-fit:cover}

/* TABLET */
body.device-tablet .container{max-width:960px}
body.device-tablet .header-app{padding:42px 0 74px}
body.device-tablet .nav-bottom{left:24px;right:24px;bottom:18px}
body.device-tablet .cat-item{padding:17px 7px}
body.device-tablet .listing-card .card-img-wrapper{height:195px}

/* MOBILE / APP-LIKE */
@media (max-width:767.98px){
  :root{--zg-radius:20px}
  body{font-size:.95rem;overflow-x:hidden}
  .container{padding-left:16px;padding-right:16px}
  .header-app{padding:28px 0 64px!important;border-bottom-left-radius:30px!important;border-bottom-right-radius:30px!important}
  .header-app .logo-box{width:52px;height:52px;margin-bottom:10px}
  .search-float{margin-top:-28px!important}
  .search-pill{padding:10px 15px!important;min-height:58px}
  .search-pill input{font-size:16px}
  .carousel-banner,.carousel,.rounded-4.overflow-hidden{border-radius:18px!important}
  .carousel img{height:auto!important;min-height:128px;max-height:190px;object-fit:cover}
  .cat-item{border-radius:18px!important;padding:14px 4px!important;min-height:92px}
  .cat-item span{font-size:.62rem!important;line-height:1.15;display:block;padding:0 2px}
  .card-biz,.listing-card{border-radius:20px!important}
  .nav-bottom{bottom:max(10px,env(safe-area-inset-bottom));left:10px;right:10px;border-radius:22px;padding:8px 4px}
  .nav-item-app i{font-size:1.35rem}
  .nav-center-ad{width:52px;height:52px;border-radius:18px}
  .page-header{padding:28px 0!important;margin-bottom:24px!important}
  .page-header h1{font-size:1.6rem}
  .search-header{padding:10px 0!important}
  .search-input-group{border-radius:18px!important}
  .listing-card .card-img-wrapper{height:170px!important}
  .listing-card .card-body{padding:18px!important}
  .mobile-bar{padding-bottom:calc(10px + env(safe-area-inset-bottom))!important}
  .city-card{padding:15px!important;border-radius:18px!important}
  .search-box{border-radius:17px!important}
  .modal-dialog{margin:14px}
  .modal-content{border-radius:24px!important}
}

/* Celulares compactos */
@media (max-width:380px){
  .container{padding-left:12px;padding-right:12px}
  .cat-item{min-height:86px;padding:12px 2px!important}
  .cat-item span{font-size:.58rem!important}
  .nav-item-app span{font-size:.58rem}
  .header-app h4{font-size:1.12rem}
}

/* Acessibilidade e motion */
:focus-visible{outline:3px solid rgba(79,70,229,.28);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ==========================================================
   DESKTOP WEB v1.1
   Regras independentes de JavaScript para garantir que a home
   nunca herde o visual de aplicativo em monitores grandes.
   O bloco mobile acima permanece inalterado.
   ========================================================== */
@media (min-width:1100px){
  body{
    padding-bottom:108px!important;
    background:linear-gradient(180deg,#f8fafc 0%,#f5f7fb 100%)!important;
  }
  body .container{max-width:1320px!important;padding-left:28px;padding-right:28px}

  body .header-app{
    min-height:190px;
    padding:42px 0 76px!important;
    border-radius:0 0 38px 38px!important;
    text-align:left!important;
  }
  body .header-app .container{
    display:flex!important;
    align-items:center!important;
    gap:18px!important;
  }
  body .header-app .logo-box{
    width:64px!important;height:64px!important;
    margin:0!important;border-radius:19px!important;
    flex:0 0 64px;
  }
  body .header-app h4{font-size:1.65rem!important;margin:0!important;line-height:1.2}

  body main.container{padding-bottom:28px}
  body .search-float{margin-top:-33px!important}
  body .search-float .col-lg-8{width:72%;max-width:900px}
  body .search-pill{
    min-height:66px;
    padding:14px 24px!important;
    border:1px solid rgba(15,23,42,.08)!important;
    box-shadow:0 18px 46px rgba(15,23,42,.12)!important;
  }
  body .search-pill input{font-size:1rem}

  /* Banner completo no desktop: sem corte por altura fixa */
  body .carousel-banner{
    width:100%;
    max-width:1180px;
    margin-left:auto;
    margin-right:auto;
    border-radius:24px!important;
    background:#0b1220;
    box-shadow:0 16px 42px rgba(15,23,42,.10)!important;
  }
  body .carousel-banner .carousel,
  body .carousel-banner .carousel-inner,
  body .carousel-banner .carousel-item{width:100%}
  body .carousel-banner .carousel-item a{display:block;width:100%}
  body .carousel-banner .carousel-item img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:430px!important;
    object-fit:contain!important;
    object-position:center!important;
    margin:0 auto;
  }

  body section.mt-4,
  body main.container > .row,
  body main.container > section{max-width:1180px;margin-left:auto;margin-right:auto}
  body .cat-item{
    min-height:112px;
    padding:20px 10px!important;
    border-radius:20px!important;
    display:flex!important;
    flex-direction:column;
    justify-content:center;
  }
  body .cat-item span{font-size:.72rem!important;line-height:1.25}

  body .card-biz{border-radius:22px!important}

  /* A navegação continua disponível, mas com proporção de desktop. */
  body .nav-bottom{
    left:50%!important;
    right:auto!important;
    bottom:18px!important;
    width:min(620px,calc(100vw - 56px))!important;
    transform:translateX(-50%)!important;
    padding:9px 12px!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 14px 42px rgba(15,23,42,.14)!important;
  }
  body .nav-item-app{font-size:.68rem!important}
  body .nav-item-app i{font-size:1.35rem!important}
  body .nav-center-ad{
    width:54px!important;height:54px!important;
    margin-top:-30px!important;
    border-radius:18px!important;
  }
}

@media (min-width:1600px){
  body .container{max-width:1440px!important}
  body .carousel-banner,
  body section.mt-4,
  body main.container > .row,
  body main.container > section{max-width:1260px}
  body .carousel-banner .carousel-item img{max-height:470px!important}
}