/* =========================================================
   RAÍZES DA SERRA — CSS GLOBAL ÚNICO (v2026)
   Objetivo: site inteiro + home (sem separar arquivos)
   ========================================================= */

/* -------------------------
   1) TOKENS / VARIÁVEIS
   ------------------------- */
:root{
  --bg:#f7f4ef;
  --surface:#ffffff;
  --surface-2:#fdfaf5;
  --surface-3:#f5f0e9;

  --text:#2f2a24;
  --muted:#6f6a64;

  --border:#e7dfd3;
  --border-2:#e1d7c7;

  --brand:#8B5E3C;
  --brand-dark:#5c3d26;
  --brand-soft:#f3e8d9;
  --brand-accent:#c8a97e;

  --ok-bg:#e9f7ef;
  --ok-text:#1f7a3f;
  --warn-bg:#fff7e6;
  --warn-text:#946200;
  --err-bg:#fdecec;
  --err-text:#a12a2a;

  --font-title:'Playfair Display', serif;
  --font-body:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --container:1200px;
  --radius:14px;
  --radius-sm:10px;

  --shadow-sm:0 4px 14px rgba(0,0,0,.06);
  --shadow:0 10px 26px rgba(0,0,0,.10);

  --s-1:.5rem;
  --s-2:.8rem;
  --s-3:1.1rem;
  --s-4:1.6rem;
  --s-5:2.2rem;

  --t-fast:.18s;
  --t:.28s;
}

/* -------------------------
   2) BASE / RESET
   ------------------------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color var(--t), color var(--t);
}

img{ max-width:100%; display:block; }
a{
  color:var(--brand);
  text-decoration:none;
  transition:color var(--t-fast), text-decoration var(--t-fast);
}
a:hover{
  color:var(--brand-dark);
  text-decoration:underline;
}
::selection{ background:var(--brand-soft); }

/* Acessibilidade */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* -------------------------
   3) CONTAINER PADRÃO
   ------------------------- */
.container,
.bloco-conteudo{
  max-width:var(--container);
  margin:0 auto;
  padding:0 1rem;
}

/* -------------------------
   4) TIPOGRAFIA
   ------------------------- */
h1, h2, h3{
  font-family:var(--font-title);
  color:var(--brand-dark);
  margin:0 0 .6rem 0;
  line-height:1.2;
}
h1{ font-size:clamp(1.55rem, 2vw, 2.05rem); }
h2{ font-size:clamp(1.3rem, 1.6vw, 1.7rem); }
h3{ font-size:1.18rem; }

p{ margin:0 0 1rem 0; }
small, .muted{ color:var(--muted); }

/* Título padrão (páginas internas) */
.page-title{ margin:.3rem 0 1rem; }

/* -------------------------
   5) BLOCO / CARD GLOBAL
   ------------------------- */
.bloco-conteudo{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:1.1rem;
  margin-bottom:2.3rem;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--t), transform var(--t), border-color var(--t);
}
.bloco-conteudo:hover{
  box-shadow:var(--shadow);
  border-color:var(--border-2);
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

/* -------------------------
   6) HEADER NOVO + NAV + DRAWER MOBILE
   ------------------------- */
.page{ padding-top:.6rem; }

.rs-header{
  position:sticky;
  top:0;
  z-index:1200;
  background:var(--surface-2);
  border-bottom:1px solid var(--border-2);
}

.rs-bar{
  max-width:var(--container);
  margin:0 auto;
  padding:.85rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

.rs-logo{
  font-family:var(--font-title);
  letter-spacing:.02em;
  font-size:1.75rem;
  font-weight:800;
  color:var(--brand-dark);
  text-decoration:none;
  white-space:nowrap;
}
.rs-logo:hover{ text-decoration:none; color:var(--brand-dark); }

.rs-actions{
  display:flex;
  align-items:center;
  gap:.55rem;
}

.rs-lojas{
  color:var(--brand-dark);
  text-decoration:none;
  font-weight:750;
  padding:.35rem .55rem;
  border-radius:.8rem;
  border:1px solid transparent;
  opacity:.95;
  white-space:nowrap;
}
.rs-lojas:hover{
  background:var(--brand-soft);
  border-color:var(--border);
  text-decoration:none;
}

.nav-toggle{
  border:1px solid var(--border-2);
  background:var(--brand-accent);
  color:#fff;
  font-size:1.15rem;
  padding:.45rem .75rem;
  border-radius:.65rem;
  cursor:pointer;
  font-weight:900;
  line-height:1;
  transition:transform var(--t-fast), filter var(--t-fast);
}
.nav-toggle:hover{ filter:brightness(.98); transform:translateY(-1px); }

/* NAV DESKTOP */
#siteNav{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:center;
  padding:.55rem 1rem .75rem;
  background:var(--surface-3);
  border-top:1px solid var(--border-2);
}
#siteNav a{
  padding:.52rem .9rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--brand-dark);
  font-weight:650;
  text-decoration:none;
  transition:background-color var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
#siteNav a:hover{
  background:var(--brand-soft);
  border-color:var(--border-2);
  text-decoration:none;
  transform:translateY(-1px);
}

/* OVERLAY + DRAWER */
#siteNavOverlay{
  display:none;            /* ✅ some de verdade */
}
#siteNavOverlay.show{
  display:block;           /* ✅ só aparece quando abre */
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  opacity:1;
  pointer-events:auto;
  z-index:9998;
}

#siteNavDrawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(380px, 88vw);
  background:rgba(253,250,245,.98);
  border-left:1px solid var(--border-2);
  box-shadow:-18px 0 50px rgba(0,0,0,.25);
  transform:translateX(110%);
  transition:transform .22s ease;
  z-index:9999;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
