/* =========================================================
   EIMEX — Reconstrução visual das telas do site
   Fonte de referência: imagens enviadas pelo usuário
   ========================================================= */

:root{
  /* ---- Cores (extraídas visualmente da referência) ---- */
  --navy:        #1D2B4F;   /* títulos, textos fortes, logo */
  --navy-soft:   #445070;   /* itens de menu */
  --text-body:   #6B7280;   /* parágrafos, textos secundários */
  --text-muted:  #98A0AE;   /* textos terciários / placeholders */
  --purple:      #5B3EA6;   /* cor primária: botões, links, ícones ativos */
  --purple-dark: #4A3189;
  --purple-light:#EFEAFB;
  --teal:        #0FA99A;   /* cor de destaque secundária: ícones, busca */
  --teal-dark:   #0C8B7F;
  --green-soft:  #E9F7EE;   /* cartão "Resultado" */
  --green-icon:  #2AA96B;
  --border:      #E7E9EE;
  --border-soft: #EFF1F5;
  --bg-page:     #F7F8FB;
  --bg-topbar:   #FFFFFF;
  --white:       #FFFFFF;
  --shadow-card: 0 1px 2px rgba(16,24,40,.04);
  --radius-s:    6px;
  --radius-m:    10px;
  --radius-l:    14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:"Inter","Segoe UI",Arial,sans-serif;
  color:var(--navy);
  background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
input{ font-family:inherit; }

.wrap{
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}

/* =========================================================
   HEADER
   ========================================================= */
.top-strip{
  background:var(--navy);
  color:#C9CEDC;
  font-size:11.5px;
  letter-spacing:.02em;
}
.top-strip .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:6px;
  padding-bottom:6px;
}

