/* ==========================================================================
   DENTARIO — BRAND DESIGN TOKENS & HIGH CONTRAST THEME SYSTEM
   Manual Básico de Identidad Visual v1.0
   65% blanco/hielo · 25% azul · 10% cian de acento
   ========================================================================== */

:root {
  /* 03 · Paleta Cromática Oficial */
  --brand-navy: #052F66;          /* RGB 5, 47, 102 */
  --brand-deep-navy: #011E56;     /* RGB 1, 30, 86 */
  --brand-cyan: #09C7ED;          /* RGB 9, 199, 237 - Acento: CTA, números, palabras clave */
  --brand-digital-blue: #0AB3F9;    /* RGB 10, 179, 249 */
  --brand-sky: #ADDFFB;           /* RGB 173, 223, 251 */
  --brand-ice: #F3FAFD;           /* RGB 243, 250, 253 - Base limpia / hielo */
  --brand-ink: #0B1633;           /* RGB 11, 22, 51 - Texto principal oscuro */
  --brand-slate: #5B6480;         /* RGB 91, 100, 128 - Texto secundario */

  /* Semántica funcional - Modo Claro de Alto Contraste */
  --brand-bg: #FFFFFF;
  --brand-bg-alt: var(--brand-ice);
  --brand-surface: #FFFFFF;
  --brand-card-border: #DCEAF4;
  --brand-card-radius: 20px;
  --brand-card-shadow: 0 10px 30px -5px rgba(5, 47, 102, 0.08);
  --brand-section-border: 1px solid #DCEAF4;

  /* 04 · Tipografía Oficial */
  --font-family-primary: 'Poppins', 'Manrope', -apple-system, sans-serif;
  --font-lettering-slogan: "PRECISIÓN EN TU GESTIÓN";
}

/* Modo Oscuro coherente con manual (Deep Navy & Ink) */
[data-theme="dark"] {
  --brand-bg: #011E56;
  --brand-bg-alt: #052F66;
  --brand-surface: #07224A;
  --brand-card-border: rgba(9, 199, 237, 0.20);
  --brand-card-shadow: 0 14px 40px -5px rgba(0, 0, 0, 0.6);
  --brand-section-border: 1px solid rgba(9, 199, 237, 0.16);
}

/* ==========================================================================
   RITMO VISUAL & CORTE CLARO DE SECCIONES (LIGHT & DARK CONTRAST)
   ========================================================================== */

/* MODO CLARO: Alternancia nítida entre Blanco puro y Hielo #F3FAFD con borde #DCEAF4 */
[data-theme="light"] body,
:root:not([data-theme="dark"]) body {
  background-color: #FFFFFF;
  color: var(--brand-ink);
}

/* 1. Hero: Blanco puro */
[data-theme="light"] .acre-hero,
:root:not([data-theme="dark"]) .acre-hero {
  background: #FFFFFF;
}

/* 2. Tour (Video): Hielo con corte superior e inferior */
[data-theme="light"] .acre-warm-section,
:root:not([data-theme="dark"]) .acre-warm-section {
  background: #F3FAFD;
  border-top: var(--brand-section-border);
  border-bottom: var(--brand-section-border);
}

/* 3. Quote: Blanco puro */
[data-theme="light"] .acre-quote-section,
:root:not([data-theme="dark"]) .acre-quote-section {
  background: #FFFFFF;
}

/* 4. Solución (3 Pilares): Blanco puro con tarjetas Hielo */
[data-theme="light"] .acre-pillars-section,
:root:not([data-theme="dark"]) .acre-pillars-section {
  background: #FFFFFF;
}
[data-theme="light"] .acre-pillars-section .pillar-card,
:root:not([data-theme="dark"]) .acre-pillars-section .pillar-card {
  background: #F3FAFD;
  border: 1px solid #DCEAF4;
  box-shadow: 0 4px 20px -2px rgba(5, 47, 102, 0.05);
}

/* 5. Resultados: Hielo con corte superior e inferior y tarjetas blancas elevadas */
[data-theme="light"] .acre-results-section,
:root:not([data-theme="dark"]) .acre-results-section {
  background: #F3FAFD;
  border-top: var(--brand-section-border);
  border-bottom: var(--brand-section-border);
}
[data-theme="light"] .acre-results-section .result-card,
:root:not([data-theme="dark"]) .acre-results-section .result-card {
  background: #FFFFFF;
  border: 1px solid #DCEAF4;
  box-shadow: 0 4px 18px -2px rgba(5, 47, 102, 0.06);
}

/* 6. Odontograma: Blanco puro con workstation de alto contraste */
[data-theme="light"] .showcase,
:root:not([data-theme="dark"]) .showcase {
  background: #FFFFFF;
}
[data-theme="light"] .odo-workstation-frame,
:root:not([data-theme="dark"]) .odo-workstation-frame {
  background: #FFFFFF;
  border: 1px solid #DCEAF4;
  box-shadow: 0 20px 45px -10px rgba(5, 47, 102, 0.12);
}

/* 7. Galería Software: Hielo con corte */
[data-theme="light"] .showcase-carousel-section,
:root:not([data-theme="dark"]) .showcase-carousel-section {
  background: #F3FAFD;
  border-top: var(--brand-section-border);
  border-bottom: var(--brand-section-border);
}

/* 8. Experiencia 360: Blanco puro */
[data-theme="light"] .ecosystem-section,
:root:not([data-theme="dark"]) .ecosystem-section {
  background: #FFFFFF;
}
[data-theme="light"] .bento-eco-card,
:root:not([data-theme="dark"]) .bento-eco-card {
  background: #FFFFFF;
  border: 1px solid #DCEAF4;
  box-shadow: 0 8px 24px -4px rgba(5, 47, 102, 0.06);
}

/* 9. Transformación Operativa: Hielo con corte */
[data-theme="light"] .transformation-section,
:root:not([data-theme="dark"]) .transformation-section {
  background: #F3FAFD;
  border-top: var(--brand-section-border);
  border-bottom: var(--brand-section-border);
}
[data-theme="light"] .transform-col,
:root:not([data-theme="dark"]) .transform-col {
  background: #FFFFFF;
  border: 1px solid #DCEAF4;
  box-shadow: 0 8px 24px -4px rgba(5, 47, 102, 0.06);
}

/* 10. ROI Calculator: Blanco puro con tarjeta Hielo */
[data-theme="light"] .calculator,
:root:not([data-theme="dark"]) .calculator {
  background: #FFFFFF;
}
[data-theme="light"] .calc-card,
:root:not([data-theme="dark"]) .calc-card {
  background: #F3FAFD;
  border: 1px solid #DCEAF4;
  box-shadow: 0 10px 30px -5px rgba(5, 47, 102, 0.08);
}

/* 11. Planes: Hielo con corte nítido y tarjetas blancas elevadas */
[data-theme="light"] .pricing-v3,
:root:not([data-theme="dark"]) .pricing-v3 {
  background: #F3FAFD;
  border-top: var(--brand-section-border);
  border-bottom: var(--brand-section-border);
}
[data-theme="light"] .pricing-v3 .price-card,
:root:not([data-theme="dark"]) .pricing-v3 .price-card {
  background: #FFFFFF;
  border: 1px solid #DCEAF4;
  box-shadow: 0 10px 30px -5px rgba(5, 47, 102, 0.08);
}
[data-theme="light"] .pricing-v3 .price-card.featured,
:root:not([data-theme="dark"]) .pricing-v3 .price-card.featured {
  border: 2px solid var(--brand-cyan);
  box-shadow: 0 20px 45px -8px rgba(9, 199, 237, 0.25);
}

/* 12. Recursos / Blog: Blanco puro */
[data-theme="light"] .blog,
:root:not([data-theme="dark"]) .blog {
  background: #FFFFFF;
}
[data-theme="light"] .blog-card,
:root:not([data-theme="dark"]) .blog-card {
  background: #FFFFFF;
  border: 1px solid #DCEAF4;
  box-shadow: 0 6px 20px -3px rgba(5, 47, 102, 0.06);
}

/* 13. FAQ: Hielo con corte */
[data-theme="light"] .faq,
:root:not([data-theme="dark"]) .faq {
  background: #F3FAFD;
  border-top: var(--brand-section-border);
  border-bottom: var(--brand-section-border);
}
[data-theme="light"] .faq-item,
:root:not([data-theme="dark"]) .faq-item {
  background: #FFFFFF;
  border: 1px solid #DCEAF4;
  box-shadow: 0 4px 14px -2px rgba(5, 47, 102, 0.04);
}