#siteNavDrawer.show{ transform:translateX(0); }

.drawer-head{
  position:sticky;
  top:0;
  background:rgba(253,250,245,.98);
  border-bottom:1px solid var(--border-2);
  padding:.8rem .9rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.drawer-title{
  font-family:var(--font-title);
  letter-spacing:.08em;
  font-size:.95rem;
  text-transform:uppercase;
  color:var(--brand-dark);
  opacity:.9;
}
.drawer-close{
  border:1px solid var(--border-2);
  background:var(--brand-soft);
  color:var(--brand-dark);
  border-radius:.65rem;
  padding:.35rem .55rem;
  font-size:1.05rem;
  cursor:pointer;
  font-weight:900;
  line-height:1;
}
.drawer-links{
  padding:.55rem .7rem .9rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.drawer-sep{
  height:1px;
  background:var(--border-2);
  margin:.55rem .15rem;
}

/* -------------------------
   7) BUSCA
   ------------------------- */
.busca-global-form{
  display:flex;
  gap:.5rem;
  margin-top:1rem;
  justify-content:center;
}

.busca-global-form input[type="text"],
.busca-global-form input[type="search"]{
  width:min(520px, 100%);
  padding:.62rem .8rem;
  border-radius:12px;
  border:1px solid var(--border);
  outline:none;
  background:var(--surface);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}

.busca-global-form input:focus{
  border-color:rgba(139,94,60,.45);
  box-shadow:0 0 0 4px rgba(200,169,126,.25);
}

.botao-busca-icone{ display:none; }

/* -------------------------
   8) BOTÕES
   ------------------------- */
.btn,
.botao-lojas{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.58rem .95rem;
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:750;
  transition:transform var(--t-fast), filter var(--t-fast), background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.btn-primary,
.botao-lojas{
  background:var(--brand-accent);
  color:#fff;
}
.btn-primary:hover,
.botao-lojas:hover{
  filter:brightness(.98);
  transform:translateY(-1px);
  text-decoration:none;
}

.btn-outline{
  background:var(--surface);
  border-color:var(--border);
  color:var(--brand-dark);
}
.btn-outline:hover{
  background:var(--brand-soft);
  border-color:var(--border-2);
  transform:translateY(-1px);
}

.btn-danger{
  background:#b3261e;
  color:#fff;
}
.btn-danger:hover{ transform:translateY(-1px); }

a.btn:hover, a.botao-lojas:hover{ text-decoration:none; }

/* -------------------------
   9) FORM / INPUTS
   ------------------------- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], textarea, select{
  width:100%;
  padding:.65rem .8rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  outline:none;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
textarea{ min-height:120px; resize:vertical; }

input:focus, textarea:focus, select:focus{
  border-color:rgba(139,94,60,.45);
  box-shadow:0 0 0 4px rgba(200,169,126,.25);
}

label{
  display:block;
  font-weight:650;
  color:var(--brand-dark);
  margin-bottom:.35rem;
}
.form-help{ color:var(--muted); font-size:.92rem; }

/* -------------------------
   10) TABELAS
   ------------------------- */
table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
th, td{
  padding:.75rem .8rem;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top;
}
th{
  background:var(--surface-3);
  color:var(--brand-dark);
  font-weight:800;
}
tr:hover td{ background:rgba(243,232,217,.45); }

/* -------------------------
   11) BREADCRUMB (MELHORADO)
   ------------------------- */
/* =========================
   Breadcrumb moderno
   ========================= */

.breadcrumb-nav{
  max-width:var(--container);
  margin:1.1rem auto 1.4rem;
  padding:0 1rem;
}

.breadcrumb-list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .8rem;

  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:999px;

  box-shadow:var(--shadow-sm);
  width:fit-content;
}

/* links */
.breadcrumb-list a{
padding:.25rem .6rem;
  border-radius:999px;
  font-weight:700;
  color:var(--brand-dark);
  background:transparent;
  transition:.18s;
}

.breadcrumb-list a:hover{
  background:var(--brand-soft);
  text-decoration:none;
}

/* item atual */
.breadcrumb-list span{
  padding:.25rem .6rem;
  border-radius:999px;
  background:rgba(200,169,126,.25);
  font-weight:800;
  color:var(--brand-dark);
}

/* separador */
.breadcrumb-list li::after{
  content:"›";
  margin-left:.45rem;
  color:var(--muted);
}

.breadcrumb-list li:last-child::after{
  display:none;
}


/* =========================
   Breadcrumb — ajuste mobile
   ========================= */
@media (max-width: 640px){

  .breadcrumb-nav{
    margin: .8rem auto 1rem;
    padding: 0 .75rem;
    position:relative; /* 👈 adiciona */
  }
.breadcrumb-nav::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:24px;
  background:linear-gradient(to left, var(--bg), transparent);
  pointer-events:none;
}
  .breadcrumb-list{
    width: 100%;
    max-width: 100%;

    /* vira “chips” roláveis */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    /* mantém a cara de pill */
    border-radius: 999px;

    /* evita quebra feia */
    white-space: nowrap;

    /* espaço no fim pra não cortar */
    padding: .5rem .65rem;

    /* opcional: scroll mais suave */
    scroll-behavior: smooth;
  }

  /* remove barra de scroll feia */
  .breadcrumb-list::-webkit-scrollbar{ height: 0; }

  .breadcrumb-list li{
    flex: 0 0 auto; /* cada item vira “chip” */
  }

  /* limita o texto do item atual (geralmente é o produto) */
  .breadcrumb-list span{
    max-width: 52vw;           /* ajusta se quiser */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* separador mais compacto no mobile */
  .breadcrumb-list li::after{
    margin-left: .25rem;
  }
}

/* -------------------------
   12) CTA (chamadas)
   ------------------------- */
.cta-lojas{
  background:var(--brand-soft);
  border:1px solid var(--border-2);
  padding:1.1rem;
  margin:2rem 0;
  text-align:center;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.cta-lojas h3{
  margin:0 0 .4rem 0;
  color:var(--brand-dark);
  font-size:1.2rem;
}
.cta-lojas p{
  color:var(--brand-dark);
  font-size:.96rem;
  margin:0 0 .7rem 0;
}

/* -------------------------
   13) GRID PADRÃO (cards listagem)
   ------------------------- */
.grid-cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1rem;
}
@media (min-width:1100px){
  .grid-cards{ grid-template-columns:repeat(3, 1fr); }
}

.card-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--t), transform var(--t), border-color var(--t);
}
.card-item:hover{
  box-shadow:var(--shadow);
  transform:translateY(-2px);
  border-color:var(--border-2);
}

