/* ==========================================================================
   EnPublicaYa - Custom Styles Desacoplados (custom-styles.css)
   Ajustes visuales aislados sin interferir con bundles minificados
   ========================================================================== */

/* 1. Desplegable del Perrito (Dropup con HOVER Exclusivo) */
.dog-quote-dropup {
  position: absolute !important;
  bottom: calc(100% + 14px) !important;
  right: 0 !important;
  width: 320px !important;
  max-width: calc(100vw - 32px) !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(226, 232, 240, 0.9) !important;
  border: 1.5px solid #cbd5e1 !important;
  overflow: hidden !important;
  z-index: 9999 !important;
  cursor: default !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(0.88) translateY(16px) !important;
  transform-origin: bottom right !important;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.28s !important;
}

.ai-dog-floating-btn:hover .dog-quote-dropup,
.dog-quote-dropup:hover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: scale(1) translateY(0) !important;
}

.dog-dropup-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.dog-dropup-body {
  max-height: 250px !important;
  overflow-y: auto !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.dog-dropup-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.dog-dropup-item:hover {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  transform: translateY(-1px) !important;
}

.dog-dropup-item-img {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  border: 1.5px solid #cbd5e1 !important;
}

.dog-dropup-item-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.dog-dropup-item-name {
  font-weight: 800 !important;
  font-size: 12px !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dog-dropup-item-meta {
  font-size: 11px !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.dog-dropup-item-status .status-tag {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  display: inline-block !important;
}

.status-tag.checking {
  background: #fef3c7 !important;
  color: #b45309 !important;
}

.status-tag.confirmed {
  background: #dcfce7 !important;
  color: #15803d !important;
}

.status-tag.rejected {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

.status-tag.expired {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

.dog-dropup-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px !important;
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #2563eb !important;
  cursor: pointer !important;
}

.dog-dropup-footer:hover {
  background: #eff6ff !important;
}

/* 2. Vallas Publicitarias Hero Alineadas a 1200px */
.ad-banner-container,
.category-exclusive-view,
.hero-exclusive-banner {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3. Animaciones Suaves */
@keyframes customPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.animate-custom-pulse {
  animation: customPulse 2s infinite ease-in-out;
}

/* ==========================================================================
   🧭 MENÚ EXPLORAR CON SUBMODALES LATERALES & TASA BCV
   ========================================================================== */

.explorar-cascade-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 8px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2), 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  width: 270px !important;
  padding: 12px !important;
  z-index: 99999 !important;
  box-sizing: border-box !important;
  animation: fadeInCascade 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.explorar-cascade-menu::before {
  content: '' !important;
  position: absolute !important;
  top: -12px !important;
  left: 0 !important;
  right: 0 !important;
  height: 14px !important;
  background: transparent !important;
  display: block !important;
}

@keyframes fadeInCascade {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.explorar-nav-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 12px !important;
  border-radius: 12px !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  position: relative !important;
  margin-bottom: 4px !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
}

.explorar-nav-item:hover,
.explorar-nav-item.active {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

.explorar-item-content {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.explorar-arrow {
  font-size: 14px !important;
  color: #94a3b8 !important;
  font-weight: 800 !important;
  transition: transform 0.15s ease !important;
}

.explorar-nav-item:hover .explorar-arrow {
  color: #2563eb !important;
  transform: translateX(3px) !important;
}

/* Sub-modales emergentes laterales */
.explorar-submodal {
  display: none;
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  margin-left: 8px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22), 0 6px 20px rgba(15, 23, 42, 0.08) !important;
  width: 290px !important;
  padding: 12px !important;
  z-index: 100000 !important;
  box-sizing: border-box !important;
  animation: fadeInCascade 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.explorar-submodal::before {
  content: '' !important;
  position: absolute !important;
  top: -6px !important;
  left: -14px !important;
  width: 18px !important;
  bottom: -6px !important;
  background: transparent !important;
  display: block !important;
}

.explorar-nav-item:hover .explorar-submodal,
.explorar-nav-item.open-sub .explorar-submodal {
  display: block !important;
}

.submodal-header {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.submodal-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
}

.submodal-chip {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}

.submodal-chip:hover {
  background: #eff6ff !important;
  color: #2563eb !important;
  transform: translateX(2px) !important;
}

.submodal-chip span:first-child {
  font-size: 15px !important;
}

.submodal-section-divider {
  height: 1px !important;
  background: #e2e8f0 !important;
  margin: 6px 4px !important;
}

.submodal-section-title {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  margin-bottom: 2px !important;
}

.title-venta {
  color: #b45309 !important;
  background: #fef3c7 !important;
}

.title-alquiler {
  color: #1d4ed8 !important;
  background: #dbeafe !important;
}

/* Ocultar cualquier menú interno viejo de Vue que interfiera */
.cat-dropdown-menu-dark:not(#explorar-dropdown-menu),
.mega-menu:not(#explorar-dropdown-menu),
.cat-menu-list:not(.explorar-cascade-menu .cat-menu-list) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ocultar cualquier segundo botón duplicado en el navbar si existe */
.cat-dropdown-wrapper + .cat-dropdown-wrapper {
  display: none !important;
}

/* ==========================================================================
   Historial de Cotizaciones DOM-Nativo (epy-qh)
   ========================================================================== */
.epy-qh-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.epy-qh-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.epy-qh-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.epy-qh-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-1px) !important;
}

.epy-qh-card-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.epy-qh-img {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  border: 1px solid #e2e8f0 !important;
}

.epy-qh-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.epy-qh-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.epy-qh-biz {
  font-size: 11.5px !important;
  color: #64748b !important;
  font-weight: 600 !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.epy-qh-date {
  font-size: 10.5px !important;
  color: #94a3b8 !important;
  margin-top: 1px !important;
}

.epy-qh-badge {
  display: inline-block !important;
  align-self: flex-start !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
}

.epy-qh-actions {
  display: flex !important;
  gap: 6px !important;
  margin-top: 2px !important;
  flex-wrap: wrap !important;
}

.epy-qh-btn {
  flex: 1 !important;
  min-width: 100px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: center !important;
}

.epy-qh-btn:hover {
  transform: scale(1.02) !important;
}

.epy-qh-btn--green {
  background: #10b981 !important;
  color: #ffffff !important;
}

.epy-qh-btn--blue {
  background: #2563eb !important;
  color: #ffffff !important;
}

.epy-qh-btn--amber {
  background: #f59e0b !important;
  color: #ffffff !important;
}

.epy-qh-btn--gray {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

.epy-qh-empty {
  text-align: center !important;
  padding: 36px 16px !important;
  color: #94a3b8 !important;
}

.epy-qh-empty-title {
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #1e293b !important;
  margin: 0 0 4px 0 !important;
}

.epy-qh-empty-sub {
  font-size: 12.5px !important;
  color: #64748b !important;
  margin: 0 !important;
}

.epy-qh-loading {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 30px !important;
}

.epy-qh-loading span {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #3b82f6 !important;
  animation: bounceDot 0.8s infinite ease-in-out !important;
}

.epy-qh-loading span:nth-child(2) { animation-delay: 0.15s !important; }
.epy-qh-loading span:nth-child(3) { animation-delay: 0.3s !important; }

/* ==========================================================================
   Estructura de Dos Columnas del AI Chat Sidebar
   ========================================================================== */
.ai-chat-sidebar {
  display: flex !important;
  flex-direction: row !important;
}

/* Columna Izquierda: Cotizaciones Recientes */
.ai-chat-sidebar > div:first-child {
  width: 320px !important;
  min-width: 280px !important;
  max-width: 340px !important;
  border-right: 1px solid #e2e8f0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #f8fafc !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

/* Columna Derecha: Chat y Cotizador Principal */
.ai-chat-sidebar > div:last-child {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #ffffff !important;
}

/* ==========================================================================
   Vista "Afiliar mi Empresa" (BusinessView / business-info)
   Alineación de Ancho con la Barra Superior (1280px), Valla Publicitaria
   en el Top y Tipografía de Alto Contraste
   ========================================================================== */

/* 1. Contenedores Principales y Ancho Unificado */
.business-info-page-wrapper {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 80vh !important;
  padding: 20px 0 60px 0 !important;
  background: #f8fafc !important;
}

.business-info-container {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

.business-page {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.business-page > section,
.business-page .container {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2. Valla Publicitaria / Hero Banner en el Top */
.business-page .premium-hero {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto 24px auto !important;
  padding: 0 !important;
  min-height: auto !important;
}

.business-page .premium-hero .ad-banner-container {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e2e8f0 !important;
}

/* 3. Hero Card Principal (Dark) */
.b-hero-card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto 28px auto !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 24px !important;
  padding: 44px 32px !important;
  text-align: center !important;
  color: #ffffff !important;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.25) !important;
}

.b-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}

.b-hero-title {
  font-size: clamp(26px, 3.5vw, 42px) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 16px 0 !important;
}

.b-hero-sub {
  font-size: 15.5px !important;
  font-weight: 500 !important;
  color: #e2e8f0 !important;
  line-height: 1.6 !important;
  max-width: 750px !important;
  margin: 0 auto 28px auto !important;
}

.b-hero-ctas {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px !important;
}

.btn-hero-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #f59e0b !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  padding: 14px 28px !important;
  border-radius: 14px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3) !important;
}

.btn-hero-primary:hover {
  background: #d97706 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.btn-hero-sec {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 14px 26px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-hero-sec:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  transform: translateY(-2px) !important;
}

/* 4. Tira de Métricas */
.metrics-strip {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto 32px auto !important;
}

.metrics-grid-container {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 14px 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

.metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}

.metric-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 12px 8px !important;
  background: #f8fafc !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 14px !important;
}

.metric-emoji {
  font-size: 24px !important;
  margin-bottom: 4px !important;
}

.metric-value {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -0.5px !important;
}

.metric-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  margin-top: 2px !important;
}

/* 5. Sección "Cómo Funciona" con Simulador de Celular */
.b-how {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto 36px auto !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 24px !important;
  padding: 48px 36px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

.section-center {
  text-align: center !important;
  margin-bottom: 36px !important;
}

.section-title {
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 10px 0 !important;
}

.section-sub {
  color: #475569 !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  line-height: 1.5 !important;
}

.b-step-card-row {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 18px 22px !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 18px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  margin-bottom: 14px !important;
}

.b-step-card-row:hover,
.b-step-card-row.active {
  background: #ffffff !important;
  border-color: #f59e0b !important;
  transform: translateX(6px) !important;
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.12) !important;
}

.b-step-row-num {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #d97706 !important;
  opacity: 1 !important;
  min-width: 44px !important;
}

.b-step-row-content h3 {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  margin: 0 0 4px 0 !important;
}

.b-step-card-row.active .b-step-row-content h3 {
  color: #b45309 !important;
}

.b-step-row-content p {
  color: #475569 !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* 6. Ventajas Exclusivas */
.b-advantages {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto 36px auto !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 24px !important;
  padding: 48px 36px !important;
  color: #ffffff !important;
}

.adv-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  margin-bottom: 16px !important;
}

.b-advantages .section-title {
  color: #ffffff !important;
}

.b-advantages .section-sub {
  color: #cbd5e1 !important;
}

.advantages-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

.adv-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  transition: all 0.3s ease !important;
}

.adv-card:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: #f59e0b !important;
  transform: translateY(-4px) !important;
}

.adv-card-inner {
  padding: 24px 20px !important;
  display: flex !important;
  flex-direction: column !important;
}

.adv-icon-wrapper {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #fbbf24 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
}

.adv-card-tag {
  color: #fbbf24 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

.adv-card h3 {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  margin: 0 0 8px 0 !important;
}

.adv-card p {
  color: #cbd5e1 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* 7. Planes y Tarifas Transparentes */
.plans-section {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto 36px auto !important;
}

.plans-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

.plan-card {
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 24px !important;
  padding: 36px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

.plan-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08) !important;
}

.plan-card.plan-highlight {
  border: 2.5px solid #f59e0b !important;
  box-shadow: 0 20px 40px rgba(245, 158, 11, 0.16) !important;
}

.plan-badge-popular {
  position: absolute !important;
  top: -13px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #f59e0b !important;
  color: #0f172a !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 4px 16px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3) !important;
}

.plan-name {
  color: #0f172a !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  margin: 0 0 10px 0 !important;
}

.plan-badge-inline {
  display: inline-block !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

.plan-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin-bottom: 14px !important;
}

.price-value {
  font-size: 38px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  letter-spacing: -1.5px !important;
}

.price-period {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #64748b !important;
}

.plan-desc {
  color: #475569 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin: 0 0 24px 0 !important;
}

.plan-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.plan-features li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

.plan-cta-btn {
  width: 100% !important;
  padding: 14px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 2px solid #0f172a !important;
  color: #0f172a !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
}

.plan-cta-btn:hover {
  background: #0f172a !important;
  color: #ffffff !important;
}

.plan-cta-primary {
  background: #f59e0b !important;
  color: #0f172a !important;
  border-color: #f59e0b !important;
  font-weight: 900 !important;
}

.plan-cta-primary:hover {
  background: #d97706 !important;
  color: #ffffff !important;
  border-color: #d97706 !important;
}

/* Caja Informativa de Comisión */
.commission-info {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 24px 30px !important;
  margin-top: 32px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

.info-content h4 {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  margin: 0 0 10px 0 !important;
}

.info-content p {
  color: #475569 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin: 0 0 12px 0 !important;
}

.info-content ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.info-content li {
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
}

.info-content strong {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* 8. Preguntas Frecuentes */
.faq-section {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto 36px auto !important;
}

.faq-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.faq-item {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

.faq-item:hover {
  border-color: #cbd5e1 !important;
}

.faq-question {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.faq-icon {
  color: #64748b !important;
  font-size: 15px !important;
  transition: transform 0.2s ease !important;
}

.faq-icon.open {
  color: #d97706 !important;
  transform: rotate(180deg) !important;
}

.faq-answer {
  color: #334155 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  border-top: 1px solid #f1f5f9 !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
}

/* 9. Módulo de Registro Rápido */
.registration-section {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto 48px auto !important;
}

.registration-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 24px !important;
  padding: 40px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: 36px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

.reg-info h2 {
  color: #0f172a !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  margin: 0 0 14px 0 !important;
}

.reg-info p {
  color: #475569 !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  margin: 0 0 24px 0 !important;
}

.kyc-badge {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: #fef3c7 !important;
  border: 1.5px solid #fde68a !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  color: #78350f !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.kyc-badge strong {
  color: #78350f !important;
  font-weight: 900 !important;
}

.reg-form-mock {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 32px !important;
}

.form-title {
  color: #0f172a !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  text-align: center !important;
  margin: 0 0 22px 0 !important;
}

.form-group {
  margin-bottom: 18px !important;
}

.form-group label {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.type-selector-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.type-selector-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 14px !important;
  background: #ffffff !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.type-selector-card .type-text {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.type-selector-card.active {
  background: #f0fdf4 !important;
  border-color: #10b981 !important;
}

.type-selector-card.active .type-text {
  color: #15803d !important;
}

.form-input {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
}

.form-input:focus {
  border-color: #f59e0b !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}

/* 10. Modales de Registro de Negocio (BusinessRegisterModal / biz-reg-card) */
.biz-reg-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(15, 23, 42, 0.75) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

.biz-reg-card {
  background: #ffffff !important;
  border-radius: 24px !important;
  max-width: 580px !important;
  width: calc(100% - 32px) !important;
  margin: 0 auto !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35) !important;
  border: 1.5px solid #cbd5e1 !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  padding: 32px 28px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.biz-reg-header h2 {
  color: #0f172a !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  margin: 0 0 6px 0 !important;
}

.biz-reg-header p {
  color: #475569 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.biz-form label {
  color: #1e293b !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.biz-radio {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #1e293b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.biz-radio.active {
  background: #fffbeb !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
}

.category-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #1e293b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.category-checkbox.active {
  background: #f0fdf4 !important;
  border-color: #10b981 !important;
  color: #15803d !important;
  font-weight: 800 !important;
}

/* 11. Adaptaciones Responsive */
@media (max-width: 1024px) {
  .plans-grid {
    grid-template-columns: 1fr !important;
    max-width: 500px !important;
    margin: 0 auto !important;
  }
  .advantages-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .registration-card {
    grid-template-columns: 1fr !important;
  }
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .business-info-page-wrapper {
    padding: 10px 0 40px 0 !important;
  }
  .business-info-container,
  .business-page {
    padding: 0 12px !important;
  }
  .advantages-grid {
    grid-template-columns: 1fr !important;
  }
  .b-hero-card {
    padding: 28px 18px !important;
  }
  .registration-card {
    padding: 24px 16px !important;
  }
  .reg-form-mock {
    padding: 20px 14px !important;
  }
  .biz-reg-card {
    padding: 24px 18px !important;
  }
}

/* ==========================================================================
   Barra de Filtro de Ubicación y Estado en Directorio (Services View)
   ========================================================================== */
.dir-location-filter-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 16px !important;
  flex-wrap: wrap !important;
}

.dir-location-filter-bar select {
  font-family: inherit !important;
  cursor: pointer !important;
}

.dir-location-filter-bar select option {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  padding: 6px !important;
}

.cat-hub-card {
  user-select: none !important;
}

.cat-hub-card:hover {
  border-color: #cbd5e1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
}