.site-header{
  background:var(--white);
  border-bottom:1px solid var(--border);
}
.header-row{
  display:flex;
  align-items:center;
  gap:28px;
  padding:14px 24px;
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{
  width:34px; height:34px;
  border-radius:8px;
  background:linear-gradient(135deg,var(--teal),var(--purple));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:15px;
}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
.sku-config-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px}.sku-config-form label{display:grid;gap:6px;font-weight:700;font-size:12px;color:#24304b}.sku-config-form select{height:38px;border:1px solid #dbe1eb;border-radius:6px;padding:0 10px;background:#fff}.sku-config-form .sku-result{grid-column:1/-1;padding:12px;background:#f5f8fb;border-radius:6px;font-weight:700;color:#5231a5}.sku-config-form button{grid-column:1/-1;border:0}@media(max-width:700px){.sku-config-form{grid-template-columns:1fr}}
.brand-text .name{
  font-size:19px; font-weight:800; color:var(--navy); letter-spacing:.01em;
  line-height:1;
}
.brand-text .tag{
  font-size:9px; color:var(--text-muted); letter-spacing:.04em;
  margin-top:3px; font-weight:600;
}

.header-search{
  flex:1;
  display:flex;
  max-width:520px;
}
.header-search input{
  flex:1;
  border:1px solid var(--border);
  border-right:none;
  border-radius:7px 0 0 7px;
  padding:10px 14px;
  font-size:13px;
  color:var(--navy);
  outline:none;
}
.header-search input::placeholder{ color:var(--text-muted); }
.header-search select{
  border:1px solid var(--border);
  border-right:none;
  border-left:none;
  padding:0 10px;
  font-size:12.5px;
  color:var(--text-body);
  background:var(--white);
}
.header-search button{
  background:var(--teal);
  border:none;
  border-radius:0 7px 7px 0;
  width:42px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
  font-size:12px;
}
.header-actions .action-item{
  display:flex; align-items:center; gap:6px;
  color:var(--navy-soft);
  white-space:nowrap;
}
.header-actions .phone{
  color:var(--purple);
  font-weight:700;
}
.btn-quote{
  background:var(--purple);
  color:#fff;
  border:none;
  border-radius:7px;
  padding:10px 16px;
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
}
.btn-quote:hover{ background:var(--purple-dark); }

.main-nav{
  border-top:1px solid var(--border-soft);
}
.main-nav ul{
  display:flex;
  gap:26px;
  padding:11px 24px;
  font-size:12.8px;
  font-weight:600;
  color:var(--navy-soft);
}
.main-nav li{ display:flex; align-items:center; gap:4px; white-space:nowrap; cursor:default; }
.main-nav li.caret::after{
  content:"";
  width:6px;height:6px;
  border-right:1.5px solid var(--text-muted);
  border-bottom:1.5px solid var(--text-muted);
  transform:rotate(45deg);
  margin-top:-3px;
}
.main-nav li.contact{ color:var(--navy-soft); }

/* Breadcrumb */
.breadcrumb{
  padding:14px 0 0;
  font-size:12px;
  color:var(--text-muted);
  display:flex;
  gap:6px;
  align-items:center;
}
.breadcrumb a{ color:var(--text-muted); }
.breadcrumb .sep{ color:#C7CBD4; }
.breadcrumb .current{ color:var(--navy-soft); }

/* =========================================================
   FOOTER — faixa de benefícios (usada nas 3 páginas)
   ========================================================= */
.benefits-strip{
  background:var(--bg-page);
  border-top:1px solid var(--border);
  margin-top:56px;
}
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  padding:34px 24px;
}
.benefit{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.benefit .ico{
  width:34px;height:34px;
  border-radius:9px;
  background:var(--purple-light);
  color:var(--purple);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.benefit h4{
  margin:0 0 3px;
  font-size:13.5px;
  color:var(--navy);
  font-weight:700;
}
.benefit p{
  margin:0;
  font-size:11.8px;
  color:var(--text-muted);
  line-height:1.4;
}

/* =========================================================
   PÁGINA 1 — CONFIGURADOR DE PRODUTOS
   ========================================================= */
.page-title{
  font-size:27px;
  font-weight:800;
  color:var(--navy);
  margin:18px 0 4px;
}
.page-subtitle{
  font-size:13.5px;
  color:var(--text-body);
  margin:0 0 26px;
}

.stepper{
  display:flex;
  align-items:center;
  gap:0;
  margin-bottom:30px;
}
.step{ display:flex; align-items:center; gap:10px; }
.step .circle{
  width:26px;height:26px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
  background:var(--border);
  color:var(--text-muted);
  flex-shrink:0;
}
.step.active .circle{ background:var(--purple); color:#fff; }
.step .label{
  font-size:12.5px;
  font-weight:600;
  color:var(--text-muted);
  white-space:nowrap;
}
.step.active .label{ color:var(--navy); }
.step-line{
  width:52px;height:2px;
  background:var(--border);
  margin:0 12px;
}

.config-layout{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:24px;
  align-items:start;
}

.config-section h2{
  font-size:16.5px;
  font-weight:800;
  color:var(--navy);
  margin:0 0 3px;
}
.config-section > p{
  font-size:13px;
  color:var(--text-body);
  margin:0 0 18px;
}

.option-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.option-card{
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:var(--radius-m);
  padding:20px 18px;
  cursor:pointer;
  transition:border-color .15s;
}
.option-card:hover{ border-color:var(--purple); }
.option-card .ico{
  width:36px;height:36px;
  color:var(--teal);
  margin-bottom:14px;
}
.option-card h3{
  font-size:13.8px;
  font-weight:700;
  color:var(--navy);
  margin:0 0 6px;
}
.option-card p{
  font-size:12px;
  color:var(--text-muted);
  margin:0;
  line-height:1.45;
}

.config-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:14px;
  margin-top:26px;
}
.config-actions .hint{ font-size:12.5px; color:var(--text-muted); }
.btn-primary{
  background:var(--purple);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:12px 26px;
  font-size:13px;
  font-weight:700;
}
.btn-primary:hover{ background:var(--purple-dark); }

.summary-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  padding:20px;
}
.summary-card h3{
  font-size:14.5px;
  font-weight:800;
  margin:0 0 4px;
}
.summary-card > p{
  font-size:11.8px;
  color:var(--text-muted);
  margin:0 0 16px;
}
.summary-list li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  font-size:12.8px;
  color:var(--text-muted);
  border-top:1px solid var(--border-soft);
}
.summary-list li:first-child{ border-top:none; }
.summary-list li .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--border);
  flex-shrink:0;
}