/* base */
.card-item .card-media{
  aspect-ratio:16/9;
  background:var(--surface-3);
}

.card-item .card-body{ padding:.9rem; }

.card-item .card-title{
  font-family:var(--font-title);
  font-size:1.1rem;
  color:var(--brand-dark);
  margin:0 0 .35rem 0;
}

.card-item .card-meta{
  color:var(--muted);
  font-size:.92rem;
  margin-bottom:.55rem;
}

.badge{
  display:inline-flex;
  align-items:center;
  padding:.2rem .55rem;
  border-radius:999px;
  font-weight:800;
  font-size:.78rem;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--brand-dark);
}
.badge-featured{
  background:rgba(200,169,126,.22);
  border-color:rgba(200,169,126,.45);
}

/* -------------------------
   14) LOADER
   ------------------------- */
#loader{
  position:fixed;
  inset:0;
  background-color:rgba(255,255,255,.82);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:2000;
}
.spinner{
  border:6px solid rgba(200,169,126,.55);
  border-top:6px solid transparent;
  border-radius:50%;
  width:48px;
  height:48px;
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
body.loading{ overflow:hidden; }

/* -------------------------
   15) MESSAGES (Django)
   ------------------------- */
.messages{
  list-style:none;
  padding:0 1rem;
  margin:1rem auto 0;
  max-width:var(--container);
}
.msg{
  margin:.55rem 0;
  padding:.75rem .9rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  font-weight:650;
}
.msg.success{ background:var(--ok-bg); color:var(--ok-text); border-color:rgba(31,122,63,.18); }
.msg.info{ background:var(--surface-3); color:var(--brand-dark); }
.msg.warning{ background:var(--warn-bg); color:var(--warn-text); border-color:rgba(148,98,0,.18); }
.msg.error{ background:var(--err-bg); color:var(--err-text); border-color:rgba(161,42,42,.18); }

/* -------------------------
   16) FOOTER
   ------------------------- */
.footer-rs{
  margin-top:2.2rem;
  padding:1.6rem 0 2.1rem;
  border-top:1px solid var(--border);
  background:var(--surface-2);
}
.footer-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 1rem;
  text-align:center;
}
.footer-top{ margin-bottom:.9rem; }

.footer-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.6rem 1rem;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  color:var(--brand-dark);
  font-weight:850;
  text-decoration:none;
}
.footer-cta:hover{
  background:var(--brand-soft);
  border-color:var(--border-2);
  text-decoration:none;
}

.footer-social{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  justify-content:center;
  align-items:center;
  margin-bottom:.75rem;
  color:var(--muted);
}
.footer-social a{
  color:var(--brand);
  font-weight:700;
  text-decoration:none;
}
.footer-social a:hover{ color:var(--brand-dark); text-decoration:underline; }

.footer-copy{ color:var(--muted); font-size:.92rem; }

/* -------------------------
   17) RESPONSIVO (geral)
   ------------------------- */
@media (max-width:980px){
  .grid-cards{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:768px){
  #siteNav{ display:none; }
  .rs-bar{ padding:.75rem .85rem; }
  .rs-logo{ font-size:1.55rem; }

  .nav-toggle{
    padding:.55rem .9rem;
    font-size:1.2rem;
    border-radius:.75rem;
  }

  #siteNavOverlay, #siteNavDrawer{ display:block; }

  .drawer-links a{
    display:block;
    padding:.62rem .6rem;
    border-radius:.65rem;
    font-size:1.12rem;
    color:var(--brand-dark);
    text-decoration:none;
    border:1px solid transparent;
  }
  .drawer-links a:hover{
    background:var(--brand-soft);
    border-color:var(--border);
    text-decoration:none;
  }

  .busca-global-form{ display:none; }
  .busca-global-form.show{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    margin-top:.6rem;
  }
  .botao-busca-icone{
    display:inline-block;
    background:none;
    border:none;
    font-size:1.3rem;
    cursor:pointer;
    color:var(--brand-dark);
  }

  .grid-cards{ grid-template-columns:1fr; }
}

@media (min-width:769px){
  #siteNavOverlay, #siteNavDrawer{ display:none; }
  .nav-toggle{ display:none; }
}

/* -------------------------
   18) UTILITÁRIOS
   ------------------------- */
.hr{
  border:0;
  height:1px;
  background:var(--border);
  margin:1.2rem 0;
}

/* =========================================================
   HOME — AJUSTES (fica no global mesmo)
   ========================================================= */

/* 1) Se teu base.html tem um H1 visível (ex: .page-title),
      some só na home pra não repetir com hero */
body.is-home .page-title{
  display:none;
}

/* 2) HERO centralizado */
.home-hero{
  padding:2.2rem 0 1.4rem;
  text-align:center;
}
.home-hero-inner{
  max-width:860px;
  margin:0 auto;
  padding:0 1rem;
}
.home-hero-subtitle{
  font-size:1.05rem;
  line-height:1.4;
  margin:0 auto 1rem;
  color:var(--muted);
}
.home-hero .btn{
  display:inline-flex;
  margin:0 auto;
}

/* 3) Seções da home mais marcadas */
.home-section{
  margin-top:2.2rem;
}
.home-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
  padding-bottom:.75rem;
  border-bottom:1px solid rgba(0,0,0,.10);
}
.home-section-title{
  font-size:1.45rem;
  font-weight:900;
  letter-spacing:-.01em;
  margin:0;
}