/* 14. CTA Banner: Deep Navy Oficial en ambos temas */
.cta {
  background: linear-gradient(135deg, #011E56 0%, #052F66 100%) !important;
  color: #FFFFFF !important;
}
.cta h2 {
  color: #FFFFFF !important;
}
.cta p {
  color: #ADDFFB !important;
}

/* 15. Footer: Deep Ink Oficial en ambos temas */
.dentario-footer {
  background: #0B1633 !important;
  color: #E2E8F0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.dentario-footer .logo-dent,
.dentario-footer .footer-logo .logo-dent {
  color: #FFFFFF !important;
}
.dentario-footer .logo-ario,
.dentario-footer .footer-logo .logo-ario {
  color: #00B8F0 !important;
}
.dentario-footer a {
  color: #94A3B8;
}
.dentario-footer a:hover {
  color: #09C7ED;
}

/* ==========================================================================
   MODO OSCURO: Alternancia nítida entre Deep Navy (#011E56) y Navy (#052F66)
   ========================================================================== */
[data-theme="dark"] body {
  background-color: #011E56;
  color: #F8FAFC;
}
[data-theme="dark"] .acre-hero {
  background: #011E56;
}
[data-theme="dark"] .acre-warm-section {
  background: #052F66;
  border-top: var(--brand-section-border);
  border-bottom: var(--brand-section-border);
}
[data-theme="dark"] .acre-quote-section {
  background: #011E56;
}
[data-theme="dark"] .acre-pillars-section {
  background: #011E56;
}
[data-theme="dark"] .acre-pillars-section .pillar-card {
  background: #07224A;
  border: 1px solid rgba(9, 199, 237, 0.18);
}
[data-theme="dark"] .acre-results-section {
  background: #052F66;
  border-top: var(--brand-section-border);
  border-bottom: var(--brand-section-border);
}
[data-theme="dark"] .acre-results-section .result-card {
  background: #07224A;
  border: 1px solid rgba(9, 199, 237, 0.18);
}
[data-theme="dark"] .showcase {
  background: #011E56;
}
[data-theme="dark"] .odo-workstation-frame {
  background: #07224A;
  border: 1px solid rgba(9, 199, 237, 0.22);
}
[data-theme="dark"] .showcase-carousel-section {
  background: #052F66;
  border-top: var(--brand-section-border);
  border-bottom: var(--brand-section-border);
}
[data-theme="dark"] .ecosystem-section {
  background: #011E56;
}
[data-theme="dark"] .bento-eco-card {
  background: #07224A;
  border: 1px solid rgba(9, 199, 237, 0.18);
}
[data-theme="dark"] .transformation-section {
  background: #052F66;
  border-top: var(--brand-section-border);
  border-bottom: var(--brand-section-border);
}
[data-theme="dark"] .transform-col {
  background: #07224A;
  border: 1px solid rgba(9, 199, 237, 0.18);
}
[data-theme="dark"] .calculator {
  background: #011E56;
}
[data-theme="dark"] .calc-card {
  background: #07224A;
  border: 1px solid rgba(9, 199, 237, 0.18);
}
[data-theme="dark"] .pricing-v3 {
  background: #052F66;
  border-top: var(--brand-section-border);
  border-bottom: var(--brand-section-border);
}
[data-theme="dark"] .pricing-v3 .price-card {
  background: #07224A;
  border: 1px solid rgba(9, 199, 237, 0.20);
}
[data-theme="dark"] .pricing-v3 .price-card.featured {
  border: 2px solid var(--brand-cyan);
  box-shadow: 0 16px 45px -8px rgba(9, 199, 237, 0.35);
}
[data-theme="dark"] .blog {
  background: #011E56;
}
[data-theme="dark"] .blog-card {
  background: #07224A;
  border: 1px solid rgba(9, 199, 237, 0.18);
}
[data-theme="dark"] .faq {
  background: #052F66;
  border-top: var(--brand-section-border);
  border-bottom: var(--brand-section-border);
}
[data-theme="dark"] .faq-item {
  background: #07224A;
  border: 1px solid rgba(9, 199, 237, 0.18);
}

/* ==========================================================================
   PLANES: NOMBRES Y ENCABEZADOS CENTRADOS (SOLICITUD EXPLÍCITA)
   ========================================================================== */
.pricing-grid-v3 .price-card {
  text-align: center;
}
.pricing-grid-v3 .price-top-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-bottom: 0.75rem !important;
}
.pricing-grid-v3 .price-icon {
  margin: 0 auto 0.85rem !important;
}
.pricing-grid-v3 .price-name {
  text-align: center !important;
  width: 100% !important;
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.35rem !important;
}
.pricing-grid-v3 .price-desc {
  text-align: center !important;
  width: 100% !important;
  max-width: 280px !important;
  margin: 0 auto !important;
}
.pricing-grid-v3 .price-pricing-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 1.15rem 0 1.5rem !important;
  padding-bottom: 1.25rem !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
.pricing-grid-v3 .price-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0.35rem !important;
}
.pricing-grid-v3 .price-pill-specs {
  margin: 0.45rem auto 0 !important;
}
.pricing-grid-v3 .price-features {
  text-align: left !important;
}

/* Responsive Planes */
@media (max-width: 1024px) {
  .pricing-grid-v3 {
    grid-template-columns: 1fr !important;
    max-width: 480px !important;
    margin: 2.5rem auto 0 !important;
    gap: 2rem !important;
  }
}

/* ==========================================================================
   NAVBAR: LOGO MÁS GRANDE Y TIGHT WORDMARK ("junta más el nombre")
   ========================================================================== */
.acre-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.acre-logo .logo-img {
  height: 52px !important;
  width: auto !important;
  max-height: 52px !important;
  object-fit: contain !important;
  display: block !important;
  margin-right: -16px !important;
  transition: transform 0.25s ease !important;
}
.acre-logo:hover .logo-img {
  transform: scale(1.05) !important;
}
.acre-logo .logo-wordmark {
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 1.72rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.06em !important;
  line-height: 1 !important;
  margin-left: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.logo-dent {
  color: #0A1B39 !important;
  font-weight: 900 !important;
}
[data-theme="dark"] .logo-dent {
  color: #FFFFFF !important;
}
.logo-ario {
  color: #00B8F0 !important;
  font-weight: 900 !important;
}
[data-theme="dark"] .logo-ario {
  color: #00C4FF !important;
}

/* ==========================================================================
   NAVBAR ACTIONS: INICIAR SESIÓN Y CONOCER DENTARIO JUNTOS
   ========================================================================== */
.acre-nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.btn-nav-login {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  padding: 0 16px !important;
  height: 40px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

[data-theme="light"] .btn-nav-login,
:root:not([data-theme="dark"]) .btn-nav-login {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #0B1633 !important;
}

[data-theme="light"] .btn-nav-login i,
:root:not([data-theme="dark"]) .btn-nav-login i {
  color: #052F66 !important;
  font-size: 1rem !important;
}

[data-theme="light"] .btn-nav-login:hover,
:root:not([data-theme="dark"]) .btn-nav-login:hover {
  background: #E2E8F0 !important;
  border-color: #052F66 !important;
  color: #052F66 !important;
}

[data-theme="dark"] .btn-nav-login {
  background: rgba(9, 199, 237, 0.08) !important;
  border: 1px solid rgba(9, 199, 237, 0.28) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .btn-nav-login i {
  color: #09C7ED !important;
  font-size: 1rem !important;
}

[data-theme="dark"] .btn-nav-login:hover {
  background: rgba(9, 199, 237, 0.18) !important;
  border-color: #09C7ED !important;
  color: #09C7ED !important;
}

@media (max-width: 768px) {
  .btn-nav-login {
    display: none !important;
  }
}

/* ==========================================================================
   ACRE QUOTE SECTION: ALTO CONTRASTE EN MODO CLARO & OSCURO
   ========================================================================== */
[data-theme="light"] .acre-quote-section,
:root:not([data-theme="dark"]) .acre-quote-section {
  background: #F3FAFD !important;
  border-top: var(--brand-section-border) !important;
  border-bottom: var(--brand-section-border) !important;
}

[data-theme="light"] .quote-text,
:root:not([data-theme="dark"]) .quote-text {
  color: #0B1633 !important; /* Deep Ink - 100% legible */
  font-weight: 700 !important;
}

[data-theme="light"] .stat-desc,
:root:not([data-theme="dark"]) .stat-desc {
  color: #334155 !important;
  font-weight: 500 !important;
}

[data-theme="light"] .metric-item b,
:root:not([data-theme="dark"]) .metric-item b {
  color: #052F66 !important;
}

[data-theme="light"] .metric-item span,
:root:not([data-theme="dark"]) .metric-item span {
  color: #0284C7 !important;
}

[data-theme="light"] .quote-author,
:root:not([data-theme="dark"]) .quote-author {
  color: #052F66 !important;
}

[data-theme="light"] .quote-mark,
:root:not([data-theme="dark"]) .quote-mark {
  color: #09C7ED !important;
  opacity: 0.9 !important;
}

[data-theme="light"] .acre-quote-block,
:root:not([data-theme="dark"]) .acre-quote-block {
  border-left: 3px solid #09C7ED !important;
}

[data-theme="light"] .stat-number-giant,
:root:not([data-theme="dark"]) .stat-number-giant {
  color: #052F66 !important;
}

/* ==========================================================================
   WHATSAPP FLOAT: SOLO ÍCONO LIMPIO Y REDONDO
   ========================================================================== */
.wa-float-btn {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45) !important;
  padding: 0 !important;
  text-decoration: none !important;
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  z-index: 9999 !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.wa-float-btn:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.6) !important;
}

.wa-float-btn i {
  font-size: 2.2rem !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.wa-float-btn .wa-float-label,
.wa-float-btn .wa-float-pulse {
  display: none !important;
}

/* ==========================================================================
   TRANSFORMACIÓN OPERATIVA (#impacto) — EXACTO A CAPTURAS 1 Y 2
   ========================================================================== */
.transform-editorial-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem !important;
  margin-top: 3.5rem !important;
}

.transform-col {
  border-radius: 24px !important;
  padding: 2.6rem 2.2rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.25s ease !important;
}

[data-theme="light"] .col-before {
  background: #FFFFFF !important;
  border: 1px solid #DCEAF4 !important;
  box-shadow: 0 10px 30px rgba(5, 47, 102, 0.06) !important;
}

[data-theme="dark"] .col-before {
  background: #07224A !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="light"] .col-after {
  background: #FFFFFF !important;
  border: 2px solid #00B4FF !important;
  box-shadow: 0 14px 35px rgba(0, 180, 255, 0.15) !important;
}

[data-theme="dark"] .col-after {
  background: #07224A !important;
  border: 2px solid #00B4FF !important;
  box-shadow: 0 16px 45px rgba(0, 180, 255, 0.28) !important;
}

.t-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0.4rem 1rem !important;
  border-radius: 9999px !important;
  margin-bottom: 0.85rem !important;
}

