/* =====================================================================
   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;
  --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);

  --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);}

/* ---------- 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;}

.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;}
.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 ---------- */
.grid{
  display:grid; grid-template-columns:1fr;
  gap:var(--gap-grid); padding:var(--space-4) 0 var(--space-5);
}
@media (min-width:1024px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1280px){ .grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:1440px){ .grid{grid-template-columns:repeat(4,1fr);} }
@media (min-width:1680px){ .grid{grid-template-columns:repeat(5,1fr);} }
@media (min-width:1920px){ .grid{grid-template-columns:repeat(6,1fr);} }

.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%;}
.card-photo .carousel-track img{max-width:88%; max-height:220px; object-fit:contain; margin:0 auto;}

/* ---------- 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:15.5px; line-height:1.4; color:var(--slate-600); margin-bottom:var(--space-4);}
.card-desc{
  font-size:14.5px; line-height:1.6; color:var(--slate-600);
  margin-bottom:var(--space-4); 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:4px;}
.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:12px; margin-bottom:10px;}
.desc-details a{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--color-primary); font-weight:600; font-size:13.5px;
  text-decoration:none;
}
.desc-details a:hover{text-decoration:underline;}
.desc-details svg{width:13px; height:13px; 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;}

/* ---------- 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;
  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;
}

/* ---------- 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);}

.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;}

/* ---------- FOOTER ---------- */
footer{padding:var(--space-7) var(--space-5) 120px; color:var(--color-muted);}
.footer-address{
  text-align:left; 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; align-items:center; justify-content:center; gap:6px;
}
.footer-credit a{
  display: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;}

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

.phone-row{display:flex; gap:8px;}
.phone-row select{flex:0 0 92px;}
.phone-row input.ddd{flex:0 0 64px; text-align:center;}
.phone-row input.phone-number{flex:1;}

.product-search-wrap{position:relative;}
.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;}
.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;}

.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{
  display:none; text-align:center; padding:var(--space-8) var(--space-5);
}
.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-6);}

/* ---------- 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));}
}