/*
 * Despax · capa propia sobre el tema Agency (Start Bootstrap, MIT).
 * Cada opción de diseño fija su color de acento con una clase en <body>: .op-a, .op-b, .op-c, .op-d.
 */

:root {
  --dx-accent: #1a73e8;
  --dx-accent-dark: #1559b8;
  --dx-accent-soft: #e8f0fe;
  --dx-ink: #14212e;
  --dx-ink-2: #1c2a38;
  --dx-muted: #5f6b77;
  --dx-line: #e3e8ed;
  --dx-ok: #1e8a4c;
  --dx-warn: #f39c1f;
  --dx-bad: #d33a2c;
}
body.op-a { --dx-accent: #2f80ed; --dx-accent-dark: #1f63c4; --dx-accent-soft: #e6f0fd; }
body.op-b { --dx-accent: #12a150; --dx-accent-dark: #0c7a3c; --dx-accent-soft: #e3f6eb; }
body.op-c { --dx-accent: #ff7a1a; --dx-accent-dark: #d95f05; --dx-accent-soft: #fff1e6; }
body.op-d { --dx-accent: #5b4cf0; --dx-accent-dark: #4334cf; --dx-accent-soft: #eeecfe; }

/* --- El amarillo del tema pasa al acento de cada opción --- */
.text-primary { color: var(--dx-accent) !important; }
.bg-primary { background-color: var(--dx-accent) !important; }
.btn-primary {
  --bs-btn-bg: var(--dx-accent);
  --bs-btn-border-color: var(--dx-accent);
  --bs-btn-hover-bg: var(--dx-accent-dark);
  --bs-btn-hover-border-color: var(--dx-accent-dark);
  --bs-btn-active-bg: var(--dx-accent-dark);
  --bs-btn-active-border-color: var(--dx-accent-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}
.btn-outline-light:hover { color: var(--dx-ink); }
#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link.active { color: var(--dx-accent); }
#mainNav .navbar-toggler { background-color: var(--dx-accent); }
.timeline > li .timeline-image { background-color: var(--dx-accent); }
.timeline > li:last-child .timeline-image { background-color: var(--dx-accent); }
a { color: var(--dx-accent); }
::selection { background: var(--dx-accent); color: #fff; }
section, header { scroll-margin-top: 72px; }

/* --- Marca --- */
.dx-logo { display: inline-flex; align-items: center; gap: .55rem; font-family: Montserrat, sans-serif; font-weight: 700; letter-spacing: .18em; color: #fff; text-decoration: none; }
.dx-logo svg { height: 1.9rem; width: auto; }
.dx-logo span { font-size: 1.35rem; }
.dx-logo.dark { color: var(--dx-ink); }
#mainNav .navbar-brand.dx-logo, #mainNav .navbar-brand.dx-logo:hover { color: #fff; }
#mainNav.navbar-light .navbar-brand.dx-logo { color: var(--dx-ink); }
#mainNav.navbar-shrink .dx-logo svg { height: 1.6rem; }

/* --- Fondos generados (sin fotos de stock) --- */
.dx-hero-grid {
  background-color: var(--dx-ink);
  background-image:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--dx-accent) 35%, transparent) 0, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(86, 204, 242, .22) 0, transparent 40%),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
}
.dx-section-dark { background: var(--dx-ink); color: #dfe6ee; }
.dx-section-dark .text-muted { color: #9fb0c1 !important; }
.dx-section-soft { background: var(--dx-accent-soft); }

/* --- Etiquetas y tarjetas --- */
.dx-eyebrow { display: inline-block; font-family: Montserrat, sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dx-accent); }
.dx-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; font-size: .85rem; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .2); }
.dx-card { background: #fff; border: 1px solid var(--dx-line); border-radius: 14px; padding: 1.6rem; height: 100%; transition: transform .2s, box-shadow .2s; }
.dx-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20, 33, 46, .1); }
.dx-section-dark .dx-card { background: var(--dx-ink-2); border-color: #2b3b4c; color: #dfe6ee; }
.dx-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--dx-accent-soft); color: var(--dx-accent); font-size: 1.3rem; margin-bottom: 1rem; }
.dx-section-dark .dx-icon { background: rgba(255, 255, 255, .07); }
.dx-check { list-style: none; padding: 0; }
.dx-check li { padding-left: 1.6rem; position: relative; margin-bottom: .45rem; }
.dx-check li::before { content: "\2713"; position: absolute; left: 0; color: var(--dx-accent); font-weight: 700; }
.dx-stat { font-family: Montserrat, sans-serif; font-size: 2.6rem; font-weight: 700; color: var(--dx-accent); line-height: 1; }

/* --- Maquetas de producto: tarjeta de nota, barras, matriz --- */
.dx-mock { background: #fff; border-radius: 16px; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); color: var(--dx-ink); padding: 1.4rem; text-align: left; }
.dx-mock .dx-mock-bar { display: flex; gap: .35rem; margin-bottom: 1rem; }
.dx-mock .dx-mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e3e8ed; display: block; }
.dx-ring { --v: 82; --c: var(--dx-ok); width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--v) * 1%), #e9edf2 0); }
.dx-ring > div { width: 104px; height: 104px; border-radius: 50%; background: #fff; display: grid; place-items: center; text-align: center; }
.dx-ring b { font-family: Montserrat, sans-serif; font-size: 2.6rem; line-height: 1; color: var(--c); }
.dx-ring small { display: block; color: var(--dx-muted); font-size: .8rem; }
.dx-factor { display: grid; grid-template-columns: 1fr 120px 34px; align-items: center; gap: .6rem; font-size: .85rem; margin-bottom: .45rem; }
.dx-factor .bar { height: 8px; border-radius: 4px; background: #edf0f3; overflow: hidden; }
.dx-factor .bar span { display: block; height: 100%; border-radius: 4px; }
.dx-grade { display: inline-grid; place-items: center; width: 28px; height: 22px; border-radius: 4px; color: #fff; font-weight: 700; font-size: .8rem; font-family: Montserrat, sans-serif; }
.g-a { background: #1e8a4c; } .g-b { background: #7cb342; } .g-c { background: #f2c230; color: #3a2c00; } .g-d { background: #f39c1f; } .g-f { background: #d33a2c; }
.dx-matrix { display: grid; grid-template-columns: 60px repeat(5, 1fr); gap: 4px; font-size: .75rem; }
.dx-matrix div { border-radius: 5px; min-height: 34px; display: grid; place-items: center; }
.dx-matrix .lbl { color: var(--dx-muted); justify-items: end; padding-right: 6px; }
.dx-matrix .q0 { background: #f1f4f7; } .dx-matrix .q1 { background: #fde2c4; } .dx-matrix .q2 { background: #fbb878; } .dx-matrix .q3 { background: #f2803a; color: #fff; } .dx-matrix .q4 { background: #d33a2c; color: #fff; font-weight: 700; }

/* --- Precios --- */
.dx-plan { border: 1px solid var(--dx-line); border-radius: 16px; padding: 2rem; height: 100%; background: #fff; position: relative; }
.dx-plan.featured { border: 2px solid var(--dx-accent); box-shadow: 0 18px 40px rgba(20, 33, 46, .12); }
.dx-plan .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--dx-accent); color: #fff; font-size: .75rem; font-weight: 700; padding: .2rem .8rem; border-radius: 999px; letter-spacing: .05em; }
.dx-plan h4 { font-family: Montserrat, sans-serif; }
.dx-plan .limit { font-size: 2rem; font-weight: 700; color: var(--dx-ink); font-family: Montserrat, sans-serif; }

/* --- Normas y marcos (texto, sin logos de terceros) --- */
.dx-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.4rem; }
.dx-badges span { font-family: Montserrat, sans-serif; font-weight: 700; color: #8a95a1; letter-spacing: .06em; font-size: .95rem; }

/* --- Formulario de contacto sobre fondo oscuro --- */
.dx-form .form-control { border-radius: 8px; padding: .8rem 1rem; }
.dx-note { font-size: .8rem; color: #9fb0c1; }

footer.footer { font-size: .9rem; }
@media (max-width: 575.98px) {
  .dx-factor { grid-template-columns: 1fr 80px 30px; }
  .dx-stat { font-size: 2.1rem; }
}