/* DentalSuite - Sitio público (FASE 1). Color de marca via --dsp-primary. */
:root { --dsp-primary: #0d6efd; --dsp-dark: #1e2836; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #2b3440; }
a { color: var(--dsp-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.btn-primary { background-color: var(--dsp-primary); border-color: var(--dsp-primary); }
.btn-primary:hover { filter: brightness(.92); background-color: var(--dsp-primary); border-color: var(--dsp-primary); }
.btn-outline-primary { color: var(--dsp-primary); border-color: var(--dsp-primary); }
.btn-outline-primary:hover { background-color: var(--dsp-primary); border-color: var(--dsp-primary); }
.text-primary { color: var(--dsp-primary) !important; }

/* Nav */
.dsp-nav { background: #fff; box-shadow: 0 1px 8px rgba(16,24,40,.08); }
.dsp-nav .nav-link { color: #2b3440; font-weight: 500; }
.dsp-nav .nav-link.active, .dsp-nav .nav-link:hover { color: var(--dsp-primary); }
.dsp-logo { max-height: 44px; max-width: 190px; object-fit: contain; }

/* Hero / slider */
.dsp-hero { position: relative; background: linear-gradient(135deg, var(--dsp-primary), var(--dsp-dark)); color: #fff; overflow: hidden; }
.dsp-hero .carousel-item { min-height: 420px; display: flex; align-items: center; background-size: cover; background-position: center; }
.dsp-hero .carousel-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,28,40,.78) 0%, rgba(20,28,40,.25) 70%); }
.dsp-hero .dsp-hero-inner { position: relative; z-index: 2; }
.dsp-hero h1, .dsp-hero h2 { font-weight: 700; }
.dsp-hero-plain { min-height: 340px; display: flex; align-items: center; }

/* Secciones */
.dsp-section { padding: 3.5rem 0; }
.dsp-section-alt { background: #f6f8fb; }
.dsp-section h2 { font-weight: 700; margin-bottom: .4rem; }
.dsp-section .dsp-sub { color: #6b7684; margin-bottom: 2rem; }

/* Cards */
.dsp-card { border: 0; border-radius: 12px; box-shadow: 0 2px 10px rgba(16,24,40,.07); transition: transform .15s, box-shadow .15s; height: 100%; }
.dsp-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(16,24,40,.12); }
.dsp-card .card-img-top { border-radius: 12px 12px 0 0; height: 190px; object-fit: cover; }
.dsp-card-icon { width: 54px; height: 54px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; background: var(--dsp-primary); }
.dsp-prof-photo { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 2px 10px rgba(16,24,40,.15); }
.dsp-prof-placeholder { width: 130px; height: 130px; border-radius: 50%; background: #e9eef4; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: #9aa7b5; }

/* Testimonios */
.dsp-quote { background: #fff; border-radius: 12px; padding: 1.5rem; height: 100%; box-shadow: 0 2px 10px rgba(16,24,40,.07); }
.dsp-quote .stars { color: #f5b301; }

/* Página interior */
.dsp-page-head { background: linear-gradient(135deg, var(--dsp-primary), var(--dsp-dark)); color: #fff; padding: 2.6rem 0; }
.dsp-page-head h1 { font-weight: 700; margin: 0; }
.dsp-body img { max-width: 100%; height: auto; border-radius: 8px; }
.dsp-cover { width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; }

/* Blog */
.dsp-post-meta { color: #8492a0; font-size: .85rem; }

/* Footer */
.dsp-footer { background: var(--dsp-dark); color: #b9c2cd; }
.dsp-footer a { color: #d7dee6; }
.dsp-footer-bottom { background: rgba(0,0,0,.25); color: #96a1ad; }
.dsp-footer-bottom a { color: #c3cbd4; }

/* WhatsApp flotante */
.dsp-wsp { position: fixed; right: 18px; bottom: 18px; z-index: 1050; width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); transition: transform .15s; }
.dsp-wsp:hover { transform: scale(1.08); color: #fff; text-decoration: none; }

/* Landing */
.dsp-landing { min-height: 100vh; display: flex; flex-direction: column; }
.dsp-landing-head { background: linear-gradient(135deg, var(--dsp-primary), var(--dsp-dark)); color: #fff; padding: 3rem 0; text-align: center; }

@media (max-width: 767px) {
  .dsp-hero .carousel-item { min-height: 340px; }
  .dsp-section { padding: 2.4rem 0; }
}