.t-badge-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #EF4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

.t-badge-success {
  background: rgba(9, 199, 237, 0.12) !important;
  color: #09C7ED !important;
  border: 1px solid rgba(9, 199, 237, 0.25) !important;
}

[data-theme="light"] .t-badge-success {
  background: rgba(0, 136, 255, 0.1) !important;
  color: #0088FF !important;
  border: 1px solid rgba(0, 136, 255, 0.2) !important;
}

.t-danger-text {
  color: #EF4444 !important;
}

.text-cyan-glow {
  color: #09C7ED !important;
}

[data-theme="light"] .text-cyan-glow {
  color: #0088FF !important;
}

.transform-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.4rem !important;
}

.t-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
}

.t-icon-bad, .t-icon-good {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.18rem !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.t-icon-bad {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #EF4444 !important;
}

.t-icon-good {
  background: rgba(9, 199, 237, 0.14) !important;
  color: #09C7ED !important;
}

[data-theme="light"] .t-icon-good {
  background: rgba(0, 180, 255, 0.12) !important;
  color: #00B4FF !important;
}

/* Dashboard de Impacto (Barra inferior con íconos circulares) */
.transform-kpi-dashboard {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 3.5rem !important;
  border-radius: 24px !important;
  padding: 1.6rem 2.4rem !important;
}

[data-theme="light"] .transform-kpi-dashboard {
  background: #FFFFFF !important;
  border: 1px solid #DCEAF4 !important;
  box-shadow: 0 10px 30px rgba(5, 47, 102, 0.08) !important;
}

[data-theme="dark"] .transform-kpi-dashboard {
  background: #061B3B !important;
  border: 1px solid rgba(9, 199, 237, 0.22) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.55) !important;
}

.kpi-dash-item {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.kpi-dash-icon-circle {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.45rem !important;
  flex-shrink: 0 !important;
}

[data-theme="light"] .kpi-dash-icon-circle {
  background: #EBF7FF !important;
  color: #0088FF !important;
}

[data-theme="dark"] .kpi-dash-icon-circle {
  background: rgba(9, 199, 237, 0.15) !important;
  color: #09C7ED !important;
}

.kpi-dash-data {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.kpi-dash-num {
  font-size: 1.95rem !important;
  font-weight: 900 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  margin-bottom: 0.25rem !important;
}

[data-theme="light"] .kpi-dash-num {
  color: #052F66 !important;
}

[data-theme="dark"] .kpi-dash-num {
  color: #09C7ED !important;
}

.kpi-dash-label {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--brand-slate) !important;
  line-height: 1.3 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

[data-theme="dark"] .kpi-dash-label {
  color: #ADDFFB !important;
}

.kpi-dash-divider {
  width: 1px !important;
  height: 44px !important;
  margin: 0 1.25rem !important;
  flex-shrink: 0 !important;
}

[data-theme="light"] .kpi-dash-divider {
  background: #E2E8F0 !important;
}

[data-theme="dark"] .kpi-dash-divider {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* ==========================================================================
   TOUR FEATURE CARDS (CAPTURA 5) & DEMOSTRACIÓN DE VIDEOS
   ========================================================================== */
.tour-feature-box {
  background: #FFFFFF !important;
  border: 1px solid #DCEAF4 !important;
  border-radius: 16px !important;
  padding: 1.15rem 1.35rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  margin-bottom: 1rem !important;
}

[data-theme="dark"] .tour-feature-box {
  background: #07224A !important;
  border: 1px solid rgba(9, 199, 237, 0.18) !important;
}

.tour-feature-box:hover {
  transform: translateY(-2px) !important;
  border-color: #00B4FF !important;
}

.tour-feature-box.active-feature {
  border: 2px solid #00B4FF !important;
  box-shadow: 0 8px 24px rgba(0, 180, 255, 0.18) !important;
}

.tour-feat-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(9, 199, 237, 0.12) !important;
  color: #00B4FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  flex-shrink: 0 !important;
}

.tour-feat-body h4 {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  margin: 0 0 4px !important;
  color: var(--brand-ink) !important;
}

[data-theme="dark"] .tour-feat-body h4 {
  color: #FFFFFF !important;
}

.tour-feat-body p {
  font-size: 0.84rem !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  color: var(--brand-slate) !important;
}

[data-theme="dark"] .tour-feat-body p {
  color: #CBD5E1 !important;
}

.tour-feat-num {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #94A3B8 !important;
  margin-left: auto !important;
  align-self: flex-start !important;
  margin-top: 2px !important;
}

.v-category-tag {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  letter-spacing: 0.05em !important;
}

.tag-clinic {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10B981 !important;
}

.tag-reception {
  background: rgba(9, 199, 237, 0.15) !important;
  color: #09C7ED !important;
}

.v-card-desc {
  font-size: 0.78rem !important;
  color: var(--brand-slate) !important;
  margin: 4px 0 0 !important;
  line-height: 1.35 !important;
}

/* ==========================================================================
   PLANES (#planes) — EXACTO A CAPTURA 3
   ========================================================================== */
.pricing-grid-v3 .price-card {
  border-radius: 24px !important;
  padding: 2.4rem 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.pricing-grid-v3 .price-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: rgba(9, 199, 237, 0.12) !important;
  color: #00B4FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  margin: 0 auto 0.85rem !important;
}

.pricing-grid-v3 .price-badge {
  background: #0088FF !important;
  color: #FFFFFF !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  border-radius: 9999px !important;
  padding: 4px 14px !important;
}

.pricing-grid-v3 .price-pill-specs {
  background: rgba(9, 199, 237, 0.1) !important;
  color: #09C7ED !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 4px 14px !important;
  border-radius: 9999px !important;
  display: inline-block !important;
}

[data-theme="light"] .pricing-grid-v3 .price-pill-specs {
  background: #EBF7FF !important;
  color: #0088FF !important;
}

.price-features li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.price-features li .feat-ico {
  color: #09C7ED !important;
  font-size: 1.15rem !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

[data-theme="light"] .price-features li .feat-ico {
  color: #00B4FF !important;
}

.price-btn-primary {
  background: #0088FF !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(0, 136, 255, 0.3) !important;
}

.price-btn-primary:hover {
  background: #0070D8 !important;
  box-shadow: 0 12px 30px rgba(0, 136, 255, 0.45) !important;
}

/* Pricing Footbar */
.pricing-footbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  border-radius: 20px !important;
  padding: 1.25rem 2rem !important;
  margin-top: 2.5rem !important;
}

[data-theme="dark"] .pricing-footbar {
  background: #07224A !important;
  border: 1px solid rgba(9, 199, 237, 0.18) !important;
}

[data-theme="light"] .pricing-footbar {
  background: #FFFFFF !important;
  border: 1px solid #DCEAF4 !important;
  box-shadow: 0 6px 20px rgba(5, 47, 102, 0.05) !important;
}

.footbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 !important;
}

.footbar-icon-box {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(9, 199, 237, 0.15) !important;
  color: #09C7ED !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  flex-shrink: 0 !important;
}

[data-theme="light"] .footbar-icon-box {
  background: #EBF7FF !important;
  color: #0088FF !important;
}

/* ==========================================================================
   DEMO MODAL (#demo-modal) — EXACTO A CAPTURA 4
   ========================================================================== */
.modal-card {
  border-radius: 24px !important;
  max-width: 620px !important;
}

.modal-badge-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: rgba(9, 199, 237, 0.12) !important;
  color: #00B4FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.8rem !important;
  flex-shrink: 0 !important;
}