/* 4) Filtro cidade da home */
.home-filter{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0;
}
.home-filter-label{
  margin:0;
  font-size:.95rem;
  white-space:nowrap;
  color:var(--muted);
}
.home-filter-select{
  min-width:240px;
  padding:.55rem .75rem;
  border-radius:.85rem;
}
@media (max-width:640px){
  .home-filter{ width:100%; }
  .home-filter-select{ width:100%; min-width:0; }
}

/* 5) Sub-seções da home (AJUSTADO: maior e mais destacado) */
.home-subsection{
  margin-top:2.2rem;
}
.home-subsection-head{
  margin-bottom:1rem;
}

.home-subsection-title{
  font-size:clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight:900;
  letter-spacing:-0.01em;
  margin:0;

  padding:.65rem .9rem;
  border-left:0;
  border-radius:12px;
  background:var(--brand-soft);
  border:1px solid var(--border-2);
  box-shadow:var(--shadow-sm);
  color:var(--brand-dark);
}

/* 6) Redes sociais (toggle) */
.home-social{ margin-top:2.2rem; }
.home-social-toggle-wrap{
  margin-top:.75rem;
  display:flex;
  justify-content:center;
}
.home-social-panel{
  max-width:var(--container);
  margin:0 auto;
  padding:0 1rem;
  display:none;
}
.home-social-panel.is-open{
  display:block;
  margin-top:1rem;
}
.home-social-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
@media (min-width:900px){
  .home-social-grid{ grid-template-columns:1fr 1fr; }
}

/* 7) Scroll-top (mais bonito + mais visível) */
.scroll-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 999px;

  display: flex;                 /* fica sempre flex */
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--brand-dark);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  cursor: pointer;
  font-weight: 900;

  z-index: 20000;                /* 🔥 sobe acima de quase tudo */

  /* começa invisível */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);

  transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
}

.scroll-top.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top:hover{
  background: var(--brand-soft);
  transform: translateY(-2px);
}

@media (max-width: 980px){
  .scroll-top{
    width: 48px;
    height: 48px;
    right: 14px;
    bottom: 14px;
  }
}

/* =========================================================
   AJUSTE CRÍTICO: LIMITAR ALTURA DAS IMAGENS DOS CARDS
   (resolve "estourar" em algumas alturas)
   ========================================================= */
.card-item .card-media{
  aspect-ratio:16/9;
  max-height:220px;       /* teto desktop */
  overflow:hidden;
  background:var(--surface-3);
}
@media (max-width:768px){
  .card-item .card-media{ max-height:200px; }
}

/* imagem dentro do card sempre encaixa (sem deformar) */
.card-item .card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* placeholder respeita a altura também */
.card-media-placeholder{
  height:220px;
  background:var(--surface-3);
}
@media (max-width:768px){
  .card-media-placeholder{ height:200px; }
}

/* opcional: deixa o corpo do card mais consistente */
.card-item .card-body{
  display:grid;
  gap:.45rem;
}
.card-desc{
  min-height:3.2em; /* segura ~2 linhas e evita “pula-pula” */
}


/* =========================================================
   CIDADE — PADRÃO VISUAL (página da cidade)
   ========================================================= */
.city-hero .city-title{
  font-size:clamp(1.55rem, 2.2vw, 2.1rem);
  margin:0 0 .35rem 0;
}
.city-hero .city-subtitle{
  margin:0;
}

.city-anchors{
  margin-top:.9rem;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  justify-content:center;
}

.city-section{ scroll-margin-top: 110px; } /* header sticky não “come” o título */

.city-pager{
  margin-top:1.4rem;
  display:flex;
  gap:.8rem;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
/* ================================
   Menu acesso rápido (padrão novo)
   ================================ */

.menu-acesso{
  text-align:center;
}

.menu-acesso-wrap{
  max-width:520px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.menu-acesso-title{
  font-family:var(--font-title);
  font-size:1.15rem;
  font-weight:800;
  color:var(--brand-dark);
  margin:0;
}

.menu-acesso-select{
  appearance:none;
  -webkit-appearance:none;

  padding:.75rem 1rem;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface);

  font-size:1rem;
  font-weight:600;
  color:var(--brand-dark);

  cursor:pointer;

  transition:all var(--t-fast);
}

.menu-acesso-select:hover{
  border-color:var(--border-2);
  background:var(--surface-2);
}

.menu-acesso-select:focus{
  border-color:rgba(139,94,60,.45);
  box-shadow:0 0 0 4px rgba(200,169,126,.25);
}

/* =========================
   Página Sobre
   ========================= */

.city-texto{
  max-width:720px;
  margin:0 auto;
  font-size:1.05rem;
  line-height:1.75;
}

.city-texto p{
  margin-bottom:1.2rem;
}

.city-assinatura{
  margin-top:2rem;
  font-size:.92rem;
  text-align:center;
}


/* =========================
   EXPERIÊNCIAS / MURAL (clean)
   ========================= */

.rs-filtros{ margin-top:.8rem; }
.rs-filtros-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
@media (max-width:768px){
  .rs-filtros-grid{ grid-template-columns:1fr; }
}
.rs-filtros-actions{
  display:flex;
  gap:.6rem;
  align-items:center;
  margin-top:.9rem;
  flex-wrap:wrap;
}

.rs-posts{ display:grid; gap:1rem; }

.rs-post .rs-post-inner{ display:block; }

.rs-post-media{
  display:block;
  background:var(--surface-3);
}
.rs-post-media img{
  width:100%;
  height:260px;
  object-fit:cover;
}
@media (max-width:768px){
  .rs-post-media img{ height:220px; }
}

.rs-post-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:.5rem;
}
.rs-post-date{ white-space:nowrap; font-size:.92rem; }

