.h1, .h2, .h3, .h4, .h5, .h6
  font-family: $heading-font-family
  font-weight: $heading-font-weight
  line-height: $heading-line-height
  margin: 0 0 $small-spacing
  color: $color-headers

.h1
  font-size: $h1-font-size
.h2
  font-size: $h2-font-size
.h3
  font-size: $h3-font-size
.h4
  font-size: $h4-font-size
.h5
  font-size: $h5-font-size
.h6
  font-size: $h6-font-size

.text-small
  font-size: 0.8em

.text-thin, .texto-thin
  font-weight: $base-thin-font-weight
.text-regular, .texto-regular
  font-weight: $base-medium-font-weight
.text-bold, .texto-bold
  font-weight: $base-bold-font-weight
.text-black, .texto-black
  font-weight: $base-black-font-weight

.text-center, .texto-centro
  text-align: center

.text-white, .texto-blanco
  color: $white !important
  *, span, i
    color: $white !important
  &--hover
    &:active, &:focus, &:hover
      color: $white !important
      *
        color: $white !important

.titulo-principal
  border-bottom: solid 3px $color-sistema-f
  margin-bottom: 48px
  padding-bottom: 20px
  display: flex
  align-items: center
  &__numero
    min-width: 45px
    height: 45px
    margin-right: 15px
    position: relative
    span
      @extend .h1
      margin-bottom: 0
      position: absolute
      top: 50%
      left: 50%
      transform: translate(-50%,-50%)
  h1
    margin-bottom: 0

  &.color-primario
    .titulo-principal__numero
      background-color: $color-primario
      span
        color: textColor($color-primario)
  &.color-secundario
    .titulo-principal__numero
      background-color: $color-secundario
      span
        color: textColor($color-secundario)
  &.color-acento-contenido
    .titulo-principal__numero
      background-color: $color-acento-contenido
      span
        color: textColor($color-acento-contenido)
  &.color-acento-botones
    .titulo-principal__numero
      background-color: $color-acento-botones
      span
        color: textColor($color-acento-botones)

.titulo-segundo
  margin-bottom: 48px
  &:after
    content: ''
    display: block
    height: 3px
    width: 140px
    border-left: solid 50px
    border-left-color: $color-sistema-f
    background-color: $color-sistema-f
  &.color-primario
    &:after
      border-left-color: $color-primario
  &.color-secundario
    &:after
      border-left-color: $color-secundario
  &.color-acento-contenido
    &:after
      border-left-color: $color-acento-contenido
  &.color-acento-botones
    &:after
      border-left-color: $color-acento-botones

.titulo-tercero
  margin-bottom: 36px

.titulo-cuarto
  margin-bottom: 24px

.titulo-quinto
  text-align: center
  margin-bottom: 24px
  &> *
    display: inline-block
    border-bottom: 4px solid $color-primario
    padding: 0 15px 5px
    position: relative

    &:before
      content: ''
      display: block
      position: absolute
      transform: translate(-50%,-50%)
      width: 0
      height: 0
      border-left: 10px solid transparent
      border-right: 10px solid transparent
      border-top: 10px solid
      left: 50%
      top: calc(100% + 6px)
      border-top-color: $color-primario

  &.color-primario
    &> *
      border-bottom-color: $color-primario !important
      &:before
        border-top-color: $color-primario
  &.color-secundario
    &> *
      border-bottom-color: $color-secundario !important
      &:before
        border-top-color: $color-secundario
  &.color-acento-contenido
    &> *
      border-bottom-color: $color-acento-contenido !important
      &:before
        border-top-color: $color-acento-contenido
  &.color-acento-botones
    &> *
      border-bottom-color: $color-acento-botones !important
      &:before
        border-top-color: $color-acento-botones

.titulo-sexto
  margin-bottom: 24px
  border-left: 5px solid
  padding: 5px 0 5px 15px
  h5
    display: inline-block
    margin-right: 10px
    margin-bottom: 0

  &.color-primario
    border-left-color: $color-primario
  &.color-secundario
    border-left-color: $color-secundario
  &.color-acento-contenido
    border-left-color: $color-acento-contenido
  &.color-acento-botones
    border-left-color: $color-acento-botones

.etiqueta
  padding: 2px 6px 5px
  margin-right: 5px
  color: $color-etiqueta-texto
  background-color: $color-etiqueta-fondo

.cajon
  position: relative
  &:before
    content: ''
    display: block
    width: 25px
    height: 10px
    position: absolute
    top: 0
    left: 0

  &.color-primario
    background-color: lighten($color-primario, 55%)
    &:before
      background-color: $color-primario
  &.color-secundario
    background-color: lighten($color-secundario, 20%)
    &:before
      background-color: $color-secundario
  &.color-acento-contenido
    background-color: lighten($color-acento-contenido, 30%)
    &:before
      background-color: $color-acento-contenido
  &.color-acento-botones
    background-color: lighten($color-acento-botones, 35%)
    &:before
      background-color: $color-acento-botones

.cajon-b
  position: relative
  &:before
    content: ''
    display: block
    position: absolute
    opacity: .35
    top: 0
    left: 0
    right: 60%
    bottom: 50%
  & > *
    position: relative

  &.arriba-derecha
    &:before
      top: 0
      left: 60%
      right: 0
      bottom: 50%

  &.abajo-derecha
    &:before
      top: 50%
      left: 60%
      right: 0
      bottom: 0

  &.abajo-izquierda
    &:before
      top: 50%
      left: 0
      right: 60%
      bottom: 0

  &.color-primario
    &:before
      background-color: $color-primario
  &.color-secundario
    &:before
      background-color: $color-secundario
  &.color-acento-contenido
    &:before
      background-color: $color-acento-contenido
  &.color-acento-botones
    &:before
      background-color: $color-acento-botones

.lista-ol
  li
    margin-bottom: 10px

    > span:first-of-type
      margin-right: 5px

  &--separador
    li
      padding-bottom: 15px
      margin-bottom: 15px
      border-bottom: solid 1px $color-sistema-c
      &:last-child
        padding-bottom: 0
        border-bottom: none

  &--cuadro
    @extend .lista-ol
    li
      // display: flex
    &__vineta
      background-color: $color-acento-contenido
      display: inline-block
      min-width: 24px
      height: 24px
      color: $white
      position: relative
      margin-right: 8px
      vertical-align: top

      span
        position: absolute
        top: 50%
        left: 50%
        transform: translate(-50%,-50%)
        line-height: 1em

.lista-ul
  @extend .lista-ol
  &--separador
    @extend .lista-ul
    @extend .lista-ol--separador
  li
    > i:first-of-type
      position: relative
      top: 4px
      margin-right: 7px
      vertical-align: top
    ul
      padding-left: 15px
      .lista-ul__vineta
        &:before
          content: '- '
  &__vineta
    top: 0 !important
    &:before
      content: '• '
      line-height: 1em

  &--color
    @extend .lista-ul
    li
      > i:first-of-type
        color: $color-acento-contenido