.form-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}

.form-label i {
  color: #00B4FF !important;
  font-size: 1rem !important;
}

.btn-modal-submit {
  background: #0088FF !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  border-radius: 12px !important;
  height: 48px !important;
  width: 100% !important;
  border: none !important;
  cursor: pointer !important;
  margin-top: 1rem !important;
  transition: all 0.2s ease !important;
}

.btn-modal-submit:hover {
  background: #0070D8 !important;
  box-shadow: 0 8px 24px rgba(0, 136, 255, 0.35) !important;
}

/* ==========================================================================
   RESPONSIVIDAD TOTAL (MOBILE, TABLET, DESKTOP)
   ========================================================================== */
/* ==========================================================================
   NAVBAR: LOGO MÁS CERCANO ("el nombre de dentario ese del navbar acercalo mas al logo")
   ========================================================================== */
.acre-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.acre-logo .logo-img {
  height: 48px !important;
  width: auto !important;
  max-height: 48px !important;
  object-fit: contain !important;
  display: block !important;
  margin-right: -10px !important; /* Acerca inmediatamente la palabra DENTARIO al isotipo */
}
.acre-logo .logo-wordmark {
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.06em !important;
  line-height: 1 !important;
  margin-left: 0 !important;
}

/* ==========================================================================
   PLANES: FOOTBAR CLEARANCE ("lo de prueba gratis eso esta interrumpiando")
   ========================================================================== */
.pricing-grid-v3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  margin-top: 3.5rem !important;
  margin-bottom: 3.5rem !important;
  position: relative !important;
  z-index: 1 !important;
}

.pricing-grid-v3 .price-card {
  height: 100% !important;
  min-height: auto !important;
  margin-bottom: 0 !important;
  position: relative !important;
}

.pricing-footbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  border-radius: 20px !important;
  padding: 1.25rem 2rem !important;
  margin-top: 3.5rem !important;
  margin-bottom: 2rem !important;
  clear: both !important;
  position: relative !important;
  z-index: 5 !important;
}

[data-theme="dark"] .pricing-footbar {
  background: #07224A !important;
  border: 1px solid rgba(9, 199, 237, 0.18) !important;
}

[data-theme="light"] .pricing-footbar {
  background: #FFFFFF !important;
  border: 1px solid #DCEAF4 !important;
  box-shadow: 0 8px 24px rgba(5, 47, 102, 0.06) !important;
}

/* ==========================================================================
   CALCULADORA DE IMPACTO / ROI (#roi) — EXACTO A CAPTURA 1
   ========================================================================== */
.calc-card {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 2.5rem !important;
  border-radius: 24px !important;
  padding: 2.8rem 2.4rem !important;
  align-items: start !important;
}

[data-theme="light"] .calc-card {
  background: #FFFFFF !important;
  border: 1px solid #DCEAF4 !important;
  box-shadow: 0 10px 35px rgba(5, 47, 102, 0.08) !important;
}

[data-theme="dark"] .calc-card {
  background: #061B3B !important;
  border: 1px solid rgba(9, 199, 237, 0.22) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.6) !important;
}

.calc-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(9, 199, 237, 0.12) !important;
  color: #09C7ED !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0.35rem 0.9rem !important;
  border-radius: 9999px !important;
  margin-bottom: 0.85rem !important;
}

[data-theme="light"] .calc-badge {
  background: #EBF7FF !important;
  color: #0088FF !important;
}

.calc-header-block h2 {
  font-size: 2rem !important;
  font-weight: 800 !important;
  margin: 0 0 0.6rem !important;
  line-height: 1.2 !important;
}

.calc-slider-card {
  border-radius: 18px !important;
  padding: 1.25rem 1.5rem !important;
  margin-top: 1.25rem !important;
  transition: all 0.2s ease !important;
}

[data-theme="light"] .calc-slider-card {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="dark"] .calc-slider-card {
  background: #07224A !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.slider-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 0.85rem !important;
}

.slider-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(9, 199, 237, 0.12) !important;
  color: #00B4FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  flex-shrink: 0 !important;
}

.slider-labels {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex: 1 !important;
}

.slider-title {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--brand-ink) !important;
}

[data-theme="dark"] .slider-title {
  color: #FFFFFF !important;
}

.slider-val {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #0088FF !important;
}

[data-theme="dark"] .slider-val {
  color: #09C7ED !important;
}

.slider-track-wrap {
  width: 100% !important;
}

.slider-input {
  width: 100% !important;
  height: 6px !important;
  border-radius: 9999px !important;
  background: #CBD5E1 !important;
  outline: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
}

[data-theme="dark"] .slider-input {
  background: rgba(255, 255, 255, 0.2) !important;
}

.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #00B4FF !important;
  cursor: pointer !important;
  box-shadow: 0 0 10px rgba(0, 180, 255, 0.6) !important;
}

.slider-scale {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.74rem !important;
  color: #94A3B8 !important;
  font-weight: 700 !important;
  margin-top: 5px !important;
}

/* Resultados ROI (3 Tarjetas horizontales de la captura 1) */
.calc-results {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.res-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.35rem 1.6rem !important;
  border-radius: 18px !important;
  transition: all 0.25s ease !important;
}

[data-theme="light"] .res-box-blue {
  background: #F0F9FF !important;
  border: 1px solid #BAE6FD !important;
}
[data-theme="light"] .res-box-green {
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
}
[data-theme="light"] .res-box-purple {
  background: #F5F3FF !important;
  border: 1px solid #DDD6FE !important;
}

[data-theme="dark"] .res-box-blue {
  background: rgba(0, 180, 255, 0.08) !important;
  border: 1px solid rgba(0, 180, 255, 0.22) !important;
}
[data-theme="dark"] .res-box-green {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
}
[data-theme="dark"] .res-box-purple {
  background: rgba(139, 92, 246, 0.08) !important;
  border: 1px solid rgba(139, 92, 246, 0.22) !important;
}

.res-main {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  flex: 1 !important;
}

.res-badge-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  flex-shrink: 0 !important;
}

.res-box-blue .res-badge-icon {
  background: rgba(0, 180, 255, 0.15) !important;
  color: #0088FF !important;
}
.res-box-green .res-badge-icon {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10B981 !important;
}
.res-box-purple .res-badge-icon {
  background: rgba(139, 92, 246, 0.15) !important;
  color: #8B5CF6 !important;
}

.res-content {
  display: flex !important;
  flex-direction: column !important;
}

.res-tag {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--brand-slate) !important;
  margin-bottom: 2px !important;
}

.res-num {
  font-size: 1.85rem !important;
  font-weight: 900 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}

.res-box-blue .res-num {
  color: #0088FF !important;
}
[data-theme="dark"] .res-box-blue .res-num {
  color: #09C7ED !important;
}

.res-box-green .res-num {
  color: #10B981 !important;
}

.res-box-purple .res-num {
  color: #6366F1 !important;
}
[data-theme="dark"] .res-box-purple .res-num {
  color: #A78BFA !important;
}

.res-desc {
  font-size: 0.8rem !important;
  color: var(--brand-slate) !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

[data-theme="dark"] .res-desc {
  color: #94A3B8 !important;
}

.res-illustration {
  font-size: 2.5rem !important;
  opacity: 0.85 !important;
  margin-left: 1rem !important;
  flex-shrink: 0 !important;
}

.il-clock {
  color: #0088FF !important;
}
.il-wa {
  color: #10B981 !important;
}
.il-coins {
  color: #6366F1 !important;
}

/* ==========================================================================
   TOUR: CARDS CON FLECHAS CIRCULARES & CHEVRON (CAPTURA 3)
   ========================================================================== */
.tour-feat-meta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}

.tour-feat-arrow {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(9, 199, 237, 0.15) !important;
  color: #00B4FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
}

.tour-feature-box.active-feature .tour-feat-arrow {
  background: #00B4FF !important;
  color: #FFFFFF !important;
}

.card-chevron {
  font-size: 1.25rem !important;
  color: #94A3B8 !important;
  margin-left: 8px !important;
  flex-shrink: 0 !important;
}

