/* =========================
   VARIABLES DE MARCA
========================= */
:root {
  --rojo: #A10E0E;
  --rojo-hover: #7A0B0B;
  --crema: #F5EFE6;
  --beige: #E6D3B3;
  --texto: #2B2B2B;
  --blanco: #FFFFFF;
  --footer: #1E1E1E;
}

/* =========================
   BASE
========================= */
body, .sp-preloader {
  background-color: var(--crema);
  color: var(--texto);
}

a {
  color: var(--rojo);
  transition: all 0.3s ease;
}

a:hover,
a:focus,
a:active {
  color: var(--rojo-hover);
}

/* =========================
   PRELOADER
========================= */
.sp-preloader > div {
  background: var(--rojo);
}

.sp-preloader > div:after {
  background: var(--crema);
}

/* =========================
   TOP BAR
========================= */
#sp-top-bar {
  background: var(--crema);
  color: var(--rojo);
}

#sp-top-bar a {
  color: var(--rojo);
}

/* =========================
   HEADER / MENU
========================= */
#sp-header {
  background: var(--crema);
  border-bottom: 1px solid var(--beige);
}

/* Menu principal */
.sp-megamenu-parent > li > a {
  color: var(--rojo);
  font-weight: 500;
}

.sp-megamenu-parent > li:hover > a {
  color: var(--rojo-hover);
}

.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active:hover > a {
  color: var(--rojo-hover);
}

/* Dropdown */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: var(--crema);
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  color: var(--rojo);
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  color: var(--rojo-hover);
}

/* =========================
   OFFCANVAS MENU
========================= */
.offcanvas-menu {
  background-color: var(--crema);
  color: var(--rojo);
}

.offcanvas-menu .offcanvas-inner a {
  color: var(--rojo);
}

.offcanvas-menu .offcanvas-inner a:hover {
  color: var(--rojo-hover);
}

.offcanvas-menu .offcanvas-inner ul.menu > li a {
  color: var(--rojo);
}

/* =========================
   BOTONES
========================= */
.btn-primary,
.sppb-btn-primary {
  background-color: var(--rojo);
  border-color: var(--rojo);
  color: var(--blanco);
}

.btn-primary:hover,
.sppb-btn-primary:hover {
  background-color: var(--rojo-hover);
  border-color: var(--rojo-hover);
}

/* =========================
   ICONOS
========================= */
ul.social-icons > li a:hover {
  color: var(--rojo-hover);
}

/* =========================
   TITULOS / HEADERS
========================= */
.sp-page-title {
  background: var(--crema);
  color: var(--rojo);
}

/* =========================
   TAGS
========================= */
.tags > li a {
  background: rgba(161, 14, 14, 0.1);
  color: var(--rojo);
}

.tags > li a:hover {
  background: var(--rojo);
  color: var(--blanco);
}

/* =========================
   MODULOS
========================= */
.sp-module ul > li > a {
  color: var(--texto);
}

.sp-module ul > li > a:hover {
  color: var(--rojo);
}

.sp-module .latestnews > div > a {
  color: var(--texto);
}

.sp-module .latestnews > div > a:hover {
  color: var(--rojo);
}

/* =========================
   PAGINACION
========================= */
.pagination > li > a,
.pagination > li > span {
  color: var(--texto);
}

.pagination > li > a:hover {
  color: var(--rojo);
}

.pagination > .active > a,
.pagination > .active > span {
  border-color: var(--rojo);
  background-color: var(--rojo);
  color: var(--blanco);
}

.pagination > .active > a:hover {
  border-color: var(--rojo-hover);
  background-color: var(--rojo-hover);
}

/* =========================
   FOOTER
========================= */
#sp-footer,
#sp-bottom {
  background: var(--footer);
  color: var(--crema);
}

#sp-footer a,
#sp-bottom a {
  color: var(--crema);
}

#sp-footer a:hover,
#sp-bottom a:hover {
  color: var(--rojo);
}

/* =========================
   OTROS
========================= */
.sp-reading-progress-bar {
  background-color: var(--rojo);
}

.search .btn-toolbar button {
  background: var(--rojo);
}

.error-code,
.coming-soon-number {
  color: var(--rojo);
}