@charset "UTF-8";
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothic-Bold.eot");
  src: url("../fonts/CenturyGothic-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/CenturyGothic-Bold.woff2") format("woff2"), url("../fonts/CenturyGothic-Bold.woff") format("woff"), url("../fonts/CenturyGothic-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothic.eot");
  src: url("../fonts/CenturyGothic.eot?#iefix") format("embedded-opentype"), url("../fonts/CenturyGothic.woff2") format("woff2"), url("../fonts/CenturyGothic.woff") format("woff"), url("../fonts/CenturyGothic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AbadiMT";
  src: url("../fonts/AbadiMT-Light.eot");
  src: url("../fonts/AbadiMT-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/AbadiMT-Light.woff2") format("woff2"), url("../fonts/AbadiMT-Light.woff") format("woff"), url("../fonts/AbadiMT-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AbadiMT";
  src: url("../fonts/AbadiMT.eot");
  src: url("../fonts/AbadiMT.eot?#iefix") format("embedded-opentype"), url("../fonts/AbadiMT.woff2") format("woff2"), url("../fonts/AbadiMT.woff") format("woff"), url("../fonts/AbadiMT.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Josefin Sans";
  src: url("../fonts/JosefinSans-Bold.eot");
  src: url("../fonts/JosefinSans-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/JosefinSans-Bold.woff2") format("woff2"), url("../fonts/JosefinSans-Bold.woff") format("woff"), url("../fonts/JosefinSans-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
.briefcase-tags {
  padding: 3em 8%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5em;
}
.briefcase-tags a {
  text-transform: uppercase;
  transition: all ease-in 0.2s;
  font-family: "AbadiMT", "Roboto", "Helvetica Neue", "Arial", "sans-serif";
}
.briefcase-tags a:hover {
  color: #FEC524;
}
.briefcase-tags a.selected {
  border-bottom: 1px solid #3F5364;
  color: #FEC524;
}
.briefcase-grid {
  padding: 2em 8%;
  display: grid;
  grid-template-columns: var(--columns);
  column-gap: var(--gap);
  row-gap: 3em;
  position: relative;
  padding-bottom: 5%;
}
.briefcase-grid h2 {
  font-size: var(--size);
}
.briefcase-grid span p {
  font-size: var(--info);
}
.briefcase-item {
  position: relative;
}
.briefcase-item-header {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding-top: 0.25em;
}
.briefcase-item-header h2 {
  color: #3F5364;
  word-break: break-word;
}
.briefcase-item-header h2::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='61' height='7' viewBox='0 0 61 7'%3E%3Crect id='Rectángulo_61' data-name='Rectángulo 61' width='61' height='7' fill='%23fec524'/%3E%3C/svg%3E%0A");
  width: 45px;
  height: 5px;
  position: relative;
  display: flex;
  background-size: 100%;
}
.briefcase-item-header a:hover {
  text-decoration: none;
  color: #FEC524;
}
.briefcase-item-header a:hover h2 {
  color: #FEC524;
}
.briefcase-item-header span {
  display: flex;
  gap: 0.5em;
  align-items: center;
  width: 100%;
}
.briefcase-item-header span p {
  width: fit-content;
}
.briefcase-item-header span::after {
  content: "";
  width: max-content;
  height: 1px;
  background: #707070;
  display: flex;
  flex-grow: 100;
}
.briefcase-item img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3/2;
}
.briefcase-item-first {
  position: relative;
  z-index: 1;
}
.briefcase-item-secondary {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all ease-in 0.2s;
}
.briefcase-item:hover {
  text-decoration: none;
}
.briefcase-item:hover p {
  color: #454141;
}
.briefcase-item:hover .briefcase-item-secondary {
  z-index: 2;
  opacity: 1;
}
@media screen and (max-width: 993px) {
  .briefcase-tags {
    padding: 2em 1em;
  }
  .briefcase-grid {
    grid-template-columns: var(--movil);
    padding: 3em 1em;
    row-gap: 1em;
  }
  .briefcase-grid h2 {
    font-size: var(--sizeMovil);
  }
  .briefcase-grid span p {
    font-size: var(--infoMovil);
  }
  .briefcase-item {
    padding: 2em 1em;
  }
  .briefcase-item .briefcase-item-secondary {
    display: none;
  }
}