.tour-cta-lead {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 0.85rem !important;
}

.tour-q-badge {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(0, 180, 255, 0.15) !important;
  color: #00B4FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   RESPONSIVIDAD TOTAL ABSOLUTA (TODO EL SITIO)
   ========================================================================== */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
}

.wrap {
  width: 100% !important;
  max-width: 1240px !important;
  padding: 0 1.5rem !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  .mobile-tour-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .calc-card {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 2rem 1.5rem !important;
  }
  
  .transform-editorial-grid {
    grid-template-columns: 1fr !important;
    max-width: 620px !important;
    margin: 2.5rem auto 0 !important;
  }

  .pricing-grid-v3 {
    grid-template-columns: 1fr !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 2rem !important;
  }

  .transform-kpi-dashboard {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    padding: 1.8rem !important;
  }

  .kpi-dash-divider {
    display: none !important;
  }

  .odo-split-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .odo-workstation-frame {
    width: 100% !important;
    overflow-x: auto !important;
  }
}

/* ==========================================================================
   CUPÓN VOUCHER: 1 MES DE PRUEBA GRATUITA (IDÉNTICO A CAPTURA 2)
   ========================================================================== */
.ticket-voucher-wrap {
  margin-top: 4.8rem !important;
  margin-bottom: 2rem !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 10 !important;
}

.ticket-voucher {
  max-width: 940px !important;
  width: 100% !important;
  display: flex !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 16px 45px rgba(5, 47, 102, 0.12) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  cursor: pointer !important;
}

.ticket-voucher:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 22px 55px rgba(0, 180, 255, 0.22) !important;
}

[data-theme="light"] .ticket-voucher,
[data-theme="dark"] .ticket-voucher {
  background: #FFFFFF !important;
  border: 1px solid #DCEAF4 !important;
  box-shadow: 0 16px 45px rgba(5, 47, 102, 0.16) !important;
}

.ticket-body {
  flex: 1.7 !important;
  padding: 2.2rem 2.6rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
}

.ticket-header-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 1.25rem !important;
}

.ticket-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ticket-logo-img {
  height: 38px !important;
  width: auto !important;
}

.ticket-brand-text {
  display: flex !important;
  flex-direction: column !important;
}

.ticket-brand-name {
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
  color: var(--brand-ink) !important;
}

[data-theme="dark"] .ticket-brand-name {
  color: var(--brand-ink) !important;
}

.ticket-brand-slogan {
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: var(--brand-slate) !important;
  margin-top: 2px !important;
}

.ticket-decor-dashes {
  display: flex !important;
  gap: 4px !important;
}

.ticket-decor-dashes span {
  width: 14px !important;
  height: 5px !important;
  background: #09C7ED !important;
  border-radius: 9999px !important;
  transform: rotate(-35deg) !important;
}

.ticket-headline {
  margin: 0.5rem 0 !important;
}

.ticket-hl-dark {
  display: block !important;
  font-size: 2.25rem !important;
  font-weight: 900 !important;
  font-family: 'Manrope', sans-serif !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: var(--brand-ink) !important;
}

[data-theme="dark"] .ticket-hl-dark {
  color: var(--brand-ink) !important;
}

.ticket-hl-cyan {
  display: block !important;
  font-size: 2.25rem !important;
  font-weight: 900 !important;
  font-family: 'Manrope', sans-serif !important;
  letter-spacing: -0.04em !important;
  line-height: 1.1 !important;
  color: #09C7ED !important;
}

.ticket-desc {
  font-size: 0.92rem !important;
  color: var(--brand-slate) !important;
  margin: 0.6rem 0 1.5rem !important;
  line-height: 1.45 !important;
  max-width: 480px !important;
}

[data-theme="dark"] .ticket-desc {
  color: var(--brand-slate) !important;
}

.ticket-badges-row {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
  flex-wrap: wrap !important;
}

.ticket-badge-pill {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: var(--brand-ink) !important;
}

[data-theme="dark"] .ticket-badge-pill {
  color: #E2E8F0 !important;
}

.ticket-badge-pill i {
  color: #0088FF !important;
  font-size: 1.15rem !important;
}

[data-theme="dark"] .ticket-badge-pill i {
  color: #09C7ED !important;
}

/* Perforación con muescas circulares */
.ticket-perforation {
  position: relative !important;
  width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  z-index: 4 !important;
}

.ticket-dashed-line {
  height: 100% !important;
  border-left: 2px dashed rgba(148, 163, 184, 0.45) !important;
}

.ticket-notch-top, .ticket-notch-bottom {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  position: absolute !important;
  z-index: 5 !important;
}

[data-theme="light"] .ticket-notch-top,
[data-theme="light"] .ticket-notch-bottom,
[data-theme="light"] .ticket-notch-left,
[data-theme="light"] .ticket-notch-right {
  background: #F3FAFD !important;
}

[data-theme="dark"] .ticket-notch-top,
[data-theme="dark"] .ticket-notch-bottom,
[data-theme="dark"] .ticket-notch-left,
[data-theme="dark"] .ticket-notch-right {
  background: #052F66 !important;
}

.ticket-notch-top {
  top: -16px !important;
  left: -16px !important;
}

.ticket-notch-bottom {
  bottom: -16px !important;
  left: -16px !important;
}

.ticket-notch-left {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  position: absolute !important;
  left: -16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
}

.ticket-notch-right {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  position: absolute !important;
  right: -16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
}

/* Talón del Ticket (Derecha - Navy Oficial) */
.ticket-stub {
  background: #052F66 !important;
  flex: 0.9 !important;
  padding: 2.2rem 1.8rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: #FFFFFF !important;
  position: relative !important;
}

[data-theme="dark"] .ticket-stub {
  background: #011E56 !important;
}

.stub-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.85rem !important;
}

.stub-gift-box {
  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;
  background: rgba(9, 199, 237, 0.16) !important;
  color: #09C7ED !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.1rem !important;
}

.stub-text-block {
  display: flex !important;
  flex-direction: column !important;
}

.stub-sub {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: #ADDFFB !important;
  text-transform: uppercase !important;
}

.stub-main {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  color: #09C7ED !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

.stub-brand-footer {
  margin-top: 0.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.stub-logo {
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  color: #FFFFFF !important;
}

.stub-slogan {
  font-size: 0.52rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: #ADDFFB !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   TICKET VOUCHER: 1 MES DE PRUEBA GRATUITA (IDÉNTICO A CAPTURA 1)
   ========================================================================== */
.ticket-voucher-wrap {
  margin-top: 3.5rem !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.ticket-voucher {
  max-width: 960px !important;
  width: 100% !important;
  display: flex !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 20px 60px -15px rgba(0, 30, 80, 0.14) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  cursor: pointer !important;
}

.ticket-voucher:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 26px 70px -15px rgba(0, 180, 255, 0.25) !important;
}

[data-theme="light"] .ticket-voucher,
[data-theme="dark"] .ticket-voucher {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 180, 255, 0.22) !important;
  box-shadow: 0 20px 60px -15px rgba(0, 30, 80, 0.18) !important;
}

.ticket-body {
  flex: 1.65 !important;
  padding: 2.6rem 3rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  background: #FFFFFF !important;
}

[data-theme="light"] .ticket-body,
[data-theme="dark"] .ticket-body {
  background: #FFFFFF !important;
}

.ticket-header-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 1.25rem !important;
}

.ticket-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ticket-logo-img {
  height: 42px !important;
  width: auto !important;
  object-fit: contain !important;
}

.ticket-brand-text {
  display: flex !important;
  flex-direction: column !important;
}

.ticket-brand-name {
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
  line-height: 1 !important;
  color: #04153A !important;
}

[data-theme="dark"] .ticket-brand-name {
  color: #04153A !important;
}

.ticket-brand-slogan {
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #5B6F89 !important;
  margin-top: 3px !important;
}

[data-theme="dark"] .ticket-brand-slogan {
  color: #5B6F89 !important;
}

.ticket-decor-dashes {
  display: flex !important;
  gap: 5px !important;
}

.ticket-decor-dashes span {
  width: 14px !important;
  height: 5px !important;
  background: #00B4FF !important;
  border-radius: 9999px !important;
  transform: rotate(-25deg) !important;
}

.ticket-headline {
  margin: 0.4rem 0 !important;
}

.ticket-hl-dark {
  display: block !important;
  font-size: 2.6rem !important;
  font-weight: 900 !important;
  font-family: 'Manrope', sans-serif !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  color: #04153A !important;
}

[data-theme="dark"] .ticket-hl-dark {
  color: #04153A !important;
}

.ticket-hl-cyan {
  display: block !important;
  font-size: 2.6rem !important;
  font-weight: 900 !important;
  font-family: 'Manrope', sans-serif !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  color: #00B4FF !important;
}

.ticket-desc {
  font-size: 1.02rem !important;
  color: #475569 !important;
  margin: 0.85rem 0 1.6rem !important;
  line-height: 1.5 !important;
  max-width: 520px !important;
}

[data-theme="dark"] .ticket-desc {
  color: #475569 !important;
}

.ticket-badges-row {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
  flex-wrap: wrap !important;
}

.ticket-badge-pill {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #04153A !important;
}

[data-theme="dark"] .ticket-badge-pill {
  color: #04153A !important;
}

.ticket-badge-pill i {
  color: #00B4FF !important;
  font-size: 1.25rem !important;
}

/* Perforación con muescas circulares */
.ticket-perforation {
  position: relative !important;
  width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  z-index: 4 !important;
}

.ticket-dashed-line {
  height: 100% !important;
  border-left: 2px dashed rgba(148, 163, 184, 0.45) !important;
}

.ticket-notch-top, .ticket-notch-bottom {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  position: absolute !important;
  z-index: 5 !important;
  background: var(--bg-page) !important;
}

.ticket-notch-top {
  top: -17px !important;
  left: -17px !important;
}

.ticket-notch-bottom {
  bottom: -17px !important;
  left: -17px !important;
}

.ticket-notch-left {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  position: absolute !important;
  left: -17px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  background: var(--bg-page) !important;
}

.ticket-notch-right {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  position: absolute !important;
  right: -17px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  background: var(--bg-page) !important;
}

/* Talón del Ticket (Derecha - Deep Navy Oficial) */
.ticket-stub {
  background: #00224D !important;
  flex: 0.95 !important;
  padding: 2.6rem 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: #FFFFFF !important;
  position: relative !important;
}

[data-theme="dark"] .ticket-stub {
  background: #04142F !important;
}

.stub-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
}

