/* ==========================================================================
   BossBli Web Oficial — Tema Claro (weboficial-light.css)
   Estilos independientes para el portal Web Oficial.
   Paleta cálida, cero estilos inline, alto contraste.
   ========================================================================== */

@import url('../../shared/theme.css');

/* ── Web Oficial: Header, Navbar y Footer ────────────────────────────────── */
/* ── MÓDULO WEB OFICIAL ─────────────────────────────────────────────────── */
html[data-theme="light"] .topbar {
  background: rgba(251, 248, 244, 0.94) !important;
  border-bottom: 1px solid rgba(40, 30, 20, 0.12) !important;
}

html[data-theme="light"] .topbar .brand {
  color: #1c1611 !important;
}

html[data-theme="light"] .topbar .brand em {
  color: var(--primary) !important;
}

html[data-theme="light"] .navlinks a {
  color: #3d3329 !important;
}

html[data-theme="light"] .navlinks a:hover,
html[data-theme="light"] .navlinks a.active {
  color: var(--primary) !important;
}

html[data-theme="light"] .hero-copy,
html[data-theme="light"] .section-copy {
  color: #5c4e40 !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .pricing-card,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .box,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .ecosystem-card {
  background: #ffffff !important;
  border: 1px solid rgba(40, 30, 20, 0.12) !important;
  box-shadow: 0 4px 20px rgba(40, 30, 20, 0.05) !important;
  color: #1c1611 !important;
}

html[data-theme="light"] .faq-item summary {
  color: #1c1611 !important;
}

html[data-theme="light"] footer {
  background: #f4ede2 !important;
  border-top: 1px solid rgba(40, 30, 20, 0.12) !important;
  color: #5c4e40 !important;
}

html[data-theme="light"] footer a {
  color: #5c4e40 !important;
}

html[data-theme="light"] footer a:hover {
  color: var(--primary) !important;
}

html[data-theme="light"] .mobile-panel {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(40, 30, 20, 0.12) !important;
}

html[data-theme="light"] .mobile-panel a {
  color: #1c1611 !important;
  border-bottom: 1px solid rgba(40, 30, 20, 0.08) !important;
}


/* ── Web Oficial: Componentes, Hero, Apps y Ecosistema ───────────────────── */
/* ── Refuerzo Específico de Componentes Web Oficial ──────────────────────── */
html[data-theme="light"] body:before {
  display: none !important;
}

html[data-theme="light"] .band {
  background: #f4ede2 !important;
  border-color: rgba(40, 30, 20, 0.12) !important;
}

html[data-theme="light"] .band .stat strong {
  color: var(--primary) !important;
}

html[data-theme="light"] .band .stat span {
  color: #5c4e40 !important;
}

html[data-theme="light"] .feature,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .form-card,
html[data-theme="light"] .list-item {
  background: #ffffff !important;
  border: 1px solid rgba(40, 30, 20, 0.12) !important;
  color: #1c1611 !important;
}

html[data-theme="light"] .feature h3,
html[data-theme="light"] .contact-card h3,
html[data-theme="light"] .form-card h2,
html[data-theme="light"] .list-item b {
  color: #1c1611 !important;
}

html[data-theme="light"] .feature p,
html[data-theme="light"] .contact-card p,
html[data-theme="light"] .form-card > p,
html[data-theme="light"] .list-item span {
  color: #5c4e40 !important;
}

html[data-theme="light"] .plan h3 {
  color: #1c1611 !important;
}

html[data-theme="light"] .plan .price,
html[data-theme="light"] .plan .price-val {
  color: #1c1611 !important;
}

html[data-theme="light"] .plan p.muted,
html[data-theme="light"] .price-note,
html[data-theme="light"] .price-period {
  color: #5c4e40 !important;
}

html[data-theme="light"] .search {
  background: #ffffff !important;
  border-color: rgba(40, 30, 20, 0.2) !important;
  color: #1c1611 !important;
}

html[data-theme="light"] .search input {
  color: #1c1611 !important;
  background: transparent !important;
}

html[data-theme="light"] .faq-q {
  color: #1c1611 !important;
}

html[data-theme="light"] .faq-a {
  color: #5c4e40 !important;
}

html[data-theme="light"] .apps-illustration {
  background: linear-gradient(145deg, #ffffff, #f4ede2) !important;
  border-color: rgba(40, 30, 20, 0.12) !important;
}


/* ── Web Oficial: Precios y Planes (precios.html) ────────────────────────── */
/* ── Refuerzo de Planes y Precios (Web Oficial) ──────────────────────────── */
html[data-theme="light"] .section-planes-webtv {
  background: #fbf8f4 !important;
}

html[data-theme="light"] .plan {
  background: #ffffff !important;
  border: 1.5px solid rgba(40, 30, 20, 0.12) !important;
  box-shadow: 0 10px 30px rgba(40, 30, 20, 0.05) !important;
}

html[data-theme="light"] .plan:hover {
  border-color: rgba(var(--primary-rgb), 0.4) !important;
  box-shadow: 0 16px 40px rgba(40, 30, 20, 0.1) !important;
}

html[data-theme="light"] .plan.popular {
  border: 2px solid var(--primary) !important;
  box-shadow: 0 12px 35px rgba(var(--primary-rgb), 0.16) !important;
}

html[data-theme="light"] .plan li,
html[data-theme="light"] .plan-feature-list li {
  color: #2b221a !important;
  font-weight: 550 !important;
}

html[data-theme="light"] .plan li svg,
html[data-theme="light"] .plan-feature-list li svg {
  color: var(--primary) !important;
}

html[data-theme="light"] .billing-switch {
  background: #f4ede2 !important;
  border: 1px solid rgba(40, 30, 20, 0.12) !important;
}

html[data-theme="light"] .billing-btn {
  color: #5c4e40 !important;
}

html[data-theme="light"] .billing-btn.active {
  background: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.3) !important;
}

