/* =====================================================
   UNAM-CANADA
   OPPORTUNITIES ACCORDION
===================================================== */

.unam-opportunities {

  --uo-blue: #123B63;
  --uo-blue-dark: #082943;
  --uo-blue-light: #EAF3F8;

  --uo-gold: #C5A253;

  --uo-text: #17212B;
  --uo-gray: #68747F;
  --uo-border: #DDE4E9;

  background: #fff;

  padding: 110px 0;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

}


.unam-opportunities *,
.unam-opportunities *::before,
.unam-opportunities *::after {

  box-sizing: border-box;

}


.unam-opportunities .uo-container {

  width: min(
    1180px,
    calc(100% - 50px)
  );

  margin: auto;

}


/* =====================================================
   HEADER
===================================================== */

.unam-opportunities .uo-heading {

  max-width: 780px;

  margin-bottom: 70px;

}


.unam-opportunities .uo-kicker {

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;

  color: var(--uo-blue);

  margin-bottom: 15px;

}


.unam-opportunities .uo-kicker::before {

  content: "";

  display: inline-block;

  width: 28px;

  height: 2px;

  background: var(--uo-gold);

  margin-right: 10px;

  vertical-align: middle;

}


.unam-opportunities .uo-heading h2 {

  margin: 0 0 20px;

  font-size: clamp(
    40px,
    5vw,
    64px
  );

  line-height: 1;

  letter-spacing: -2.5px;

  font-weight: 650;

  color: var(--uo-text);

}


.unam-opportunities .uo-heading h2 span {

  color: var(--uo-blue);

}


.unam-opportunities .uo-heading p {

  max-width: 620px;

  margin: 0;

  color: var(--uo-gray);

  font-size: 16px;

  line-height: 1.7;

}


/* =====================================================
   CATEGORY
===================================================== */

.unam-opportunities .uo-category {

  margin-bottom: 75px;

}


.unam-opportunities .uo-category:last-child {

  margin-bottom: 0;

}


/* Category title */

.unam-opportunities .uo-category-title {

  display: flex;

  align-items: flex-start;

  gap: 25px;

  padding-bottom: 25px;

  border-bottom: 2px solid var(--uo-blue);

  margin-bottom: 0;

}


.unam-opportunities .uo-category-number {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 46px;

  height: 46px;

  flex-shrink: 0;

  background: var(--uo-blue);

  color: white;

  font-size: 13px;

  font-weight: 700;

}


.unam-opportunities .uo-category-title small {

  display: block;

  margin-bottom: 4px;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.7px;

  color: var(--uo-blue);

}


.unam-opportunities .uo-category-title h3 {

  margin: 0;

  color: var(--uo-text);

  font-size: 25px;

  line-height: 1.2;

  font-weight: 650;

}


/* =====================================================
   ACCORDION ITEM
===================================================== */

.unam-opportunities .uo-item {

  border-bottom: 1px solid var(--uo-border);

}


.unam-opportunities .uo-item-header {

  width: 100%;

  min-height: 82px;

  padding: 0 12px 0 0;

  display: grid;

  grid-template-columns:
    55px
    1fr
    45px;

  align-items: center;

  border: 0;

  background: white;

  color: var(--uo-text);

  cursor: pointer;

  text-align: left;

  transition:
    background .25s ease,
    padding .25s ease;

}


.unam-opportunities .uo-item-header:hover {

  background: var(--uo-blue-light);

  padding-left: 18px;

}


.unam-opportunities .uo-item-number {

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1px;

  color: #89959E;

}


.unam-opportunities .uo-item-name {

  font-size: 16px;

  font-weight: 600;

  line-height: 1.4;

}


.unam-opportunities .uo-item-icon {

  width: 34px;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #BFCBD3;

  border-radius: 50%;

  color: var(--uo-blue);

  font-size: 21px;

  font-weight: 300;

  transition:
    transform .3s ease,
    background .3s ease,
    color .3s ease;

}


