:root{
  --cream:      #F7F2EE;
  --cream-2:    #FBF8F5;
  --red:        #B21E23;
  --red-dark:   #6E080D;
  --navy:       #242E6C;
  --teal:       #073C4C;
  --gold:       #C9A66B;
  --ink:        #241F1E;
  --ink-soft:   #6B615D;
  --white:      #FFFFFF;
  --line:       rgba(36,31,30,.10);

  --font-display: "Sora", "Segoe UI", sans-serif;
  --font-body:    "Inter", "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", monospace;

  --radius-card: 20px;
  --radius-sm:   10px;
  --shadow-soft: 0 20px 45px -20px rgba(110,8,13,.28);
  --shadow-lift: 0 30px 60px -25px rgba(36,31,30,.35);
}

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,.display-font{
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

a{ color: inherit; text-decoration: none; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
}
.eyebrow.on-dark{ color: var(--gold); }

.text-navy{ color: var(--navy); }
.text-teal{ color: var(--teal); }
.text-soft{ color: var(--ink-soft); }
.bg-cream{ background: var(--cream); }
.bg-cream-2{ background: var(--cream-2); }

/* ---------- Buttons ---------- */
.btn-lanad{
  background: var(--red);
  border: 1px solid var(--red);
  color: var(--white);
  font-weight: 600;
  padding: .72rem 1.5rem;
  border-radius: 999px;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-lanad:hover{
  background: var(--red-dark);
  border-color: var(--red-dark);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}
.btn-lanad-outline{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  padding: .72rem 1.5rem;
  border-radius: 999px;
  transition: border-color .15s ease, transform .15s ease;
}
.btn-lanad-outline:hover{
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-1px);
}

/* ---------- Navbar ---------- */
.navbar-lanad{
  background: rgba(247,242,238,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding-top: .85rem;
  padding-bottom: .85rem;
}
.navbar-lanad .navbar-brand img{ height: 34px; }
.navbar-lanad .nav-link{
  font-weight: 600;
  font-size: .93rem;
  color: var(--ink);
  padding: .5rem 1rem !important;
  position: relative;
}
.navbar-lanad .nav-link.active{ color: var(--red); }
.navbar-lanad .nav-link.active::after{
  content:"";
  position:absolute;
  left:1rem; right:1rem; bottom:.15rem;
  height:2px;
  background: var(--red);
  border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 4rem;
}
.hero-hex{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(178,30,35,.06), transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(36,46,108,.07), transparent 45%);
  pointer-events:none;
}
.hero h1{
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  line-height: 1.08;
  font-weight: 700;
}
.hero h1 .accent{ color: var(--red); }
.hero .lede{
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 34rem;
}

/* search field */
.search-form{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .4rem .4rem .4rem 1.25rem;
  box-shadow: var(--shadow-soft);
  max-width: 34rem;
}
.search-form input{
  border: 0;
  background: transparent;
  font-size: .98rem;
}
.search-form input:focus{ outline: none; box-shadow: none; }
.search-form button{ white-space: nowrap; }

/* versão compacta do search-form, usada dentro da navbar */
.search-form-nav{
  max-width: 320px;
  padding: .35rem .35rem .35rem .9rem;
  box-shadow: none;
}
.search-form-nav input{ font-size: .9rem; }
.btn-icon-search{
  background: none;
  border: 0;
  padding: 0;
  margin-right: .5rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  font-size: 1rem;
  transition: color .15s ease;
}
.btn-icon-search:hover{ color: var(--red); }

.hero-stats{
  display:flex; gap:1.75rem; flex-wrap:wrap;
  margin-top: 1.75rem;
}
.hero-stats .stat b{
  display:block; font-family: var(--font-display); font-size:1.15rem; color:var(--navy);
}
.hero-stats .stat span{ font-size:.8rem; color: var(--ink-soft); }

/* ---------- Card mockup (signature element) ---------- */
.card-stage{
  position: relative;
  min-height: 380px;
  display:flex; align-items:center; justify-content:center;
  perspective: 1400px;
}
.card-shadow-deck{
  position:absolute;
  width: 82%; max-width: 380px;
  aspect-ratio: 1.6/1;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--navy), var(--teal));
  transform: rotate(-11deg) translate(18px, 28px);
  opacity: .9;
}
.card-photo{
  position: relative;
  width: 82%; max-width: 380px;
  border-radius: var(--radius-card);
  overflow:hidden;
  transform: rotate(4deg);
  box-shadow: var(--shadow-lift);
  border: 1px solid rgba(255,255,255,.4);
  transition: transform .4s ease;
}
.card-stage:hover .card-photo{ transform: rotate(0deg) translateY(-6px); }
.card-photo img{ width:100%; display:block; }
.card-foil{
  position:absolute;
  width: 82%; max-width: 380px;
  aspect-ratio: 1.6/1;
  border-radius: var(--radius-card);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(4deg);
  background: linear-gradient(120deg, transparent 40%, rgba(201,166,107,.35) 50%, transparent 60%);
  pointer-events:none;
}