.result-card{
  margin-top:16px;
  background:var(--green-soft);
  border-radius:var(--radius-l);
  padding:26px 20px;
  text-align:center;
}
.result-card .ico{
  width:42px;height:42px;
  margin:0 auto 12px;
  color:var(--purple);
}
.result-card h4{
  font-size:14px; font-weight:800; margin:0 0 4px;
}
.result-card p{
  font-size:11.8px; color:var(--text-muted); margin:0;
}

/* =========================================================
   PÁGINA 2 — PRODUTO (detalhe)
   ========================================================= */
.product-layout{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:32px;
  margin-top:20px;
}
.product-title{
  font-size:24px; font-weight:800; margin:0 0 4px;
}
.product-subtitle{
  font-size:13px; color:var(--text-body); margin:0 0 14px;
}
.tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.tag{
  border:1px solid var(--border);
  border-radius:6px;
  padding:5px 10px;
  font-size:11.3px;
  font-weight:600;
  color:var(--navy-soft);
  background:var(--white);
}

.gallery-main{
  background:var(--bg-page);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  padding:30px;
  display:flex;align-items:center;justify-content:center;
  height:300px;
}
.gallery-main img{ max-height:230px; }
.gallery-thumbs{
  display:flex; gap:10px; margin-top:12px;
}
.gallery-thumbs .thumb{
  width:64px;height:64px;
  border:1.5px solid var(--border);
  border-radius:8px;
  padding:6px;
  background:var(--white);
}
.gallery-thumbs .thumb.active{ border-color:var(--purple); }

.tabs{
  display:flex;
  gap:26px;
  border-bottom:1px solid var(--border);
  margin-top:30px;
  font-size:12.8px;
  font-weight:700;
  color:var(--text-muted);
}
.tabs .tab{
  padding:12px 2px 14px;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.tabs .tab.active{ color:var(--purple); border-color:var(--purple); }

.spec-block h3{
  font-size:14px; font-weight:800; margin:22px 0 12px;
}
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table tr{ border-top:1px solid var(--border-soft); }
.spec-table tr:first-child{ border-top:none; }
.spec-table td{
  padding:11px 4px;
  font-size:12.8px;
  vertical-align:top;
}
.spec-table td:first-child{
  width:38%;
  color:var(--text-muted);
}
.spec-table td:last-child{
  color:var(--navy);
  font-weight:600;
}

.side-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  padding:20px;
  margin-bottom:16px;
}
.side-card h3{ font-size:14.5px; font-weight:800; margin:0 0 6px; }
.side-card > p{ font-size:12px; color:var(--text-muted); margin:0 0 14px; line-height:1.45;}
.btn-block{
  display:block; width:100%; text-align:center;
  border-radius:8px; padding:11px; font-size:12.8px; font-weight:700;
  margin-bottom:9px; border:1.5px solid transparent;
}
.btn-block.primary{ background:var(--purple); color:#fff; }
.btn-block.outline{
  background:var(--white); color:var(--teal-dark); border-color:var(--teal);
  display:flex; align-items:center; justify-content:center; gap:7px;
}

.side-list li{
  display:flex; align-items:center; gap:9px;
  padding:8px 0;
  font-size:12.3px;
  color:var(--navy-soft);
  border-top:1px solid var(--border-soft);
}
.side-list li:first-child{ border-top:none; }
.side-list .ico{ width:15px;height:15px; color:var(--purple); flex-shrink:0; }
.side-list.apps .ico{ width:6px;height:6px; border-radius:50%; background:var(--purple); }

.mini-footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:26px 24px;
  border-top:1px solid var(--border);
  margin-top:50px;
  font-size:11px;
  color:var(--text-muted);
  flex-wrap:wrap;
}
.mini-footer span{ display:flex; align-items:center; gap:6px; }