.stub-gift-box {
  width: 64px !important;
  height: 64px !important;
  border-radius: 18px !important;
  background: #0D3B78 !important;
  color: #00C4FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.1rem !important;
  box-shadow: 0 8px 24px rgba(0, 180, 255, 0.22) !important;
}

.stub-text-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.stub-sub {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
}

.stub-main {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: #00B4FF !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

.stub-brand-footer {
  margin-top: 0.6rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.stub-logo {
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  color: #FFFFFF !important;
}

.stub-slogan {
  font-size: 0.54rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #7BB8F7 !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   2-STEP DEMO MODAL STEPPER & COMPACT RESPONSIVE STYLING (LIGHT & DARK MODES)
   ========================================================================== */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.5rem !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 9999 !important;
  background: rgba(3, 7, 18, 0.8) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

[data-theme="light"] .modal-overlay {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.modal-card {
  width: 92% !important;
  max-width: 620px !important;
  padding: 1.75rem 2.25rem !important;
  border-radius: 28px !important;
  margin: auto !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #081426 !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(0, 180, 255, 0.35) !important;
  box-shadow: 0 30px 90px -15px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 180, 255, 0.15) !important;
}

.modal-card::-webkit-scrollbar {
  width: 4px !important;
}
.modal-card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18) !important;
  border-radius: 9999px !important;
}
[data-theme="light"] .modal-card::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .modal-card {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 25px 70px -15px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
}

.modal-card-header {
  display: flex !important;
  gap: 1.15rem !important;
  align-items: center !important;
  margin-bottom: 0.95rem !important;
}

.modal-badge-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  background: rgba(0, 180, 255, 0.14) !important;
  border: 1px solid rgba(0, 180, 255, 0.35) !important;
  color: #00B4FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.45rem !important;
  flex-shrink: 0 !important;
}

[data-theme="light"] .modal-badge-icon {
  background: rgba(0, 82, 255, 0.08) !important;
  border-color: rgba(0, 82, 255, 0.22) !important;
  color: #0052FF !important;
}

.modal-eyebrow {
  display: block !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #00B4FF !important;
  margin-bottom: 0.15rem !important;
}

[data-theme="light"] .modal-eyebrow {
  color: #0052FF !important;
}

.modal-title {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #FFFFFF !important;
  margin: 0 0 0.2rem !important;
  letter-spacing: -0.01em !important;
}

[data-theme="light"] .modal-title {
  color: #04153A !important;
}

.modal-lead {
  font-size: 0.84rem !important;
  color: #94A3B8 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

[data-theme="light"] .modal-lead {
  color: #475569 !important;
}

.modal-close {
  position: absolute !important;
  top: 1.15rem !important;
  right: 1.15rem !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #94A3B8 !important;
  font-size: 0.95rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
}

[data-theme="light"] .modal-close {
  background: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #64748B !important;
}

[data-theme="light"] .modal-close:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

.modal-stepper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  margin-bottom: 1.15rem !important;
  padding-bottom: 0.95rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="light"] .modal-stepper {
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

.step-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  padding: 0.45rem 1.15rem !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #94A3B8 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  transition: all 0.25s ease !important;
}

.step-pill .step-ico {
  font-size: 1.05rem !important;
  color: inherit !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

[data-theme="light"] .step-pill {
  background: #F8FAFC !important;
  color: #475569 !important;
  border-color: #E2E8F0 !important;
}

.step-pill.active {
  background: #00B4FF !important;
  color: #04153A !important;
  border: 1.5px solid #00B4FF !important;
  box-shadow: 0 0 20px rgba(0, 180, 255, 0.4) !important;
}

.step-pill.active .step-ico {
  color: #04153A !important;
}

[data-theme="light"] .step-pill.active {
  background: #0052FF !important;
  color: #FFFFFF !important;
  border: 1.5px solid #0052FF !important;
  box-shadow: 0 4px 14px rgba(0, 82, 255, 0.3) !important;
}

[data-theme="light"] .step-pill.active .step-ico {
  color: #FFFFFF !important;
}

.step-pill.completed {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10B981 !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
}

[data-theme="light"] .step-pill.completed {
  background: #DCFCE7 !important;
  color: #16A34A !important;
  border: 1.5px solid #86EFAC !important;
}

.step-line {
  flex: 0 0 32px !important;
  height: 2px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  transition: all 0.25s ease !important;
}

[data-theme="light"] .step-line {
  background: #CBD5E1 !important;
}

.step-line.completed {
  background: #10B981 !important;
}

[data-theme="light"] .step-line.completed {
  background: #16A34A !important;
}

.form-fields-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  margin-bottom: 0.85rem !important;
}

.form-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
}

.form-label {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #CBD5E1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

[data-theme="light"] .form-label {
  color: #1E293B !important;
}

.modal-card .form-input {
  width: 100% !important;
  padding: 0.65rem 1rem !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(0, 180, 255, 0.25) !important;
  background: #061022 !important;
  color: #FFFFFF !important;
  font-size: 0.9rem !important;
  font-family: inherit !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.modal-card .form-input:focus {
  border-color: #00B4FF !important;
  background: #061022 !important;
  box-shadow: 0 0 12px rgba(0, 180, 255, 0.3) !important;
}

[data-theme="light"] .modal-card .form-input {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}

[data-theme="light"] .modal-card .form-input:focus {
  background: #FFFFFF !important;
  border-color: #0052FF !important;
  box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.12) !important;
}

[data-theme="light"] .modal-card .form-input::placeholder {
  color: #94A3B8 !important;
}

.field-char-count {
  display: flex !important;
  justify-content: flex-end !important;
  font-size: 0.66rem !important;
  color: #64748B !important;
  margin-top: 0.15rem !important;
  font-weight: 600 !important;
}

[data-theme="light"] .field-char-count {
  color: #94A3B8 !important;
}

/* BRAND ACCENT WRAP AT BOTTOM OF MODAL */
.modal-brand-slogan-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0.4rem 0 0.85rem !important;
  padding: 0 0.5rem !important;
}

.slogan-tooth-icon {
  position: relative !important;
  width: 44px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.slogan-tooth-img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 10px rgba(0, 180, 255, 0.5)) !important;
}

.tooth-orbit-ring {
  position: absolute !important;
  inset: 2px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(0, 180, 255, 0.4) !important;
  transform: rotateX(65deg) !important;
  pointer-events: none !important;
}

.slogan-handwritten {
  text-align: right !important;
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  color: #00B4FF !important;
  font-size: 1.15rem !important;
  line-height: 1.1 !important;
  transform: rotate(-2deg) !important;
}

[data-theme="light"] .slogan-handwritten {
  color: #0052FF !important;
}

.slogan-handwritten span {
  display: block !important;
  font-size: 0.95rem !important;
}

.slogan-handwritten em {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  text-decoration: underline wavy rgba(0, 180, 255, 0.6) !important;
}

[data-theme="light"] .slogan-handwritten em {
  text-decoration: underline wavy rgba(0, 82, 255, 0.5) !important;
}

