/* =====================================================================
   TOKENS — camada 1: primitivos (valores brutos, sem significado de uso)
   ===================================================================== */
:root{
  /* cor — paleta bruta */
  --blue-900:#00065B;
  --blue-800:#0b1550;
  --blue-700:#1e5fd9;
  --blue-400:#4fa8ff;
  --blue-100:#e4edfd;
  --teal-500:#0fb8b0;
  --pink-500:#c3116f;
  --pink-50:#fdf1f7;
  --pink-100:#f3d3e6;
  --green-500:#1aa34a;
  --green-600:#0e8a3c;
  /* Verde oficial do WhatsApp. Diferente das outras primitivas, esta NÃO deve
     ser trocada por cliente no white-label: é marca de terceiro, e um botão de
     WhatsApp em outra cor deixa de ser reconhecível. */
  --green-whatsapp:#1daa61;
  --green-whatsapp-dark:#189553;
  --blue-600:#005eca;
  --blue-650:#004ea8;
  --ink-900:#101830;
  --slate-600:#33406b;
  --slate-500:#5c6785;
  --slate-300:#9aa4c2;
  --slate-200:#e4e8f3;
  --slate-100:#f3f5fb;
  --white:#ffffff;

  /* espaçamento — escala 4px */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;

  /* raio */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-2xl:22px;
  --radius-full:999px;

  /* tipografia */
  --font-display:'Instrument Sans', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

/* =====================================================================
   TOKENS — camada 2: semânticos (o que os componentes de fato usam)
   ===================================================================== */
:root{
  --color-primary:var(--blue-900);
  --color-primary-hover:#001080;
  --color-accent:var(--teal-500);
  --color-accent-2:var(--pink-500);
  --color-success:var(--green-500);
  --color-success-hover:var(--green-600);

  --color-ink:var(--ink-900);
  --color-muted:var(--slate-500);
  --color-border:var(--slate-200);
  --color-bg:var(--slate-100);
  --color-surface:var(--white);
  --color-surface-info:var(--blue-100);

  /* Faixa de ações do card (variante B). O fundo segue o primário, então
     acompanha o tema de cada cliente sozinho. O botão de e-mail precisa ser um
     token próprio: ele vive DENTRO dessa faixa, e herdar o primário o deixaria
     invisível. Ao trocar o tema de um cliente, este é o valor a revisar —
     escolha algo que contraste com --color-cta-band. */
  --color-cta-band:var(--color-primary);
  --color-cta-mail:var(--blue-600);
  --color-cta-mail-hover:var(--blue-650);
  --color-cta-wpp:var(--green-whatsapp);
  --color-cta-wpp-hover:var(--green-whatsapp-dark);
  --color-cta-text:var(--white);

  --gap-grid:var(--space-5);
  --gap-chip:var(--space-2);
  --radius-card:var(--radius-2xl);
  --radius-btn:var(--radius-full);
  --radius-input:var(--radius-full);

  --container-md:1040px;
  --container-lg:1160px;
  --container-xl:1400px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  padding-bottom:88px;
}
h1,h2,h3,.display{font-family:var(--font-display);}
a{color:inherit;}
img{max-width:100%;display:block;}

/* ---------- TOPBAR ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:30;
  height:64px; padding:0 var(--space-5);
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg, rgba(6,11,32,.5) 0%, rgba(6,11,32,.05) 100%);
  transition:background .3s ease;
}
.topbar.scrolled{background:var(--color-primary);}
.brand{display:flex;align-items:center;gap:var(--space-3);}
.brand-badge{width:36px;height:36px;border-radius:var(--radius-full);flex-shrink:0;}
.brand-text{
  font-family:var(--font-display);
  font-size:11px; line-height:1.35; letter-spacing:.04em; font-weight:700;
  color:#e7ecfb;
}
.topbar-actions{display:flex;gap:var(--space-2);}
.pdf-btn{
  font-size:12px;font-weight:600;color:#fff;cursor:pointer;font-family:var(--font-body);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-btn);text-decoration:none;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
}
.pdf-btn:hover{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4); transform:translateY(-1px);}
.catalog-menu-button{min-width:76px;justify-content:center;}
body.catalog-menu-open{overflow:hidden;}
.catalog-drawer-overlay{
  position:fixed;inset:0;z-index:78;background:rgba(5,10,30,.58);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease;
}
.catalog-drawer-overlay.show{opacity:1;visibility:visible;}
.catalog-drawer{
  position:fixed;z-index:79;top:0;right:0;bottom:0;width:min(88vw,390px);
  padding:calc(22px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  background:#fff;box-shadow:-24px 0 56px rgba(5,10,30,.24);box-sizing:border-box;
  transform:translateX(104%);visibility:hidden;transition:transform .3s cubic-bezier(.22,.8,.25,1),visibility .3s ease;
}
.catalog-drawer.show{transform:none;visibility:visible;}
.catalog-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 2px 22px;border-bottom:1px solid var(--color-border);}
.catalog-drawer-head small{display:block;color:var(--color-accent);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px;}
.catalog-drawer-head h2{font-size:20px;color:var(--color-primary);margin:0;}
.catalog-drawer-close{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border:0;border-radius:50%;background:var(--color-bg);color:var(--color-primary);cursor:pointer;}
.catalog-drawer-close svg{width:18px;height:18px;}
.catalog-drawer-nav{display:grid;padding-top:10px;}
.catalog-drawer-nav>a,.catalog-drawer-nav>button{
  width:100%;display:flex;align-items:center;gap:15px;padding:15px 8px;border:0;border-bottom:1px solid var(--color-border);
  background:transparent;color:var(--color-ink);font-family:var(--font-body);text-align:left;text-decoration:none;cursor:pointer;box-sizing:border-box;
  transition:color .18s ease,background .18s ease,padding .18s ease;
}
.catalog-drawer-nav>a:hover,.catalog-drawer-nav>button:hover{color:var(--color-primary);background:var(--color-bg);padding-left:12px;}
.catalog-drawer-nav .install-attention{color:var(--color-primary);background:var(--color-bg);box-shadow:inset 3px 0 0 var(--color-accent);padding-left:12px;}
.catalog-drawer-nav svg{width:23px;height:23px;flex:0 0 23px;color:var(--color-primary);}
.catalog-drawer-nav span{display:grid;gap:3px;}
.catalog-drawer-nav b{font-size:14px;}
.catalog-drawer-nav small{font-size:11px;color:var(--color-muted);font-weight:500;}
.install-dialog{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(5,10,30,.65);}
.install-dialog[hidden]{display:none;}
.install-dialog-card{position:relative;width:min(100%,400px);padding:28px;border-radius:var(--radius-2xl);background:#fff;box-shadow:0 24px 70px rgba(5,10,30,.35);}
.install-dialog-card>.catalog-drawer-close{position:absolute;right:16px;top:16px;}
.install-dialog-card h2{margin:0 48px 10px 0;color:var(--color-primary);font-size:20px;}
.install-dialog-card p{margin:0 0 22px;color:var(--color-muted);font-size:14px;line-height:1.6;}
.install-dialog-ok{width:100%;padding:12px;border:0;border-radius:var(--radius-btn);background:var(--color-primary);color:#fff;font:700 14px var(--font-body);cursor:pointer;}

/* Tela cheia é conveniência, não função essencial. Fica escondido por padrão;
   o JS marca .fs-disponivel só onde o navegador suporta (nunca no iOS), e
   mesmo assim ele só aparece a partir de 768px — em celular a barra do topo
   precisa do espaço para o nome da marca respirar ao lado do logotipo. */
.fs-btn{display:none;}
@media (min-width:768px){
  .fs-btn.fs-disponivel{display:flex;}
}

/* ---------- HERO ---------- */
.hero-collapse{
  position:relative;
  background:var(--color-primary);
  overflow:hidden;
}
.hero-collapse::before{
  content:"";
  position:absolute; top:0; bottom:0; left:50%;
  transform:translateX(-50%);
  width:100%; max-width:var(--container-xl);
  background:
    linear-gradient(180deg, rgba(8,14,38,.25) 0%, rgba(8,14,38,.75) 70%, var(--color-primary) 100%),
    url('../img/brand/bg-hero.jpg');
  background-repeat:no-repeat;
  background-size:cover; background-position:center top;
}
.hero-inner{position:relative; z-index:1; padding:82px var(--space-5) var(--space-6); will-change:opacity,filter;}
.hero-collapse.force-hide{display:none;}

.catalog-banner{
  display:block; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 8px 24px rgba(5,10,30,.35);
  width:100%; max-width:640px; margin:0 auto;
}
.catalog-banner img{width:100%; display:block;}

.accred-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  margin-top:var(--space-4);
}
.accred-text{font-size:12.5px; line-height:1.6; color:#c3cdec;}
.accred-text b{color:#fff;}
.accred-seals{display:flex; gap:6px; flex-shrink:0;}
.accred-seals img{width:38px; height:auto;}

/* ---------- CONTENT SHEET ---------- */
.content-sheet{
  background:
    linear-gradient(180deg, #fff 0%, #fff 90px, rgba(255,255,255,.55) 170px, rgba(255,255,255,0) 260px),
    url('../img/brand/pattern-diamond.jpg');
  background-repeat:no-repeat, repeat;
  background-size:100% 100%, 340px auto;
  border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;
  margin-top:-16px;
  position:relative; z-index:1;
  padding:var(--space-6) var(--space-5) var(--space-2);
}
.sheet-top-row{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom: 20px;}
.sheet-top h1{font-size:22px; margin:0 0 4px; color:var(--color-ink); font-weight:700;}
.sheet-top p{font-size:14.5px; color:var(--color-muted); margin:0 0 var(--space-4);}

.proposal-inline-btn{
  flex-shrink:0; border:none; background:var(--color-success); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:12px;
  padding:9px 16px; border-radius:var(--radius-btn); cursor:pointer; white-space:nowrap;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.proposal-inline-btn:hover{background:var(--color-success-hover); transform:translateY(-1px);}
.proposal-inline-btn:active{transform:translateY(0) scale(.96);}
.proposal-inline-btn:focus-visible{outline:2px solid #4fa8ff; outline-offset:2px;}

/* Busca fixa ao rolar: em telas pequenas a lista é longa e voltar ao topo para
   buscar dá muito atrito. A busca gruda logo abaixo da topbar fixa (64px) e
   sangra até as bordas do sheet (margem negativa = ao padding lateral do
   .content-sheet) para o conteúdo não vazar por baixo ao rolar.

   Em repouso o fundo é transparente; só quando "gruda" no topo (classe
   .is-stuck, disparada por um sentinela via IntersectionObserver no JS) ele
   vira branco sólido, com transição suave. A sombra acompanha. */
.search-sentinel{height:1px; margin-bottom:-1px;} /* 1px real p/ o observer, sem mexer no layout */
.search-sticky{
  position:sticky; top:64px; z-index:15;
  background:transparent; box-shadow:none;
  margin:0 calc(-1 * var(--space-5));
  padding:var(--space-3) var(--space-5);
  transition:background-color .25s ease, box-shadow .25s ease;
}
@media (min-width:768px){
  .search-sticky{margin-left:0; margin-right:0;}
}
.search-sticky.is-stuck{
  background:var(--color-surface);
  box-shadow:0 8px 16px -12px rgba(6,11,32,.4);
}

.search-row{
  display:flex; align-items:center; gap:var(--space-2);
  background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-input);
  padding:6px 6px 6px var(--space-4);
}
.search-row svg{flex-shrink:0; color:var(--color-muted);}
.search-row input{
  flex:1; border:none; background:transparent; outline:none;
  font-size:15px; font-family:var(--font-body); color:var(--color-ink); min-width:0;
}
.search-row input::placeholder{color:var(--slate-300);}
.search-row button{
  flex-shrink:0; border:none; background:var(--color-primary); color:#fff;
  font-family:var(--font-body); font-size:12.5px; font-weight:600;
  padding:10px var(--space-4); border-radius:var(--radius-btn); cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.search-row button:hover{background:var(--color-primary-hover); transform:translateY(-1px);}

.interest-banner{
  margin:var(--space-4) 0 0; padding:var(--space-3) var(--space-4); border-radius:var(--radius-md);
  background:linear-gradient(90deg,#e9f2ff,#eafbf9);
  border:1px solid #cfe3ff; font-size:13.5px; color:#1a3a7a;
  display:none; align-items:center; gap:var(--space-2);
}
.interest-banner.show{display:flex;}

/* ---------- CHIPS ---------- */
.chips{
  display:flex; gap:var(--gap-chip); overflow-x:auto; padding:var(--space-4) 0 4px;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none;}
/* pega-e-arrasta com o mouse no desktop (o JS habilitarScrollHorizontal cuida
   do movimento; aqui só o feedback do cursor) */
.chips.arrastando, .segment-filters.arrastando{cursor:grabbing; user-select:none;}
.chip{
  flex-shrink:0;
  font-family:var(--font-display);
  font-size:12.5px; font-weight:600;
  padding:8px 15px; border-radius:var(--radius-btn);
  background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-muted);
  cursor:pointer; white-space:nowrap;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover{border-color:var(--color-primary); color:var(--color-primary);}
.chip.active{background:var(--color-primary); color:#fff; border-color:var(--color-primary);}
.chip.active:hover{color:#fff;}

.segment-filters{
  display:flex; gap:var(--gap-chip); overflow-x:auto; padding:4px 0 6px;
  scrollbar-width:none; border-top:1px dashed var(--color-border); margin-top:4px; padding-top:var(--space-4);
}
.segment-filters::-webkit-scrollbar{display:none;}
.segment-chip{
  flex-shrink:0; font-family:var(--font-body); font-weight:600;
  font-size:12px; padding:8px 15px; border-radius:var(--radius-btn); cursor:pointer; white-space:nowrap;
  background:var(--pink-50); border:1px solid var(--pink-100); color:var(--color-accent-2);
  transition:background .18s ease, color .18s ease;
}
.segment-chip:hover{background:#fbe3ef;}
.segment-chip.active{background:var(--color-accent-2); color:#fff; border-color:var(--color-accent-2);}

/* ---------- GRID DE PRODUTOS ---------- */
/* contagem de itens do filtro atual, entre os chips e a grade */
.result-count{
  font-size:12px; font-weight:600; color:var(--color-muted);
  padding:var(--space-4) 0 var(--space-4);
}

.grid{
  display:grid; grid-template-columns:1fr;
  gap:var(--gap-grid); padding:var(--space-4) 0 var(--space-5);
}
@media (min-width:425px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:900px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (min-width:1280px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (min-width:1600px){ .grid{grid-template-columns:repeat(5,minmax(0,1fr));} }
@media (min-width:1920px){ .grid{grid-template-columns:repeat(6,1fr);} }

/* Entre 425 e 767px os cards já dividem a tela em duas colunas. Compactamos
   apenas seu conteúdo interno para preservar leitura e impedir estouros. */
@media (min-width:425px) and (max-width:767px){
  .grid{gap:10px;}
  .card-photo{min-height:160px;padding-inline:8px;}
  .card-photo-brand{height:48px;margin-bottom:4px;}
  .card-photo .card-photo-brand img{max-width:100px;}
  .card-photo img{max-height:150px;}
  .card-photo .carousel-track img{height:150px;padding-inline:3%;}
  .card-info{margin:8px;padding:12px;}
  .card-brand{font-size:13px;}
  .card-title{font-size:13px;margin-bottom:8px;}
  .card-desc{font-size:12px;line-height:1.45;margin-bottom:12px;}
  .desc-details a{font-size:12px;}
  .card-cta{margin:12px -12px 0;padding:10px 8px 12px;}
  .card-cta-title{font-size:12px;margin-bottom:8px;}
  .card-cta-btns{flex-direction:column;gap:6px;}
  .btn-cta{min-height:34px;font-size:11px;}
}

.card{
  border-radius:var(--radius-card); overflow:hidden;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 4px 18px rgba(30,45,90,.06);
  transition:box-shadow .15s ease;
  display:flex; flex-direction:column; /* card-info sempre ancorado embaixo */
}
.card.highlight{border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(15,184,176,.18);}

.card-photo{
  background:rgb(233 236 243 / 0%);
  padding:var(--space-2) var(--space-4) 4px;
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  min-height:200px; justify-content:center;
  flex:1; /* empurra o card-info pro fim do card */
}
.card-photo-brand{
  width:100%; height:70px; margin-bottom:var(--space-2);
  display:flex; align-items:center; justify-content:center;
}
.card-photo-brand:empty{display:none;} /* sem logo cadastrado — não deixa espaço vazio */
.card-photo .card-photo-brand img{max-height:100%; max-width:140px; width:auto; object-fit:contain;}
.card-photo img{max-width:88%; max-height:220px; object-fit:contain;}
.card-photo .carousel{width:100%;}
/* cada slide ocupa 100% da largura do carrossel (senão o translateX de 100%
   por imagem não cai centralizado); o recuo lateral que antes vinha do
   max-width:88% agora é padding, e o object-fit:contain centraliza a imagem. */
.card-photo .carousel-track img{
  flex:0 0 100%; width:100%; max-width:100%; box-sizing:border-box;
  height:220px; object-fit:contain; object-position:center; padding:0 6%; margin:0;
}

/* ---------- CARROSSEL (reutilizado pelo card de produto e pelo banner) ---------- */
.carousel{position:relative; width:100%; overflow:hidden;}
.carousel-track{display:flex; width:100%; touch-action:pan-y;}
.carousel-track img{flex:0 0 100%; width:100%; display:block; user-select:none; -webkit-user-drag:none;}
.carousel-bullets{
  position:absolute; left:0; right:0; bottom:8px; z-index:2;
  display:flex; justify-content:center; align-items:center; gap:6px;
}
.bullet{
  width:6px; height:6px; border-radius:var(--radius-full);
  background:rgba(16,24,48,.28); cursor:pointer;
  transition:background .15s ease, width .15s ease;
}
.bullet.active{background:var(--color-primary); width:16px;}
.catalog-banner .bullet{background:rgba(255,255,255,.5);}
.catalog-banner .bullet.active{background:#fff; width:16px;}

.card-info{
  background:var(--color-surface-info);
  margin:var(--space-4); padding:var(--space-5) var(--space-5) var(--space-5);
  border-radius:var(--radius-lg);
  box-shadow:0 6px 16px rgba(20,40,110,.1);
  margin-top:0; /* cola no fim, já que card-photo flex:1 empurra */
}
.card-brand{font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--color-primary); margin-bottom:4px;}
.card-title{font-size:17px; line-height:1.4; color:var(--slate-600); margin-bottom:var(--space-4);}
.card-desc{
  font-size:16px; line-height:1.65; color:var(--slate-600);
  margin-bottom:var(--space-6); cursor:pointer;
}
.card-desc p{margin:0 0 var(--space-3);}
.card-desc p:last-child{margin-bottom:0;}
.card-desc ul, .card-desc ol{margin:var(--space-2) 0 var(--space-3); padding-left:20px;}
.card-desc li{margin-bottom:5px;}
.card-desc a{color:var(--color-primary); font-weight:600; text-decoration:underline;}
.desc-toggle{color:var(--color-primary); font-weight:700; white-space:nowrap;}
.desc-details{margin-top:16px; margin-bottom:4px;}
.desc-details a{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--color-primary); font-weight:600; font-size:15px;
  text-decoration:none;
}
.desc-details a:hover{text-decoration:underline;}
.desc-details svg{width:15px; height:15px; flex-shrink:0;}
.btn-wpp{
  width:100%; text-align:center; font-size:14.5px; font-weight:600;
  background:var(--color-primary); color:#fff; padding:13px 10px; border-radius:var(--radius-btn);
  text-decoration:none; display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  transition:background .18s ease, transform .18s ease;
}
.btn-wpp:hover{background:var(--color-primary-hover); transform:translateY(-1px);}
.btn-wpp svg{width:15px;height:15px;}

/* ---------- CARD-INFO VARIANTE B — faixa de ações com 2 botões ----------
   Convive com a variante A (o .btn-wpp acima), que fica intacta. A escolha
   é feita em config/client.json → "cardInfo"; a B é o padrão e só entra
   quando existe formulário na página.

   A faixa azul precisa sangrar até a borda do bloco e herdar o arredondamento
   de baixo: por isso o .card-info perde o padding inferior, ganha
   overflow:hidden, e a faixa usa margem negativa igual ao padding lateral. */
.card-info--acoes{padding-bottom:0; overflow:hidden;}
.card-info--acoes .card-desc{margin-bottom:0;}

.card-cta{
  margin:var(--space-5) calc(-1 * var(--space-5)) 0;
  padding:var(--space-4) var(--space-4) var(--space-5);
  background:var(--color-cta-band);
  text-align:center;
}
.card-cta-title{
  font-size:14.5px; font-weight:600; color:var(--color-cta-text);
  margin-bottom:var(--space-3);
}
.card-cta-btns{display:flex; gap:var(--space-2);}

/* base compartilhada pelos dois botões — também usada no modal */
.btn-cta{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:38px;
  padding:2px var(--space-2); /* 2px foge da escala de 4px de propósito: quem
                                 define a altura é o min-height, e 4px aqui
                                 empurraria o botão para além dos 38px */
  border-radius:var(--radius-btn);
  font-family:var(--font-body); font-size:14px; font-weight:600; line-height:1.2;
  color:var(--color-cta-text); text-decoration:none; white-space:nowrap;
  border:none; cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.btn-cta svg{width:20px; height:20px; flex-shrink:0;}
.btn-cta:hover{transform:translateY(-1px);}
.btn-cta--wpp{background:var(--color-cta-wpp);}
.btn-cta--wpp:hover{background:var(--color-cta-wpp-hover);}
.btn-cta--mail{background:var(--color-cta-mail);}
.btn-cta--mail:hover{background:var(--color-cta-mail-hover);}

/* Em telas estreitas "WhatsApp" + ícone estouram os ~104px que sobram por
   botão. Encolhe ícone, fonte e respiros em vez de deixar quebrar. */
@media (max-width:400px){
  .card-cta{padding-left:var(--space-3); padding-right:var(--space-3);}
  .btn-cta{font-size:13px; gap:var(--space-1); padding:2px var(--space-1);}
  .btn-cta svg{width:18px; height:18px;}
}

/* No modal não existe faixa azul: rótulo em negrito e os botões ao lado,
   que é o padrão de ação em diálogo. */
.modal-cta{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--space-3); margin-top:var(--space-5);
}
.modal-cta-label{font-size:14.5px; font-weight:700; color:var(--color-primary);}
.modal-cta .btn-cta{flex:0 0 auto; padding:2px 18px;}

/* ---------- BOTÃO FLUTUANTE "SOLICITAR PROPOSTA" ---------- */
.proposal-fab{
  position:fixed; left:50%; bottom:120px; transform:translateX(-50%) translateY(20px);
  z-index:19;
  background:var(--color-success); color:#fff; border:none;
  font-family:var(--font-body); font-weight:700; font-size:14px;
  padding:14px 28px; border-radius:var(--radius-btn); cursor:pointer;
  white-space:nowrap; max-width:calc(100vw - 32px);
  box-shadow:0 10px 26px rgba(20,140,60,.35);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .18s ease;
}
.proposal-fab.show{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.proposal-fab:hover{background:var(--color-success-hover);}

/* ---------- MÁSCARA GRADIENTE ATRÁS DO DOCK ---------- */
.bottom-mask{
  position:fixed; left:0; right:0; bottom:0; height:130px; z-index:15;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 100%);
  pointer-events:none;opacity:1;transition:opacity .22s ease;
}

/* ---------- DOCK FLUTUANTE (liquid glass) ---------- */
.stickybar{
  position:fixed; bottom:14px; left:50%; transform:translateX(-50%) translateY(0); z-index:20;
  background:linear-gradient(135deg, #16244f 0%, #060a1c 100%);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:34px;
  display:flex; align-items:center; gap:4px;
  padding:10px 14px; box-shadow:0 16px 40px rgba(4,8,26,.5), inset 0 1px 0 rgba(255,255,255,.14);
  max-width:calc(100% - 28px);
  opacity:1; pointer-events:auto;
  transition:opacity .25s ease, transform .25s ease;
}
/* escondido enquanto a pessoa preenche o formulário de proposta, pra não atrapalhar */
.stickybar.hide-on-form{opacity:0; pointer-events:none; transform:translateX(-50%) translateY(24px);}

@media (max-width:768px){
  .stickybar.scroll-hidden{
    opacity:0;pointer-events:none;
    transform:translateX(-50%) translateY(calc(100% + env(safe-area-inset-bottom) + 32px));
  }
  .proposal-fab.scroll-hidden{
    opacity:0;pointer-events:none;
    transform:translateX(-50%) translateY(calc(100% + env(safe-area-inset-bottom) + 32px));
  }
  .bottom-mask.scroll-hidden{opacity:0;}
}

.dock-item{
  border:none; font-family:var(--font-display); font-size:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; text-decoration:none;
  padding:10px 20px; border-radius:22px; white-space:nowrap; color:#fff; background:transparent;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.dock-item svg{width:24px;height:24px;flex-shrink:0;}
.dock-item:hover{background:radial-gradient(120% 140% at 30% 0%, rgba(70,110,220,.35), rgba(10,16,42,.5) 70%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 3px rgba(255,255,255,.2), 0 0 20px rgba(30,95,217,.25); transform:translateY(-1px);}
.dock-item:active{background:radial-gradient(120% 140% at 30% 0%, rgba(70,110,220,.5), rgba(10,16,42,.55) 70%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), inset 0 1px 3px rgba(255,255,255,.25), 0 0 20px rgba(30,95,217,.3); transform:translateY(0) scale(.95);}
.dock-item:focus-visible{outline:2px solid #4fa8ff; outline-offset:2px;}
.dock-item:disabled, .dock-item[aria-disabled="true"]{opacity:.35; cursor:not-allowed; pointer-events:none;}
.proposal-dock-item{display:none;}

/* O dock precisa caber integralmente até em 320px, sem cortar Compartilhar. */
@media (max-width:400px){
  .stickybar{width:calc(100% - 20px);max-width:none;padding:8px 6px;gap:0;}
  .dock-item{flex:1 1 0;min-width:0;padding:8px 2px;font-size:9px;gap:5px;}
  .dock-item svg{width:22px;height:22px;}
  .proposal-fab{padding:12px 22px;font-size:13px;}
}

/* Acima de 1024px o dock deixa de ser uma barra e vira quatro ações independentes,
   empilhadas no canto inferior direito. A ordem visual, de baixo para cima, é
   WhatsApp, solicitar informações, salvar contato e compartilhar. */
@media (min-width:1025px){
  .stickybar{
    left:auto;right:24px;bottom:24px;transform:none;flex-direction:column-reverse;gap:12px;
    padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .stickybar.hide-on-form{transform:translateX(20px);}
  .dock-item{
    position:relative;width:58px;height:58px;min-width:58px;padding:0;border-radius:50%;font-size:0;gap:0;
    background:linear-gradient(135deg,#16244f 0%,#060a1c 100%);
    border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 28px rgba(4,8,26,.34),inset 0 1px 0 rgba(255,255,255,.14);
  }
  .proposal-dock-item{display:flex;}
  .proposal-fab{display:none;}
  .dock-item svg{width:25px;height:25px;}
  .dock-item::before{
    content:attr(data-label);position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(5px);
    padding:7px 10px;border-radius:8px;background:#060a1c;color:#fff;font:600 11px var(--font-body);white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
  }
  .dock-item:hover::before,.dock-item:focus-visible::before{opacity:1;transform:translateY(-50%);}
  .bottom-mask{display:none;}
}

/* ---------- FOOTER ---------- */
footer{padding:var(--space-7) var(--space-5) 120px; color:var(--color-muted);}
.footer-address{
  text-align:center; font-size:15.5px; line-height:1.6; color:var(--slate-600); font-weight:500;
  margin-bottom:var(--space-5); width:100%;
}
.footer-address a{color:var(--blue-700); text-decoration:none;}
.footer-social{
  display:flex; justify-content:center; gap:var(--space-4); margin-bottom:var(--space-4);
}
.footer-social a{
  width:46px; height:46px; border-radius:var(--radius-full); background:var(--color-bg); border:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:center; color:var(--color-primary);
  transition:background .18s ease, transform .18s ease;
}
.footer-social a:hover{background:var(--color-primary); color:#fff; transform:translateY(-2px);}
.footer-social svg{width:21px;height:21px;}
.footer-copy{text-align:center; font-size:11px;}
.footer-legal{text-align:center; font-size:11px; margin-top:4px;}
.footer-legal a{color:var(--color-muted); text-decoration:underline;}
.footer-legal a:hover{color:var(--color-primary);}
.footer-credit{
  text-align:center; font-size:11.5px; color:var(--color-muted);
  margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--color-border);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.footer-credit-line{display:flex; align-items:center; justify-content:center; gap:6px;}
.footer-credit a{
  display:inline-flex; align-items:center; gap:6px; color:var(--color-ink); font-weight:600; text-decoration:none;
}
.footer-credit img{height:16px; width:auto;}
.footer-credit a:hover{color:var(--blue-700);}

/* ---------- FULLSCREEN ---------- */
.exit-fullscreen-btn{
  display:none;
  position:fixed; top:14px; right:14px; z-index:50;
  width:38px;height:38px;border-radius:var(--radius-full);
  background:rgba(10,18,48,.75); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25); color:#fff;
  align-items:center;justify-content:center;cursor:pointer;
}
.exit-fullscreen-btn svg{width:17px;height:17px;}
:fullscreen .exit-fullscreen-btn{display:flex;}
:-webkit-full-screen .exit-fullscreen-btn{display:flex;}

/* ---------- TOAST ---------- */
.toast{
  position:fixed; bottom:96px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--color-primary); color:#fff; font-size:12.5px; padding:10px 18px; border-radius:var(--radius-btn);
  opacity:0; pointer-events:none; transition:all .25s ease; z-index:45; white-space:nowrap;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- BOTTOM SHEET (genérico / vCard) ---------- */
.sheet-overlay{
  position:fixed; inset:0; background:rgba(8,14,38,.55);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:40;
}
.sheet-overlay.show{opacity:1; pointer-events:auto;}
.sheet{
  position:fixed; left:50%; bottom:0; z-index:41;
  background:#fff; border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;
  padding:10px var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
  max-width:420px; width:100%;
  transform:translate(-50%,100%); transition:transform .28s cubic-bezier(.2,.9,.3,1);
}
.sheet.show{transform:translate(-50%,0);}
.sheet-handle{width:36px;height:4px;background:var(--color-border);border-radius:3px;margin:8px auto 16px;}

.vcard-card{
  background:linear-gradient(160deg,#1c3fd6,#12227a);
  border-radius:var(--radius-lg); padding:var(--space-6) var(--space-4) var(--space-4);
  display:flex; flex-direction:column; align-items:center;
}
.vcard-avatar{
  width:74px;height:74px;border-radius:var(--radius-full);overflow:hidden;
  border:3px solid rgba(255,255,255,.9); margin-bottom:var(--space-4);
  background:#fff;
}
.vcard-avatar img{width:100%;height:100%;object-fit:cover;}
.vcard-info{width:100%; background:#dfe9fd; border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5);}
.vcard-info h3{margin:0 0 2px;font-size:16px;color:var(--color-primary);font-family:var(--font-display);}
.vcard-info .vcard-sub{font-size:12.5px;font-weight:600;color:var(--blue-700);margin:0 0 12px;}
.vcard-info p{font-size:14px;color:#1a2550;margin:0 0 10px;line-height:1.5;}
.vcard-info p:last-child{margin-bottom:0;}
.vcard-save-btn{
  display:flex; align-items:center; justify-content:center; gap:var(--space-2);
  width:100%; margin-top:var(--space-4); padding:15px; border-radius:var(--radius-lg);
  background:var(--color-primary); color:#fff; font-weight:600; font-size:14px;
  text-decoration:none; transition:background .18s ease, transform .18s ease;
}
.vcard-save-btn:hover{background:var(--color-primary-hover); transform:translateY(-1px);}

/* ---------- PAGINAÇÃO ---------- */
.load-more-wrap{display:flex; justify-content:center; padding:8px 0 26px;}
.load-more-btn{
  border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-primary);
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  padding:12px 26px; border-radius:var(--radius-btn); cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.load-more-btn:hover{background:var(--color-primary); color:#fff; transform:translateY(-1px);}
.end-of-list{font-size:12.5px; color:var(--color-muted); text-align:center; opacity:0; transition:opacity .4s ease;}
.end-of-list.show{opacity:1;}

/* ---------- PÁGINA DE PROPOSTA (formulário) ---------- */
.proposal-page{display:none;}
.proposal-page.show{display:block;}
/* quando o hero está escondido (form de proposta), o conteúdo perde o respiro que o hero dava pro topbar fixo — repõe aqui */
.hero-collapse.force-hide ~ .proposal-page.show{padding-top:84px;}
.catalog-page.hide{display:none;}

/* O formulário fica com largura limitada e centralizado. Sem isso ele acompanha
   a largura do .content-sheet (que chega a ~1960px em monitores largos) e os
   campos esticam pela tela inteira, ruins de preencher e feios. */
#proposalFormWrap, .form-success, .proposal-breadcrumb{
  max-width:620px; margin-left:auto; margin-right:auto;
}

.proposal-breadcrumb{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  margin-bottom:var(--space-4); flex-wrap:wrap;
}
.proposal-breadcrumb .crumb{font-size:12.5px; color:var(--color-muted);}
.proposal-breadcrumb .crumb a{color:var(--blue-700); text-decoration:none; cursor:pointer;}
.btn-back-catalog{
  background:var(--color-primary); color:#fff; border:none; font-family:var(--font-body);
  font-weight:600; font-size:12.5px; padding:10px 18px; border-radius:var(--radius-btn); cursor:pointer;
  display:flex; align-items:center; gap:6px;
  transition:background .18s ease;
}
.btn-back-catalog:hover{background:var(--color-primary-hover);}

.form-field{margin-bottom:var(--space-5);}
.form-field label{display:block; font-size:14px; font-weight:600; color:var(--color-ink); margin-bottom:var(--space-2);}
.form-field label .req{color:var(--color-accent-2);}
.form-field input[type=text], .form-field input[type=email], .form-field input[type=tel], .form-field select, .form-field textarea{
  width:100%; border:1px solid var(--color-border); background:var(--color-bg);
  border-radius:var(--radius-md); padding:14px 16px; font-size:15px;
  font-family:var(--font-body); color:var(--color-ink); outline:none;
  transition:border-color .18s ease, background .18s ease;
}
/* Seta própria no lugar da nativa: a do navegador cola no texto e muda de
   tamanho e posição em cada sistema, então não dá para garantir respiro nem
   área de toque. Com appearance:none o desenho e o espaço passam a ser nossos.
   Atenção ao mexer daqui para baixo: usar o atalho "background:" apagaria a
   seta, porque ele zera o background-image. Sempre background-color. */
.form-field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:42px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235c6785' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--space-4) center;
}
.form-field select::-ms-expand{display:none;}

.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color:var(--blue-700); background-color:#fff;
}
.form-field textarea{resize:vertical; min-height:100px;}
.form-field.error input, .form-field.error select{border-color:var(--color-accent-2); background-color:#fdf1f5;}
.field-error{font-size:11.5px; color:var(--color-accent-2); margin-top:6px; display:none;}
.form-field.error .field-error{display:block;}

/* Três campos disputam a mesma linha. O de país é o mais apertado: carrega
   bandeira à esquerda, texto no meio e seta à direita. Ele ganha largura fixa
   suficiente para os três caberem sem encostar; o DDD encolhe para o que dois
   dígitos realmente precisam; e o número fica com a sobra. */
.phone-row{display:flex; gap:var(--space-2);}
/* 138px = 38 (bandeira) + 58 ("PT +351", a opção mais larga) + 34 (seta) + 8 de
   folga. Medido, não estimado. A folga existe porque a fonte pode renderizar
   um pouco mais larga em outro sistema, ou cair no fallback antes de carregar. */
.phone-row .country-select{flex:0 0 138px; position:relative;}

/* Abaixo de 640px o JS tira a sigla do país e deixa só "+55" — a bandeira já
   diz de que país é. Sem a sigla o campo encolhe e o número volta para a mesma
   linha. Este ponto de corte tem que acompanhar o telaLargaPais do index.html. */
@media (max-width:639px){
  .phone-row .country-select{flex:0 0 112px;}
  .phone-row .country-select select{padding-right:30px;}
}
.phone-row .country-select select{
  width:100%;
  padding-left:38px;  /* bandeira (20) + margem (12) + respiro (6) */
  padding-right:34px; /* seta um pouco mais próxima que nos selects largos */
  background-position:right var(--space-3) center;
}
.phone-row input.ddd{flex:0 0 56px; text-align:center; padding-left:var(--space-2); padding-right:var(--space-2);}
.phone-row input.phone-number{flex:1; min-width:0;}

/* Abaixo de 360px não há largura para os três lado a lado sem espremer.
   Em vez de encolher tudo, o número desce para a segunda linha. */
/* Só nas telas realmente estreitas o número desce de linha. Com a sigla fora,
   os três campos já cabem lado a lado a partir de 340px. */
@media (max-width:339px){
  .phone-row{flex-wrap:wrap;}
  .phone-row input.ddd{flex:1;}
  .phone-row input.phone-number{flex:0 0 100%;}
}

/* bandeira do país selecionado, sobreposta ao select */
.country-flag{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:20px; height:14px; border-radius:2px; overflow:hidden;
  pointer-events:none; /* o clique tem que chegar no select */
  box-shadow:0 0 0 1px rgba(16,24,48,.12);
  display:block;
}
.country-flag svg{display:block; width:100%; height:100%;}

/* .catalog-search-wrap = âncora do autocomplete da BUSCA do catálogo; reaproveita
   toda a estilização de .product-autocomplete (a mesma do formulário). z-index alto
   para o dropdown ficar acima dos chips/grade, que estão fora da sticky. */
.product-search-wrap, .catalog-search-wrap{position:relative;}
.catalog-search-wrap .product-autocomplete{z-index:16;}
.product-autocomplete{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:10;
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md);
  box-shadow:0 12px 30px rgba(10,20,60,.14); max-height:280px; overflow-y:auto; display:none;
}
.product-autocomplete.show{display:block;}
.product-autocomplete.open-upward{top:auto;bottom:calc(100% + 6px);}
.autocomplete-item{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:10px 12px; border-bottom:1px solid var(--color-border); cursor:pointer;
}
.autocomplete-item:last-child{border-bottom:none;}
.autocomplete-item:hover{background:var(--color-bg);}
.autocomplete-item .ac-text b{display:block; font-size:12.5px; color:var(--color-primary);}
.autocomplete-item .ac-text span{font-size:12px; color:var(--color-muted);}
.autocomplete-item .ac-thumb{
  width:44px; height:44px; border-radius:var(--radius-sm); overflow:hidden; flex-shrink:0;
  background:var(--color-bg); border:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .18s ease, transform .18s ease;
}
.autocomplete-item .ac-thumb:hover{border-color:var(--blue-700); transform:scale(1.05);}
.autocomplete-item .ac-thumb img{width:100%; height:100%; object-fit:contain;}

/* produto já escolhido: continua na lista, mas visivelmente indisponível */
.autocomplete-item.is-added{cursor:default; background:var(--color-bg);}
.autocomplete-item.is-added:hover{background:var(--color-bg);}
.autocomplete-item.is-added .ac-text b,
.autocomplete-item.is-added .ac-text span{opacity:.5;}
.autocomplete-item.is-added .ac-thumb{opacity:.45; cursor:default;}
.autocomplete-item.is-added .ac-thumb:hover{border-color:var(--color-border); transform:none;}
.ac-badge{
  display:inline-block; margin-top:3px;
  font-size:11px; font-weight:700; color:var(--color-success);
}

/* piscada de destaque quando o usuário tenta adicionar algo que já escolheu */
.product-pill.destaque{
  outline:2px solid var(--color-accent); outline-offset:2px;
}

.selected-products{
  display:flex; flex-wrap:wrap; gap:8px; padding:var(--space-3) 0;
  min-height:20px;
}
.product-pill{
  display:flex; align-items:center; gap:8px;
  background:var(--color-surface-info); border-radius:var(--radius-btn);
  padding:7px 8px 7px 14px; font-size:12px; color:var(--color-primary); font-weight:600;
}
.product-pill button{
  border:none; background:rgba(0,6,91,.12); color:var(--color-primary);
  width:18px; height:18px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1;
}
.product-pill button:hover{background:var(--color-primary); color:#fff;}

.antibot-field{position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; width:0;}

.captcha-box{
  border:1px solid var(--color-border); border-radius:var(--radius-md); padding:14px 16px;
  display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--color-muted);
  background:var(--color-bg); margin-bottom:var(--space-5);
}
.captcha-box svg{color:var(--color-accent); flex-shrink:0;}

.btn-submit-proposal{
  width:100%; background:var(--color-primary); color:#fff; border:none;
  font-family:var(--font-body); font-weight:700; font-size:15px;
  padding:16px; border-radius:var(--radius-btn); cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.btn-submit-proposal:hover{background:var(--color-primary-hover); transform:translateY(-1px);}
.btn-submit-proposal:disabled{opacity:.6; cursor:not-allowed; transform:none;}

.form-success{
  /* o espaço extra embaixo mantém o botão "Voltar ao catálogo" acima do dock
     flutuante, que é fixo no rodapé e cobria o botão em telas menores */
  display:none; text-align:center; padding:var(--space-8) var(--space-5) 120px;
}
.form-success.show{display:block;}
.form-success .icon{
  width:64px; height:64px; border-radius:50%; background:#e6f7ea; color:var(--color-success);
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--space-5);
}
.form-success h3{font-size:19px; margin:0 0 8px; color:var(--color-ink);}
.form-success p{font-size:13.5px; color:var(--color-muted); margin:0 0 var(--space-5);}
/* aviso sobre o e-mail de confirmação — destacado em caixa pra não passar batido */
.form-success .success-note{
  font-size:13px; line-height:1.65; color:var(--slate-600); text-align:left;
  background:var(--color-surface-info); border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-5);
  max-width:420px; margin:0 auto var(--space-6);
}
.form-success .success-note b{color:var(--color-primary);}

/* ---------- TABLET / DESKTOP ---------- */
@media (min-width:768px){
  .hero-inner, .content-sheet, footer{max-width:var(--container-md); margin-left:auto; margin-right:auto;}
  .topbar{padding:0 max(18px, calc(50% - 520px));}
  .hero-inner{padding-left:max(18px, calc(50% - 520px)); padding-right:max(18px, calc(50% - 520px)); padding-bottom:30px;}
  .content-sheet{padding-left:max(18px, calc(50% - 520px)); padding-right:max(18px, calc(50% - 520px));}
  footer{padding-left:max(18px, calc(50% - 520px)); padding-right:max(18px, calc(50% - 520px));}
  .catalog-banner{max-width:520px;}
  .card-photo{min-height:240px;}
}
@media (min-width:1024px){
  .hero-inner, .content-sheet, footer{max-width:var(--container-lg);}
  .topbar{padding:0 max(18px, calc(50% - 580px));}
  .hero-inner{padding-left:max(18px, calc(50% - 580px)); padding-right:max(18px, calc(50% - 580px));}
  .content-sheet{padding-left:max(18px, calc(50% - 580px)); padding-right:max(18px, calc(50% - 580px));}
  footer{padding-left:max(18px, calc(50% - 580px)); padding-right:max(18px, calc(50% - 580px));}
}
@media (min-width:1280px){
  .hero-inner, .content-sheet, footer{max-width:1320px;}
  .topbar{padding:0 max(18px, calc(50% - 660px));}
  .hero-inner{padding-left:max(18px, calc(50% - 660px)); padding-right:max(18px, calc(50% - 660px));}
  .content-sheet{padding-left:max(18px, calc(50% - 660px)); padding-right:max(18px, calc(50% - 660px));}
  footer{padding-left:max(18px, calc(50% - 660px)); padding-right:max(18px, calc(50% - 660px));}
}
@media (min-width:1440px){
  .hero-inner, .content-sheet, footer{max-width:1520px;}
  .topbar{padding:0 max(18px, calc(50% - 760px));}
  .hero-inner{padding-left:max(18px, calc(50% - 760px)); padding-right:max(18px, calc(50% - 760px));}
  .content-sheet{padding-left:max(18px, calc(50% - 760px)); padding-right:max(18px, calc(50% - 760px));}
  footer{padding-left:max(18px, calc(50% - 760px)); padding-right:max(18px, calc(50% - 760px));}
  .catalog-banner{max-width:600px;}
  /* imagem de fundo do hero sem limite de largura, preenchendo por completo, ancorada embaixo */
  .hero-collapse::before{
    max-width:none;
    background-position:center bottom;
  }
}
@media (min-width:1680px){
  .hero-inner, .content-sheet, footer{max-width:1750px;}
  .topbar{padding:0 max(18px, calc(50% - 875px));}
  .hero-inner{padding-left:max(18px, calc(50% - 875px)); padding-right:max(18px, calc(50% - 875px));}
  .content-sheet{padding-left:max(18px, calc(50% - 875px)); padding-right:max(18px, calc(50% - 875px));}
  footer{padding-left:max(18px, calc(50% - 875px)); padding-right:max(18px, calc(50% - 875px));}
}
@media (min-width:1920px){
  .hero-inner, .content-sheet, footer{max-width:1960px;}
  .topbar{padding:0 max(18px, calc(50% - 980px));}
  .hero-inner{padding-left:max(18px, calc(50% - 980px)); padding-right:max(18px, calc(50% - 980px));}
  .content-sheet{padding-left:max(18px, calc(50% - 980px)); padding-right:max(18px, calc(50% - 980px));}
  footer{padding-left:max(18px, calc(50% - 980px)); padding-right:max(18px, calc(50% - 980px));}
}

/* ---------- MODAL DE PRODUTO (grid multi-coluna) ---------- */
body.modal-open{overflow:hidden;}
.product-modal-overlay{
  position:fixed; inset:0; background:rgba(8,14,38,.6);
  z-index:90; opacity:0; visibility:hidden; transition:opacity .2s ease;
}
.product-modal-overlay.show{opacity:1; visibility:visible;}
.product-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-48%);
  width:min(880px, 92vw); max-height:88vh; overflow-y:auto;
  background:var(--color-surface); border-radius:var(--radius-2xl);
  box-shadow:0 24px 60px rgba(5,10,30,.35);
  z-index:91; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.product-modal.show{opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,-50%);}
.product-modal-close{
  position:sticky; top:var(--space-4); float:right; margin:var(--space-4) var(--space-4) 0 0;
  width:36px; height:36px; border-radius:var(--radius-full); background:var(--color-surface);
  border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--color-ink); box-shadow:0 4px 12px rgba(20,40,110,.12); z-index:2;
}
.product-modal-close svg{width:16px; height:16px;}
.product-modal-body{
  display:flex; flex-direction:column; padding:0 var(--space-6) var(--space-6);
}
.product-modal-photo{
  padding:var(--space-4) 0 var(--space-5); display:flex; justify-content:center;
}
.product-modal-photo .carousel-track img, .product-modal-photo > img{max-height:260px; max-width:80%; object-fit:contain; margin:0 auto;}
.product-modal-info .card-title{font-size:18px; margin-bottom:var(--space-3);}
.product-modal-desc{font-size:14px; line-height:1.6; color:var(--slate-600); margin-bottom:var(--space-2);}
.product-modal-desc p{margin:0 0 var(--space-3);}
.product-modal-desc ul, .product-modal-desc ol{margin:var(--space-2) 0 var(--space-3); padding-left:20px;}
.product-modal-desc a{color:var(--color-primary); font-weight:600; text-decoration:underline;}
.product-modal-info .desc-details{margin-bottom:var(--space-5);}
.product-modal-info .btn-wpp{max-width:320px;}

@media (min-width:640px){
  .product-modal-body{flex-direction:row; gap:var(--space-6); padding:var(--space-2) var(--space-6) var(--space-6);}
  .product-modal-photo{flex:0 0 300px; padding-top:var(--space-6);}
  .product-modal-info{flex:1; padding-top:var(--space-6); min-width:0;}
}

@media (prefers-reduced-motion: reduce){
  .product-modal-overlay, .product-modal{transition:none;}
}

/* ---------- BANNER DE CONSENTIMENTO DE COOKIES ---------- */
/* só aparece quando config/analytics.json tiver algum script cadastrado */
.cookie-consent-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  background:var(--color-primary); color:#fff;
  padding:16px 20px calc(90px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:center;
  transform:translateY(100%); transition:transform .3s ease;
  box-shadow:0 -8px 28px rgba(5,10,30,.3);
}
.cookie-consent-bar.show{transform:translateY(0);}
.cookie-consent-bar p{margin:0; font-size:13px; line-height:1.5; max-width:560px; color:#dfe4f7;}
.cookie-consent-bar a{color:#fff; text-decoration:underline;}
.cookie-consent-actions{display:flex; gap:10px; flex-shrink:0;}
.cookie-consent-bar button{
  font-size:12.5px; font-weight:600; padding:9px 18px; border-radius:var(--radius-btn);
  cursor:pointer; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff;
}
.cookie-consent-bar .cookie-consent-accept{background:#fff; color:var(--color-primary); border-color:#fff;}
@media (min-width:768px){
  .cookie-consent-bar{justify-content:space-between; padding:16px 24px calc(90px + env(safe-area-inset-bottom, 0px));}
}