html[data-theme="light"] .dns-badge {
  background: #ffffff !important;
  border: 1px solid rgba(40, 30, 20, 0.14) !important;
  color: #1c1611 !important;
}

html[data-theme="light"] .precios-guarantee-item {
  background: #ffffff !important;
  border: 1px solid rgba(40, 30, 20, 0.12) !important;
  color: #1c1611 !important;
}


/* ── Web Oficial: Planes & Precios (precios.html) ───────────────────────── */
html[data-theme="light"] .section-planes-webtv {
  background: radial-gradient(ellipse at top, rgba(var(--primary-rgb), 0.05) 0%, transparent 70%) !important;
}

html[data-theme="light"] .player-plan-card {
  background: #ffffff !important;
  border: 1px solid rgba(40, 30, 20, 0.12) !important;
  box-shadow: 0 4px 20px rgba(40, 30, 20, 0.04) !important;
}

html[data-theme="light"] .player-plan-card:hover {
  border-color: rgba(var(--primary-rgb), 0.35) !important;
  box-shadow: 0 16px 36px rgba(40, 30, 20, 0.09) !important;
}

html[data-theme="light"] .player-plan-card.popular {
  background: #ffffff !important;
  border: 2px solid var(--primary) !important;
  box-shadow: 0 8px 32px rgba(var(--primary-rgb), 0.16) !important;
}

