:root {
  --brand-primary: #e95178; /* nuevo color principal */
  --brand-accent: #00bfa6;
  --brand-dark: #2e2e38;
  --bg-soft: #f8f9fc;
}

body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  background: var(--bg-soft);
}

/* Compensar contenido cuando la navbar está fija arriba */
body.has-fixed-navbar { padding-top: 80px; }
@media (max-width: 991.98px) { body.has-fixed-navbar { padding-top: 70px; } }

.navbar-branding {
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.navbar-branding.sticky-top { position: sticky; top: 0; z-index: 1040; }
@media (max-width: 991.98px) {
  .navbar-branding.sticky-top { position: sticky; top: 0; z-index: 1040; }
}
.navbar .navbar-nav { gap: 14px; }
.navbar .nav-link {
  color: #444;
  padding: 6px 12px;
  border-radius: 9999px; /* pill */
  transition: background-color .2s ease, color .2s ease;
}
@media (hover: hover) and (min-width: 992px) { /* desktop hover */
  .navbar .nav-link:hover {
    background: var(--brand-primary);
    color: #fff;
  }
}
.navbar .btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); }
.btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); }
.btn-outline-primary { color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-outline-primary:hover { background: var(--brand-primary); border-color: var(--brand-primary); }

.hero {
  background: linear-gradient(135deg, rgba(108,99,255,.12), rgba(0,191,166,.12));
}
.hero .btn-primary { background: var(--brand-primary); border: none; }
.btn-accent {
  background: var(--brand-accent);
  color: #fff;
  border: none;
}
.hero-card {
  border: 1px solid rgba(0,0,0,0.06);
}

.features .card-feature {
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 16px rgba(0,0,0,0.04);
}
.features .feature-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(108,99,255,.12);
  color: var(--brand-primary);
  font-size: 1.25rem;
  margin-bottom: .75rem;
}

