/* Paleta zlmotos.com
   Primario (botones/acento):  #ff9200
   Hover de boton:            #333333
   Fondo:                     #ffffff / #f9f9f9
   Sombra / texto oscuro:     #121212
   Fuentes: Cabin (texto) / Roboto (titulos)
*/
:root {
  --primary-color: #ff9200;
  --primary-color-rgb: 255, 146, 0;

  --primary-color-2: #ff9200;
  --primary-color-2-rgb: 255, 146, 0;

  --tertiary-color: #ff9200;
  --tertiary-color-rgb: 255, 146, 0;

  --quaternary-color: #333333;
  --quaternary-color-rgb: 51, 51, 51;

  --body-font: "Cabin", Helvetica, Arial, sans-serif;
  --title-font: "Roboto", Helvetica, Arial, sans-serif;
  --title-font-weight: 600;
  --title-font-color: #121212;
  --body-font-color: #4A4A4A;
  --dark-body-font-color: #F5F5F7;
  --dark-title-font-color: #FFFFFF;
  --dark-scheme-color: #121212;

  --bg-color-odd: #FFFFFF;
  --bg-color-even: #F9F9F9;
  --bg-grey: #F4F4F4;

  --bg-dark-1: #121212;
  --bg-dark-2: #1C1C1C;
  --bg-dark-3: #262626;

  --border-default: solid 1px rgba(18, 18, 18, 1);

  /* Texto sobre el naranja de marca */
  --on-primary-color: #121212;
}

/* Menu del header en negro sobre heroes claros.
   El hover no se toca: sigue mandando la regla original del tema. */
body.zl-menu-negro #mainmenu li a {
  color: #000000;
}
body.zl-menu-negro #mainmenu>li.has-child:after {
  color: rgba(0, 0, 0, .75);
}

/* Texto legible sobre el naranja de marca.
   El blanco sobre #ff9200 da 2.24:1 y no cumple el minimo de WCAG AA (4.5:1).
   El texto #121212 da 8.35:1, asi que en todo bloque con fondo naranja
   se invierte el color del texto. Solo afecta al texto: los fondos,
   los bordes y el hover del menu siguen igual. */
.bg-color,
section.bg-color,
.bg-color.text-light,
section.bg-color.text-light,
.subtitle.bg-color.text-light,
section.call-to-action,
.btn-main,
a.btn-main,
input.btn-main,
.btn-primary,
.price-row,
.subtitle.bg-color,
.ribbon,
.pricing-table .ribbon,
.de-event-item .d-date,
.widget_tags li a,
.nav-pills .nav-link.active,
.page-item.active .page-link,
.date-post,
.widget-post .date,
.style-2 .date-box,
h5 span.label,
.box-fx .info,
.btn-more,
.btn-id,
.btn-rsvp,
#filters a.selected,
.de-progress .progress-bar,
.de-card .de-price span,
.de_pricing-table .d-list li,
.mask .cover,
.mask .cover .date,
.mask:hover .cover h3,
.feature-box.f-boxed.invert,
.dropdown li span:hover,
#mainmenu ul li:hover>a.menu-item,
#mainmenu li li a.menu-item:hover,
#mainmenu ul li b,
.circle,
.switch,
.de-color-icons i,
.d-card i,
.icon-deco i,
.feature-box-big-icon i,
.social-icons-sm i:hover,
.scrollbar,
.custom-show:after,
.custom-close:after,
#cookieConsent a.cookieConsentOK,
.text-light .de_countdown,
.text-light .dropdown li span,
.de-event-item .d-date,
.p-tagline,
h5.title {
  color: var(--on-primary-color);
}

/* El hover de los botones conserva el fondo naranja, asi que el texto
   tambien tiene que pasar a oscuro. */
.btn-main:hover,
a.btn-main:hover,
input.btn-main:hover,
.btn.btn-primary:hover,
a.btn-main.btn-light-trans:hover,
a.btn-main.btn-dark-trans:hover,
a.btn-main.invert:hover,
.btn-primary:hover {
  color: var(--on-primary-color);
}

/* Texto seleccionado sobre fondo naranja. */
::selection {
  color: var(--on-primary-color);
  background: var(--primary-color);
}
::-moz-selection {
  color: var(--on-primary-color);
  background: var(--primary-color);
}