@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap");
:root{--azul:#002243;--azul-vivo:#0080ff;--cinza:#65717d;--azul-terciario:#101820;--azul-secundario:#002243;--cinza-claro:#f4f6f8}
*{box-sizing:border-box}
body{margin:0;color:#142333;background:#fff;font-family:"Instrument Sans",Arial,sans-serif}
.header-container{background:var(--azul);padding:20px 50px;border-radius:10px;margin-bottom:200px}
.catalog-page,.product-detail{width:min(1180px,calc(100% - 40px));min-height:55vh;margin:36px auto 76px}
.back-link{position:relative;z-index:11;display:inline-block;margin-bottom:22px;color:var(--azul);font-weight:600;text-decoration:none}
.back-link:hover{color:var(--azul-vivo)}
.page-title{padding:12px 0 26px;border-bottom:1px solid #dce3e9;margin-bottom:24px}
.eyebrow,.group-name{margin:0 0 8px;color:var(--azul-vivo);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.page-title h1,.detail-card h1{margin:0 0 8px;color:var(--azul);font-size:clamp(30px,5vw,44px)}
.page-title>p:last-child{margin:0;color:var(--cinza);font-size:17px}
.quick-guide{margin:0 0 28px;padding:18px 20px;border:1px solid #dce3e9;border-radius:10px;background:#f5f8fb}
.quick-guide-label{display:block;margin-bottom:12px;color:var(--azul);font-weight:700}
.quick-guide-links{display:flex;flex-wrap:wrap;gap:9px}
.quick-guide-links a{display:inline-block;padding:8px 12px;border:1px solid #cbd8e4;border-radius:999px;background:#fff;color:var(--azul);font-size:14px;font-weight:600;text-decoration:none;transition:background .18s,color .18s,border-color .18s}
.quick-guide-links a:hover,.quick-guide-links a:focus-visible{border-color:var(--azul);background:var(--azul);color:#fff}
.product-group{padding:8px 0 28px;scroll-margin-top:20px}
.product-group h2{margin:8px 0 16px;color:var(--azul);font-size:22px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:16px}
.product-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid #e1e7ed;border-radius:10px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 5px 20px #0022430b;transition:transform .18s,box-shadow .18s}
.product-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px #00224316}
.product-card img{width:100%;height:170px;object-fit:contain;padding:15px;background:white}
.product-card .group-name{margin:13px 17px 4px}
.product-card h3{margin:0 17px 7px;color:var(--azul);font-size:17px}
.product-card p{margin:0 17px 15px;color:var(--cinza);font-size:14px;line-height:1.5}
.card-link{margin:auto 17px 17px;color:var(--azul-vivo);font-weight:600;font-size:14px}
.detail-card{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);gap:36px;align-items:center;border:1px solid #e1e7ed;border-radius:12px;padding:28px;box-shadow:0 8px 28px #0022430c}
.detail-card>img{width:100%;height:min(430px,55vw);object-fit:contain}
.detail-description{max-width:540px;color:var(--cinza);font-size:17px;line-height:1.65}
.contact-button{display:inline-block;margin-top:14px;padding:13px 19px;border-radius:7px;background:var(--azul);color:#fff;text-decoration:none;font-weight:600}
.contact-button:hover{background:var(--azul-vivo)}
@media(max-width:640px){.catalog-page,.product-detail{width:calc(100% - 28px);margin-top:22px}.header-container{padding:20px 22px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-card img{height:125px}.product-card .group-name,.product-card h3,.product-card p,.card-link{margin-left:12px;margin-right:12px}.product-card h3{font-size:15px}.detail-card{grid-template-columns:1fr;padding:18px;gap:10px}.detail-card>img{height:250px}}
@media(max-width:380px){.product-grid{grid-template-columns:1fr}}
@media (max-width: 900px) {
  header { margin-bottom: 0; }
  .header-container { width: calc(100% - 40px); margin: 14px auto 24px; padding: 18px 24px; }
  .catalog-page, .product-detail { width: calc(100% - 48px); margin-top: 24px; }
  .page-title h1, .detail-card h1 { font-size: clamp(30px, 5vw, 40px); }
  .product-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .detail-card { gap: 24px; padding: 22px; }
}
@media (max-width: 640px) {
  .header-container { width: calc(100% - 28px); margin: 12px auto 18px; padding: 16px; }
  .catalog-page, .product-detail { width: calc(100% - 28px); margin: 20px auto 48px; }
  .page-title { padding: 8px 0 20px; margin-bottom: 20px; }
  .page-title h1, .detail-card h1 { font-size: clamp(28px, 8vw, 36px); }
  .page-title > p:last-child { font-size: 15px; line-height: 1.5; }
  .quick-guide { padding: 15px; }
  .quick-guide-links { gap: 8px; }
  .quick-guide-links a { padding: 8px 10px; font-size: 13px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product-card img { height: 135px; padding: 10px; }
  .product-card .group-name { margin: 11px 12px 4px; font-size: 10px; letter-spacing: .06em; }
  .product-card h3 { margin: 0 12px 7px; font-size: 15px; overflow-wrap: anywhere; }
  .product-card p { margin: 0 12px 13px; font-size: 13px; line-height: 1.4; }
  .card-link { margin: auto 12px 14px; font-size: 13px; }
  .product-card:hover { transform: none; }
  .detail-card { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .detail-card > img { height: 230px; }
  .detail-description { font-size: 15px; line-height: 1.55; }
  .contact-button { width: 100%; text-align: center; }
  .back-link { display: inline-flex; padding: 8px 0; }
}
@media (max-width: 380px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-card img { height: 180px; }
}

/* Opções de material/acabamento nos produtos de fixação. */
.product-variants { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 17px 14px; }
.product-variants span { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: #edf4fb; color: var(--azul); font-size: 11px; font-weight: 700; line-height: 1.2; }
.variant-selector { margin: 20px 0 8px; }
.variant-selector > p { margin: 0 0 9px; color: var(--azul); font-size: 14px; font-weight: 700; }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-option { min-height: 40px; padding: 9px 13px; border: 1px solid #cbd8e4; border-radius: 7px; background: #fff; color: var(--azul); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.variant-option:hover, .variant-option:focus-visible { border-color: var(--azul-vivo); }
.variant-option.is-active { border-color: var(--azul); background: var(--azul); color: #fff; }
@media (max-width: 640px) {
  .product-variants { gap: 5px; margin: 0 12px 12px; }
  .product-variants span { padding: 4px 6px; font-size: 10px; }
  .variant-options { gap: 6px; }
  .variant-option { min-height: 38px; padding: 8px 10px; font-size: 13px; }
}