:root{
  --cream:#fbf1d6;
  --yellow:#ffb703;
  --orange:#fb8500;
  --ink:#5b3602;
  --ink-dim:#4b5160;
  --green:#1d7a2e;
  --line:#e7e3d5;
  --card:#fff;
  --radius:16px;
  --shadow:0 12px 30px rgba(0,0,0,.12);
  --wrap:clamp(16px,5vw,40px);
  --content:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(700px 300px at 10% -5%, rgba(255,183,3,.25), transparent 60%),
    radial-gradient(700px 300px at 100% 105%, rgba(251,133,0,.18), transparent 60%),
    var(--cream);
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height:1.5;
}

/* Util */
.wrap{max-width:var(--content); margin-inline:auto; padding-inline:var(--wrap)}

/* Topbar */
.topbar{
  position:sticky;
  top:0; z-index:50;
  background:linear-gradient(180deg,#ffd166,#fcbf49 50%,#f4a261);
  box-shadow:0 2px 12px rgba(0,0,0,.08)
}
.topbar .wrap{
  display:flex; 
  align-items:center;
  justify-content:space-between;
  min-height:calc(var(--brand-logo) + 24px); /* acompanha o tamanho do logo */
}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:#513501}
.brand img{height:var(--brand-logo); width:auto;} /* controla o tamanho do logo */
.brand span{font-weight:800; letter-spacing:.4px}
.menu a{text-decoration:none; color:#2f2f2f; font-weight:600; padding:.6rem 1rem; border-radius:999px}
.menu a:hover{background:rgba(255,255,255,.5)}

/* Hero com vídeo */
.hero{position:relative; min-height:80vh; display:grid; place-items:center; text-align:center; overflow:hidden}
.hero__bg{position:absolute; inset:0; z-index:-1}
.hero__bg video{width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.1)}
.hero__overlay{position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.25)); z-index:0}
.hero__content{position:relative; z-index:1; color:#fff; padding:40px 20px}
.hero h1{font-family:"Fraunces", Georgia, serif; font-size:clamp(42px,6vw,68px); margin:0 0 .25rem}
.hero p{margin:.25rem auto 1.25rem; max-width:820px; color:#f3f4f9}
.hero .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{
  text-decoration:none; font-weight:800; color:#fff; padding:.81rem 1.2rem; border-radius:12px;
  background:linear-gradient(90deg,#25d366,#0fb65a); box-shadow:0 10px 22px rgba(15,182,90,.35);
}
.btn--ghost{background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35)}

/* Seções */
.section{padding:36px 0}
.section__title{text-align:center; font-family:"Fraunces", Georgia, serif; font-size:clamp(30px,4.5vw,46px); margin:0 0 8px}
.section__desc{text-align:center; color:var(--ink-dim); margin:0 0 22px}

/* Busca */
.search{display:flex; justify-content:center}
.search input{
  width:min(760px,100%); padding:14px 18px; border-radius:999px; border:1px solid var(--line);
  background:#fff; box-shadow: inset 0 1px 0 rgba(0,0,0,.03); font-size:16px;
}

/* Faixa de preço */
.price-band{margin:28px 0 14px; display:flex; justify-content:center}
.price-band span{background:linear-gradient(90deg,var(--yellow),var(--orange)); color:#222; font-weight:800; letter-spacing:.4px; padding:12px 22px; border-radius:12px; box-shadow:var(--shadow)}

/* Cards */
.cards{list-style:none; padding:0; margin:0 0 24px; display:grid; gap:16px}
.card{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:18px;
  background:var(--card); border-radius:18px; padding:16px; border:1px solid #f1eee4; box-shadow:var(--shadow);
}
.card__txt{min-width:0}
.card__title{margin:0 0 .25rem; color:var(--green); font-weight:800; font-size:clamp(18px,2.3vw,22px)}
.card__desc{margin:0; color:#3e4553}
.card__meta{margin-top:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.badge{background:#f1fff4; color:#0f6a1e; font-weight:700; border:1px solid #ccebd4; padding:.35rem .6rem; border-radius:10px}
.card__media{width:96px; height:96px; border-radius:18px; overflow:hidden; box-shadow: 0 10px 20px rgba(0,0,0,.12)}
.card__media img{width:100%; height:100%; object-fit:cover; object-position:center}

/* Footer (centralizado) */
.footer{
  margin-top:48px;
  background:#fff7e1;
  border-top:1px solid var(--line);
}
.footer .wrap{
  padding:24px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
}
.footer__brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.footer__brand img{display:block}
.footer__brand p{margin:0; color:var(--ink-dim)}
.footer__links{
  margin:8px 0 0;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}
.footer__links a{text-decoration:none; color:#1f2a44; font-weight:600}
.footer__copy{
  margin:10px 0 0;
  color:#70747f;
  font-size:.95rem;
  text-align:center;
}

/* FAB Whats */
.fab-whats{position:fixed; right:18px; bottom:18px; z-index:60; display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:linear-gradient(180deg,#25d366,#17ae56); box-shadow: 0 12px 24px rgba(23,174,86,.35)}
.fab-whats svg{width:28px; fill:#fff}

/* Responsivo (geral) */
@media (max-width:560px){
  /* logo menor no mobile */
  :root{ --brand-logo:56px; }

  .menu{display:none}
  .card{grid-template-columns: 1fr 86px}
  .card__media{width:86px; height:86px; border-radius:14px}
}

/* ===========================
   CONTATO (centralizado)
   =========================== */
.page--contato .card{
  grid-template-columns: 1fr;
  text-align:center;
}
.page--contato .card__media{ display:none !important; }
.page--contato .card__meta{ justify-content:center; }

/* Horários (tags) */
.page--contato .hours{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.page--contato .tag{
  background:#fff3e0;
  color:#7a3d00;
  border:1px solid #ffd8a8;
  padding:.45rem .7rem;
  border-radius:12px;
  font-weight:700;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
}

/* Botão Instagram */
.btn--insta{
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color:#fff;
}
.btn--insta:hover{ filter:brightness(1.05); }

/* ===== Logo vazado na topbar (maior sem aumentar a barra) ===== */
:root{
  /* tamanho do logo (mude aqui) */
  --brand-logo: 156px;     /* desktop */
}

/* mantém a altura da barra fixa */
.topbar .wrap{ min-height:72px; }

/* o link da marca vira um container relativo e
   reservamos espaço à esquerda para o logo absoluto */
.brand{
  position: relative;
  padding-left: calc(var(--brand-logo) + 12px);
}

/* o logo fica absoluto, centralizado verticalmente
   e NÃO influi na altura da topbar */
.brand img{
  position: absolute;
  left: 0;
  top: 40px;
  transform: translateY(-50%);
  height: var(--brand-logo);
  width: auto;
  pointer-events: none; /* clique ainda acerta o <a> */
}

/* opcional: um leve brilho no logo para destacar no gradiente */
.brand img{ filter: drop-shadow(0 6px 14px rgba(0,0,0,.18)); }

/* Valor padrão (desktop): ajuste se quiser) */
:root { --brand-logo: 240px; }

/* Tablets e celulares grandes (≤768px) */
@media (max-width: 768px) {
  :root { --brand-logo: 192px; }
}

/* Celulares médios (≤560px) */
@media (max-width: 560px) {
  :root { --brand-logo: 112px; }
}

/* Celulares pequenos (≤480px) */
@media (max-width: 480px) {
  :root { --brand-logo: 64px; }
  /* Se usar logo “vazado” com position:absolute */
  .brand img { transform: translateY(-48%); }
}


/* ===== Logo maior no MOBILE ===== */
@media (max-width: 768px) {
  .topbar { padding-block: 8px; } /* aumenta a área do topo */
  .topbar .brand img {
    height: 150px !important;   /* ajuste o tamanho aqui (ex.: 72–100px) */
    width: auto;
    display: block;
  }

  /* Esconde o texto da marca só no mobile */
@media (max-width: 768px) {
  .topbar .brand span {
    display: none !important;
  }
}