[data-component-id="usfq_theme:link"] {

  &.link--link-button{ 
    &.link--color-secondary a{
      color: var(--secondary) !important;

      &:hover{
        background: transparent !important;
        color: var(--white) !important;
      }
    }
    &.link--color-primary a{
      color: var(--primary) !important;

      &:hover{
        background: transparent !important;
        color: var(--white) !important;
      }
    }
    &.link--color-light a{
      color: var(--white) !important;
      background: transparent !important;
      &:hover{
        background: var(--secondary) !important;
      }
    }
    a{
      text-decoration: none;
      background: var(--white);
      padding: 18px 22px;
      border-radius: 61px;
      text-transform: uppercase;
      border: 1px solid;
      font-size: 0.75rem;
      font-weight: 500;
      
      &:hover{
        background: var(--secondary);
        color: var(--white);
      }
    }
  }

  font-family: var(--headings-font-family);

  /* Variantes color */
  &.link--color-primary:not(.link--link-list):not(.link--two-columns-link-item):not(.link--one-columns-link-item) {
    color: var(--primary);
  }

  &.link--color-secondary:not(.link--link-list):not(.link--two-columns-link-item):not(.link--one-columns-link-item),
  .link--two-columns-link-item.link--color-secondary,
  .link--one-columns-link-item.link--color-secondary {
    color: var(--secondary);
  }

  &.link--color-light:not(.link--link-list):not(.link--two-columns-link-item):not(.link--one-columns-link-item),
  .link--two-columns-link-item.link--color-light,
  .link--one-columns-link-item.link--color-light {
    color: var(--white);
    .link-image__text{
      color: var(--white);
    }
  }

  /* LINK DIVIDER */
  &.link-divider {
    display: block;
    font-weight: 500;
    text-align: right;
    width: 100%;
    padding: .5rem 0;
    text-transform: uppercase;
    color: currentColor;
    font-size: 10px;
    letter-spacing: .23em;
    text-decoration: none;
    transition: background-color 0.2s ease;
    overflow: hidden;
  }

  &.link-divider:hover .link-divider__icon {
    transform: scale(1.2);
  }

  &.link--color-primary:focus:not(.link--link-list):not(.link--two-columns-link-item):not(.link--one-columns-link-item) {
    background-color: var(--dark-opacity-20);
  }

  &.link--color-secondary:focus:not(.link--link-list):not(.link--two-columns-link-item):not(.link--one-columns-link-item) {
    background-color: var(--dark-opacity-20);
  }

  &.link--color-light:focus:not(.link--link-list):not(.link--two-columns-link-item):not(.link--one-columns-link-item) {
    background-color: var(--light-opacity-20);
    outline: none;
  }

  .link-divider__text {
    border-top: 1px solid currentColor;
    padding: .5rem 1rem;
  }

  .link-divider__icon {
    display: inline-block;
    padding-right: 1rem;
    padding-bottom: .5rem;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .link-divider__icon .icon svg {
    height: 48px;
    width: 48px;
  }

  /* TABLET */
  @media (min-width: 768px) and (max-width: 1024px) {
    .link-divider__icon .icon svg {
      height: 60px;
      width: 60px;
    }

    &.link-divider {
      font-size: 14px;
    }
  }

  /* DESKTOP */
  @media (min-width: 1025px) {
    .link-divider__icon {
      padding-right: 4rem;
    }

    .link-divider__icon .icon svg {
      height: 60px;
      width: 60px;
    }

    .link-divider__text {
      font-size: 16px;
      padding: .5rem 4rem;
    }
  }

  /* LINK NAVBAR MENU */
  &.link--link-navbar-menu {
    text-transform: uppercase;
    width: 100%;
  }

  &.link--link-navbar-menu a {
    text-align: right;
    align-items: center;
    display: flex;
    justify-content: end;
    gap: 48px;
    color: var(--white);
    text-decoration: none;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    border-top: 1px solid var(--white);
    border-bottom: 1px solid var(--white);
    padding: 8px 40px 8px 16px;
    font-weight: 900;
    letter-spacing: var(--ls-h2);
  }

  &.link--link-navbar-menu a:hover,
  &.link--link-navbar-menu a:focus {
    background-color: var(--light-opacity-20);
  }

  /* Iconos 20px en mobile */
  &.link--link-navbar-menu .link-navbar-menu__icon .icon svg,
  &.link--link-navbar-menu .icon svg {
    height: 20px !important;
    width: 20px !important;
  }

  &.link--link-navbar-menu .link-navbar-menu__icon .icon,
  &.link--link-navbar-menu .icon {
    font-size: 20px !important;
  }

  &.link--link-navbar-menu.link--size-large a {
    font-size: 32px;
    letter-spacing: 0;
    font-weight: 900;
  }

  &.link--link-navbar-menu.link--size-small a {
    font-size: 16px;
  }

  /* TABLET */
  @media (min-width: 768px) and (max-width: 1024px) {

    &.link--link-navbar-menu a {
      gap: 48px;
      border-bottom: 2px solid currentColor;
      border-top: none;
      padding: 16px 24px;
    }

    &.link--link-navbar-menu .link-navbar-menu__icon .icon svg,
    &.link--link-navbar-menu .icon svg {
      height: 35px !important;
      width: 35px !important;
    }

    &.link--link-navbar-menu .link-navbar-menu__icon .icon,
    &.link--link-navbar-menu .icon {
      font-size: 35px !important;
    }
  }

  /* DESKTOP */
  @media (min-width: 1025px) {
    &.link--link-navbar-menu {
      padding: 23px 1.5rem;
    }

    &.link--link-navbar-menu a {
      font-size: 16px;
      gap: 48px;
      border-bottom: 2px solid currentColor;
      border-top: none;
      text-align: left;
      justify-content: space-between;
      position: relative;
      min-height: 67px;
      /* padding: 16px 64px; */
    }

    &.link--link-navbar-menu .link-navbar-menu__icon {
      position: absolute;
      right: 3rem;
      top: 50%;
      transform: translateY(-50%);
    }

    /* Iconos 35px en desktop */
    &.link--link-navbar-menu .link-navbar-menu__icon .icon svg,
    &.link--link-navbar-menu .icon svg {
      height: 35px !important;
      width: 35px !important;
    }

    &.link--link-navbar-menu .link-navbar-menu__icon .icon,
    &.link--link-navbar-menu .icon {
      font-size: 35px !important;
    }
  }

  /* LINK LIST */
  &.link--link-list {
    list-style: none;
    width: 100%;
    padding: 0;
  }

  &.link--link-list .link--link-list-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid currentColor;
  }

  &.link--link-list .link--link-list-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: currentColor;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0;
    padding: .5rem 1.5rem;
    gap: 1.5rem;
    height: 100%;
    text-align: end;
  }

  &.link--link-list .link--link-list-item .link-link-list-item__icon .icon svg {
    height: 48px;
    width: 48px;
  }

  &.link--link-list .link--link-list-item:hover {
    background-color: var(--dark-opacity-20);
    outline: none;
  }

  &.link--link-list .link--link-list-item:hover {
    background-color: var(--light-opacity-20);
    outline: none;
  }

  /* TABLET */
  @media (min-width: 768px) and (max-width: 1024px) {
    &.link--link-list .link--link-list-item a {
      justify-content: end;
      gap: 2.5rem;
      padding: 1rem 1.5rem;
      font-size: 1.5rem;
      height: 100%;
    }

    &.link--link-list .link--link-list-item .link-link-list-item__icon .icon svg {
      height: 60px;
      width: 60px;
    }
  }

  /* DESKTOP */
  @media (min-width: 1025px) {
    &.link--link-list .link--link-list-item a {
      justify-content: end;
      gap: 5rem;
      font-size: 2rem;
      padding: 1rem 4rem;
    }

    &.link--link-list .link--link-list-item .link-link-list-item__icon .icon svg {
      height: 60px;
      width: 60px;
    }
  }

  /* TWO COLUMNS LINK ITEM AND ONE COLUMNS LINK ITEM */
  .link--two-columns-link-item,
  .link--one-columns-link-item {
    border-bottom: 2px solid currentColor;
  }

  .link--two-columns-link-item a,
  .link--one-columns-link-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: currentColor;
    text-decoration: none;
    padding: 1rem 0;
  }

  /* Aire entre el texto de la fila y la flecha: sin el, una descripcion larga llega
     a tocarla. Solo en la variante de dos columnas: en la de una, el hueco recorta
     el ancho del titulo y adelanta el salto de linea en movil. */
  .link--two-columns-link-item a {
    gap: 1.5rem;
  }

  /* Los dos velos estaban cambiados: en claro se pintaba blanco al 20% sobre fondo
     blanco. El del bloque dark del final del fichero no llegaba a aplicarse nunca
     porque, al no estar anidado, tiene menos especificidad que este: la media query
     no suma. Por eso el de oscuro va aqui dentro. */
  .link--two-columns-link-item a:hover,
  .link--one-columns-link-item a:hover {
    background-color: var(--dark-opacity-20);
  }

  :where(html[data-theme="dark"]) & {
    .link--two-columns-link-item a:hover,
    .link--one-columns-link-item a:hover {
      background-color: var(--light-opacity-20);
    }
  }

  .link--two-columns-link-item .eyebrow,
  .link--one-columns-link-item .eyebrow {
    color: var(--primary);
  }

  .link--two-columns-link-item .link--two-columns-link-item__icon,
  .link--one-columns-link-item .link--one-columns-link-item__icon {
    align-content: center;
  }

  .link--two-columns-link-item .link--two-columns-link-item__content .left {
    width: 100%;
    margin-bottom: 1rem;
  }

  .link--two-columns-link-item .link--two-columns-link-item__content .right {
    width: 100%;
  }

  /* La regla global de app.css sube los <p> a 1rem en desktop; la descripcion
     de la ficha se queda en el cuerpo pequeno que marca el diseno. */
  .link--two-columns-link-item .link--two-columns-link-item__description {
    font-size: 0.75rem;
    line-height: 1.25;
    font-weight: var(--fw-body-regular);
  }

  /* TABLET */
  @media (min-width: 768px) and (max-width: 1024px) {

    .link--two-columns-link-item .link--two-columns-link-item__content {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .link--two-columns-link-item .link--two-columns-link-item__content .left {
      margin-bottom: 0;
      border-right: 1px solid currentColor;
      flex: 0 0 45%;
    }

    .link--two-columns-link-item .link--two-columns-link-item__content .right {
      padding-left: 2.5rem;
    }

    .link--two-columns-link-item .link--two-columns-link-item__content .left {
      padding-right: 2.5rem;
    }

    .link--one-columns-link-item .link--one-columns-link-item__content .left {
      border-right: none;
    }
  }

  /* DESKTOP */
  @media (min-width: 1025px) {

    .link--two-columns-link-item .link--two-columns-link-item__content {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .link--two-columns-link-item .link--two-columns-link-item__content .left {
      margin-bottom: 0;
      border-right: 1px solid currentColor;
      flex: 0 0 45%;
    }

    .link--two-columns-link-item .link--two-columns-link-item__content .right {
      padding-left: 4rem;
    }

    .link--two-columns-link-item .link--two-columns-link-item__description {
      line-height: 1;
    }

    .link--two-columns-link-item .link--two-columns-link-item__content .left {
      padding-right: 4rem;
    }

    .link--one-columns-link-item .link--one-columns-link-item__content .left {
      padding-right: 0;
    }

  }

  .link--two-columns-link-item__icon .icon svg,
  .link--one-columns-link-item__icon .icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/*link imagen*/
.link--image-link-list {
  width: 100%;
}

.link--image-link-list a {
  display: flex;
  align-items: center;
  height: 56px;
  gap: 8px;
  padding: 6px 16px;
  border-top: 1px solid var(--bs-link-color-rgb);
  border-bottom: 1px solid var(--bs-link-color-rgb);
  opacity: 1;
  text-decoration: none;
}

.link--image-link-list a:hover {
  background: var(--light-opacity-20);
}

.link--image-link-list a {
  color: var(--white);
}

.link--image-link-list a:hover {
  background: var(--dark-opacity-20);
}

.link-image__text {
  color: var(--primary);
}

.link--image-link-list .link-image__icon {
  margin-left: auto;
}

.link--image-link-list img {
  height: 100%;
  object-fit: cover;
  max-width: 100%;
  padding: 8px;
}

.link--image-link-list .link-image__icon svg {
  width: 20px;
  height: 20px;
}

/*Tablet*/
@media (min-width: 768px) and (max-width: 1024px) {
  .link--image-link-list a {
    height: 96px;
    gap: 16px;
    padding: 0 24px;
  }

  .link--image-link-list .link-image__icon svg {
    width: 48px;
    height: 48px;
  }

  .link--image-link-list .link-image__text {
    margin-left: auto;
  }
}


/*Desktop*/
@media (min-width: 1025px) {
  .link--image-link-list a {
    height: 96px;
    gap: 16px;
    padding: 0 64px;
  }

  .link--image-link-list .link-image__icon svg {
    width: 48px;
    height: 48px;
  }

  .link--image-link-list .link-image__text {
    margin-left: auto;
  }

  [data-component-id="usfq_theme:icon"] {
    color: currentColor !important;
  }
}

:where(html[data-theme="dark"]) .link-image__text {
  color: var(--white) !important;
}

:where(html[data-theme="dark"]) .link.link--one-columns-link-item,
:where(html[data-theme="dark"]) .link.link--two-columns-link-item {
  color: var(--white) !important;
}

:where(html[data-theme="dark"]) .link--two-columns-link-item .eyebrow,
:where(html[data-theme="dark"]) .link--one-columns-link-item .eyebrow {
  color: var(--white) !important;
}

:where(html[data-theme="dark"]) [data-component-id="usfq_theme:icon"] {
  color: currentColor !important;
}

:where(html[data-theme="dark"]) h3.h4.event_card-title {
  color: var(--white);
}