/* ============================================
   LUXDENT — Estilos de landing de especialidad (/especialidades/*.html)
   ============================================ */
.spec-hero{
  padding: 150px 0 60px;
  background: linear-gradient(180deg, var(--ivory-bg), #fff);
}
.spec-hero .breadcrumb{ display:inline-block; margin-bottom:16px; font-size:13.5px; font-weight:600; color: var(--morado-diamante); }
.spec-hero h1{ font-size: clamp(2rem, 4.4vw, 3.1rem); max-width: 700px; }
.spec-hero p.lead{ max-width: 620px; color: var(--gris-texto); font-size: 17px; }

.spec-cover{ max-width: 1100px; margin: 0 auto 10px; padding: 0 24px; }
.spec-cover img{ width:100%; border-radius: var(--radius); box-shadow: var(--shadow-soft); aspect-ratio: 21/9; object-fit:cover; }

.spec-body{ padding: var(--section-pad) 0; }
.spec-body-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 56px; }
.spec-body-grid h2{ font-size: 1.6rem; }
.spec-body-grid p{ color: var(--gris-texto); font-size: 16px; }

.spec-feature-list{ display:flex; flex-direction:column; gap:16px; margin-top: 8px; }
.spec-feature{
  display:flex; gap:14px; align-items:flex-start;
  background: var(--ivory-bg); border-radius: var(--radius-sm); padding: 18px 20px;
}
.spec-feature svg{ flex:none; width:22px; height:22px; color: var(--morado-diamante); margin-top:2px; }
.spec-feature strong{ display:block; font-size:14.5px; margin-bottom:2px; }
.spec-feature span{ font-size:13.5px; color:var(--gris-texto); }

.spec-types{ padding: var(--section-pad) 0; background: var(--ivory-bg); }
.spec-types-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.spec-type-card{
  background:#fff; border-radius: var(--radius); padding: 26px 20px;
  text-align:center; box-shadow: var(--shadow-soft);
}
.spec-type-card .badge{
  width:48px; height:48px; border-radius:50%; margin: 0 auto 16px;
  background: linear-gradient(140deg, var(--morado-diamante-light), var(--morado-diamante));
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.spec-type-card h4{ font-size: .95rem; margin-bottom:4px; }
.spec-type-card p{ font-size:12.5px; color:var(--gris-texto); margin:0; }

.spec-cta-band{
  padding: 56px 0;
  background: var(--morado-diamante);
  color:#fff; text-align:center;
}
.spec-cta-band h2{ color:#fff; font-size: 1.7rem; }
.spec-cta-band p{ color: rgba(255,255,255,.85); max-width:480px; margin: 0 auto 24px; }

.spec-other{ padding: var(--section-pad) 0; }
.spec-other h3{ font-size:1.2rem; margin-bottom:22px; }
.spec-other-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:14px; }
.spec-other-card{
  display:block; text-align:center; padding: 20px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--linea-suave);
  transition: border-color .25s, transform .25s;
  font-size: 13.5px; font-weight:600;
}
.spec-other-card:hover{ border-color: var(--morado-diamante); transform: translateY(-3px); }

@media (max-width: 860px){
  .spec-body-grid{ grid-template-columns: 1fr; }
  .spec-types-grid{ grid-template-columns: repeat(2,1fr); }
  .spec-other-grid{ grid-template-columns: repeat(2,1fr); }
}