/* ---------- Sections ---------- */
.section{ padding: 4.5rem 0; }
.section-title{
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 700;
}
.hr-gold{
  width: 64px; height: 3px; border:0;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: .85rem 0 1.25rem;
  border-radius: 3px;
}

/* trust strip */
.trust-strip{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
}
.trust-strip .item{
  display:flex; align-items:center; gap:.6rem;
  font-size:.85rem; font-weight:600; color: var(--ink-soft);
}
.trust-strip .item i{ font-size:1.15rem; color: var(--red); }

/* how it works */
.step-card{
  height:100%;
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.step-num{
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .05em;
}
.step-card h3{ font-size:1.15rem; margin: .5rem 0 .5rem; }
.step-card p{ color: var(--ink-soft); font-size:.94rem; margin:0; }

/* category cards */
.cat-card{
  display:flex; flex-direction:column; gap: .85rem;
  height:100%;
  padding: 1.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(178,30,35,.25);
}
.cat-icon{
  width: 52px; height: 52px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--cream);
  color: var(--red);
  font-size: 1.4rem;
}
.cat-card h3{ font-size: 1.05rem; margin:0; }
.cat-card p{ font-size:.87rem; color: var(--ink-soft); margin:0; flex-grow:1; }
.cat-card .go{
  font-size:.82rem; font-weight:700; color: var(--navy);
  display:flex; align-items:center; gap:.35rem;
}
.cat-card:hover .go{ color: var(--red); }

/* partner cards */
.partner-card{
  height:100%;
  padding: 1.6rem 1.4rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display:flex; flex-direction:column; gap:.6rem;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.partner-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-soft); }

