/* =========================================================
   ONS Consórcio & Seguros — Páginas de produto
   (usa as variáveis e componentes já definidos em style.css)
   ========================================================= */

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  font-size:.82rem; color:var(--ink-500); margin-bottom:22px;
}
.breadcrumb a{ color:var(--ink-500); transition:color .2s ease; }
.breadcrumb a:hover{ color:var(--brand-dark); }
.breadcrumb span{ color:var(--ink-300); }
.breadcrumb strong{ color:var(--ink-900); font-weight:600; }

/* ---------- Header do produto ---------- */
.product-hero{
  position:relative; overflow:hidden;
  padding:150px 0 80px;
  background:linear-gradient(180deg, var(--mist) 0%, var(--paper) 65%);
}
.product-hero__blob{
  position:absolute; top:-160px; right:-140px; width:480px; height:480px;
  border-radius:50%; filter:blur(100px); opacity:.14; pointer-events:none;
  background:radial-gradient(circle, var(--brand), transparent 70%);
}
.product-hero__inner{ position:relative; z-index:2; display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:flex-start; }
.product-hero__icon{
  flex-shrink:0; width:84px; height:84px; border-radius:22px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-tint); color:var(--brand-dark);
  box-shadow:var(--shadow-card);
}
.product-hero__icon svg{ width:38px; height:38px; }
.product-hero__body h1{ font-size:clamp(2rem, 3.6vw, 2.9rem); color:var(--ink-900); max-width:640px; }
.product-hero__lead{ font-size:1.05rem; max-width:620px; color:var(--ink-500); margin-bottom:0; }
.product-hero__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }

/* ---------- Grid de coberturas ---------- */
.coverage-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.coverage-grid--2{ grid-template-columns:repeat(2,1fr); }
.coverage-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px 22px; box-shadow:var(--shadow-card);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.coverage-card:hover{ transform:translateY(-4px); border-color:var(--brand); box-shadow:var(--shadow-card-lg); }
.coverage-card__icon{
  width:44px; height:44px; border-radius:12px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-tint); color:var(--brand-dark);
}
.coverage-card__icon svg{ width:21px; height:21px; }
.coverage-card h3{ font-size:1rem; color:var(--ink-900); margin-bottom:6px; }
.coverage-card p{ font-size:.87rem; margin:0; color:var(--ink-500); }

/* ---------- Faixa de confiança ---------- */
.trust-strip{
  display:flex; justify-content:center; gap:56px; flex-wrap:wrap;
  padding:36px 0; text-align:center;
}
.trust-strip__item{ display:flex; flex-direction:column; align-items:center; }
.trust-strip__num{ font-family:var(--ff-display); font-weight:700; font-size:1.7rem; color:var(--ink-900); }
.trust-strip__num span{ color:var(--brand); }
.trust-strip__label{ font-size:.8rem; color:var(--ink-500); margin-top:2px; }

/* ---------- CTA final ---------- */
.final-cta{
  background:linear-gradient(165deg, var(--navy-900), var(--navy-950));
  border-radius:var(--radius-lg);
  padding:52px 40px;
  text-align:center;
  box-shadow:var(--shadow-card-lg);
}
.final-cta h2{ color:var(--on-navy-100); font-size:clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom:10px; }
.final-cta p{ color:var(--on-navy-300); max-width:480px; margin:0 auto 26px; }
.final-cta__actions{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.final-cta .btn--outline{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); color:var(--on-navy-100); }
.final-cta .btn--outline:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); }

/* ---------- Outros produtos (rodapé de navegação cruzada) ---------- */
.related-products{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.related-products a{
  padding:10px 18px; border-radius:999px; font-size:.85rem; font-weight:600;
  background:var(--paper); border:1px solid var(--line); color:var(--ink-700);
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.related-products a:hover{ border-color:var(--brand); color:var(--brand-dark); transform:translateY(-2px); }

/* ---------- Responsivo ---------- */
@media (max-width: 1024px){
  .coverage-grid, .coverage-grid--2{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px){
  .product-hero{ padding:120px 0 56px; }
  .product-hero__inner{ grid-template-columns:1fr; }
  .product-hero__icon{ width:64px; height:64px; border-radius:18px; }
  .product-hero__icon svg{ width:30px; height:30px; }
  .coverage-grid, .coverage-grid--2{ grid-template-columns:1fr; }
  .trust-strip{ gap:28px; }
  .final-cta{ padding:40px 22px; }
}