.rs-post-text p{ margin:.6rem 0; }
.rs-post-tags{ margin:.35rem 0 0; font-size:.92rem; }

.rs-post-audio{ margin-top:.8rem; }
.rs-post-audio audio{ width:100%; }

.rs-post-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.9rem;
  flex-wrap:wrap;
  margin-top:.9rem;
}
.rs-post-buttons{
  display:flex;
  gap:.6rem;
  align-items:center;
  flex-wrap:wrap;
}
.rs-inline{ display:inline; margin:0; }

.rs-comments{ margin-top:1rem; }
.rs-summary{
  cursor:pointer;
  font-weight:800;
  color:var(--brand-dark);
}
.rs-comments-body{ margin-top:.8rem; }

.rs-comments-list{
  list-style:none;
  padding:0;
  margin:0 0 1rem 0;
  display:grid;
  gap:.7rem;
}
.rs-comment{
  padding:.75rem .85rem;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
}
.rs-comment-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:.35rem;
}
.rs-comment-form{ margin-top: .9rem; }

/* =========================================================
   LOJAS — ESTILO GLOBAL (sem quebrar o resto)
   prefixo: loj-
   ========================================================= */

/* wrapper da página de loja */
.loj-wrap{
  max-width: 980px;
  margin: 0 auto;
}

/* reset local mínimo (sem mexer no global) */
.loj-wrap a,
.loj-wrap button{
  text-decoration:none;
  font-family: inherit;
  box-shadow:none;
}

/* ================= HERO ================= */
.loj-hero{
  display:flex;
  gap:1rem;
  align-items:center;
  padding:1rem;
  border-radius:14px;
  background:#fff;
  border:1px solid #e0d6c5;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
}

/* avatar padrão (desktop) */
.loj-avatar{
  width:72px;
  height:72px;
  border-radius:16px;
  object-fit:cover;
  background:#f5f0e9;
  flex:0 0 auto;
}

.loj-title{
  font-size:1.7rem;
  margin:0;
  color:#3d2b1c;
}

.loj-pills{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  margin-top:.4rem;
}

.loj-pill{
  padding:.3rem .6rem;
  border-radius:999px;
  border:1px solid #e0d6c5;
  background:#fdfaf5;
  font-size:.85rem;
  font-weight:800;
  color:#7a5c3c;
}

.loj-desc{
  margin-top:.5rem;
  color:#4b3a2a;
  line-height:1.45;
}

/* ================= BOTÕES ================= */
.loj-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.65rem 1rem;
  border-radius:999px;
  font-weight:900;
  border:none;
  cursor:pointer;
}

.loj-btn-primary{
  background:#2ea043;
  color:#fff;
}

.loj-btn-outline{
  background:#fff;
  border:1px solid #e0d6c5;
  color:#7a5c3c;
}

/* ================= PRODUTOS ================= */
.loj-sec-title{
  margin:1.4rem 0 .6rem;
  font-size:1.3rem;
  color:#3d2b1c;
}

.loj-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.9rem;
}

.loj-card{
  border:1px solid #e0d6c5;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
}

.loj-img{
  height:190px;
  width:100%;
  object-fit:contain;
  background:#faf7f2;
}

.loj-body{
  padding:.7rem;
}

.loj-name{
  font-weight:900;
  color:#3d2b1c;
  margin-bottom:.3rem;
}

.loj-price{
  color:#2a7b3f;
  font-weight:900;
  font-size:1.05rem;
}

/* ================= CARRINHO ================= */
.loj-cart{
  display:flex;
  gap:.5rem;
  padding:.7rem;
  border-top:1px solid #eee;
}

.loj-qtd{
  width:60px;
  border-radius:10px;
  border:1px solid #e0d6c5;
  text-align:center;
}

.loj-add{
  flex:1;
  background:#2ea043;
  color:#fff;
  border:none;
  border-radius:10px;
  font-weight:900;
}

/* ================= OUTRAS LOJAS ================= */
.loj-others{
  margin-top:1.2rem;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.6rem;
}

.loj-other{
  border:1px solid #e0d6c5;
  border-radius:12px;
  padding:.7rem;
  background:#fff;
  font-weight:800;
  color:#3d2b1c;
}

/* ================= MOBILE (ajuste pedido) ================= */
/* No celular: a "foto" vira banner full-width no topo do hero */
@media (max-width:768px){
  .loj-grid{ grid-template-columns:1fr; }
  .loj-others{ grid-template-columns:1fr; }

  .loj-hero{
    flex-direction:column;
    align-items:stretch;
    gap:.85rem;
    padding:0;           /* tira padding pra não “encolher” o banner */
    overflow:hidden;     /* garante bordas arredondadas no banner */
  }

  .loj-avatar{
    width:100%;
    height:220px;
    border-radius:0;     /* banner colado nas bordas do hero */
    object-fit:cover;    /* fica bonito como capa */
    background:#f5f0e9;
  }

  /* conteúdo interno volta a ter padding */
  .loj-hero > div{
    padding:1rem;
  }
}

/* =========================================================
   ARTIGOS — LISTA WIDE (usa o grid-cards global)
   ========================================================= */