/* espaço maior e centralizado para a logo do parceiro */
.partner-logo-box{
  width: 84px; height: 84px;
  margin: 0 auto .35rem;
  border-radius: 18px;
  background: var(--cream);
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.partner-logo-box img{
  width:100%; height:100%;
  object-fit: contain;
  padding: 10px;
}
.partner-logo-fallback{
  font-family: var(--font-display);
  font-weight:700; font-size:1.35rem;
  color: var(--navy);
}
.partner-card-badge{
  position:absolute;
  top: .9rem; right: .9rem;
}
.partner-avatar{
  width: 48px; height:48px; border-radius: 50%;
  background: var(--navy);
  color:#fff; font-family: var(--font-display); font-weight:700;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  overflow: hidden;
}
.partner-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* dentro do avatar circular (navy/translúcido), o fallback de iniciais
   herda cor e tamanho do avatar em vez dos valores fixos pensados
   para o quadrado da logo (.partner-logo-box, fundo claro) */
.partner-avatar .partner-logo-fallback{
  color: inherit;
  font-size: inherit;
}
.badge-sub{
  display:inline-block;
  background: var(--cream);
  color: var(--teal);
  font-weight:600;
  font-size:.72rem;
  padding:.32rem .65rem;
  border-radius: 999px;
  width: fit-content;
  margin: 0 auto;
}
.badge-new{
  background: var(--red);
  color:#fff;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:.28rem .6rem;
  border-radius: 999px;
}
.partner-discount{
  font-weight:700; color: var(--red); font-size:.95rem;
}
.partner-meta{ font-size:.82rem; color: var(--ink-soft); }

/* recent partners rail */
.rail{
  display:flex; gap:1.1rem; overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x mandatory;
}
.rail::-webkit-scrollbar{ height:6px; }
.rail::-webkit-scrollbar-thumb{ background: var(--line); border-radius:4px; }
.rail .partner-card{ min-width: 260px; scroll-snap-align:start; }

/* CTA band */
.cta-band{
  background: linear-gradient(120deg, var(--red-dark), var(--red) 60%, var(--navy) 130%);
  border-radius: var(--radius-card);
  color:#fff;
  padding: 3rem;
  position:relative;
  overflow:hidden;
}
.cta-band::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 85% 20%, rgba(201,166,107,.35), transparent 45%);
}
.cta-band .content{ position:relative; z-index:1; }
.cta-band h2{ font-size: clamp(1.5rem,2.4vw,2rem); }
.cta-band p{ color: rgba(255,255,255,.85); }
.btn-cta-light{
  background:#fff; color: var(--red);
  font-weight:700; padding:.72rem 1.6rem; border-radius:999px;
  transition: transform .15s ease;
}
.btn-cta-light:hover{ transform: translateY(-1px); color: var(--red-dark); }

/* page header (categorias / parceiros) */
.page-header{
  background: linear-gradient(160deg, var(--red-dark), var(--red) 65%);
  color:#fff;
  padding: 3.5rem 0 3rem;
  position:relative;
  overflow:hidden;
}
.page-header::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 90% 0%, rgba(201,166,107,.3), transparent 50%);
}
.page-header .content{ position:relative; z-index:1; }
.breadcrumb-lanad{
  font-size:.82rem; color: rgba(255,255,255,.75);
}
.breadcrumb-lanad a{ color:#fff; font-weight:600; }
.breadcrumb-lanad a:hover{ text-decoration:underline; }

.btn-back-light{
  display:flex; align-items:center; gap:.45rem;
  flex-shrink:0;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.35);
  color:#fff;
  font-size:.85rem; font-weight:600;
  padding:.5rem 1rem;
  border-radius:999px;
  transition: background .15s ease, transform .15s ease;
}
.btn-back-light:hover{
  background: rgba(255,255,255,.24);
  color:#fff;
  transform: translateY(-1px);
}

/* subcategory combobox — pesquisável, escala de poucas a várias dezenas de itens.
   Um único componente atende a categoria de 6 e a de 21+ subcategorias:
   com poucos itens a busca é só um atalho opcional; com muitos, vira essencial. */
.subcat-combo{
  position: relative;
  min-width: 260px;
}
.subcat-combo-toggle{
  display:flex; align-items:center; gap:.6rem;
  width:100%;
  background: var(--white);
  border:1px solid var(--line);
  border-radius: 999px;
  padding: .6rem 1.1rem;
  font-size:.88rem; font-weight:600; color: var(--ink);
  transition: border-color .15s ease;
}
.subcat-combo-toggle i.bi-funnel{ color: var(--red); }
.subcat-combo-toggle:hover,
.subcat-combo-toggle[aria-expanded="true"]{ border-color: var(--red); }
.subcat-combo-toggle #subcat-label{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; text-align:left;
}
.subcat-combo-toggle .bi-chevron-down{ font-size:.75rem; color: var(--ink-soft); transition: transform .15s ease; }
.subcat-combo-toggle[aria-expanded="true"] .bi-chevron-down{ transform: rotate(180deg); }