html[data-theme="light"] .player-plan-card.plan-tone-1 { border-color: #c4a48b !important; }
html[data-theme="light"] .player-plan-card.plan-tone-2 { border-color: #e09867 !important; }
html[data-theme="light"] .player-plan-card.plan-tone-3 { border-color: var(--primary) !important; }
html[data-theme="light"] .player-plan-card.plan-tone-4 { border-color: #c98542 !important; }

html[data-theme="light"] .player-plan-card h3 {
  color: #1c1611 !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .player-plan-card .plan-subtitle {
  color: #6a5745 !important;
}

html[data-theme="light"] .player-plan-price {
  color: #c96216 !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .player-plan-price small {
  color: #6a5745 !important;
}

html[data-theme="light"] .player-quality-pill {
  background: #fff7ed !important;
  color: #c96216 !important;
  border: 1px solid #fed7aa !important;
}

html[data-theme="light"] .player-plan-card ul li {
  color: #2c221a !important;
}

html[data-theme="light"] .player-plan-card ul li svg,
html[data-theme="light"] .plan-feature-check {
  color: var(--primary) !important;
}

html[data-theme="light"] .plan-discount-pill {
  background: #fff7ed !important;
  color: #c96216 !important;
  border-color: #fed7aa !important;
}

html[data-theme="light"] .precios-guarantees {
  border-top-color: rgba(40, 30, 20, 0.1) !important;
}

html[data-theme="light"] .demo-player-container {
  background: #ffffff !important;
  border: 1px solid rgba(40, 30, 20, 0.12) !important;
  box-shadow: 0 20px 50px rgba(40, 30, 20, 0.08), 0 0 30px rgba(var(--primary-rgb), 0.06) !important;
}

html[data-theme="light"] .demo-player-titlebar {
  background: #fcf9f5 !important;
  border-bottom: 1px solid rgba(40, 30, 20, 0.1) !important;
  color: #1c1611 !important;
}

html[data-theme="light"] .demo-player-url-pill {
  background: #ffffff !important;
  border: 1px solid rgba(40, 30, 20, 0.12) !important;
  color: #433022 !important;
}

html[data-theme="light"] .demo-control-bar {
  background: #ffffff !important;
  border-top: 1px solid rgba(40, 30, 20, 0.1) !important;
}

html[data-theme="light"] .device-screen {
  background: #ffffff !important;
  border: 1px solid rgba(40, 30, 20, 0.14) !important;
  box-shadow: 0 16px 36px rgba(40, 30, 20, 0.07) !important;
}

html[data-theme="light"] .device-tile {
  background: #fbf8f4 !important;
  border: 1px solid rgba(40, 30, 20, 0.1) !important;
  color: #1c1611 !important;
}


/* ── Web Oficial: Checkout Flow (Todos los Pasos y Resultados) ───────────── */
/* ── Checkout Flow (weboficial, player, admin) ───────────────────────────── */
html[data-theme="light"] .checkout-journey button {
  background: #ffffff !important;
  border: 1px solid rgba(40, 30, 20, 0.12) !important;
  color: #6a5745 !important;
}

html[data-theme="light"] .checkout-journey button.is-current {
  background: #fff7ed !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

html[data-theme="light"] .checkout-card,
html[data-theme="light"] .chk-step-card,
html[data-theme="light"] .checkout-panel,
html[data-theme="light"] .chk-summary-card,
html[data-theme="light"] .chk-order-summary,
html[data-theme="light"] .chk-loading-view,
html[data-theme="light"] .chk-success-view {
  background: #ffffff !important;
  border: 1px solid rgba(40, 30, 20, 0.12) !important;
  box-shadow: 0 4px 18px rgba(40, 30, 20, 0.04) !important;
}

html[data-theme="light"] .ck-card-head,
html[data-theme="light"] .chk-step-header,
html[data-theme="light"] .checkout-panel-header {
  border-bottom-color: rgba(40, 30, 20, 0.08) !important;
}

html[data-theme="light"] .ck-card-title,
html[data-theme="light"] .checkout-panel-title,
html[data-theme="light"] .chk-page-title,
html[data-theme="light"] .chk-step-title,
html[data-theme="light"] .chk-plan-name,
html[data-theme="light"] .chk-summary-title,
html[data-theme="light"] .chk-summary-box-title {
  color: #1c1611 !important;
}

html[data-theme="light"] .ck-card-sub,
html[data-theme="light"] .checkout-panel-subtitle,
html[data-theme="light"] .chk-step-sub,
html[data-theme="light"] .chk-summary-sub,
html[data-theme="light"] .chk-plan-meta,
html[data-theme="light"] .chk-plan-freq {
  color: #6a5745 !important;
}

html[data-theme="light"] .chk-pill-box,
html[data-theme="light"] .chk-success-box {
  background: #fcf9f5 !important;
  border: 1px solid rgba(40, 30, 20, 0.1) !important;
}

html[data-theme="light"] .chk-total-amount {
  color: var(--primary) !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .lang-switcher-pill {
  background: #f4ede2 !important;
  border: 1px solid rgba(40, 30, 20, 0.12) !important;
}

html[data-theme="light"] .field-label,
html[data-theme="light"] .billing-label,
html[data-theme="light"] .coupon-label,
html[data-theme="light"] .chk-field-label {
  color: #2c221a !important;
}

html[data-theme="light"] .checkout-input,
html[data-theme="light"] .checkout-select,
html[data-theme="light"] .chk-input {
  background: #ffffff !important;
  border: 1px solid rgba(40, 30, 20, 0.18) !important;
  color: #1c1611 !important;
}

html[data-theme="light"] .checkout-input:focus,
html[data-theme="light"] .checkout-select:focus,
html[data-theme="light"] .chk-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
}

html[data-theme="light"] .checkout-input::placeholder,
html[data-theme="light"] .chk-input::placeholder {
  color: #9e8f80 !important;
}

html[data-theme="light"] .pay-method-btn,
html[data-theme="light"] .chk-pay-btn {
  background: #fbf8f4 !important;
  border: 1px solid rgba(40, 30, 20, 0.12) !important;
  color: #433022 !important;
}

html[data-theme="light"] .pay-method-btn:hover,
html[data-theme="light"] .chk-pay-btn:hover {
  background: #ffffff !important;
  border-color: rgba(var(--primary-rgb), 0.35) !important;
  color: var(--primary) !important;
}

html[data-theme="light"] .pay-method-btn.active,
html[data-theme="light"] .chk-pay-btn.active {
  background: #fff7ed !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  box-shadow: 0 0 0 1px var(--primary) !important;
}

html[data-theme="light"] .pay-block,
html[data-theme="light"] .coupon-box,
html[data-theme="light"] .ck-features-box,
html[data-theme="light"] .chk-plan-opt {
  background: #fcf9f5 !important;
  border: 1px solid rgba(40, 30, 20, 0.1) !important;
}

html[data-theme="light"] .pay-block-title,
html[data-theme="light"] .ck-features-title {
  color: #1c1611 !important;
}

html[data-theme="light"] .sum-plan-name {
  color: #1c1611 !important;
}

html[data-theme="light"] .sum-plan-sub {
  color: #6a5745 !important;
}

html[data-theme="light"] .ck-summary-prices {
  color: #6a5745 !important;
}

html[data-theme="light"] .ck-summary-total-wrap {
  border-top-color: rgba(40, 30, 20, 0.1) !important;
}

html[data-theme="light"] .ck-summary-total-label {
  color: #1c1611 !important;
}

html[data-theme="light"] .ck-summary-total-price {
  color: var(--primary) !important;
}

html[data-theme="light"] .checkout-feature-item {
  color: #2c221a !important;
}

html[data-theme="light"] .security-note {
  background: #fff7ed !important;
  border: 1px solid #fed7aa !important;
  color: #6a5745 !important;
}

html[data-theme="light"] .btn-coupon {
  border-color: rgba(var(--primary-rgb), 0.35) !important;
  color: var(--primary) !important;
  background: #ffffff !important;
}

html[data-theme="light"] .btn-coupon:hover {
  background: #fff7ed !important;
  border-color: var(--primary) !important;
  color: var(--primary-dark) !important;
}

html[data-theme="light"] .chk-plan-opt.active {
  background: #fff7ed !important;
  border-color: var(--primary) !important;
}

html[data-theme="light"] .chk-cycle-btn {
  background: #fcf9f5 !important;
  border: 1px solid rgba(40, 30, 20, 0.12) !important;
  color: #1c1611 !important;
}

html[data-theme="light"] .chk-cycle-btn.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .result-card {
  background: #ffffff !important;
  border: 1px solid rgba(40, 30, 20, 0.12) !important;
  box-shadow: 0 16px 40px rgba(40, 30, 20, 0.08) !important;
}

html[data-theme="light"] .rs-box {
  background: #fcf9f5 !important;
  border: 1px solid rgba(40, 30, 20, 0.1) !important;
}

html[data-theme="light"] .rs-label {
  color: #6a5745 !important;
}

html[data-theme="light"] .rs-val {
  color: #1c1611 !important;
}

/* ── Web Oficial: Nuevo Checkout 5 Pasos OTT (Tema Claro) ────────────────── */
html[data-theme="light"] .checkout-journey button {
  background: #ffffff !important;
  border-color: rgba(40, 30, 20, 0.12) !important;
  color: #6a5745 !important;
}

html[data-theme="light"] .checkout-journey button.is-current {
  background: #fff7ed !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

html[data-theme="light"] .checkout-journey button.is-complete {
  background: #f0fdf4 !important;
  border-color: #22c55e !important;
  color: #15803d !important;
}

html[data-theme="light"] .ck-plan-strip {
  background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%) !important;
  border: 1px solid rgba(var(--primary-rgb), 0.3) !important;
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.08) !important;
}

html[data-theme="light"] .ck-plan-strip-main .sum-plan-name {
  color: #1c1611 !important;
}

html[data-theme="light"] .ck-plan-strip-main .sum-plan-sub {
  color: #5c4e40 !important;
}

html[data-theme="light"] .ck-cycle-select {
  background: #ffffff !important;
  border-color: rgba(40, 30, 20, 0.18) !important;
  color: #1c1611 !important;
}

html[data-theme="light"] .ck-plan-tier-badge {
  background: #fff7ed !important;
  color: var(--primary) !important;
  border-color: rgba(var(--primary-rgb), 0.4) !important;
}

html[data-theme="light"] .ck-live-tag {
  background: #f0fdf4 !important;
  color: #15803d !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
}

html[data-theme="light"] .ck-compact-price-wrap .ck-summary-total-price {
  color: var(--primary) !important;
}

html[data-theme="light"] .ck-compact-price-label,
html[data-theme="light"] .ck-cycle-box .billing-label {
  color: #5c4e40 !important;
}

html[data-theme="light"] .pay-method-btn.gateway-option {
  background: #ffffff !important;
  border-color: rgba(40, 30, 20, 0.12) !important;
}

html[data-theme="light"] .pay-method-btn.gateway-option:hover {
  background: #fffaf5 !important;
  border-color: rgba(var(--primary-rgb), 0.4) !important;
}

html[data-theme="light"] .pay-method-btn.gateway-option.active {
  background: #fff7ed !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2) !important;
}

html[data-theme="light"] .gateway-title {
  color: #1c1611 !important;
}

html[data-theme="light"] .gateway-mini-badge {
  background: #fff7ed !important;
  color: #c97529 !important;
  border-color: rgba(201, 117, 41, 0.3) !important;
}

html[data-theme="light"] .gateway-desc {
  color: #5c4e40 !important;
}

html[data-theme="light"] .ck-simulator-container {
  background: linear-gradient(180deg, #ffffff 0%, #fcfaf7 100%) !important;
  border: 1.5px solid rgba(var(--accent-rgb), 0.45) !important;
  box-shadow: 0 4px 16px rgba(40, 30, 20, 0.06) !important;
}

html[data-theme="light"] .ck-sim-badge {
  color: #c97529 !important;
}

html[data-theme="light"] .ck-sim-badge svg {
  color: #c97529 !important;
}

html[data-theme="light"] .ck-sim-sub {
  color: #5c4e40 !important;
}

html[data-theme="light"] .ck-receipt-card {
  background: #ffffff !important;
  border: 1px solid rgba(40, 30, 20, 0.12) !important;
  box-shadow: 0 4px 16px rgba(40, 30, 20, 0.05) !important;
}

html[data-theme="light"] .ck-receipt-lbl {
  color: #5c4e40 !important;
}

html[data-theme="light"] .ck-receipt-val {
  color: #1c1611 !important;
}

html[data-theme="light"] .ck-badge-success {
  background: #f0fdf4 !important;
  color: #15803d !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
}

html[data-theme="light"] .ck-anim-check-circle {
  background: #f0fdf4 !important;
  border-color: #22c55e !important;
}

html[data-theme="light"] .ck-anim-check-icon {
  color: #22c55e !important;
}

html[data-theme="light"] .ck-otp-input {
  background: #ffffff !important;
  border-color: rgba(40, 30, 20, 0.2) !important;
  color: #1c1611 !important;
}

/* ── Web Oficial: Yape & Plin Doble QR Móvil (Tema Claro) ────────────────── */
html[data-theme="light"] .yp-card-option {
  background: #ffffff !important;
  border-color: rgba(40, 30, 20, 0.14) !important;
}

html[data-theme="light"] .yp-card-option:hover {
  background: #fbf8f4 !important;
  border-color: rgba(var(--primary-rgb), 0.4) !important;
}

html[data-theme="light"] .yp-card-option.is-yape.active {
  background: linear-gradient(180deg, #faf5fc 0%, #ffffff 100%) !important;
  border-color: #742284 !important;
  box-shadow: 0 6px 20px rgba(116, 34, 132, 0.15) !important;
}

html[data-theme="light"] .yp-card-option.is-plin.active {
  background: linear-gradient(180deg, #f0fbfb 0%, #ffffff 100%) !important;
  border-color: #00b4b8 !important;
  box-shadow: 0 6px 20px rgba(0, 180, 184, 0.15) !important;
}

html[data-theme="light"] .yp-qr-wrapper {
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(40, 30, 20, 0.08) !important;
}

html[data-theme="light"] .yp-account-box {
  background: #fcf9f5 !important;
  border-color: rgba(40, 30, 20, 0.1) !important;
}

html[data-theme="light"] .yp-acc-lbl {
  color: #5c4e40 !important;
}

html[data-theme="light"] .yp-acc-val {
  color: #1c1611 !important;
}

html[data-theme="light"] .yp-instructions-box {
  background: #fff7ed !important;
  border-color: rgba(var(--primary-rgb), 0.25) !important;
}

html[data-theme="light"] .yp-inst-title {
  color: #c97529 !important;
}

html[data-theme="light"] .yp-steps-list {
  color: #5c4e40 !important;
}

html[data-theme="light"] .yp-steps-list li strong {
  color: #1c1611 !important;
}

html[data-theme="light"] .yp-oper-hint {
  color: #6a5745 !important;
}

html[data-theme="light"] .ck-trust-pill {
  background: rgba(var(--primary-rgb), 0.08) !important;
  border-color: rgba(var(--primary-rgb), 0.28) !important;
  color: #c25916 !important;
}

html[data-theme="light"] .ck-step-pill {
  background: #ffffff !important;
  border-color: rgba(40, 30, 20, 0.12) !important;
  color: #6b5c4f !important;
}

html[data-theme="light"] .ck-step-pill .step-num {
  background: rgba(40, 30, 20, 0.08) !important;
  color: #45372b !important;
}

html[data-theme="light"] .ck-step-pill.is-current {
  background: #fff4ed !important;
  border-color: var(--primary) !important;
  color: #c25916 !important;
}

html[data-theme="light"] .ck-step-pill.is-current .step-num {
  background: var(--primary) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .ck-step-pill.is-complete {
  background: #f0fdf4 !important;
  border-color: #22c55e !important;
  color: #15803d !important;
}

html[data-theme="light"] .ck-step-pill.is-complete .step-num {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #15803d !important;
}

html[data-theme="light"] .yp-tab-pill {
  background: #ffffff !important;
  border-color: rgba(40, 30, 20, 0.14) !important;
  color: #5c4e40 !important;
}

html[data-theme="light"] .yp-tab-pill.is-yape.active {
  background: linear-gradient(135deg, #faf5fc 0%, #ffffff 100%) !important;
  border-color: #742284 !important;
  color: #742284 !important;
  box-shadow: 0 4px 16px rgba(116, 34, 132, 0.15) !important;
}

html[data-theme="light"] .yp-tab-pill.is-plin.active {
  background: linear-gradient(135deg, #f0fbfb 0%, #ffffff 100%) !important;
  border-color: #00b4b8 !important;
  color: #008f92 !important;
  box-shadow: 0 4px 16px rgba(0, 180, 184, 0.15) !important;
}

html[data-theme="light"] .yp-copy-btn {
  background: #ffffff !important;
  border-color: rgba(40, 30, 20, 0.18) !important;
  color: #3b2e23 !important;
}

html[data-theme="light"] .yp-amount-highlight {
  color: #c25916 !important;
}

html[data-theme="light"] .ck-chip-helper {
  background: #fff4ed !important;
  border-color: rgba(var(--primary-rgb), 0.35) !important;
  color: #5c4e40 !important;
}

html[data-theme="light"] .ck-badge-gold {
  background: rgba(var(--accent-rgb), 0.2) !important;
  color: #b45309 !important;
  border-color: rgba(var(--accent-rgb), 0.5) !important;
}

html[data-theme="light"] .ck-trust-badges {
  border-top-color: rgba(40, 30, 20, 0.08) !important;
  color: #6b5c4f !important;
}

html[data-theme="light"] .ck-heading,
html[data-theme="light"] .ck-card-title,
html[data-theme="light"] .ck-compact-plan-info .sum-plan-name,
html[data-theme="light"] .ck-summary-total-price {
  color: #1c1611 !important;
}

html[data-theme="light"] .ck-access-badge-circle {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.18) 100%) !important;
  border-color: rgba(var(--primary-rgb), 0.4) !important;
  box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.15) !important;
}

html[data-theme="light"] .ck-access-badge-svg {
  color: #c25916 !important;
}

html[data-theme="light"] .yp-copy-btn.is-copied {
  background: #f0fdf4 !important;
  border-color: #22c55e !important;
  color: #15803d !important;
}

html[data-theme="light"] .ck-navbar {
  background: rgba(251, 248, 244, 0.94) !important;
  border-bottom: 1px solid rgba(40, 30, 20, 0.12) !important;
  box-shadow: 0 4px 20px rgba(40, 30, 20, 0.06) !important;
}

html[data-theme="light"] .ck-navbar-brand {
  color: #1c1611 !important;
}

html[data-theme="light"] .ck-navbar-brand em {
  color: var(--primary) !important;
}

html[data-theme="light"] .ck-btn-back-pricing {
  background: #ffffff !important;
  border-color: rgba(40, 30, 20, 0.16) !important;
  color: #5c4e40 !important;
}

html[data-theme="light"] .ck-btn-back-pricing:hover {
  background: #fcf8f4 !important;
  border-color: rgba(var(--primary-rgb), 0.4) !important;
  color: var(--primary) !important;
}

html[data-theme="light"] .ck-step-pill {
  border-radius: 9999px !important;
  background: #ffffff !important;
  border-color: rgba(40, 30, 20, 0.14) !important;
  color: #5c4e40 !important;
}

html[data-theme="light"] .ck-step-pill .step-num {
  background: rgba(40, 30, 20, 0.08) !important;
  color: #5c4e40 !important;
}

html[data-theme="light"] .ck-step-pill.is-current {
  background: rgba(var(--primary-rgb), 0.1) !important;
  border-color: var(--primary) !important;
  color: #1c1611 !important;
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.3), 0 3px 10px rgba(var(--primary-rgb), 0.12) !important;
}

html[data-theme="light"] .ck-step-pill.is-current .step-num {
  background: var(--primary) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .ck-step-pill.is-complete {
  background: rgba(34, 197, 94, 0.08) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #15803d !important;
}

html[data-theme="light"] .ck-step-pill.is-complete .step-num {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #15803d !important;
}

@media (max-width: 860px) {
  html[data-theme="light"] .ck-navbar .checkout-journey-track {
    background: rgba(40, 30, 20, 0.1) !important;
  }

  html[data-theme="light"] .ck-navbar .track-completed {
    background: #22c55e !important;
  }

  html[data-theme="light"] .ck-navbar .track-active {
    background: linear-gradient(90deg, var(--primary) 0%, var(--gold) 100%) !important;
  }

  html[data-theme="light"] .ck-navbar .ck-step-pill {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] .ck-navbar .ck-step-pill .step-num {
    background: #ffffff !important;
    border-color: rgba(40, 30, 20, 0.18) !important;
    color: #5c4e40 !important;
    box-shadow: 0 0 0 4px #fbf8f4 !important;
  }

  html[data-theme="light"] .ck-navbar .ck-step-pill.is-current .step-num {
    background: #fff5ef !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    box-shadow: 0 0 0 4px #fbf8f4, 0 3px 10px rgba(var(--primary-rgb), 0.25) !important;
  }

  html[data-theme="light"] .ck-navbar .ck-step-pill.is-current .step-txt {
    color: #1c1611 !important;
  }

  html[data-theme="light"] .ck-navbar .ck-step-pill.is-complete .step-num {
    background: #ecfdf3 !important;
    border-color: #22c55e !important;
    color: #15803d !important;
    box-shadow: 0 0 0 4px #fbf8f4, 0 0 8px rgba(34, 197, 94, 0.2) !important;
  }

  html[data-theme="light"] .ck-navbar .ck-step-pill.is-complete .step-txt {
    color: #15803d !important;
  }
}

/* ── Checkout: Aviso de Spam y Entrega de Acceso (Tema Claro) ── */
html[data-theme="light"] .ck-spam-notice {
  background: rgba(var(--primary-rgb), 0.08) !important;
  border-color: rgba(var(--primary-rgb), 0.28) !important;
}

html[data-theme="light"] .ck-spam-notice-icon {
  background: rgba(var(--primary-rgb), 0.15) !important;
  border-color: rgba(var(--primary-rgb), 0.4) !important;
  color: #b83814 !important;
}

html[data-theme="light"] .ck-spam-notice-text strong {
  color: #c4502a !important;
}

html[data-theme="light"] .ck-spam-notice-text p {
  color: #5c4e40 !important;
}

html[data-theme="light"] .ck-spam-notice-text em,
html[data-theme="light"] .ck-spam-notice-text p strong {
  color: #1c1611 !important;
}

html[data-theme="light"] .ck-access-delivery-card {
  background: #ffffff !important;
  border-color: rgba(var(--primary-rgb), 0.35) !important;
  box-shadow: 0 8px 24px rgba(40, 30, 20, 0.08) !important;
}

html[data-theme="light"] .ck-access-delivery-card.is-sending {
  border-color: rgba(var(--primary-rgb), 0.55) !important;
  box-shadow: 0 10px 28px rgba(var(--primary-rgb), 0.14) !important;
}

html[data-theme="light"] .ck-access-delivery-card.is-delivered {
  border-color: rgba(34, 197, 94, 0.45) !important;
  box-shadow: 0 10px 28px rgba(34, 197, 94, 0.12) !important;
}

html[data-theme="light"] .ck-delivery-icon {
  background: rgba(var(--primary-rgb), 0.12) !important;
  border-color: rgba(var(--primary-rgb), 0.35) !important;
  color: #b83814 !important;
}

html[data-theme="light"] .ck-delivery-icon.is-animated-sending {
  background: rgba(var(--primary-rgb), 0.18) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

html[data-theme="light"] .ck-delivery-icon.is-delivered {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.45) !important;
  color: #15803d !important;
}

html[data-theme="light"] .ck-badge-sending {
  background: rgba(var(--primary-rgb), 0.12) !important;
  color: #b83814 !important;
  border-color: rgba(var(--primary-rgb), 0.35) !important;
}

html[data-theme="light"] .ck-badge-delivered {
  background: rgba(34, 197, 94, 0.12) !important;
  color: #15803d !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}

html[data-theme="light"] .ck-dispatch-progress-wrap {
  border-top-color: rgba(40, 30, 20, 0.1) !important;
}

html[data-theme="light"] .ck-dispatch-progress-bar {
  background: #f1ede8 !important;
  border-color: rgba(var(--primary-rgb), 0.25) !important;
}

html[data-theme="light"] .ck-dispatch-meta-label {
  color: #6e5f52 !important;
}

html[data-theme="light"] .ck-dispatch-meta-label svg {
  color: #b83814 !important;
}

html[data-theme="light"] .ck-dispatch-meta-status {
  color: #b83814 !important;
}

html[data-theme="light"] .ck-delivery-title {
  color: #1c1611 !important;
}

html[data-theme="light"] .ck-delivery-desc {
  color: #5c4e40 !important;
}

html[data-theme="light"] .ck-delivery-desc strong {
  color: #b83814 !important;
}

html[data-theme="light"] .ck-delivery-spam-note {
  background: rgba(var(--primary-rgb), 0.06) !important;
  border-color: rgba(var(--primary-rgb), 0.3) !important;
  color: #1c1611 !important;
}

html[data-theme="light"] .ck-delivery-spam-note svg {
  color: #b83814 !important;
}

/* ── Ecosistema: Diagrama de Arquitectura 360° en Modo Claro ── */
html[data-theme="light"] .flow-architecture-box {
  background: linear-gradient(180deg, #ffffff 0%, #fbf8f4 100%) !important;
  border-color: rgba(40, 30, 20, 0.14) !important;
  box-shadow: 0 16px 48px rgba(40, 30, 20, 0.08) !important;
}

html[data-theme="light"] .flow-architecture-box::before {
  background: radial-gradient(ellipse, rgba(var(--primary-rgb), 0.08) 0%, transparent 70%) !important;
}

html[data-theme="light"] .flow-section-header h2 {
  color: #1c1611 !important;
}

html[data-theme="light"] .flow-tab-btn {
  background: #ffffff !important;
  border-color: rgba(40, 30, 20, 0.14) !important;
  color: #5c4e40 !important;
}

html[data-theme="light"] .flow-tab-btn .tab-num {
  background: rgba(40, 30, 20, 0.08) !important;
  color: #5c4e40 !important;
}

html[data-theme="light"] .flow-tab-btn:hover {
  background: #fdfbf7 !important;
  border-color: rgba(var(--primary-rgb), 0.4) !important;
  color: #1c1611 !important;
}

html[data-theme="light"] .flow-tab-btn.is-active {
  background: rgba(var(--primary-rgb), 0.12) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.2) !important;
}

html[data-theme="light"] .flow-tab-btn.is-active .tab-num {
  background: var(--primary) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .flow-autoplay-btn {
  background: rgba(var(--accent-rgb), 0.12) !important;
  border-color: rgba(var(--primary-rgb), 0.3) !important;
  color: #c25e24 !important;
}

html[data-theme="light"] .flow-path-base {
  stroke: rgba(40, 30, 20, 0.14) !important;
}

html[data-theme="light"] .node-card {
  background: #ffffff !important;
  border-color: rgba(40, 30, 20, 0.14) !important;
  box-shadow: 0 8px 24px rgba(40, 30, 20, 0.07) !important;
}

html[data-theme="light"] .node-title {
  color: #1c1611 !important;
}

html[data-theme="light"] .node-icon-box {
  background: rgba(var(--primary-rgb), 0.08) !important;
  border-color: rgba(var(--primary-rgb), 0.22) !important;
  color: #c4502a !important;
}

html[data-theme="light"] .node-icon-box svg {
  color: #c4502a !important;
}

html[data-theme="light"] .flow-node:hover .node-card {
  background: #fdfbf7 !important;
  border-color: rgba(var(--primary-rgb), 0.5) !important;
}

html[data-theme="light"] .flow-node.is-active .node-card {
  background: #fff8f4 !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.25), 0 10px 28px rgba(40, 30, 20, 0.1) !important;
}

/* En Tema Claro, el icono seleccionado NUNCA se vuelve blanco: color cálido de alto contraste */
html[data-theme="light"] .flow-node.is-active .node-icon-box,
html[data-theme="light"] .flow-node:hover .node-icon-box {
  background: rgba(var(--primary-rgb), 0.18) !important;
  border-color: var(--primary) !important;
  color: #b83814 !important;
  box-shadow: 0 0 14px rgba(var(--primary-rgb), 0.25) !important;
}

html[data-theme="light"] .flow-node.is-active .node-icon-box svg,
html[data-theme="light"] .flow-node:hover .node-icon-box svg {
  color: #b83814 !important;
}

html[data-theme="light"] .flow-inspector {
  background: #ffffff !important;
  border-color: rgba(var(--primary-rgb), 0.3) !important;
  box-shadow: 0 12px 36px rgba(40, 30, 20, 0.08) !important;
}

html[data-theme="light"] .flow-inspector-title {
  color: #1c1611 !important;
}

html[data-theme="light"] .flow-inspector-summary {
  color: #2e261f !important;
}

html[data-theme="light"] .flow-metric-chip {
  background: rgba(40, 30, 20, 0.04) !important;
  border-color: rgba(40, 30, 20, 0.12) !important;
  color: #1c1611 !important;
}

html[data-theme="light"] .flow-inspector-grid {
  border-top-color: rgba(40, 30, 20, 0.1) !important;
}

/* ── Hero Constellation (Tema Claro - Escenario Tecnológico) ─────────────── */
html[data-theme="light"] .visual {
  background: radial-gradient(circle at 50% 50%, rgba(var(--primary-rgb), 0.08) 0%, #ffffff 52%, #f7f2ec 100%) !important;
  border: 1.5px solid rgba(var(--primary-rgb), 0.22) !important;
  box-shadow: 0 24px 60px -15px rgba(60, 30, 10, 0.1), 0 0 30px rgba(var(--primary-rgb), 0.06), inset 0 1px 0 #ffffff !important;
}

html[data-theme="light"] .visual:before {
  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.04) 45%, transparent 70%) !important;
}

html[data-theme="light"] .visual-mesh-line {
  stroke: rgba(var(--primary-rgb), 0.2) !important;
}

html[data-theme="light"] .visual-conduit-base {
  stroke: rgba(40, 30, 20, 0.14) !important;
}

html[data-theme="light"] .visual-orbit-ring.ring-1 {
  border-color: rgba(var(--primary-rgb), 0.28) !important;
}

html[data-theme="light"] .visual-orbit-ring.ring-2 {
  border-color: rgba(40, 30, 20, 0.08) !important;
}

html[data-theme="light"] .v-node-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(40, 30, 20, 0.14) !important;
  box-shadow: 0 6px 18px rgba(40, 30, 20, 0.08) !important;
}

html[data-theme="light"] .v-node-title {
  color: #1c1611 !important;
}

html[data-theme="light"] .v-node-sub {
  color: #5c4e40 !important;
}

/* Iconos de Nodos: Alto contraste en tema claro (NUNCA blanco) */
html[data-theme="light"] .v-node-icon {
  background: rgba(var(--primary-rgb), 0.1) !important;
  border-color: rgba(var(--primary-rgb), 0.28) !important;
  color: #b83814 !important;
}

html[data-theme="light"] .v-node-icon svg {
  color: #b83814 !important;
}

html[data-theme="light"] .v-node:hover .v-node-icon,
html[data-theme="light"] .v-node.active .v-node-icon,
html[data-theme="light"] .v-node:focus-visible .v-node-icon {
  background: rgba(var(--primary-rgb), 0.2) !important;
  border-color: var(--primary) !important;
  color: #b83814 !important;
  box-shadow: 0 0 14px rgba(var(--primary-rgb), 0.3) !important;
}

html[data-theme="light"] .v-node:hover .v-node-icon svg,
html[data-theme="light"] .v-node.active .v-node-icon svg,
html[data-theme="light"] .v-node:focus-visible .v-node-icon svg {
  color: #b83814 !important;
}

html[data-theme="light"] .v-card-hub {
  background: linear-gradient(135deg, #fff9f5, #fff0e8) !important;
  border-color: rgba(var(--primary-rgb), 0.5) !important;
  box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.15) !important;
}

html[data-theme="light"] .v-icon-hub {
  background: rgba(var(--primary-rgb), 0.16) !important;
  border-color: rgba(var(--primary-rgb), 0.45) !important;
  color: #c4502a !important;
}

html[data-theme="light"] .v-icon-hub svg {
  color: #c4502a !important;
}

html[data-theme="light"] .v-node-marca:hover .v-icon-hub,
html[data-theme="light"] .v-node-marca.active .v-icon-hub,
html[data-theme="light"] .v-node-marca:focus-visible .v-icon-hub {
  background: rgba(var(--primary-rgb), 0.28) !important;
  border-color: var(--primary) !important;
  color: #b83814 !important;
}

html[data-theme="light"] .v-node-marca:hover .v-icon-hub svg,
html[data-theme="light"] .v-node-marca.active .v-icon-hub svg,
html[data-theme="light"] .v-node-marca:focus-visible .v-icon-hub svg {
  color: #b83814 !important;
}

html[data-theme="light"] .v-hub-tag {
  color: var(--primary) !important;
}

html[data-theme="light"] .v-card-hub .v-node-title {
  color: #1c1611 !important;
}

html[data-theme="light"] .v-card-hub .v-node-sub {
  color: #c4502a !important;
}

html[data-theme="light"] .v-node:hover .v-node-card,
html[data-theme="light"] .v-node.active .v-node-card {
  border-color: var(--primary) !important;
  box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.25) !important;
}

html[data-theme="light"] .visual-conduit-beam.beam-clientes {
  stroke: var(--primary) !important;
  filter: drop-shadow(0 0 6px rgba(var(--primary-rgb), 0.7)) !important;
}

html[data-theme="light"] .visual-conduit-beam.beam-lineas {
  stroke: var(--primary) !important;
}

html[data-theme="light"] .visual-conduit-beam.beam-renovaciones {
  stroke: #c4502a !important;
}

html[data-theme="light"] .visual-conduit-beam.beam-tickets {
  stroke: #22c55e !important;
}

html[data-theme="light"] .visual-conduit-beam.beam-servidores {
  stroke: var(--primary) !important;
}

/* ── Web Oficial: Ecosistema y Destello Superior (ecosistema.html) ──────── */
html[data-theme="light"] .ecosystem-hero {
  background: radial-gradient(circle at 82% 14%, rgba(var(--primary-rgb), 0.10), transparent 35%), #fbf8f4 !important;
}

/* ── Web Oficial: Contacto y Formulario Estandarizado (contact.html) ────── */
html[data-theme="light"] .contact-channel-card,
html[data-theme="light"] .contact-form-container,
html[data-theme="light"] .contact-faq-card {
  background: #ffffff !important;
  border-color: rgba(40, 30, 20, 0.12) !important;
  box-shadow: 0 8px 24px rgba(40, 30, 20, 0.05) !important;
}

html[data-theme="light"] .contact-trust-badge {
  background: #ffffff !important;
  border-color: rgba(40, 30, 20, 0.12) !important;
  color: #1c1611 !important;
}

html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .form-group textarea {
  background: #ffffff !important;
  border: 1px solid rgba(40, 30, 20, 0.18) !important;
  color: #1c1611 !important;
}

html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group select:focus,
html[data-theme="light"] .form-group textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
  background: #ffffff !important;
}

html[data-theme="light"] .form-group input::placeholder,
html[data-theme="light"] .form-group textarea::placeholder {
  color: #8c7e70 !important;
}