/* deixa cards de artigo em 1 coluna por padrão */
.grid-cards--wide{
  grid-template-columns: 1fr;
}

/* imagem “de capa” mais alta */
.card-media--tall{
  max-height: 420px;
}
@media (max-width:768px){
  .card-media--tall{
    max-height: 360px;
  }
}

/* garante que o link do card ocupe tudo e não sublinhe */
.card-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.card-link:hover{ text-decoration:none; }

/* CTA discreta no fim do card */
.card-cta{
  margin-top:.75rem;
  text-align:right;
}
.card-cta-link{
  font-weight:900;
  color:var(--brand-dark);
}
.card-item:hover .card-cta-link{
  text-decoration:underline;
}
/* =========================================================
   ARTIGO — DETALHE (sem inline)
   ========================================================= */
.article-head{ display:grid; gap:.65rem; }

.article-title{
  margin:0;
  font-size:clamp(1.45rem, 2.2vw, 2.1rem);
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
  color:var(--muted);
  font-size:.95rem;
}
.article-meta strong{ color:var(--brand-dark); }

.article-bio{
  margin-top:.25rem;
  padding:.75rem .85rem;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
}

.article-cover{
  margin:1rem 0 0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface-3);
  box-shadow:var(--shadow-sm);
}
.article-cover img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

.article-content{
  margin-top:1rem;
  font-size:1.05rem;
  line-height:1.75;
}
.article-content p{ margin-bottom:1rem; }

.article-stats{
  margin-top:1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}

.article-actions{
  margin-top:1rem;
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  align-items:center;
}

.article-subtitle{
  margin:0 0 .6rem 0;
  font-size:1.2rem;
}

.article-likedby{ margin:.75rem 0 0; }

.article-comment-form{
  margin-top:1.4rem;
  padding-top:1rem;
  border-top:1px solid var(--border);
}
/* =========================
   FORMULÁRIOS PADRÃO
   ========================= */

.form-padrao{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}

.form-grupo{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.form-grupo label{
  font-weight:600;
  font-size:.95rem;
}

.input-padrao{
  width:100%;
  padding:.7rem .8rem;
  border-radius:8px;
  border:1px solid #d6d6d6;
  font-size:1rem;
  background:#fff;
}

.input-padrao:focus{
  outline:none;
  border-color:#7a5c3c;
  box-shadow:0 0 0 2px rgba(122,92,60,.15);
}


.home-welcome-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;

  padding:.35rem .65rem;
  border-radius:999px;

  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--brand-dark);

  font-size:.92rem;
  font-weight:650;

  box-shadow:var(--shadow-sm);
}

/* =========================
   HOME HERO COM IMAGEM
   (igual padrão do city-hero)
   ========================= */
.home-hero--image{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  padding:2.4rem 1.4rem;
  margin: 1rem auto 1.4rem;
  isolation:isolate;
  max-width: var(--container);
}

.home-hero--image::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.55)),
    var(--home-hero-img) center/cover no-repeat;
  transform:scale(1.02);
  filter:saturate(1.05);
}

.home-hero--image .home-hero-inner{
  position:relative;
  z-index:1;
  max-width:900px;
  margin:0 auto;
  text-align:center;
}

.home-hero-kicker{
  margin:0 0 .45rem 0;
  color:rgba(255,255,255,.88);
  font-weight:800;
}

.home-hero-title{
  font-family: var(--font-title);
  margin:0 0 .55rem 0;
  color:#fff;
  font-size:clamp(1.55rem, 2.4vw, 2.2rem);
  line-height:1.15;
}

.home-hero--image .home-hero-subtitle{
  color:rgba(255,255,255,.88);
  max-width: 720px;
  margin:0 auto 1.1rem;
}

.home-hero-ctas{
  display:flex;
  gap:.6rem;
  justify-content:center;
  flex-wrap:wrap;
}

.home-hero-tags{
  margin-top:1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:center;
}

.home-hero--image .badge{
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.home-hero--image .badge:hover{
  background: rgba(255,255,255,.20);
  text-decoration:none;
}

@media (max-width:640px){
  .home-hero--image{
    padding:1.7rem 1rem;
    border-radius:16px;
    margin: .75rem .75rem 1.1rem;
  }

  .home-hero--image::before{
    background:
      linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.58)),
      var(--home-hero-img-mobile) center/cover no-repeat;
  }
}

/* =========================
   Memória — Hero responsivo
   ========================= */

.memoria-hero{
  /* altura padrão: mais alta no mobile, elegante no desktop */
  height: clamp(320px, 62vw, 620px);
  background: #0f1115;              /* fundo bonito p/ quando usar contain */
  border-radius: 18px;              /* se seus cards usam rounded, combina */
  overflow: hidden;
}

.memoria-hero__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;                /* padrão: hero cheio e bonito */
  object-position: center;
}

/* Mobile: dá um pouco mais de altura (evita ficar baixinho em foto boa) */
@media (max-width: 640px){
  .memoria-hero{
    height: clamp(300px, 78vw, 560px);
    border-radius: 14px;
  }
}

/* ✅ Modo "sem corte" (vertical/quadrada): ativa via atributo data-fit="contain" */
.memoria-hero[data-fit="contain"]{
  height: clamp(340px, 78vw, 740px); /* mais altura pra acomodar vertical */
}

.memoria-hero[data-fit="contain"] .memoria-hero__img{
  object-fit: contain;              /* não corta */
  background: #0f1115;
}

/* Se quiser um "meio termo" (corta pouco) */
.memoria-hero[data-fit="balanced"]{
  height: clamp(320px, 70vw, 680px);
}
.memoria-hero[data-fit="balanced"] .memoria-hero__img{
  object-fit: cover;
  object-position: 50% 30%;         /* puxa um pouco pra cima (bom p/ pessoas) */
}