/* Insurers carousel */
.insurers-carousel { background: #fff; }
.insurers-carousel h5 { font-weight: 600; }
.insurers-carousel .carousel-item.active {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.insurers-carousel .insurer-item { flex: 0 0 50%; }
@media (min-width: 576px) { .insurers-carousel .insurer-item { flex: 0 0 33.333%; } }
@media (min-width: 768px) { .insurers-carousel .insurer-item { flex: 0 0 25%; } }
@media (min-width: 992px) { .insurers-carousel .insurer-item { flex: 0 0 16.6667%; } }
.insurer-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  background: #f8f9fa;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 9999px;
  padding: .6rem .9rem;
  min-height: 44px; /* tamaño táctil accesible */
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.insurer-pill .coverage-logo {
  height: 28px;
  max-width: 100px;
  object-fit: contain;
}
.insurer-pill i { color: var(--brand-primary); font-size: 1.1rem; }
.insurer-pill span { color: #333; font-weight: 500; }
.insurers-carousel .carousel-control-prev,
.insurers-carousel .carousel-control-next { filter: invert(0); }

/* Responsive tweaks para mobile en prepagas */
@media (max-width: 575.98px) {
  .insurers-carousel .container { padding-left: .75rem; padding-right: .75rem; }
  .insurer-pill { padding: .5rem .7rem; font-size: .95rem; }
  .insurer-pill i { font-size: 1rem; }
  .insurer-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Instagram CTA section */
.instagram-cta {
  background: linear-gradient(90deg, #ef859c 0%, #e95178 100%);
  color: #fff;
}
.instagram-cta .cta-title { font-weight: 700; }
.instagram-cta .cta-text { opacity: .95; }
.instagram-cta .btn-instagram {
  background: #fff;
  color: #e95178;
  border: none;
  font-weight: 600;
  padding: .6rem 1rem;
  border-radius: .75rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.1);
}
.instagram-cta .btn-instagram:hover {
  filter: brightness(0.95);
}
.instagram-cta .bi-instagram { font-size: 1.2rem; }

.site-footer {
  background: var(--brand-dark);
}
.site-footer .btn-primary {
  background: var(--brand-primary);
  border: none;
}

/* Offcanvas mobile menu */
.offcanvas-fullscreen { --bs-offcanvas-width: 100vw; }
.offcanvas-menu { background: #fff; }
.offcanvas-menu .menu-btn {
  width: 100%;
  border-radius: 9999px; /* pill */
  background: #f1f3f5; /* gris suave */
  color: #333;
  border: 1px solid #e5e7eb;
  padding: .55rem .9rem; /* reduce alto de botones */
}
.offcanvas-menu .menu-btn i {
  color: var(--brand-primary);
  margin-right: .5rem;
}
.offcanvas-menu .menu-btn.active i { color: #fff; }
.offcanvas-menu .menu-btn.active {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}
.offcanvas-menu .menu-actions { padding-bottom: 8px; }

/* Grids para offcanvas (2 columnas en mobile) */
.offcanvas-menu .menu-group { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 8px; 
  margin-bottom: 16px;
}
.offcanvas-menu .menu-group.single { 
  grid-template-columns: 1fr; 
}
.offcanvas-menu .section-label { 
  margin: 16px 0 8px 0; 
  color: #6c757d; 
  font-size: .9rem; 
  font-weight: 500;
}
.offcanvas-menu .menu-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 8px; 
  margin-bottom: 8px;
}
.offcanvas-menu .menu-grid .menu-btn { 
  margin: 0; 
}
/* Botón que ocupa todo el ancho dentro del grid */
.offcanvas-menu .menu-grid .menu-btn.full-width { grid-column: 1 / -1; }
.offcanvas-menu .menu-btn {
  margin-bottom: 8px;
}

/* Turnos UX */
.stepper { display: flex; gap: 1rem; align-items: center; }
.stepper .step { display: flex; align-items: center; gap: .5rem; color: #666; }
.stepper .step i { color: var(--brand-primary); }

/* Horizontal process stepper (Servicios) */
.process-stepper { display: flex; align-items: center; gap: .75rem; flex-wrap: nowrap; }
.process-stepper .step { display: flex; align-items: center; gap: .75rem; }
.process-stepper .step-index {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Rail de pasos con nodos (inspirado en UI Design Process) */
.process-flow { margin-top: .25rem; }
.process-rail {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
}
.process-rail::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 1px);
  height: 2px;
  background: #e9ecef;
}
.process-node {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand-primary);
  border: 2px solid var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

/* Botones en forma de píldora en todo el sitio */
.btn { border-radius: 9999px !important; }
.process-node.active { background: var(--brand-primary); color: #fff; }
.process-card .step-label { text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; color: #6c757d; margin-bottom: .5rem; }
@media (max-width: 767.98px) {
  .process-rail { padding: 10px 0; }
}
.process-stepper .step-content { min-width: 200px; }
.process-stepper .step-title { font-weight: 600; margin: 0; }
.process-stepper .step-desc { margin: 0; color: #666; }
.process-stepper .step-connector { flex: 1 1 auto; height: 2px; background: #dee2e6; }
@media (max-width: 767.98px) {
  .process-stepper { flex-wrap: wrap; }
  .process-stepper .step { width: 100%; }
  .process-stepper .step-connector { display: none; }
}

.time-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.time-pill { min-width: 90px; }
.btn-check:checked + .time-pill { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }

.toggle-group .btn-outline-primary { border-radius: .5rem; }
.btn-check:checked + .btn-outline-primary { background: var(--brand-primary); color: #fff; }

/* Mobile fixes for Turnos */
@media (max-width: 576px) {
  .list-group-item .d-flex { flex-wrap: wrap; gap: .5rem; }
}

/* Ensure collapses are visible on desktop even when not .show */
@media (min-width: 768px) {
  .collapse.d-md-block { display: block !important; height: auto !important; }
}

/* Fallback Offcanvas if Bootstrap JS/CSS is unavailable */
.offcanvas {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--bs-offcanvas-width, 100vw);
  height: 100vh; /* asegurar altura completa en todas las páginas */
  background: #fff;
  transition: transform .3s ease;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
/* Dirección según clase (respeta .offcanvas-start / .offcanvas-end) */
.offcanvas-start { left: 0; right: auto; transform: translateX(-100%); }
.offcanvas-end { right: 0; left: auto; transform: translateX(100%); }
.offcanvas.show { transform: translateX(0); }
.offcanvas-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1040;
}

/* Fallback Collapse */
.collapse { display: none; }
.collapse.show { display: block; }

/* --- Nosotros page styles --- */
.hero-nosotros {
  background: linear-gradient(135deg, #0d6efd, #6ea8fe);
  min-height: 320px;
  position: relative;
}
.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.img-placeholder {
  background: #f1f3f5;
  border: 2px dashed #dee2e6;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
}
.img-placeholder::before {
  content: '\f1c5'; /* file image icon (bootstrap-icons) */
  font-family: 'bootstrap-icons';
  font-size: 2rem;
}

/* --- Coberturas page styles --- */
.coverage-card {
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 16px rgba(0,0,0,0.04);
}
.coverage-logo-box {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #f8f9fa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e9ecef;
}
.coverage-logo {
  max-width: 46px;
  max-height: 46px;
  object-fit: contain;
}
.logo-placeholder {
  width: 32px;
  height: 32px;
  border: 2px dashed #dee2e6;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
}
.logo-placeholder::before {
  content: '\f187'; /* shield icon */
  font-family: 'bootstrap-icons';
  font-size: 1.25rem;
}

/* Floating Action Button: Solicitar turno */
.fab-turno {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(13,110,253,0.35);
  text-decoration: none;
  z-index: 1030; /* bajo offcanvas/backdrop */
}
.fab-turno:hover { color: #fff; background: #0b5ed7; }
.fab-turno i { font-size: 1.5rem; }
.offcanvas-menu {
  /* El contenedor .offcanvas-body tiene esta clase; aplicamos scroll ahí directamente */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 100dvh;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.offcanvas-body > :last-child { margin-bottom: 0; }

/* Mejorar accesibilidad del último botón/link en el menú */
.offcanvas-menu .menu-btn:last-child,
.offcanvas-menu .btn:last-child,
.offcanvas-menu a:last-child { margin-bottom: 0; }
/* Badge de notificaciones en tarjetas del Panel Admin */
.card .notif-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
  pointer-events: none; /* evita interferir con el click de la tarjeta */
}

/* Modal simple para solicitudes de tratamiento */
.simple-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1050;
}
.simple-modal.show { display: flex; }
.simple-modal-dialog {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  width: 100%;
  max-width: 720px;
  overflow: hidden;
}
.simple-modal-header, .simple-modal-footer {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}
.simple-modal-header { display: flex; align-items: center; justify-content: space-between; }
.simple-modal-body { padding: 16px; max-height: 60vh; overflow: auto; }
.simple-modal-footer { border-top: 1px solid #eee; }

/* Ajustes mobile para modal simple */
.simple-modal {
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}
.simple-modal-body dl,
.simple-modal-body dt,
.simple-modal-body dd {
  word-break: break-word;
}

@media (max-width: 575.98px) {
  .simple-modal {
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    align-items: stretch;
    justify-content: stretch;
  }
  .simple-modal-dialog {
    max-width: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  .simple-modal-header .modal-title {
    font-size: 1rem;
  }
  .simple-modal-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
  }
  .simple-modal-body {
    padding: 14px;
    flex: 1 1 auto;
    overflow: auto;
  }
  .simple-modal-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    z-index: 2;
  }
  .simple-modal-footer .btn {
    width: 100%;
  }
}

/* --- FAQ global styles --- */
.faq-container { max-width: 100%; }
.faq-item {
  background: #ffffff;
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(250, 218, 227, 0.3);
  transition: all 0.3s ease;
  overflow: hidden;
  width: 100%;
}
.faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  border-color: #fadae3;
}
.faq-question {
  display: flex;
  align-items: center;
  padding: 24px;
  cursor: pointer;
  background: linear-gradient(135deg, #fadae3 0%, #f8d7da 100%);
  transition: all 0.3s ease;
  border: none;
  width: 100%;
  text-align: left;
}
.faq-question:hover { background: linear-gradient(135deg, #f5c6d6 0%, #f0c4c8 100%); }
.faq-question[aria-expanded="true"] { background: linear-gradient(135deg, #e95178 0%, #d63384 100%); color: white; }
.faq-question[aria-expanded="true"] .faq-icon { color: white; transform: scale(1.1); }
.faq-question[aria-expanded="true"] .faq-arrow i { transform: rotate(180deg); color: white; }
.faq-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  color: #e95178;
  font-size: 20px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.faq-text { flex: 1; margin-right: 16px; }
.faq-text h5 {
  margin: 0;
  font-weight: 600;
  font-size: 18px;
  color: #2c3e50;
  line-height: 1.4;
  transition: color 0.3s ease;
}
.faq-question[aria-expanded="true"] .faq-text h5 { color: white; }
.faq-arrow {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.faq-arrow i { font-size: 14px; color: #e95178; transition: all 0.3s ease; }
.faq-answer { background: #ffffff; }
.faq-content { padding: 30px 24px 24px 24px; }
.faq-content p { margin: 0; color: #5a6c7d; font-size: 16px; line-height: 1.6; padding-left: 68px; }
/* Animaciones suaves */
.faq-answer.collapsing { transition: height 0.35s ease; }
.faq-answer.show { animation: fadeInContent 0.4s ease; }
@keyframes fadeInContent { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
/* Responsive */
@media (max-width: 768px) {
  .faq-question { padding: 20px 16px; }
  .faq-icon { width: 40px; height: 40px; margin-right: 16px; font-size: 18px; }
  .faq-text h5 { font-size: 16px; }
  .faq-content { padding: 0 16px 20px 16px; }
  .faq-content p { padding-left: 56px; font-size: 15px; }
}
/* Accesibilidad */
.faq-question:focus, .faq-question:focus-visible { outline: 2px solid #e95178; outline-offset: 2px; }

/* Home banners (desktop + mobile) */
.home-banners .home-banner { position: relative; }
.home-banners .banner-mobile-panel { display: none; }
.home-banners .banner-content-left {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  padding: 1rem; /* padding base para no pisar bordes */
  width: 100%;
  pointer-events: none; /* el contenedor no interfiere, el contenido sí */
}
.home-banners .banner-content-inner {
  pointer-events: auto;
  margin-left: 1rem; /* margen izquierdo adicional */
  max-width: 640px;
}
.home-banners .banner-title {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.home-banners .banner-text { color: #f8f9fa; }
.home-banners .btn { box-shadow: 0 4px 16px rgba(0,0,0,.2); }
@media (max-width: 767.98px) {
  /* Layout mobile: imagen arriba + panel degradado abajo, 100vh */
  .home-banners .home-banner { min-height: 80vh; display: flex; flex-direction: column; }
  /* Variables para alturas iguales (ajustables) */
  .home-banners .home-banner { --mobile-image-h: 50vh; --mobile-panel-h: 30vh; }
  .home-banners .home-banner picture { display: block; }
  .home-banners .home-banner img { width: 100%; height: var(--mobile-image-h); object-fit: cover; display: block; }
  /* Ocultar overlay de desktop en mobile */
  .home-banners .banner-content-left { display: none; }
  /* Panel inferior con degradado configurable */
  .home-banners .banner-mobile-panel {
    display: flex;
    min-height: var(--mobile-panel-h);
    padding: 20px 16px;
    background: linear-gradient(var(--grad-angle, 180deg), var(--grad-from, rgba(0,0,0,0.88)), var(--grad-to, rgba(0,0,0,0.98)));
    color: #fff;
    flex-direction: column; justify-content: center;
  }
  .home-banners .banner-mobile-panel .banner-content-inner { max-width: 92%; margin-left: 0; }
  .home-banners .banner-mobile-panel .banner-title { font-size: 1.6rem; text-shadow: none; }
  .home-banners .banner-mobile-panel .btn { box-shadow: none; }
}
/* Desktop: evitar solaparse con el arrow (controls ocupan ~15% a cada lado) */
@media (min-width: 768px) {
  /* Dejar un padding-left suficiente para quedar fuera del área del control prev */
  .home-banners .banner-content-left { padding-left: clamp(16%, 20vw, 320px); padding-right: 2rem; }
  /* Caja reducida para texto + botón */
  .home-banners .banner-content-inner {
    max-width: 420px;
    margin-left: 0;
  }
}

/* Fallback fade para carrusel cuando no hay Bootstrap JS */
#homeBannerCarousel.fallback-fade .carousel-inner { position: relative; }
#homeBannerCarousel.fallback-fade .carousel-item {
  position: absolute;
  inset: 0;
  display: block; /* override Bootstrap's display:none for non-active */
  opacity: 0;
  transition: opacity var(--bs-carousel-transition-duration, .7s) ease;
}
#homeBannerCarousel.fallback-fade .carousel-item.active {
  position: relative;
  opacity: 1;
}