.subcat-panel{
  position:absolute; top:calc(100% + 8px); left:0;
  width: 100%; min-width: 300px;
  background: var(--white);
  border:1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  padding: .65rem;
  z-index: 40;
}
.subcat-panel-search{
  display:flex; align-items:center; gap:.5rem;
  border:1px solid var(--line);
  border-radius: 999px;
  padding: .5rem .9rem;
  margin-bottom: .5rem;
}
.subcat-panel-search i{ color: var(--ink-soft); font-size:.85rem; }
.subcat-panel-search input{
  border:0; flex:1; font-size:.85rem; background:transparent;
}
.subcat-panel-search input:focus{ outline:none; box-shadow:none; }

.subcat-options{
  list-style:none; margin:0; padding:0;
  max-height: 280px; overflow-y:auto;
}
.subcat-options li{
  padding:.55rem .75rem;
  border-radius: 8px;
  font-size:.87rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.subcat-options li:hover,
.subcat-options li.active{ background: var(--cream); color: var(--red); }
.subcat-options li.selected{ font-weight:700; color: var(--red); }
.subcat-options li.selected::after{ content:"\f26e"; font-family:"bootstrap-icons"; font-size:.8rem; }
.subcat-options li .count{ font-size:.76rem; color: var(--ink-soft); }
.subcat-options li.empty{ cursor:default; color: var(--ink-soft); justify-content:center; }
.subcat-options li.empty:hover{ background:transparent; color: var(--ink-soft); }

/* botões de ação (WhatsApp / Como chegar) — no card e na página de detalhe */
.partner-actions{
  display:flex; gap:.5rem;
}
.partner-action-btn{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.55rem .7rem;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size:.8rem; font-weight:600;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.partner-action-btn:hover{
  transform: translateY(-1px);
  color: var(--white);
}
.partner-action-btn.action-whatsapp:hover{ background:#25D366; border-color:#25D366; }
.partner-action-btn.action-maps:hover{ background: var(--navy); border-color: var(--navy); }
.partner-action-btn.action-whatsapp i{ color:#25D366; }
.partner-action-btn.action-maps i{ color: var(--navy); }
.partner-action-btn:hover i{ color: var(--white); }

/* variante maior usada na página de detalhe do parceiro */
.partner-actions-lg .partner-action-btn{
  padding:.7rem 1.3rem;
  font-size:.9rem;
  flex: 0 0 auto;
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.35);
  color:#fff;
}
.partner-actions-lg .partner-action-btn i{ color:#fff; }
.partner-actions-lg .partner-action-btn:hover{ background: rgba(255,255,255,.28); }

/* multi-benefit affordances */
.partner-extra{
  font-size:.8rem; font-weight:600; color: var(--navy);
}
.benefit-card{
  height:100%;
  padding: 1.1rem 1.3rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display:flex; flex-direction:column; gap:.35rem;
}

/* larger avatar used on the partner detail page */
.partner-avatar-lg{
  width: 68px; height:68px; font-size:1.4rem;
  background: rgba(255,255,255,.18);
  color:#fff;
}

/* footer */
.footer-lanad{
  background: var(--ink);
  color: rgba(255,255,255,.75);
  padding: 3rem 0 1.5rem;
}
.footer-lanad h5{ color:#fff; font-size:1rem; }
.footer-lanad a{ color: rgba(255,255,255,.7); font-size:.9rem; }
.footer-lanad a:hover{ color: var(--gold); }
.footer-lanad .brand-mark img{ height: 30px; filter: brightness(0) invert(1); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 2rem; padding-top: 1.25rem;
  font-size:.8rem; color: rgba(255,255,255,.5);
}

/* empty state */
.empty-state{
  text-align:center;
  padding: 4rem 1rem;
  color: var(--ink-soft);
}
.empty-state i{ font-size:2.2rem; color: var(--gold); }

@media (max-width: 767.98px){
  .card-stage{ min-height: 280px; margin-top: 2.5rem; }
  .cta-band{ padding: 2rem; }
}