/* =========================================================
   PÁGINA 3 — LISTAGEM DE PRODUTOS
   ========================================================= */
.listing-layout{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:28px;
  margin-top:20px;
}
.filters{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  padding:20px;
  align-self:start;
}
.filters h3{ font-size:13.5px; font-weight:800; margin:0 0 3px; }
.filters .count{ font-size:11.5px; color:var(--text-muted); margin:0 0 16px; }
.filter-group{ padding:14px 0; border-top:1px solid var(--border-soft); }
.filter-group:first-of-type{ border-top:none; }
.filter-group h4{ font-size:12.5px; font-weight:700; margin:0 0 10px; }
.filter-group label{
  display:flex; align-items:center; gap:8px;
  font-size:12.3px; color:var(--navy-soft);
  padding:5px 0;
}
.filter-group input[type=checkbox]{
  width:14px;height:14px;
  accent-color:var(--purple);
}
.filter-group select{
  width:100%;
  border:1px solid var(--border);
  border-radius:6px;
  padding:8px 10px;
  font-size:12.3px;
  color:var(--text-body);
}
.btn-clear{
  width:100%;
  margin-top:6px;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:8px;
  padding:10px;
  font-size:12px;
  font-weight:700;
  color:var(--navy-soft);
}

.listing-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}
.listing-toolbar .count{ font-size:13px; color:var(--text-body); }
.listing-toolbar .right{ display:flex; align-items:center; gap:12px; }
.sort select{
  border:1px solid var(--border);
  border-radius:7px;
  padding:8px 12px;
  font-size:12.3px;
  color:var(--navy-soft);
}
.view-toggle{ display:flex; gap:6px; }
.view-toggle button{
  width:32px;height:32px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--white);
  color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;
}
.view-toggle button.active{ background:var(--purple-light); color:var(--purple); border-color:var(--purple); }

.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.product-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  padding:18px;
  display:flex;
  flex-direction:column;
}
.product-card .thumb{
  background:var(--bg-page);
  border-radius:var(--radius-m);
  height:140px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.product-card .thumb img{ max-height:96px; }
.product-card h3{ font-size:13.8px; font-weight:700; margin:0 0 3px; }
.product-card .mat{ font-size:11.8px; color:var(--text-muted); margin:0 0 10px; }
.product-card .tag-row{ margin-bottom:16px; }
.product-card .btn-outline{
  margin-top:auto;
  text-align:center;
  border:1.5px solid var(--purple);
  color:var(--purple);
  border-radius:7px;
  padding:9px;
  font-size:12.3px;
  font-weight:700;
}

.pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:30px 0 10px;
}
.pagination button{
  width:32px;height:32px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--white);
  color:var(--navy-soft);
  font-size:12.5px;
  font-weight:600;
}
.pagination button.active{ background:var(--purple); color:#fff; border-color:var(--purple); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .header-search{ display:none; }
  .main-nav ul{ flex-wrap:wrap; gap:14px; }
  .config-layout, .product-layout{ grid-template-columns:1fr; }
  .option-grid{ grid-template-columns:repeat(2,1fr); }
  .benefits-grid{ grid-template-columns:repeat(2,1fr); }
  .listing-layout{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .option-grid{ grid-template-columns:1fr; }
  .benefits-grid{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:1fr; }
  .header-row{ flex-wrap:wrap; }
}