/* =========================
   FOOTER SOCIAL (icones)
   ========================= */

.footer-social{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;            /* quebra bonitinho no mobile */
  gap:14px;                  /* espaçamento entre ícones */
  margin-top:18px;           /* respiro acima */
  margin-bottom:12px;        /* respiro abaixo */
}

.footer-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:44px;                /* área clicável (mobile friendly) */
  height:44px;
  border-radius:999px;

  text-decoration:none;
  color:var(--text);
  background:var(--surface-2);
  border:1px solid var(--border);
  box-shadow:0 6px 16px rgba(0,0,0,.06);

  transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease;
  opacity:.9;
}

/* tamanho dos ícones */
.footer-social i{
  font-size:22px;
  line-height:1;
}

/* hover (desktop) */
.footer-social a:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  opacity:1;
}

/* foco (acessibilidade) */
.footer-social a:focus-visible{
  outline:3px solid var(--brand-soft);
  outline-offset:3px;
}

/* ======= ajustes responsivos ======= */
@media (min-width: 768px){
  .footer-social{
    gap:16px;
    margin-top:22px;
    margin-bottom:14px;
  }

  .footer-social a{
    width:48px;
    height:48px;
  }

  .footer-social i{
    font-size:24px;
  }
}

@media (min-width: 1024px){
  .footer-social{
    margin-top:26px;
    margin-bottom:16px;
  }

  .footer-social a{
    width:50px;
    height:50px;
  }

  .footer-social i{
    font-size:25px;
  }
}


/* esconde no celular menu cselecionavel base.html*/
.menu-desktop-only {
  display: none;
}

/* mostra tablet/desktop */
@media (min-width: 768px) {
  .menu-desktop-only {
    display: block;
  }
}


/* 1) Segurança geral contra overflow horizontal */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* 2) O card/bloco de filtros não pode deixar filho “vazar” */
.filtros-card, .filtros, .bloco-filtros, .city-section, .bloco-conteudo {
  max-width: 100%;
  overflow: hidden;          /* chave: corta o vazamento */
}

/* 3) A linha de chips: sempre 100% e com scroll horizontal */
.chips-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: .45rem;
  max-width: 100%;
  overflow-x: auto;          /* chave: vira scroller */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: .25rem .25rem .4rem;
  min-width: 0;              /* chave em layouts flex */
}

/* 4) Cada chip não pode “encolher” quebrado nem estourar */
.chips-scroll > * {
  flex: 0 0 auto;            /* chip nunca estica nem encolhe estranho */
  white-space: nowrap;       /* não quebra texto do chip */
}


/* =========================================================
   FIX CRÍTICO — Grid não estourar com chips roláveis
   (CSS Grid + overflow horizontal)
   ========================================================= */
.rs-filtros-grid > *{
  min-width: 0;            /* 🔥 ESSENCIAL: permite encolher dentro do grid */
}

.chips-scroll{
  min-width: 0;            /* reforço */
  max-width: 100%;
}

.bloco-conteudo{
  max-width: 100%;
  overflow: hidden;        /* impede “vazamento visual” do conteúdo */
}

/* =========================================================
   PATCH DEFINITIVO — NAV/DRAWER/OVERLAY (breakpoint 980px)
   Cole no FINAL do CSS (sobrescreve sem quebrar o resto)
   ========================================================= */

/* ✅ Base: overlay sempre escondido; só aparece com .show */
#siteNavOverlay{ display:none !important; }
#siteNavOverlay.show{ display:block !important; }

/* ✅ Desktop grande (>= 981px): drawer/overlay desligados, nav normal */
@media (min-width:981px){
  #siteNav{ display:flex !important; }
  .nav-toggle{ display:none !important; }

  #siteNavDrawer{ display:none !important; }
  #siteNavOverlay{ display:none !important; }
}

/* ✅ Mobile + Tablet (<= 980px): nav some, botão aparece, drawer existe */
@media (max-width:980px){
  #siteNav{ display:none !important; }
  .nav-toggle{ display:inline-flex !important; }

  /* drawer existe no mobile, mas fechado por padrão (abre com .show) */
  #siteNavDrawer{ display:block !important; }

  /* overlay continua escondido por padrão (abre só com .show) */
  #siteNavOverlay{ display:none !important; }
  #siteNavOverlay.show{ display:block !important; }
}

