/* ============================================
   Bootstrap Element Overrides para saltarnos los estilos de bootstrap
   ============================================ */
body .h1, body h1,
body .h2, body h2,
body .h3, body h3,
body .h4, body h4,
body .h5, body h5,
body .h6, body h6,
body p {
  font-size: inherit;

}

/* ============================================
   Estilos Generales de Tipografía
   ============================================ */

body {
  font-size: 16px!important;
  font-weight: 300;
  line-height: 24px;
  font-family: "Graphik", sans-serif !important;
}

/* ============================================
   Eliminar underline de todos los enlaces
   ============================================ */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
  text-decoration: none !important;
}

.regular {
  font-weight: normal !important;
}

.light {
  font-weight: 300 !important;
}

.bold {
  font-weight: bold !important;
}

.italic {
  font-style: italic !important;
}

.uppercase {
  text-transform: uppercase !important;
}

p {
  margin-bottom: var(--distancia-parrafos);
  
  font-size: 18px!important;
}

p:last-child {
  margin-bottom: 0;
}

em, i {
  font-style: italic !important;
}



/* evitamos que font awesome ponga la fuente en italica */
i.fa {
  font-style: normal !important;
}

u {
  text-decoration: underline !important;
}

/* ============================================
   Clases del Design System: Headlines
   ============================================ */

.headline-XL,
.headline-L,
.headline-M,
.headline-S {
  text-wrap: balance;
}

/*** DESKTOP ***/
@media (min-width: 1440px) {
  .headline-XL {
    font-size: 80px;
    line-height: 100px;
  }

  .headline-L {
    font-size: 72px;
    line-height: 80px;
  }

  .headline-M {
    font-size: 56px;
    line-height: 64px;
  }

  .headline-S {
    font-size: 48px;
    line-height: 56px;
  }
}

/*** TABLET ***/
@media (min-width: 769px) and (max-width: 1439px) {
  .headline-XL {
    font-size: 64px;
    line-height: 64px;
  }

  .headline-L {
    font-size: 56px;
    line-height: 74px;
  }

  .headline-M {
    font-size: 48px;
    line-height: 52px;
  }

  .headline-S {
    font-size: 40px;
    line-height: 48px;
  }
}

/*** MOBILE ***/
@media (max-width: 768px) {
  .headline-XL {
    font-size: 48px;
    line-height: 48px;
  }

  .headline-L {
    font-size: 40px;
    line-height: 48px;
  }

  .headline-M {
    font-size: 32px;
    line-height: 40px;
  }

  .headline-S {
    font-size: 32px;
    line-height: 40px;
  }
}

/* ============================================
   Clases del Design System: Titles
   ============================================ */

.title-L,
.title-M,
.title-S {}

/*** DESKTOP ***/
@media (min-width: 1440px) {
  .title-L {
    font-size: 32px;
    line-height: 40px;
  }

  .title-M {
    font-size: 24px;
    line-height: 32px;
  }

  .title-S {
    font-size: 20px;
    line-height: 24px;
  }
}

/*** TABLET ***/
@media (min-width: 769px) and (max-width: 1439px) {
  .title-L {
    font-size: 32px;
    line-height: 40px;
  }

  .title-M {
    font-size: 24px;
    line-height: 32px;
  }

  .title-S {
    font-size: 20px;
    line-height: 24px;
  }
}

/*** MOBILE ***/
@media (max-width: 768px) {
  .title-L {
    font-size: 24px;
    line-height: 32px;
  }

  .title-M {
    font-size: 20px;
    line-height: 24px;
  }

  .title-S {
    font-size: 18px;
    line-height: 24px;
  }
}

/* ============================================
   Clases del Design System: Subtitles
   ============================================ */

.subtitle-L,
.subtitle-M,
.subtitle-S {}

/*** DESKTOP ***/
@media (min-width: 1440px) {
  .subtitle-L {
    font-size: 28px;
    line-height: 32px;
  }

  .subtitle-M {
    font-size: 20px;
    line-height: 24px;
  }

  .subtitle-S {
    font-size: 16px;
    line-height: 20px;
  }

  .subtitle-XS {
    font-size: 14px;
    line-height: 18px;
  }
}

/*** TABLET ***/
@media (min-width: 769px) and (max-width: 1439px) {
  .subtitle-L {
    font-size: 24px;
    line-height: 28px;
  }

  .subtitle-M {
    font-size: 20px;
    line-height: 24px;
  }

  .subtitle-S {
    font-size: 16px;
    line-height: 20px;
  }

  .subtitle-XS {
    font-size: 14px;
    line-height: 18px;
  }
}

/*** MOBILE ***/
@media (max-width: 768px) {
  .subtitle-L {
    font-size: 20px;
    line-height: 24px;
  }

  .subtitle-M {
    font-size: 18px;
    line-height: 24px;
  }

  .subtitle-S {
    font-size: 16px;
    line-height: 20px;
  }

  .subtitle-XS {
    font-size: 14px;
    line-height: 18px;
  }
}

/* ============================================
   Clases del Design System: Labels
   ============================================ */

.label-L,
.label-M,
.label-S {
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/*** DESKTOP ***/
@media (min-width: 1440px) {
  .label-L {
    font-size: 16px;
    line-height: 24px;
  }

  .label-M {
    font-size: 14px;
    line-height: 16px;
  }

  .label-S {
    font-size: 12px;
    line-height: 16px;
  }
}

/*** TABLET ***/
@media (min-width: 769px) and (max-width: 1439px) {
  .label-L {
    font-size: 16px;
    line-height: 24px;
  }

  .label-M {
    font-size: 14px;
    line-height: 16px;
  }

  .label-S {
    font-size: 12px;
    line-height: 16px;
  }
}

/*** MOBILE ***/
@media (max-width: 768px) {
  .label-L {
    font-size: 14px;
    line-height: 18px;
  }

  .label-M {
    font-size: 14px;
    line-height: 16px;
  }

  .label-S {
    font-size: 12px;
    line-height: 16px;
  }
}

/* ============================================
   Clases del Design System: Disclaimer
   ============================================ */

.disclaimer-L,
.disclaimer-M,
.disclaimer-S {}

/* the_content / WYSIWYG envuelve en <p>; el p global del tema fuerza 18px !important */
.disclaimer-L p,
.disclaimer-L li,
.disclaimer-M p,
.disclaimer-M li,
.disclaimer-S p,
.disclaimer-S li {
  font-size: inherit !important;
  line-height: inherit !important;
}

/*** DESKTOP ***/
@media (min-width: 1440px) {
  .disclaimer-L {
    font-size: 16px;
    line-height: 22px;
  }

  .disclaimer-M {
    font-size: 14px;
    line-height: 22px;
  }

  .disclaimer-S {
    font-size: 12px;
    line-height: 18px;
  }
}

/*** TABLET ***/
@media (min-width: 769px) and (max-width: 1439px) {
  .disclaimer-L {
    font-size: 16px;
    line-height: 22px;
  }

  .disclaimer-M {
    font-size: 14px;
    line-height: 18px;
  }

  .disclaimer-S {
    font-size: 12px;
    line-height: 18px;
  }
}

/*** MOBILE ***/
@media (max-width: 768px) {
  .disclaimer-L {
    font-size: 16px;
    line-height: 22px;
  }

  .disclaimer-M {
    font-size: 14px;
    line-height: 18px;
  }

  .disclaimer-S {
    font-size: 12px;
    line-height: 18px;
  }
}