/* ==========================================================================
   MENSATEK 2026 — Tema alternativo con el naranja del logotipo (#ff9900)
   Se activa añadiendo ?tema=naranja a la URL (main.js pone data-tema).
   Regla de accesibilidad: el naranja puro nunca se usa como color de texto
   sobre blanco (2,1:1); solo como fondo con texto oscuro (6,9:1) o en tonos
   oscurecidos (#9a5200 / #c46a00) cuando es texto.
   ========================================================================== */

html[data-tema="naranja"] {
  --mk-accent: #ff9900;
  --mk-gradient: linear-gradient(100deg, #ffb133 0%, #ff9900 100%);
  --mk-gradient-text: linear-gradient(95deg, #8f4c00 20%, #c46a00 80%);
  --mk-bg-soft: #faf7f1;
}

/* Enlaces y acentos de texto: naranja oscurecido accesible */
html[data-tema="naranja"] a { color: #9a5200; }
html[data-tema="naranja"] a:hover { color: #7a4100; }
html[data-tema="naranja"] .footer a { color: #93b4c3; }
html[data-tema="naranja"] .footer a:hover { color: #fff; }
html[data-tema="naranja"] .topbar a { color: #fff; }
html[data-tema="naranja"] .topbar .bi { color: #ffb133; }

/* Botón principal: fondo naranja + tinta oscura (estilo Bird) */
html[data-tema="naranja"] .btn-mk {
  color: var(--mk-primary-deep);
  box-shadow: 0 6px 18px rgba(255, 153, 0, .35);
}
html[data-tema="naranja"] .btn-mk:hover {
  color: var(--mk-primary-deep);
  box-shadow: 0 10px 24px rgba(255, 153, 0, .45);
}
html[data-tema="naranja"] .btn-mk-ghost:hover { border-color: #ff9900; color: #9a5200; }

/* Navbar */
html[data-tema="naranja"] .navbar-mk .nav-link:hover { color: #9a5200; background: rgba(255, 153, 0, .08); }
html[data-tema="naranja"] .nav-phone { color: #9a5200; }
html[data-tema="naranja"] .mega a.mega-item .bi { color: #b35f00; }
html[data-tema="naranja"] .mega a.mega-item:hover { background: #faf3e8; }

/* Eyebrows */
html[data-tema="naranja"] .eyebrow {
  color: #9a5200;
  background: rgba(255, 153, 0, .10);
  border-color: rgba(255, 153, 0, .35);
}
html[data-tema="naranja"] .trust-band .eyebrow {
  color: #ffb133 !important;
  background: rgba(255, 153, 0, .14) !important;
  border-color: rgba(255, 153, 0, .4) !important;
}

/* Hero: lavados cálidos */
html[data-tema="naranja"] .hero {
  background:
    radial-gradient(58% 70% at 12% 0%, rgba(255, 153, 0, .12) 0%, transparent 60%),
    radial-gradient(50% 65% at 95% 12%, rgba(179, 95, 0, .10) 0%, transparent 60%),
    radial-gradient(40% 45% at 70% 95%, rgba(6, 43, 60, .06) 0%, transparent 60%),
    linear-gradient(180deg, #fffaf2 0%, #ffffff 100%);
}

/* Mockup */
html[data-tema="naranja"] .chip.active {
  background: rgba(255, 153, 0, .12);
  border-color: rgba(255, 153, 0, .45);
  color: #9a5200;
}
html[data-tema="naranja"] .bar-chart i { background: linear-gradient(180deg, #ffcf80, #e07c00); }

/* Tarjetas de servicio */
html[data-tema="naranja"] .card-serv:hover { border-color: rgba(255, 153, 0, .55); }
html[data-tema="naranja"] .card-serv .icon { color: #b35f00; background: rgba(255, 153, 0, .14); }
html[data-tema="naranja"] .card-serv .more { color: #9a5200; }

/* Pestañas */
html[data-tema="naranja"] .pill-tabs { background: #f5ede0; }
html[data-tema="naranja"] .pill-tabs .nav-link.active { color: #9a5200 !important; }

/* Banda de confianza (se mantiene azul marino; acentos cálidos) */
html[data-tema="naranja"] .trust-item .bi { color: #ffb133; }

/* Testimonios */
html[data-tema="naranja"] .testi-card .avatar {
  background: linear-gradient(135deg, #ffb133, #ff9900);
  color: #4a2b00;
}

/* CTA final: banda naranja con tinta oscura */
html[data-tema="naranja"] .cta-final {
  background:
    radial-gradient(70% 120% at 15% 0%, rgba(255, 255, 255, .35) 0%, transparent 55%),
    linear-gradient(100deg, #ffb133 0%, #ff9900 100%);
  box-shadow: 0 24px 60px rgba(255, 153, 0, .35);
}
html[data-tema="naranja"] .cta-final h2 { color: var(--mk-primary-deep); }
html[data-tema="naranja"] .cta-final p { color: rgba(6, 43, 60, .8); }
html[data-tema="naranja"] .cta-final .btn-mk-light { background: var(--mk-primary-deep); color: #fff; }
html[data-tema="naranja"] .cta-final .btn-mk-light:hover { background: #0b3a52; color: #fff; }
html[data-tema="naranja"] .cta-final a.btn[href^="tel"] {
  color: var(--mk-primary-deep) !important;
  border-color: rgba(6, 43, 60, .55) !important;
}

/* Footer */
html[data-tema="naranja"] .footer .social a:hover { background: #ff9900; color: var(--mk-primary-deep); }