/* =========================================================
   BRAVO 360 — estilos para subpáginas de detalle de seguro
   ========================================================= */

.breadcrumb-bar{
  background: var(--bg-alt);
  padding: 14px 0;
  font-size: .82rem;
  color: var(--text-soft);
}
.breadcrumb-bar a{ color: var(--text-soft); }
.breadcrumb-bar a:hover{ color: var(--orange); }
.breadcrumb-bar span{ margin: 0 6px; }
.breadcrumb-bar .current{ color: var(--navy); font-weight: 600; }

.detail-hero{
  padding: 60px 0 70px;
  background: linear-gradient(135deg, #fff 55%, #f2f1fb 100%);
}
.detail-hero-inner{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items:flex-start;
}
.detail-hero-icon{
  width:74px; height:74px; border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.detail-hero-icon svg{
  width:38px; height:38px;
  fill:none; stroke:#fff; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.detail-hero h1{ font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin-bottom:.4em; }
.detail-hero-text{ font-size: 1.02rem; max-width: 640px; }

.detail-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
.detail-grid h2{ font-size: 1.3rem; }
.detail-list{ margin:0; padding:0; }
.detail-list li{
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: .95rem;
  color: var(--text-soft);
}
.detail-list li::before{
  content:'';
  position:absolute; left:0; top:8px;
  width:8px; height:8px; border-radius:50%;
  background: var(--orange);
}

.concept-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.concept-card{
  background:#fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 20px;
}
.concept-term{
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy);
  font-size: .95rem;
  margin-bottom: 6px;
}
.concept-desc{ font-size: .85rem; margin:0; }

.detail-cta{
  background: var(--navy);
  color:#fff;
  text-align:center;
  padding: 70px 0;
}
.detail-cta h2{ color:#fff; }
.detail-cta p{ color:#cfcfe8; max-width:520px; margin:0 auto 26px; }
.detail-back{
  display:block;
  margin-top: 18px;
  font-size: .85rem;
  color:#cfcfe8;
}
.detail-back:hover{ color:#fff; }

@media (max-width: 720px){
  .detail-hero-inner{ grid-template-columns: 1fr; text-align:center; }
  .detail-hero-icon{ margin: 0 auto; }
  .detail-grid{ grid-template-columns: 1fr; gap: 30px; }
  .concept-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .concept-grid{ grid-template-columns: 1fr; }
}