.unam-opportunities .uo-open
.uo-item-icon {

  transform: rotate(45deg);

  background: var(--uo-blue);

  color: white;

  border-color: var(--uo-blue);

}


/* =====================================================
   CONTENT
===================================================== */

.unam-opportunities .uo-item-content {

  display: grid;

  grid-template-rows: 0fr;

  grid-template-columns:
    1fr;

  transition:
    grid-template-rows .45s ease;

}


.unam-opportunities .uo-open
.uo-item-content {

  grid-template-rows: 1fr;

}


.unam-opportunities .uo-item-content {

  overflow: hidden;

}


/* Inner layout */

.unam-opportunities .uo-item-content {

  grid-template-columns:
    300px
    1fr;

}


.unam-opportunities .uo-item-image {

  display: none;

}


/*
 * La imagen aparece solamente
 * cuando el elemento se abre.
 */

.unam-opportunities .uo-open
.uo-item-content {

  display: grid;

  grid-template-columns:
    300px
    1fr;

  gap: 35px;

  padding: 30px 35px 35px 55px;

  background: #F7FAFC;

}


/* Image */

.unam-opportunities .uo-item-image {

  display: block;

  height: 190px;

  overflow: hidden;

}


.unam-opportunities .uo-item-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}


/* Information */

.unam-opportunities .uo-item-information {

  padding: 4px 0;

}


.unam-opportunities .uo-label {

  display: block;

  margin-bottom: 8px;

  color: var(--uo-blue);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.5px;

}


.unam-opportunities .uo-item-information h4 {

  margin: 0 0 12px;

  font-size: 24px;

  line-height: 1.2;

  color: var(--uo-blue-dark);

}


.unam-opportunities .uo-item-information p {

  max-width: 650px;

  margin: 0 0 22px;

  color: var(--uo-gray);

  font-size: 14px;

  line-height: 1.7;

}


/* =====================================================
   BUTTON
===================================================== */

.unam-opportunities .uo-button {

  display: inline-flex;

  align-items: center;

  gap: 18px;

  padding: 12px 19px;

  background: var(--uo-blue);

  color: white;

  font-size: 12px;

  font-weight: 700;

  text-decoration: none;

  transition:
    background .25s ease,
    transform .25s ease;

}


.unam-opportunities .uo-button span {

  font-size: 18px;

  transition:
    transform .25s ease;

}


.unam-opportunities .uo-button:hover {

  background: var(--uo-blue-dark);

  color: white;

  transform: translateY(-2px);

}


.unam-opportunities .uo-button:hover span {

  transform: translateX(4px);

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

  .unam-opportunities {

    padding: 75px 0;

  }


  .unam-opportunities .uo-container {

    width: calc(100% - 32px);

  }


  .unam-opportunities .uo-heading {

    margin-bottom: 50px;

  }


  .unam-opportunities .uo-heading h2 {

    font-size: 42px;

  }


  .unam-opportunities .uo-category-title {

    gap: 15px;

  }


  .unam-opportunities .uo-category-number {

    width: 38px;

    height: 38px;

    font-size: 11px;

  }


  .unam-opportunities
  .uo-category-title h3 {

    font-size: 20px;

  }


  .unam-opportunities
  .uo-item-header {

    grid-template-columns:
      40px
      1fr
      38px;

    min-height: 75px;

  }


  .unam-opportunities
  .uo-item-name {

    font-size: 14px;

  }


  .unam-opportunities
  .uo-open
  .uo-item-content {

    grid-template-columns: 1fr;

    padding: 20px;

    gap: 25px;

  }


  .unam-opportunities
  .uo-item-image {

    height: 210px;

  }


  .unam-opportunities
  .uo-item-information h4 {

    font-size: 21px;

  }


  .unam-opportunities
  .uo-button {

    width: 100%;

    justify-content: space-between;

  }

}