@font-face {
  font-family: 'NeuePlakText';
  src: url('./fonts/NeuePlak-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'NeuePlakText';
  src: url('./fonts/NeuePlakText-Regular.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

/* 2. Custom class */
/* 2.1. custon-header */
.custom-header {
  background-color: var(--custom-header-bg) !important;
  color: var(--custom-header-color-tex);
}
.custom-header a,
.custom-header a:hover,
.custom-header a:focus {
  color: var(--custom-header-color-links);
}
.custom-header .q-btn:before {
  box-shadow: none !important;
}
.custom-header .text-caption {
  font-size: 0.9rem;
}

.custom-header .btn {
  color: var(--custom-header-color-links);
}

/* 2.2. custon-footer  */
.custom-footer {
}
.custom-footer {
  background-color: var(--custom-footer-bg) !important;
  color: var(--custom-footer-color-tex);
}
.custom-footer a,
.custom-footer a:hover,
.custom-footer a:focus {
  color: var(--custom-footer-color-links);
}
.custom-separator {
  background-color: var(--custom-separator-color);
}
.custom-social-media-btn {
  color: var(--q-primary) !important;
}

/* 2.3. custom-banner */
.custom-banner {
}

/* 2.4. custom-encabezado */
.custom-encabezado {
}
.custom-encabezado h1 {
}
.custom-encabezado .q-separator {
}

.custom-descripcion-evento {
  background-color: var(--custom-bg-color);
  color: var(--custom-header-color-tex);
}

/* 2.5. custom-destacado */
.custom-destacado {
  background-color: var(--custom-bg-color);
  color: var(--custom-header-color-tex);
}
.custom-destacado h3 {
  color: var(--custom-header-color-tex);
}

/* 2.6. custom-experiencias */
.custom-experiencias {
  background-color: var(--custom-bg-color);
}
.custom-experiencias h3 {
  color: var(--custom-header-color-tex);
}

/* .custom-experiencias picture {
  position: relative;
} */
.custom-experiencias picture::before,
.custom-experiencias picture::after {
  content: '';
  position: absolute;
  bottom: 0px;
  height: 9px;
}
.custom-experiencias picture::before {
  left: 10%;
  width: 30%;
  background-color: #e0544d;
  z-index: 1;
}
.custom-experiencias picture::after {
  left: 0;
  width: 100%;
  background-color: #b7322c;
  z-index: 0;
}

/* 2.7. custom-beneficios */
.custom-beneficios {
  background-color: var(--custom-bg-color);
}

.custom-beneficios h3 {
  color: var(--custom-header-color-tex);
}
.custom-beneficios picture::after {
  background: linear-gradient(
    to right,
    #57718a 0%,
    #57718a 33.33%,
    #979797 33.33%,
    #979797 66.66%,
    #737171 66.66%,
    #737171 100%
  );
  content: '';
  bottom: 0;
  height: 9px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 0;
}

/* 2.8. custom-novedades */
.custom-novedades {
  background-color: var(--custom-bg-color);
  color: var(--custom-header-color-tex);
}

.btn-primary {
  background-color: white;
  color: var(--primary);
  border: 2px solid var(--primary);
}

/*colors of ram */
:root {
  --primary: #b9a457;
  --secondary: #363636;

  --custom-separator-color: #000000;
  --custom-header-color-links: #ffffff;
  --custom-header-color-tex: #ffffff;
  --custom-header-bg: #363636;
  --custom-footer-bg: #2a2a2a;
  --custom-footer-color-links: #ffffff;
  --custom-footer-color-tex: #ffffff;

  --custom-bg-color: #1c1c1c;

  /*ancho del menu */
  --menu-width: 0px;

  /*ancho columna 2 */
  --selector-buttom-width: 410px;

  /*tipografias */
  --bs-font-sans-serif: 'NeuePlakText', sans-serif;
  --bs-font-monospace: 'NeuePlakText', sans-serif;

  /*tamaño de fuente body */
  --bs-body-font-size: 16px;
  --bs-body-h1: 2.5rem;
  --bs-body-h2: 2rem;
  --bs-body-h3: 1.75rem;
  --bs-body-h4: 1.5rem;
  --bs-body-h5: 1.25rem;
  --bs-body-h6: 1rem;
  /*color de los textos default */
  --bs-body-color: #363636;

  /*color primario, botones de accion hovers */
  /*color secunario */

  /*menu desktop: fondo */
  --sider-bar-bg: #363636;
  /*menu desktop: bordes del menu inferior */
  --sider-bar-border: #e8e8e8;
  /*menu desktop: color textos */
  --sider-bar-text: #fff;
  /*menu desktop: color textos disabled */
  --sider-bar-text-disabled: #777777;

  /*menu desktop: color del check que aparece en el menu */
  --sider-bar-check: #d24f19;

  /*menu mobile: fondo */
  --navbar-bg-color: #000;
  /*menu mobile: lineas */
  --navbar-line-color: #fff;

  /* fondo del bloque 2 */
  --selection-card-buttons-bg-color: #ffffff;
  /* fondo del bloque 3 */
  --detail-page-bg-color: #f7f1f13d;

  /*Selectores tipo card: texto */
  --card-buttom-text: #060606;
  /*Selectores tipo card: texto cuando está activado */
  --card-buttom-text-active: #060606;
  /*Selectores tipo card: fondo */
  --card-buttom-bg: #e7e7e7;
  /*Selectores tipo card: fondo cuando está activado */
  --card-buttom-bg-active: #e7e7e7;
  /*Selectores tipo card: boorde que aparece uando está activado */
  --card-buttom-border-active: #d24f19;
  /*Selectores tipo card: barra de desplazamiento */
  --card-buttom-bar-color: rgb(167, 167, 167);
  /*Selectores tipo card: icono */
  --card-buttom-icon-color: var(--card-buttom-border-active);

  --card-hours-border-color-active: var(--card-buttom-border-active);
  --card-hours-color-icon: var(--card-buttom-icon-color);
  --card-hours-bg-color: white;
  --card-hours-text-color: var(--card-buttom-text);

  /* Boton locacion */
  --location-icono-color: var(--secondary);
  --location-text-color: var(--secondary);

  /* tamaño de la flechas de los slider */
  --swiper-navigation-size: 0.8em;
  --swiper-arrow-color: var(--primary);
  --swiper-pagination-color: var(--secondary);

  /* fondo del footer */
  --footer-bg-color: #e7e7e7;
  /* color de texto del footer */
  --footer-text-color: var(--secondary);

  /* inputs */
  --input-border-color: #959595;
  --input-bg-color: white;
  --input-text-color: var(--bs-body-color);

  --check-border-color: var(--primary);
  --check-bg-color: var(--detail-page-bg-color);
}

.avatar-circle .nombreCompleto {
    margin-bottom: 10%;
}