.card-premium{
  position:relative;
  border:1px solid var(--border-2);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.premium-badge{
  position:absolute;
  top:10px;
  left:10px;
  padding:.25rem .55rem;
  border-radius:999px;
  background:var(--brand-soft);
  border:1px solid var(--border);
  font-size:.85rem;
}

.premium-cta{
  margin-top:.6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:600;
}

.galeria-grid{
  display:grid;
  gap:.6rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.galeria-grid--compacta{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.galeria-item img{
  width:100%;
  height:auto;
  border-radius:14px;
  border:1px solid var(--border);
}

/* =========================
   PARCEIROS / ANÚNCIOS (clean)
   ========================= */
.parceiros-slot{
  margin: 1.2rem 0;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:18px;
  padding:1rem;
  box-shadow: var(--shadow-sm);
}
.parceiros-head{ margin-bottom:.8rem; }
.parceiros-title{ margin:0; font-size:1.05rem; }
.parceiros-sub{ margin:.2rem 0 0; color:var(--muted); font-size:.92rem; }

.parceiros-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:.8rem;
}

/* card */
.parceiro-card{
  grid-column: span 12;
  position:relative;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:var(--surface-2);
}
@media (min-width: 768px){
  .parceiro-card{ grid-column: span 6; }
}
@media (min-width: 1100px){
  .parceiro-card{ grid-column: span 4; }
}

.parceiro-card--destaque{
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}

.parceiro-badge{
  position:absolute;
  top:.6rem;
  left:.6rem;
  font-size:.78rem;
  padding:.25rem .5rem;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  border:1px solid var(--border);
}

.parceiro-img img{
  width:100%;
  height:170px;
  object-fit:cover;
  display:block;
  background:var(--surface-3);
}

.parceiro-body{
  padding:.8rem .9rem 1rem;
}

.parceiro-nome{
  margin:0 0 .35rem;
  font-size:1rem;
}

.parceiro-desc{
  margin:0 0 .7rem;
  color:var(--muted);
  font-size:.95rem;
}

.parceiro-cta{
  display:inline-block;
  padding:.45rem .75rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  text-decoration:none;
}
.parceiro-cta:hover{
  border-color: var(--brand);
}

/* =========================
   PARCEIROS — RODAPÉ (logos)
   ========================= */
/* =========================
   PARCEIROS — RODAPÉ (logos)
   ========================= */

.parceiros-head--rodape{
  margin-bottom:.7rem;
}

.parceiros-logos{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  align-items:center;
}

/* 🔥 TAMANHO NOVO (maior e mais visível) */
.parceiro-logo{
  display:flex;
  align-items:center;
  justify-content:center;

  height:82px;            /* antes 52 */
  min-width:130px;        /* antes 92 */

  padding:.45rem .8rem;
  border-radius:16px;

  border:1px solid var(--border);
  background:var(--surface-2);
  text-decoration:none;
}

.parceiro-logo img{
  max-height:60px;        /* antes 40 */
  max-width:180px;

  width:auto;
  height:auto;

  object-fit:contain;
  display:block;
  filter:saturate(.95);
}

.parceiro-logo-text{
  font-size:.95rem;
  color:var(--text);
  font-weight:700;
  line-height:1.1;
  text-align:center;
  padding:.1rem .15rem;
}

.parceiro-logo--destaque{
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}

/* -------------------------
   Mobile
   ------------------------- */

@media (max-width:640px){

  .parceiros-logos{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:.6rem;
    align-items:stretch;
  }

  .parceiro-logo{
    min-width:0;
    width:100%;
    height:70px;          /* antes 48 */
  }

  .parceiro-logo img{
    max-height:58px;      /* antes 36 */
    max-width:160px;
  }
}

/* -------------------------
   Segurança layout
   ------------------------- */

.parceiros-slot,
.parceiro-card,
.parceiro-logo{
  max-width:100%;
  overflow:hidden;
}

.parceiro-desc,
.parceiro-nome{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* =====================================================
   FOOTER / RODAPÉ – AJUSTES FINOS MOBILE
   Deixa mais leve, compacto e elegante
   ===================================================== */

/* ===== Parceiros mais compacto ===== */
.parceiros-section{
  padding:1.2rem 1rem;
}

.parceiros-section h2{
  font-size:1.15rem;
}

.parceiros-section p{
  font-size:.95rem;
  opacity:.75;
}

/* cards menores */
.parceiros-section .parceiro-card,
.parceiros-section .parceiros-card{
  padding:.6rem;
}

.parceiros-section img{
  max-height:48px;
  width:auto;
}


/* ===== Botão "Consultar pedido" mais leve (secundário) ===== */
.btn-consultar-pedido,
.consultar-pedido,
.footer-pedido .btn{
  font-size:.95rem;
  padding:.55rem .95rem;
  box-shadow:none;
  border:1px solid var(--border, rgba(0,0,0,.12));
  background:#fff;
  font-weight:700;
}


/* ===== Links do rodapé mais discretos ===== */
.footer-links,
.footer-links a{
  font-size:.95rem;
  opacity:.85;
}

.footer-links a:hover{
  opacity:1;
}


/* ===== Ícones sociais menores e mais leves ===== */
.footer-redes a,
.social-icons a{
  width:38px;
  height:38px;
  font-size:.95rem;
}


/* ===== Espaçamento geral menor no mobile ===== */
@media (max-width:768px){

  .parceiros-section{
    padding:1rem .8rem;
  }

  .footer-links{
    margin-top:.8rem;
  }

  .footer-redes{
    margin-top:.8rem;
  }

  footer,
  .site-footer{
    padding-top:1.2rem;
    padding-bottom:1.2rem;
  } }


.parceiro-logo img {
    margin-right: 12px;
}

@media (max-width: 768px) {
    .parceiro-logo img {
        margin-right: 0;
    }
}


/* =========================
   SCROLL TO TOP — definitivo
   (cole no FINAL do CSS)
   ========================= */
#scrollTopBtn{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 52px;
  height: 52px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--brand-dark);

  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  font-weight: 900;
  cursor: pointer;

  z-index: 999999; /* acima de tudo */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

#scrollTopBtn.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

#scrollTopBtn:active{
  transform: translateY(1px);
}


/* ================================
   FOOTER LINKS — Organização limpa
   ================================ */

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  text-align: center;
  line-height: 1.6;
}

.footer-links a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

.footer-links a:hover {
  opacity: 0.7;
}

/* Faz o "Acompanhar pedido" ir para a linha de baixo */
.footer-links .footer-pedido {
  flex-basis: 100%;
  margin-top: 8px;
  font-size: 0.95rem;
  opacity: 0.85;
}

/* Remove o pontinho antes do item que quebra */
.footer-links .divider-last {
  display: none;
}

/* Mobile ajuste fino */
@media (max-width: 600px) {
  .footer-links {
    gap: 4px;
  }

  .footer-links .footer-pedido {
    margin-top: 10px;
    font-size: 0.9rem;
  }
}