.modal-card .form-check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.6rem !important;
  font-size: 0.74rem !important;
  color: #94A3B8 !important;
  line-height: 1.35 !important;
  cursor: pointer !important;
  margin-top: 0.2rem !important;
}

[data-theme="light"] .modal-card .form-check {
  color: #475569 !important;
}

[data-theme="light"] .modal-card .form-check a {
  color: #0052FF !important;
}

.btn-modal-submit {
  width: 100% !important;
  padding: 0.85rem 1.4rem !important;
  border-radius: 9999px !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

[data-theme="light"] .btn-modal-submit {
  background: #0052FF !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 20px rgba(0, 82, 255, 0.35) !important;
}

[data-theme="light"] .btn-modal-submit:hover {
  background: #0041CC !important;
  box-shadow: 0 8px 25px rgba(0, 82, 255, 0.45) !important;
}

[data-theme="dark"] .btn-modal-submit,
.btn-modal-submit {
  background: #00B4FF !important;
  color: #04153A !important;
  box-shadow: 0 6px 20px rgba(0, 180, 255, 0.4) !important;
}

[data-theme="dark"] .btn-modal-submit:hover,
.btn-modal-submit:hover {
  background: #38C7FF !important;
  box-shadow: 0 8px 25px rgba(0, 180, 255, 0.55) !important;
}

.modal-actions-two {
  display: flex !important;
  gap: 0.75rem !important;
  margin-top: 0.4rem !important;
}

.btn-modal-back {
  padding: 0.8rem 1.25rem !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #CBD5E1 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.btn-modal-back:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
}

[data-theme="light"] .btn-modal-back {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #334155 !important;
}

[data-theme="light"] .btn-modal-back:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

.modal-security-note {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  font-size: 0.7rem !important;
  color: #64748B !important;
  margin: 0.65rem 0 0 !important;
  text-align: center !important;
}

[data-theme="light"] .modal-security-note {
  color: #64748B !important;
}

/* ==========================================================================
   VIDEO DEMO SELECTOR CARDS (DARK & LIGHT MODE STYLES)
   ========================================================================== */
.video-select-card {
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  padding: 1.1rem 1.25rem !important;
  border-radius: 16px !important;
  background: #0B1C38 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  text-align: left !important;
  cursor: pointer !important;
  margin-bottom: 1rem !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

[data-theme="light"] .video-select-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

.video-select-card:hover {
  border-color: #00B4FF !important;
  transform: translateX(3px) !important;
}

[data-theme="light"] .video-select-card:hover {
  border-color: #0052FF !important;
}

.video-select-card.active {
  border-color: #00B4FF !important;
  background: rgba(0, 180, 255, 0.12) !important;
  box-shadow: 0 0 24px rgba(0, 180, 255, 0.2) !important;
}

[data-theme="light"] .video-select-card.active {
  border-color: #0052FF !important;
  background: rgba(0, 82, 255, 0.05) !important;
  box-shadow: 0 4px 20px rgba(0, 82, 255, 0.15) !important;
}

.video-select-card strong {
  display: block !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0.35rem 0 0.25rem !important;
  letter-spacing: -0.01em !important;
}

[data-theme="light"] .video-select-card strong {
  color: #04153A !important;
}

.video-select-card .v-card-desc {
  font-size: 0.84rem !important;
  color: #94A3B8 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

[data-theme="light"] .video-select-card .v-card-desc {
  color: #475569 !important;
}

.card-status-badge.status-playing {
  color: #10B981 !important;
  font-weight: 800 !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.05em !important;
}

.card-status-badge.status-idle {
  color: #64748B !important;
  font-weight: 700 !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.05em !important;
}

.card-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  margin-bottom: 0.35rem !important;
  flex-wrap: nowrap !important;
}

.v-category-tag {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  flex-shrink: 0 !important;
}

.card-status-badge {
  white-space: nowrap !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.card-chevron {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-left: 0.4rem !important;
  color: #94A3B8 !important;
}

/* ==========================================================================
   ENTERPRISE QUOTE BANNER (5+ ODONTÓLOGOS O MULTI-SEDE)
   ========================================================================== */
.enterprise-quote-banner {
  margin: 2.5rem 0 2rem !important;
  padding: 2rem 2.5rem !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(11, 28, 56, 0.95), rgba(5, 14, 28, 0.98)) !important;
  border: 1.5px solid rgba(0, 180, 255, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2rem !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 180, 255, 0.12) !important;
}

[data-theme="light"] .enterprise-quote-banner {
  background: linear-gradient(135deg, #F8FAFC, #FFFFFF) !important;
  border: 1.5px solid #CBD5E1 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

.quote-banner-left {
  max-width: 680px !important;
}

.quote-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0.3rem 0.8rem !important;
  border-radius: 9999px !important;
  background: rgba(0, 180, 255, 0.14) !important;
  color: #00B4FF !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.6rem !important;
}

[data-theme="light"] .quote-badge-pill {
  background: rgba(0, 82, 255, 0.08) !important;
  color: #0052FF !important;
}

.quote-headline {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 0.45rem !important;
  letter-spacing: -0.01em !important;
}

[data-theme="light"] .quote-headline {
  color: #04153A !important;
}

.quote-subtext {
  font-size: 0.88rem !important;
  color: #94A3B8 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

[data-theme="light"] .quote-subtext {
  color: #475569 !important;
}

.quote-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  padding: 0.95rem 1.65rem !important;
  border-radius: 9999px !important;
  background: #25D366 !important;
  color: #FFFFFF !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35) !important;
  transition: all 0.25s ease !important;
}

.quote-action-btn:hover {
  background: #20BA5A !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5) !important;
}

@media (max-width: 768px) {
  .enterprise-quote-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 1.6rem 1.4rem !important;
    gap: 1.25rem !important;
  }
  .quote-action-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   SECCIÓN DE VIDEOS (CAPTURA 3 EXACTA)
   ========================================================================== */
.tour-left-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.15rem !important;
}

.tour-top-header {
  margin-bottom: 2.5rem !important;
  max-width: 820px !important;
  text-align: left !important;
}

.tour-sub-badge {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #00B4FF !important;
  margin-bottom: 0.95rem !important;
}

[data-theme="light"] .tour-sub-badge {
  color: #0052FF !important;
}

.tour-badge-dash {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #00B4FF !important;
}

[data-theme="light"] .tour-badge-dash {
  color: #0052FF !important;
}

.tour-main-title {
  font-family: 'Manrope', 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 2.85rem !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 1.15rem !important;
  text-align: left !important;
}

[data-theme="light"] .tour-main-title {
  color: #04153A !important;
}

.text-cyan-brand {
  color: #00B4FF !important;
}

[data-theme="light"] .text-cyan-brand {
  color: #0052FF !important;
}

.tour-lead-text {
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  color: #94A3B8 !important;
  margin: 0 0 1.5rem !important;
  max-width: 480px !important;
  text-align: left !important;
}

[data-theme="light"] .tour-lead-text {
  color: #475569 !important;
}

.tour-handwritten-note {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  color: #00B4FF !important;
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  font-size: 1.45rem !important;
  margin-top: 0.5rem !important;
  padding-left: 0.5rem !important;
}

[data-theme="light"] .tour-handwritten-note {
  color: #0052FF !important;
}

.tour-handwritten-note .sparkle-left,
.tour-handwritten-note .sparkle-right {
  font-size: 0.9rem !important;
  color: #00B4FF !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN (TABLETS & PHONES) - 100% RESPONSIVE EN TODO DISPOSITIVO
   ========================================================================== */
@media (max-width: 1024px) {
  .mobile-tour-layout {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .tour-left-col {
    order: 1 !important;
    width: 100% !important;
  }
  .tour-phone-center {
    order: 2 !important;
    margin: 1.5rem auto !important;
    max-width: 320px !important;
  }
  .tour-right-col {
    order: 3 !important;
    width: 100% !important;
  }
  .odo-split-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .bento-eco-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .bento-wide {
    grid-column: span 1 !important;
  }
}

@media (max-width: 768px) {
  /* TRANSFORMACIÓN OPERATIVA & DASHBOARD RESPONSIVE PARA CUALQUIER DISPOSITIVO */
  .transform-editorial-grid {
    grid-template-columns: 1fr !important;
    margin-top: 2rem !important;
    gap: 1.5rem !important;
  }

  .transform-col {
    padding: 1.75rem 1.25rem !important;
    border-radius: 20px !important;
  }

  .transform-kpi-dashboard {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    padding: 1.5rem 1.25rem !important;
    margin-top: 2rem !important;
    border-radius: 20px !important;
  }

  .kpi-dash-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.1rem !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .kpi-dash-icon-circle {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.35rem !important;
    flex-shrink: 0 !important;
  }

  .kpi-dash-data {
    flex: 1 !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .kpi-dash-num {
    font-size: clamp(1.8rem, 6vw, 2.2rem) !important;
    line-height: 1 !important;
    margin-bottom: 0.25rem !important;
  }

  .kpi-dash-label {
    font-size: clamp(0.7rem, 2.8vw, 0.76rem) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.04em !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .kpi-dash-divider {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    margin: 0 !important;
    opacity: 0.6 !important;
  }

  [data-theme="light"] .kpi-dash-divider {
    background: #E2E8F0 !important;
  }

  [data-theme="dark"] .kpi-dash-divider {
    background: rgba(9, 199, 237, 0.2) !important;
  }

  /* TICKET RESPONSIVE */
  .ticket-voucher {
    flex-direction: column !important;
    border-radius: 24px !important;
  }
  .ticket-body {
    padding: 1.8rem 1.4rem !important;
  }
  .ticket-stub {
    padding: 1.8rem 1.4rem !important;
  }
  .ticket-hl-dark,
  .ticket-hl-cyan {
    font-size: 2rem !important;
  }
  .ticket-perforation {
    width: 100% !important;
    height: 0 !important;
    flex-direction: row !important;
  }
  .ticket-dashed-line {
    width: 100% !important;
    height: 0 !important;
    border-left: none !important;
    border-top: 2px dashed rgba(148, 163, 184, 0.45) !important;
  }
  .ticket-notch-top {
    top: -17px !important;
    left: -17px !important;
  }
  .ticket-notch-bottom {
    top: -17px !important;
    right: -17px !important;
    bottom: auto !important;
    left: auto !important;
  }
  .ticket-notch-left,
  .ticket-notch-right {
    display: none !important;
  }

  /* MODAL RESPONSIVE */
  .modal-overlay {
    align-items: flex-start !important;
    padding: 1rem 0.65rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .modal-card {
    padding: 1.6rem 1.25rem !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
    margin: auto 0 !important;
    width: 100% !important;
    border-radius: 20px !important;
  }
  .modal-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    margin-bottom: 1.25rem !important;
  }
  .modal-title {
    font-size: 1.45rem !important;
  }
  .modal-actions-two {
    flex-direction: column !important;
  }
  .btn-modal-back,
  .btn-modal-submit {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* VIDEO SELECT CARDS MOBILE FIT & WHATSAPP OVERLAP FIX */
  .video-select-card {
    padding: 0.85rem 0.95rem !important;
    gap: 0.75rem !important;
  }
  .card-play-bullet {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }
  .card-play-bullet i {
    font-size: 0.95rem !important;
  }
  .video-select-card strong {
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
    margin: 0.25rem 0 0.15rem !important;
  }
  .video-select-card .v-card-desc {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }
  .tour-cta-box {
    padding-bottom: 4.5rem !important; /* Espacio limpio para no chocar con el botón flotante de WhatsApp */
  }

  /* ODONTOGRAMA RESPONSIVE */
  .odo-mobile-scroll-hint {
    display: flex !important;
  }
  .odo-teeth-scroll-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
  }
  .odo-teeth-row {
    justify-content: flex-start !important;
    min-width: 540px !important;
    padding: 0 4px !important;
    flex-wrap: nowrap !important;
  }
  .frame-body {
    padding: 1.15rem 0.85rem !important;
    gap: 1.15rem !important;
  }
  .anatomic-molar-spotlight {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 0.85rem !important;
  }
  .frame-clinical-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  .clinical-bar-price {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .clinical-bar-price small {
    text-align: left !important;
  }
  .odo-action-row {
    flex-direction: column !important;
    width: 100% !important;
  }
  .odo-action-row .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* EXPERIENCIA CLÍNICA 360 RESPONSIVE */
  .bento-eco-card {
    padding: 1.5rem 1.2rem !important;
    border-radius: 18px !important;
  }
  .bento-compliance-row {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }
  .live-board-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
    padding: 0.85rem !important;
  }
  .live-col-room {
    width: 100% !important;
    justify-content: space-between !important;
  }
  .live-col-status {
    width: 100% !important;
  }
  .bento-ticket-box {
    padding: 1.15rem !important;
  }
  .ticket-methods {
    flex-wrap: wrap !important;
  }

  /* FOOTER RESPONSIVE */
  .dentario-footer {
    padding: 3.5rem 0 2rem !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .footer-bottom-bar {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.85rem !important;
  }
}

/* ==========================================================================
   ARQUITECTURA MODULAR Y FEATURES DE CADA MÓDULO
   ========================================================================== */
.modules-grid-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
}

@media (max-width: 1024px) {
  .modules-grid-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .modules-grid-cards {
    grid-template-columns: 1fr !important;
  }
}

.mod-card {
  background: var(--card-bg, #FFFFFF) !important;
  border: 1px solid var(--border-base, rgba(226, 232, 240, 0.85)) !important;
  border-radius: 22px !important;
  padding: 1.75rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="dark"] .mod-card {
  background: #0d1526 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.4) !important;
}

.mod-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.1) !important;
  border-color: #00B4FF !important;
}

[data-theme="dark"] .mod-card:hover {
  border-color: #00B8F0 !important;
  box-shadow: 0 16px 40px -4px rgba(0, 184, 240, 0.15) !important;
}

.mod-card-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  margin-bottom: 1rem !important;
}

.mod-icon-pill {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  shrink: 0 !important;
}

.icon-blue { background: rgba(0, 82, 255, 0.1) !important; color: #0052FF !important; }
.icon-teal { background: rgba(20, 184, 166, 0.12) !important; color: #0d9488 !important; }
.icon-indigo { background: rgba(99, 102, 241, 0.12) !important; color: #6366f1 !important; }
.icon-green { background: rgba(16, 185, 129, 0.12) !important; color: #10B981 !important; }
.icon-purple { background: rgba(168, 85, 247, 0.12) !important; color: #9333ea !important; }
.icon-gold { background: rgba(245, 158, 11, 0.12) !important; color: #d97706 !important; }

.mod-header-text h4 {
  font-family: 'Manrope', sans-serif !important;
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  color: var(--text-heading, #0f172a) !important;
  margin: 0.25rem 0 0 0 !important;
  line-height: 1.25 !important;
}

[data-theme="dark"] .mod-header-text h4 {
  color: #f8fafc !important;
}

.mod-cat-badge {
  display: inline-block !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

.badge-blue { background: rgba(0, 82, 255, 0.1) !important; color: #0052FF !important; }
.badge-teal { background: rgba(20, 184, 166, 0.12) !important; color: #0d9488 !important; }
.badge-indigo { background: rgba(99, 102, 241, 0.12) !important; color: #6366f1 !important; }
.badge-green { background: rgba(16, 185, 129, 0.12) !important; color: #059669 !important; }
.badge-purple { background: rgba(168, 85, 247, 0.12) !important; color: #9333ea !important; }
.badge-gold { background: rgba(245, 158, 11, 0.12) !important; color: #b45309 !important; }

.mod-desc {
  font-size: 0.88rem !important;
  color: var(--text-muted, #64748b) !important;
  line-height: 1.5 !important;
  margin: 0 0 1.25rem 0 !important;
}

[data-theme="dark"] .mod-desc {
  color: #94a3b8 !important;
}

.mod-features-list {
  list-style: none !important;
  margin: 0 0 1.5rem 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
}

.mod-features-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.6rem !important;
  font-size: 0.82rem !important;
  color: var(--text-body, #334155) !important;
  line-height: 1.38 !important;
}

[data-theme="dark"] .mod-features-list li {
  color: #cbd5e1 !important;
}

.mod-features-list li i {
  color: #10B981 !important;
  font-size: 1rem !important;
  margin-top: 1px !important;
  shrink: 0 !important;
}

.mod-plan-footer {
  border-top: 1px dashed var(--border-base, rgba(226, 232, 240, 0.8)) !important;
  padding-top: 1rem !important;
  margin-top: auto !important;
}

[data-theme="dark"] .mod-plan-footer {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.mod-plan-label {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-muted, #94a3b8) !important;
  display: block !important;
  margin-bottom: 0.4rem !important;
}

.mod-plan-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
}

.mod-plan-chips span {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.chip-active {
  background: rgba(0, 82, 255, 0.08) !important;
  color: #0052FF !important;
  border: 1px solid rgba(0, 82, 255, 0.2) !important;
}

[data-theme="dark"] .chip-active {
  background: rgba(0, 184, 240, 0.12) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}

.chip-trial {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.chip-locked {
  background: rgba(244, 63, 94, 0.08) !important;
  color: #e11d48 !important;
  border: 1px solid rgba(244, 63, 94, 0.2) !important;
}

.chip-exclusive {
  background: rgba(168, 85, 247, 0.1) !important;
  color: #7e22ce !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
}

[data-theme="dark"] .chip-exclusive {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #c084fc !important;
}