html {
    font-size: 62.5%;
    box-sizing: border-box;

    font-family: "Inter", sans-serif;
}

.body-wrapper {
    overflow-x: hidden;
}


*, *:before, *:after {
    box-sizing: inherit;
}

body, p, blockquote, h2 {
    margin: 0;
}

a, button {
    cursor: pointer;
    text-decoration: none;
}

/* ============ Color variables ============ */
:root {
    --blanco-tiza: #fafafa;
    --blanco: #fff;
    --negro: #000;
    --gris-oscuro: #494b52;
    --gris-claro: #bab9b9;
    --gris-claro-claro: #ededed;
    --verde-agua: #67b899;
    --verde-agua-claro: #a0d2bc;
    --verde-claro:#c6e0bd;
    --verde-claro-claro: #cde6da;
    --azul-oscuro: #466284;
    --azul-claro: #b4bfce;
    --amarillo-marca: #fbb216;
    --amarillo-oscuro: #fcb019;
    --amarillo-claro: #fde0a4;
}

/* ================= Globals ================== */
.font-ligth {
    font-weight: 300;
}

.font-regular {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semi-bold, strong {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.margin-bottom-minus-2 {
    margin-bottom: -2rem;
}

.margin {
    margin: 0 2rem;
}

.margin-0-2 {
    margin: 0 2rem;
}

.margin-4-0 {
    margin: 4rem 0;
}

.margin-bottom-0 {
    margin-bottom: 0;
}

.margin-bottom-1 {
    margin-bottom: 1rem;
}

.margin-bottom-2 {
    margin-bottom: 2rem;
}

.margin-top-2 {
    margin-top: 2rem;
}

.highlight-green {
    color: var(--verde-agua);
}

.highlight-blue {
    color: var(--azul-oscuro);
}

.highlight-yellow {
    color: var(--amarillo-marca);
}

.yellow-gradient {
    background-color: var(--amarillo-marca);
}

@media (min-width: 992px) {
    .yellow-gradient {
        background: linear-gradient(180deg, var(--amarillo-marca) 0%, var(--amarillo-claro) 100%);
    }
}

.blue-gradient {
    background-color: var(--azul-oscuro);
}

@media (min-width: 992px) {
    .blue-gradient {
        background: linear-gradient(180deg, var(--azul-oscuro) 0%, var(--gris-oscuro) 100%);
    }
}

.green-gradient {
    background-color: var(--verde-agua);
}

@media (min-width: 992px) {
    .green-gradient {
        background: linear-gradient(180deg, var(--gris-oscuro) 0%, var(--verde-agua) 100%);
    }
}

.gray-gradient {
    background-color: var(--gris-oscuro);
}

@media (min-width: 992px) {
    .gray-gradient {
        background: linear-gradient(180deg, var(--gris-oscuro) 0%, var(--gris-claro-claro) 100%);
    }
}

.gray-bg {
    background: linear-gradient(-80deg, var(--gris-claro) -75%, var(--gris-oscuro) 65%);
    position: relative;
    overflow: hidden;
}

.gray-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/gray-bg-pattern.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
}

.white-yellow-bg {
    background-color: var(--amarillo-marca);
    position: relative;
    overflow: hidden;
    height: 21rem;
}

.white-yellow-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/white-bg-pattern.svg');
    opacity: 0.7;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
}

.yellow-bg {
    background: linear-gradient(100deg, var(--amarillo-oscuro) -75%, var(--azul-oscuro) 55%);
    position: relative;
    overflow: hidden;
}

.yellow-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/yellow-bg-pattern.svg');
    opacity: 0.5;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
}

.green-blue-bg {
    background: linear-gradient(180deg, var(--verde-agua) 0%, var(--azul-oscuro) 100%);
    position: relative;
    overflow: hidden;
}

.green-blue-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/blue-bg-pattern.svg');
    opacity: 0.7;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
}

.green-bg {
    background: linear-gradient(100deg, var(--verde-agua) 0%, var(--azul-oscuro) 100%);
    position: relative;
    overflow: hidden;
}

.green-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/green-bg-pattern.svg');
    opacity: 0.7;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
}

.blue-bg {
    background: linear-gradient(-60deg, var(--verde-agua) -55%, var(--azul-oscuro) 75%);
    position: relative;
    overflow: hidden;
}

.blue-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/blue-bg-pattern.svg');
    /* opacity: 0.7; */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
}

.gray-bg {
    background-color: var(--gris-oscuro);
}

.tiza-bg {
    background-color: var(--blanco-tiza);
}

.light-gray-bg {
    background-color: var(--gris-claro-claro);
}

.project-thumbnail,
.publication-thumbnail-container {
    grid-column: 1 / 2;
}

.publication-thumbnail-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project-thumbnail {
    border: 1px solid var(--gris-claro);
    width: 100%;
}

.publication-thumbnail {
    width: 100%;
    -webkit-box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.2);
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .project-thumbnail,
    .publication-thumbnail-container {
        grid-column: 2 / 4;
    }
}

@media (min-width: 992px) {
    .project-thumbnail,
    .publication-thumbnail-container {
        grid-row: 1 / 3;
    }

    .project-thumbnail {
        grid-column: 9 / 11;
    }

    .publication-thumbnail-container {
        grid-column: 10 / 11;
    }
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid var(--gris-claro);
    border-radius: 0.6rem;
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown-menu li {
    width: 100%;
    text-align: center;
}

.dropdown-menu li a {
    color: black;
    font-weight: 400;
    font-size: 1.2rem;
    text-transform: uppercase;
    padding: 0.5rem 1.2rem;
    text-decoration: none;
    display: block;
}

@media (min-width: 992px) {
    .dropdown-menu li a:hover {
        background-color: var(--gris-claro-claro);
    }
}

.dropdown:hover .dropdown-menu {
    display: block;
    width: 100%;
}

#no-results-message {
    display: none;
    grid-column: -1 / 1;
    margin: 0 auto;
    font-size: 2.4rem;
    color: var(--gris-oscuro);
    font-weight: 500;
}

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

.yellow-bar,
.green-bar,
.blue-bar,
.gray-bar {
    height: 3px;
    grid-column: span 1;
    border-radius: 1rem;
    margin-bottom: 1rem;
    width: 10rem;
}

.yellow-bar {
    background-color: var(--amarillo-marca);
}

.green-bar {
    background-color: var(--verde-agua);
}

.blue-bar {
    background-color: var(--azul-oscuro);
}

.gray-bar {
    background-color: var(--gris-oscuro);
}

.arrow-icon {
    margin-left: 1rem;
}

.bg-gris-claro-claro {
    background-color: var(--gris-claro-claro);
}

.bg-gris-oscuro {
    background-color: var(--gris-oscuro);
}

.only-small {
    grid-column: 1 / -1;
}

.only-medium,
.only-big {
    display: none;
}

@media (min-width: 768px) {
    .only-small {
        display: none;
    }

    .only-medium {
        display: block;
    }
}

@media (min-width: 992px) {
    .only-medium,
    .only-small-medium {
        display: none;
    }

    .only-big {
        display: block;
    }
}



/* ================ Filter tabs ================ */
.tabcontent {
    display: none;
    animation: fadeEffect .1s;
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* =================== Header ================== */
.header {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 14rem;
    align-items: center;
    gap: 2rem;
    z-index: 1000;
    padding: 0 2rem;
    -webkit-box-shadow: 0 0.2rem 2rem rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 0.2rem 2rem rgba(0, 0, 0, 0.05);
    box-shadow: 0 0.2rem 2rem rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
    .header {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (min-width: 992px) {
    .header {
        grid-template-columns: repeat(12, 1fr);
    }
}

@media (min-width: 768px) {
    .hamburger {
        display: none;
    }
}

.busqueda {
    width: 80%;
    text-align: end;
    margin: 2rem 0 1rem 0;
}

.logo-area {
    grid-column: 1 / 3;
}

@media (min-width: 992px) {
    .logo-area {
        grid-column: 3 / 5;
    }
}

.logo-sufix {
    font-size: 1.2rem;
    margin-left: 4.5rem;
    margin-top: 1.3rem;
}

.logo-sufix span {
    color: var(--gris-oscuro);
}

.logo-mobile {
    display: block;
}

.logo-pc {
    display: none;
}

@media (min-width: 992px) {
    .logo-mobile {
        display: none;
    }
    .logo-pc {
        display: block;
    }
}

.nav-menu {
    display: flex;
    justify-content: center;
    flex-direction: column;
    z-index: 1001;
}

@media (min-width: 768px) {
    .nav-menu {
        grid-column: 3 / 9;
    }
}

@media (min-width: 992px) {
    .nav-menu {
        grid-column: 6 / 11;
    }
}

.menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
}

.link-menu {
    font-size: 1.6rem;
    font-weight: 500;
}

.link-menu a {
    text-decoration: none;
    color: var(--gris-oscuro);
    position: relative;
    display: inline-block;
}

.link-menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 1rem;
    width: 0;
    height: 3.6px;
    background-color: transparent;
    border-radius: 2rem;
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
}


@media (min-width: 992px) {
    .menu {
        margin: 0 auto;
    }

    .link-about a:hover::after,
    .link-search a:hover::after,
    .link-about a.active::after,
    .link-search a.active::after {
        width: 100%;
        background-color: var(--gris-oscuro);
    }

    .link-publications a:hover::after,
    .link-publications a.active::after {
        width: 100%;
        background-color: var(--verde-agua);
    }

    .link-projects a:hover::after,
    .link-projects a.active::after {
        width: 100%;
        background-color: var(--azul-oscuro);
    }

    .link-news a:hover::after,
    .link-news a.active::after {
        width: 100%;
        background-color: var(--amarillo-marca);
    }
}

@media (min-width: 768px) {
    .link-menu a {
        margin-right: 2rem;
        padding: 2rem 0;
    }

    .link-menu:nth-child(5) a {
        margin-right: 0;
    }

    .link-menu a:hover::after,
    .link-menu a.active::after {
        width: 100%;
    }

    .menu {
        flex-direction: row;
        justify-content: end;
        padding: 0;
    }
}

.menu-mobile {
    display: none;
}

.hamburger {
    z-index: 10;
}

.bar {
    display: block;
    width: 2.3rem;
    height: 0.3rem;
    margin: 0.5rem auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: var(--gris-oscuro);
    border-radius: 1rem;
}

.bar:nth-child(2) {
    width: 1.5rem;
    text-align: start;
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 768px) {
    .navegacion-header {
        width: 100%;
        flex-direction: column;
    }

    .link-logo {
        margin: 0 auto;
    }

    .nav-menu {
        display: block;
        height: 100%;
        position: fixed;
        right: -100%;
        top: 0rem;
        /* z-index: 0; */
        flex-direction: column;
        background-color: #fff;
        width: 100%;
        border-radius: 1rem;
        text-align: center;
        transition: 0.6s;
        -webkit-box-shadow: 0 1rem 2.7rem rgba(0, 0, 0, 0.05);
        -moz-box-shadow: 0 1rem 2.7rem rgba(0, 0, 0, 0.05);
        box-shadow: 0 1rem 2.7rem rgba(0, 0, 0, 0.05);
    }

    .nav-menu.active {
        right: 0;
    }

    .link-menu {
        text-align: end;
        padding-right: 1.8rem;
        margin: 1.4rem 0;
        align-self: flex-end;
    }

    .link-menu:first-child {
        padding-top: 4rem;
    }

    .menu-mobile {
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 1rem;
        cursor: pointer;
        grid-column: 3 / 5;
        /* position: absolute; */
        right: 1.5rem;
        top: 1.5rem;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(0.8rem) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-0.8rem) rotate(-45deg);
    }

    .hamburger.active {
        z-index: 1002;
        margin-top: -5rem;
    }
}

/* Ocultar el formulario de búsqueda por defecto */
#search-form {
    display: none;
    flex-direction: row;
    align-items: center;
}

/* Mostrar el formulario de búsqueda cuando la clase `show-search` esté presente */
.show-search #search-form {
    display: flex;
}

/* Estilos para el botón de cierre */
#close-search {
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--gris-oscuro);
}

.show-search #search-icon {
    display: none;
}

/* Ocultar los ítems del menú cuando la clase `show-search` esté presente */
.show-search .link-menu:not(.link-search) {
    display: none;
}

/* Ajustar el estilo del formulario de búsqueda */
#header-search-input {
    width: 100%;
    padding: 1rem 2rem;
    border: 2px solid var(--gris-claro-claro);
    border-radius: 2rem;
    font-family: "Inter", sans-serif;
    font-weight: 500;
}

#search-form button {
    background: none;
    border: none;
    cursor: pointer;
    margin: 2px 0.5rem 0 1rem;
}

.show-search .menu {
    width: 100%;
    justify-content: center;
}

.show-search .link-search {
    width: 100%;
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    .link-menu.link-search {
        margin-top: 4rem;
    }
}


/* =================== Hero section ================== */
.hero-section {
    display: grid;
    align-items: center;
    padding: 0 2rem;
    gap: 2rem;
    grid-template-columns: repeat(4, 1fr);
    background: linear-gradient(180deg, var(--verde-agua) 0%, var(--azul-oscuro) 100%);
    height: 70rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .hero-section {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (min-width: 1200px) {
    .hero-section {
        grid-template-columns: repeat(12, 1fr);
    }
}

.featured-post {
    grid-column: 1 / 4;
    margin-left: 2rem;
}

@media (min-width: 768px) {
    .featured-post {
        grid-column: 2 / 5;
        margin: 0 4rem 0 0;
    }
}

@media (min-width: 992px) {
    .featured-post {
        grid-column: 3 / 6;
        margin: 0 4rem 0 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding: 8rem 0;
    }
}

.featured-post-image {
    height: 100%;
    width: calc(100% + 4rem);
    overflow: hidden;
    grid-column: 4 / 5;
    opacity: 0.3;
    filter: grayscale(100%);
    z-index: 1;
    object-fit: cover;
    margin-right: -2rem;
}

.multiply-50 {
    mix-blend-mode: multiply;
    opacity: 0.5;
}

.multiply-100 {
    mix-blend-mode: multiply;
    opacity: 1;
}

@media (min-width: 768px) {
    .featured-post-image {
        grid-column: 5 / 9;
    }
}

@media (min-width: 992px) {
    .featured-post-image {
        grid-column: 6 / 13;
        object-fit: cover;
    }
}

.pre-title-highlight {
    position: absolute;
    top: 153px;
    color: var(--blanco);
    opacity: 0.7;
    font-size: 1.4rem;
    font-weight: 400;
    padding-left: 0.7rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
}

.pre-title-highlight::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3rem;
    width: 1px;
    background-color: var(--blanco);
}

.tag {
    display: inline-flex;
    background-color: transparent;
    color: var(--negro);
    padding: 0.5rem 1.2rem;
    border-radius: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.2rem;
    z-index: 999;
    position: relative;
}

.yellow-tag {
    background-color: var(--amarillo-marca);
}

.green-tag {
    background-color: var(--verde-agua);
    color: var(--blanco);
}


.blue-tag {
    background-color: var(--azul-oscuro);
    color: var(--blanco);
}

.gray-tag {
    background-color: var(--gris-claro);
}

.white-gray-tag {
    background-color: var(--blanco);
    border: 1px solid var(--gris-claro);
}

.white-tag {
    background-color: var(--blanco);
}

.white-green-tag {
    background-color: var(--blanco);
    border: 1px solid var(--verde-agua);
}

.white-blue-tag {
    background-color: var(--blanco);
    border: 1px solid var(--azul-oscuro);
}

.white-yellow-tag {
    background-color: var(--blanco);
    border: 1px solid var(--amarillo-marca);
}

.text-mask {
    position: relative;
    padding: 0.5rem 1.2rem;
    font-size: 1.2em;
    font-weight: 600;
    text-transform: uppercase;
    mix-blend-mode: screen;
    color: var(--gris-oscuro);
}

.text-mask::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--blanco);
    border-radius: 0.6rem;
    content: '';
    mix-blend-mode: color-burn;
}

.text-mask-white::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--gris-oscuro);
    border-radius: 0.6rem;
    content: '';
    mix-blend-mode: color-burn;
}

.tag-mask {
    display: inline-flex;
    position: relative;
    z-index: 999;
}


.featured-title,
.featured-author-post,
.featured-date-post {
    color: var(--blanco);
}

.featured-title {
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 1.3;
}

@media (min-width: 992px) {
    .featured-title {
        font-size: 3.2rem;
    }

    .featured-author-post {
        font-size: 1.4rem;
    }
}

.featured-author-post::before {
    content: "";
    display: block;
    border-top: 4px solid var(--verde-agua);
    width: 45%;
    margin-bottom: 1rem;
}

.featured-author-post {
    line-height: 1.8;
    width: 60%;
    font-weight: 300;
}

.featured-date-post{
    text-transform: uppercase;
    margin: 2rem 0 6rem 0;
}

@media (min-width: 992px) {
    .featured-date-post{
        font-size: 1.1rem;
        margin: 2rem 0;
    }
}

@media (min-width: 992px) {
    .hero-section .topic-posts {
        display: none;
    }
}

.topic-posts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.topic-post-one,
.topic-post-two {
    grid-column: span 2;
    background-color: var(--blanco);
    padding: 1rem 1.5rem;
    border-radius: 0.8rem;
}

.topic-post-one {
    color: var(--verde-agua);
    border: 0.2rem solid var(--verde-agua);
}

.topic-post-two {
    color: var(--amarillo-claro);
    border: 0.2rem solid var(--amarillo-claro);
}

.topic-title {
    font-weight: 400;
    font-size: 1.2rem;
    margin: 0;
    padding: 1rem 0;
}

.posts-topics {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    grid-column: -1 / 1;
    margin: 1rem 0;
}

@media (min-width: 768px) {
    .posts-topics {
        grid-column: 2 / 8;
    }
}

@media (min-width: 992px) {
    .posts-topics {
        grid-column: 3 / 8;
    }
}

.post-topic {
    color: var(--gris-oscuro);
    font-size: 1.2rem;
    font-weight: 400;
    border-radius: 4px;
    flex: 1;
}

.post-topic-content {
    display: inline-flex;
    gap: 1rem;
}

.post-topic-amarillo-claro {
    border-bottom: 1px solid var(--amarillo-claro);
}

.post-topic-verde-agua-claro {
    border-bottom: 1px solid var(--verde-agua-claro);
}

.post-topic-verde-claro-claro {
    border-bottom: 1px solid var(--verde-claro);
}

.post-topic-verde-full-claro-claro {
    border-bottom: 1px solid var(--verde-claro-claro);
}

.post-topic-azul-claro {
    border-bottom: 1px solid var(--azul-claro);
}


/* =================== Featured projects ================== */
.featured-projects {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 2rem;
    padding: 6rem 2rem;
    background-color: var(--amarillo-marca);
}

@media (min-width: 768px) {
    .featured-projects {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (min-width: 992px) {
    .featured-projects {
        grid-template-columns: repeat(12, 1fr);
    }
}

/* .featured-projects::before,
.featured-projects::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    z-index: -1;
}

.featured-projects::before {
    height: 50%;
    background-color: var(--amarillo-marca);
}

.featured-projects::after {
    background-color: var(--blanco);
    bottom: -16.7rem;
    height: 50%;
} */

.featured-projects-header {
    grid-column: 1 / 3;
    align-self: end;
}

@media (min-width: 768px) {
    .featured-projects-header {
        grid-column: 2 / 4;
    }
}

@media (min-width: 992px) {
    .featured-projects-header {
        grid-column: 3 / 11;
        grid-row: span 1;
    }
}

.featured-projects-title {
    font-size: 2.3rem;
    font-weight: 500;
    /* color: var(--gris-oscuro); */
    color: var(--blanco);
    margin-bottom: 1rem;
}

.featured-projects-text {
    font-size: 1.4rem;
    font-weight: 400;
}

.featured-projects-content {
    grid-column: 3 / 5;
    grid-row: span 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    background: none;
}

.featured-projects-content .post-card:nth-child(2),
.featured-projects-content .post-card:nth-child(3),
.featured-projects-content .post-card:nth-child(4) {
    display: none;
}

@media (min-width: 768px) {
    .featured-projects-content {
        grid-column: 4 / 8;
    }

    .featured-projects-content .post-card:nth-child(2) {
        display: block;
    }

}

@media (min-width: 992px) {
    .featured-projects-content {
        grid-template-columns: repeat(8, 1fr);
        grid-column: 3 / 11;
        grid-row: span 1;
    }

    .featured-projects-content .post-card:nth-child(3),
    .featured-projects-content .post-card:nth-child(4) {
        display: block;
    }
}

.featured-projects-content .post-card {
    grid-column: span 4;
}

@media (min-width: 768px) {
    .featured-projects-content .post-card {
        grid-column: span 2;
    }
}

.slider-featured-projects {
    grid-column: 3 / 5;
}

.card {
    border: 1px solid var(--gris-claro);
    border-radius: 4px;
    background-color: var(--blanco);
    transition: all 0.3s ease-in-out;
}

.card-image-container {
    width: 100%;
    /* height: 16rem; */
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.25);
}

.card-overlay-gradient-green {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(-130deg, var(--azul-oscuro) 0%, var(--verde-agua) 100%);
    /* opacity: 1; */
    transition: opacity 0.3s ease-in-out;
}

.card-overlay-solid-green {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--verde-agua);
    /* opacity: 1; */
    transition: opacity 0.3s ease-in-out;
}

.card-overlay-gradient-blue {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(-50deg, var(--verde-agua) -100%, var(--azul-oscuro) 100%);
    /* opacity: 1; */
    transition: opacity 0.3s ease-in-out;
}

.card-overlay-solid-blue {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--azul-oscuro);
    /* opacity: 1; */
    transition: opacity 0.3s ease-in-out;
}

.card-overlay-gradient-yellow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(150deg, var(--amarillo-oscuro) -130%, var(--azul-oscuro) 170%);
    /* opacity: 1; */
    transition: opacity 0.3s ease-in-out;
}

.card-overlay-solid-yellow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--amarillo-oscuro);
    /* opacity: 1; */
    transition: opacity 0.3s ease-in-out;
}

.card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.2s ease-in-out;
    opacity: 1;
}

@media (min-width: 992px) {
    .card:hover {
        border: 1px solid var(--gris-oscuro);
        /* scale: 1.1; */
        transform: translateY(-1rem);
    }
}

/* .post-card.card:hover .card-image {
    scale: 1.1;
} */

.card-content {
    padding: 1.8rem 1.5rem;
}

.card-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gris-oscuro);
    margin-top: 2rem;
}


/* =================== Blockquote ================== */
.blockquote-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 0.5fr;
    padding: 1rem 2rem 0 2rem;
    gap: 2rem;
}

@media (min-width: 768px) {
    .blockquote-section {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (min-width: 992px) {
    .blockquote-section {
        grid-template-columns: repeat(12, 1fr);
        padding: 1rem 2rem;
    }
}

.blockquote {
    grid-column: 1 / 3;
    align-self: end;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .blockquote {
        grid-column: 2 / 5;
    }
}

@media (min-width: 992px) {
    .blockquote {
        grid-column: 3 / 7;
        align-self: center;
        margin: 0;
    }
}

.blockquote-icon::before {
    content: url("img/blockquote.svg");
    display: block;
    width: 4rem;
    margin: 1.5rem 0;
}

.blockquote-icon-yellow::before {
    content: url("img/blockquote-yellow.svg");
    display: block;
    width: 4rem;
    margin: 1.5rem 0;
}

.blockquote-image {
    grid-column: span 3 ;
    width: 100%;
    margin-bottom: -7rem;
}

.blockquote-image-margin {
    grid-column: span 3;
    width: 100%;
    margin: 2rem 0;
}

@media (min-width: 768px) {
    .blockquote-image,
    .blockquote-image-margin {
        grid-column: 5 / 8;
    }
}

@media (min-width: 992px) {
    .blockquote-image,
    .blockquote-image-margin {
        grid-column: 8 / 11;
    }

    .blockquote-image {
        margin: -1rem;
    }

}

.blockquote-text {
    color: var(--gris-oscuro);
    font-size: 1.4rem;
    font-weight: 600;
}

@media (min-width: 768px) {
    .blockquote-text {
        font-size: 1.8rem;
    }
}

@media (min-width: 992px) {
    .blockquote-text {
        font-size: 2.6rem;
        margin-left: 4rem;
    }
}


/* =================== Latest publications ================== */
.posts {
    display: grid;
    gap: 0 2rem;
    grid-template-columns: repeat(4, 1fr);
    padding: 3rem 2rem;
}

@media (min-width: 768px) {
    .posts {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (min-width: 992px) {
    .posts {
        grid-template-columns: repeat(12, 1fr);
    }
}

.posts-title,
.posts-text,
.posts-button,
.featured-posts-text {
    color: var(--gris-oscuro);
}

.posts-title,
.posts-text,
.filter,
.posts-button,
.featured-posts-text {
    grid-column: span 4;
}

@media (min-width: 768px) {
    .posts-title,
    .posts-text,
    .filter,
    .posts-button,
    .featured-posts-text {
        grid-column: 2 / 8;
    }
}

@media (min-width: 992px) {
    .posts-title,
    .posts-text,
    .filter,
    .posts-button,
    .featured-posts-text {
        grid-column: 3 / 11;
    }
}

.posts-text {
    font-size: 1.6rem;
    font-weight: 300;
    margin-bottom: 3rem;
}

.posts-title {
    font-size: 2.3rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
}

@media (min-width: 992px) {
    .posts-title {
        font-size: 2.8rem;
    }

    .posts-text {
        font-size: 1.8rem;
    }
}

.filters-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    /* margin: 0 2rem; */
    grid-column: span 4;
    align-self: start;
}

@media (min-width: 768px) {
    .filters-container {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-column: span 8;
    }
}

@media (min-width: 992px) {
    .filters-container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-column: span 12;
    }
}

.filters {
    grid-column: span 4;
    width: 100%;
    display: flex;
    gap: 2rem;
    align-self: start;
    padding: 0;
}

@media (min-width: 768px) {
    .filters {
        grid-column: 2 / 8;
    }
}

@media (min-width: 992px) {
    .filters {
        grid-column: 3 / 11;
    }
}

.filter {
    grid-column: span 1;
    font-size: 1.6rem;
    font-weight: 500;
    display: inline-block;
    content: "";
    padding: 0 0 0.7rem 0;
    border-bottom: 4px solid transparent;
    border: none;
    background-color: transparent;
    text-align: start;
}

.filter-white-yellow,
.filter-white-green,
.filter-white,
.filter-publications,
.filter-projects,
.filter-news {
    color: var(--gris-oscuro);
}

.filter-publications,
.filter-projects,
.filter-news {
    border-bottom: 4px solid transparent;
    transition: all 0.3s ease-in-out;
}

@media (min-width: px) {
    .filter-publications:hover {
        border-bottom: 4px solid var(--verde-agua);
    }

    .filter-projects:hover {
        border-bottom: 4px solid var(--azul-oscuro);
    }

    .filter-news:hover {
        border-bottom: 4px solid var(--amarillo-marca);
    }

    .filter-white-yellow:hover {
        border-bottom: 4px solid var(--amarillo-marca);
    }
}

.filter-publications.active {
    border-bottom: 4px solid var(--verde-agua);
}

.filter-projects.active {
    border-bottom: 4px solid var(--azul-oscuro);
}

.filter-news.active {
    border-bottom: 4px solid var(--amarillo-marca);
}

.filter-white-yellow.active {
    border-bottom: 4px solid var(--amarillo-marca);
}

.filter-white-green.active {
    border-bottom: 4px solid var(--blanco);
}

@media (min-width: 992px) {
    .filter-white-green:hover,
    .filter-white-green.active {
        border-bottom: 4px solid var(--verde-agua);
    }

    .filter-white:hover,
    .filter-white.active {
        border-bottom: 4px solid var(--blanco);
    }
}

.separator {
    border-bottom: 1px solid var(--blanco);
    margin-top: 2.9rem;
    opacity: 30%;
    position: absolute;
    z-index: 0;
    width: 100%;
    left: 0%;
}

.slider-posts {
    grid-column: span 4;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 4rem 0;
}

.post-card {
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    transition: transform 0.2s ease-in-out;
}

/* Mostrar 2 post-card */
.post-card:nth-child(3),
.post-card:nth-child(4) {
    display: none;
}

@media (min-width: 768px) {
    .slider-posts {
        grid-column: 2 / 8;
        grid-template-columns: repeat(6, 1fr);
    }

    .post-card:nth-child(3) {
        display: block;
    }
}

@media (min-width: 992px) {
    .slider-posts {
        grid-column: 3 / 11;
        grid-template-columns: repeat(8, 1fr);
    }

    .post-card:nth-child(4) {
        display: block;
    }
}

.slider-posts .card {
    grid-column: span 2;
}

.posts-button {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: end;
}

.posts-button::after {
    content: url("img/view-all.svg");
    display: block;
    width: 0.6rem;
    margin-left: 1.5rem;
}

/* @media (min-width: 992px) {
    .posts-button {
        display: none;
    }
} */


/* =================== Explore topics ================== */
.explore-topics {
    display: grid;
    gap: 0 2rem;
    grid-template-columns: repeat(4, 1fr);
    padding: 4rem 2rem 8rem 2rem;
}

@media (min-width: 768px) {
    .explore-topics {
        grid-template-columns: repeat(8, 1fr);
        padding: 4rem 2rem 8rem 2rem;
    }
}

@media (min-width: 992px) {
    .explore-topics {
        grid-template-columns: repeat(12, 1fr);
    }
}

.explore-topics-title,
.explore-topics-text,
.topics {
    grid-column: span 4;
}

@media (min-width: 768px) {
    .explore-topics-title,
    .explore-topics-text,
    .topics {
        grid-column: 2 / 8;
    }
}

@media (min-width: 992px) {
    .explore-topics-title,
    .explore-topics-text,
    .topics {
        grid-column: 3 / 11;
    }
}

.explore-topics-title {
    font-size: 2.2rem;
    font-weight: 500;
    color: var(--gris-oscuro);
    margin-bottom: 0.3rem;
}

@media (min-width: 992px) {
    .explore-topics-title {
        font-size: 2.8rem;
    }
}

.explore-topics-text,
.featured-posts-text {
    font-size: 1.6rem;
    font-weight: 300;
}

.explore-topics-text {
    margin-bottom: 4rem;
}

.topics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

@media (min-width: 768px) {
    .topics {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 992px) {
    .topics {
        grid-template-columns: repeat(8, 1fr);
    }

    .explore-topics-text {
        font-size: 1.8rem;
    }
}

.topic-card {
    grid-column: span 2;
    border-radius: 4px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    transition: all 0.3s ease-in-out;
}

.topic-card-icon {
    transition: all 0.3s ease-in-out;
}

.topic-card:nth-child(1) {
    background-color: var(--verde-claro);
}

.topic-card:nth-child(2) {
    background-color: var(--verde-agua-claro);
}

.topic-card:nth-child(3) {
    background-color: var(--verde-claro-claro);
}

.topic-card:nth-child(4) {
    background-color: var(--amarillo-claro);
}

.topic-card:nth-child(5) {
    background-color: var(--azul-claro);
}

.topic-card-text,
.topic-card-link {
    font-weight: 400;
    color: var(--gris-oscuro);
}

.topic-card-text {
    font-size: 1.6rem;
    margin-bottom: 2rem;
}

.topic-card-link {
    font-size: 1.3rem;
}

.topic-card-link::after {
    content: ">>";
    margin-left: 0.6rem;
    transition: all .3s ease-in-out;
}


@media (min-width: 992px) {
    .topic-card-link:hover::after {
        margin-left: 3rem;
    }

    .topic-card:hover {
        transform: translateY(-1rem);
    }

    .topic-card:hover .topic-card-icon {
        scale: 1.2;
        transform: translateX(20%);
    }
}


/* =================== Newsletter ================== */
.newsletter {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(4, 1fr);
    padding: 2rem 2rem 4rem 2rem;
}

.newsletter-content {
    grid-column: span 4;
}

.newsletter-image {
    display: none;
    filter: grayscale(100%);
}

@media (min-width: 768px) {
    .newsletter {
        grid-template-columns: repeat(8, 1fr);
    }

    .newsletter-content {
        grid-column: 2 / 6;
    }

    .newsletter-image {
        grid-column: 6 / 8;
        display: block;
    }

    .col-8 {
        grid-column: 2 / 8;
    }
}

@media (min-width: 992px) {
    .newsletter {
        grid-template-columns: repeat(12, 1fr);
        padding: 4rem 2rem 6rem 2rem;
    }

    .newsletter-content {
        grid-column: 3 / 7;
    }

    .newsletter-image {
        filter: grayscale(0%);
        grid-column: 8 / 11;
        margin-top: -6rem;
        margin-bottom: -10rem;
        width: 120%;
    }
}

.newsletter-title,
.newsletter-text {
    grid-column: span 4;
}

@media (min-width: 768px) {
    .newsletter-title,
    .newsletter-text {
        grid-column: 2 / 5;
    }
}

@media (min-width: 992px) {
    .newsletter-title,
    .newsletter-text {
        grid-column: 3 / 7;
    }
}

.newsletter-form {
    grid-column: span 4;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

@media (min-width: 768px) {
    .newsletter-form {
        grid-column: 2 / 6;
    }
}

@media (min-width: 992px) {
    .newsletter-form {
        grid-column: 3 / 7;
    }
}

.column-form {
    grid-column: span 4;
}

@media (min-width: 768px) {
    .column-form {
        grid-column: span 2;
    }
}

.column-form-message,
.column-form-subject {
    grid-column: span 4;
}

.label-form {
    font-size: 1.2rem;
    color: var(--gris-oscuro);
    text-transform: uppercase;
    font-weight: 500;
}

.input-form {
    background: none;
    margin-top: 1rem;
    width: 100%;
    padding: 0.7rem 0.7rem 0.7rem 0;
    border: none;
    border-bottom: 2px solid var(--gris-claro);
    /* border-radius: 3px; */
}

.input-form:focus-visible {
    outline: none;
    background-color: var(--gris-claro-claro);
}

textarea.input-form {
    font-family: 'Inter', sans-serif;
    grid-row: 3 / 4;
    grid-column: span 4;
    min-width: 100%;
    max-width: 100%;
    min-height: 15rem;
    max-height: 30rem;
}

.newsletter-title {
    font-size: 2.2rem;
    font-weight: 500;
    color: var(--gris-oscuro);
    margin-bottom: 0.3rem;
}

.newsletter-text {
    font-size: 1.6rem;
    font-weight: 300;
    margin-bottom: 4rem;
}

@media (min-width: 992px) {
    .newsletter-title {
        font-size: 2.8rem;
        margin-bottom: 0.3rem;
    }

    .newsletter-text {
        font-size: 1.8rem;
    }
}

.button {
    grid-column: 4 / 5;
    background-color: var(--blanco);
    color: var(--negro);
    padding: 0.4rem;
    border-radius: 4px;
    border: 1px solid var(--gris-claro);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.1rem;
}

.newsletter-contact {
    background-color: var(--gris-claro-claro);
    padding: 4rem;
    grid-column: span 4;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .newsletter-contact {
        grid-column: 2 / 8;
    }
}

@media (min-width: 992px) {
    .newsletter-contact {
        grid-column: 7 / 11;
    }
}

.newsletter-contact-title {
    font-size: 2.4rem;
    font-weight: 400;
    color: var(--gris-oscuro);
    margin: 0;
    margin-bottom: 1rem;
}

.newsletter-contact-text {
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--gris-oscuro);
    display: block;
    margin-bottom: 2rem;
}

.newsletter-social-media {
    /* border-top: 2px solid var(--blanco); */
    padding-top: 2rem;
}



/* =================== Footer ================== */
.footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: linear-gradient(180deg, var(--verde-agua) 0%, var(--azul-oscuro) 100%);
    /* background: linear-gradient(180deg, var(--azul-oscuro) 0%, var(--verde-agua) 100%); */
    padding: 0 2rem 2rem 2rem;
    gap: 2rem;
    color: var(--blanco);
}

@media (min-width: 768px) {
    .footer {
        grid-template-columns: repeat(8, 1fr);
        padding: 6rem 2rem;
    }
}

@media (min-width: 992px) {
    .footer {
        grid-template-columns: repeat(12, 1fr);
        padding: 4rem 2rem;
    }
}

.footer-logo {
    margin: 4rem 0;
}

@media (min-width: 768px) {
    .footer-logo {
        margin: 0;
    }
}

.footer-logo,
.contact {
    grid-column: 1 / 3;
}

@media (min-width: 768px) {
    .footer-logo {
        grid-column: 2 / 4;
    }
}

@media (min-width: 992px) {
    .footer-logo {
        grid-column: 3 / 5;
    }
}

@media (min-width: 768px) {
    .contact {
        grid-column: 5 / 7;
    }
}

@media (min-width: 992px) {
    .contact {
        grid-column: 7 / 9;
    }
}

.contact,
.social-media,
.footer .footer-logo {
    border-top: 2px solid var(--gris-claro-claro);
}

.social-media {
    grid-column: 3 / 5;
}

@media (min-width: 768px) {
    .social-media {
        grid-column: 7 / 9;
    }
}

@media (min-width: 992px) {
    .social-media {
        grid-column: 9 / 11;
    }
}

.contact-title,
.contact-info {
    font-size: 1.2rem;
}

/* @media (min-width: 768px) {
    .contact-title,
    .contact-info {
        font-size: 1.5rem;
    }
} */

.contact-title {
    text-transform: uppercase;
    font-weight: 500;
}

.contact-info {
    font-weight: 300;
}

.contact-info a {
    color: var(--blanco);
    transition: all .3s ease-in-out;
}

@media (min-width: 992px) {
    .contact-info a:hover {
        color: var(--amarillo-marca);
    }
}

.social-media-icons {
    display: flex;
    gap: 1rem;
}

.footer-links,
.footer-credits {
    grid-column: span 4;
    font-size: 0.8rem;
}

@media (min-width: 768px) {
    .footer-links,
    .footer-credits {
        grid-column: 2 / 9;
        font-size: 1.1rem;
    }
}

@media (min-width: 992px) {
    .footer-links,
    .footer-credits {
        grid-column: 3 / 11;
        font-size: 1.4rem;
    }
}

.footer-links {
    margin-top: 6rem;
    display: flex;
    justify-content: start;
}

.footer-link {
    font-weight: 600;
    color: var(--blanco);
}

.footer-link:not(:last-child)::after {
    content: "|";
    margin: 0 1rem;
}

.footer-credits {
    border-top: 2px solid var(--gris-claro-claro);
    padding-top: 1.7rem;
}


/* =================== Projects ================== */
.post {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 6rem 2rem;
    min-height: 28rem;
    align-items: center;
}

@media (min-width: 768px) {
    .post {
        grid-template-columns: repeat(8, 1fr);
        min-height: 30rem;
    }
}

@media (min-width: 992px) {
    .post {
        grid-template-columns: repeat(12, 1fr);
    }
}

.post-header {
    grid-column: 2 / 5;
}

@media (min-width: 768px) {
    .post-header {
        grid-column: 4 / 8;
    }
}

@media (min-width: 992px) {
    .post-header {
        grid-column: 3 / 8;
        grid-row: 1 / 2;
    }
}

.post-title {
    font-size: 2.3rem;
    font-weight: 500;
    color: var(--gris-oscuro);
    position: relative;
    z-index: 999;
    margin-bottom: 2rem;
}

.post-title.white {
    color: var(--blanco);
}

.post .topic-posts {
    grid-template-columns: repeat(2, 1fr);
    grid-column: 1 / 4;
}

@media (min-width: 768px) {
    .post .topic-posts {
        grid-template-columns: repeat(2, 1fr);
        grid-column: 2 / 4;
    }
}

@media (min-width: 992px) {
    .post .topic-posts {
        grid-column: 6 / 9;
        grid-row: 2 / 3;
    }

    /* .post .topic-posts .topic-post-one,
    .post .topic-posts .topic-post-two {
        grid-column: span 2;
    } */

    .topic-post-one,
    .topic-post-two {
        grid-column: span 2;
    }

    /* .topic-post-two {
        grid-column: 2 / 3;
    } */
}

.publication-author-date p:not(:last-child),
.project-status-date p:not(:last-child) {
    margin-bottom: 2rem;
}

.project-status-date,
.publication-author-date {
    font-size: 1.1rem;
    grid-column: 1 / 4;
    color: var(--gris-oscuro);
}

@media (min-width: 768px) {
    .project-status-date,
    .publication-author-date {
        grid-column: 2 / 5;
    }
}

@media (min-width: 992px) {
    .project-status-date,
    .publication-author-date {
        grid-row: 2 / 3;
        font-size: 1.2rem;
    }

    .project-status-date {
        grid-column: 3 / 6;
    }

    .publication-author-date {
        grid-column: 3 / 5;
    }
}

.post-authors {
    font-weight: 300;
}

@media (min-width: 768px) {
    .post-authors {
        width: 50%;
    }
}

@media (min-width: 992px) {
    .post-authors {
        width: 45%;
    }
}

.publication .topic-post-one {
    grid-column: span 1;
}

.publication .topic-post-two {
    grid-column: span 1;
}

.share-options {
    display: flex;
    gap: 1rem;
    align-items: center;
    grid-column: -1 / 1;
}

.share-title {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gris-oscuro);
    margin-bottom: 0.5rem;
}

.share-post {
    display: flex;
    gap: 1rem;
}

@media (min-width: 768px) {
    .share-options {
        grid-column: 2 / 4;
    }
}

@media (min-width: 992px) {
    .share-options {
        grid-column: 3 / 5;
    }
}

.link-share-post {
    position: relative;
}

.link-share-post img {
    transition: all 0.2s ease-in-out;
}

@media (min-width: 992px) {
    .link-share-post img:hover {
        filter: opacity(0.5);
    }
}

.link-share-post::before {
    content: attr(data-tooltip);
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1rem;
    position: absolute;
    top: -3.6rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--gris-claro-claro);
    color: var(--gris-oscuro);
    padding: 0.6rem 1rem;
    border-radius: 0.6rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    pointer-events: none;
    z-index: 10;
}

.link-share-post::after {
    content: '';
    position: absolute;
    top: -1.3rem;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0.8rem;
    border-style: solid;
    border-radius: 2px;
    border-color: var(--gris-claro-claro) transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    pointer-events: none;
    z-index: 10;
}

@media (min-width: 992px) {
    .link-share-post:hover::before,
    .link-share-post:hover::after {
        opacity: 1;
        visibility: visible;
    }
}

.share-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}


/* =================== Post content tab ================== */
.post-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 4rem 2rem 4rem 2rem;
    /* -webkit-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.08); */
    animation: fadeEffect 1s;
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@media (min-width: 768px) {
    .post-content {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (min-width: 992px) {
    .post-content {
        grid-template-columns: repeat(12, 1fr);
    }
}

.post-summary {
    grid-column: span 4;
}

@media (min-width: 768px) {
    .post-summary {
        grid-column: 2 / 6;
    }
}

@media (min-width: 992px) {
    .post-summary {
        grid-column: 3 / 9;
    }
}

.post-summary-parapragh {
    margin-top: -7px;
    margin-bottom: 4rem;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2.6rem;
}

.map-post {
    width: 100%;
    margin-bottom: 2rem;
}

.filter-gray-blue,
.filter-gray-green {
    color: var(--gris-oscuro);
    border-bottom: 4px solid transparent;
    transition: 0.3s ease-in-out;
}

@media (min-width: 992px) {
    .filter-gray-blue:hover {
        border-bottom: 4px solid var(--azul-oscuro);
    }

    .filter-gray-green:hover{
        border-bottom: 4px solid var(--verde-agua);
    }
}

.filter-gray-blue.active {
    border-bottom: 4px solid var(--azul-oscuro);
}

.filter-gray-green.active {
    border-bottom: 4px solid var(--verde-agua);
}

.extra-information {
    grid-column: 1 / 5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

@media (min-width: 768px) {
    .extra-information {
        grid-column: 6 / 8;
        display: flex;
        gap: 2rem;
        flex-direction: column;
    }
}

@media (min-width: 992px) {
    .extra-information {
        grid-column: 9 / 11;
    }
}

.extra-information-group {
    grid-column: span 2;
    border-top: 1px solid var(--gris-claro);
}

.extra-information-title {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 1.1rem 0;
    color: var(--negro);
    text-transform: uppercase;
}

.project-keywords,
.extra-information-content,
.extra-information-text  {
    font-size: 1.3rem;
    color: var(--gris-oscuro);
}

.extra-information-text {
    font-size: 1.2rem;
    font-weight: 400;
}

/* .extra-information-content {
    font-weight: 600;
} */

.extra-information-content:not(:last-child) {
    margin-bottom: 1.5rem;
}


/* =================== Authors tab ================== */
.authors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 7rem 2rem 4rem 2rem;
    background-color: var(--gris-claro-claro);
}

.authors-columns {
    display: grid;
    gap: 4.5rem 2rem;
    grid-template-columns: repeat(4, 1fr);
    grid-column: span 4;
}

@media (min-width: 768px) {
    .authors {
        grid-template-columns: repeat(8, 1fr);
    }

    .authors-columns {
        grid-template-columns: repeat(6, 1fr);
        grid-column: 2 / 8;
    }
}

@media (min-width: 992px) {
    .authors {
        grid-template-columns: repeat(12, 1fr);
    }

    .authors-columns {
        grid-template-columns: repeat(8, 1fr);
        grid-column: 3 / 11;
    }
}

.author {
    grid-column: span 2;
    display: flex;
    background-color: var(--blanco);
    border: 0.1rem solid var(--gris-claro);
    flex-direction: column;
    align-items: center;
    padding: 0 3rem;
}

.author-image {
    border-radius: 50%;
    border: 0.2rem solid var(--gris-claro);
    margin-top: -3.5rem;
}

.author-name {
    color: var(--gris-oscuro);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 1rem 0 0 0;
}

.author-role {
    font-size: 1.2rem;
    font-weight: 300;
}

.author-icmpd {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

.author-posts {
    width: 100%;
}

.author-type-post {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0.5rem 0;
    width: 100%;
    border-top: 0.1rem solid var(--gris-claro);
}

.author-type-post:last-child {
    border-bottom: 0.1rem solid var(--gris-claro);
}

.more-button {
    margin: 1.5rem;
    color: var(--negro);
    background-color: transparent;
    padding: 0.5rem 1.2rem;
    border-radius: 0.6rem;
    font-weight: 500;
    font-size: 1.2rem;
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--gris-oscuro);
}

@media (min-width: 992px) {
    .more-button:hover {
        background-color: var(--gris-oscuro);
        color: var(--blanco);
        cursor: pointer;
    }
}


/* =================== Donors tab ================== */
.donors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 7rem 2rem 4rem 2rem;
    background-color: var(--gris-claro-claro);
}

.donors-columns {
    display: grid;
    gap: 4.5rem 2rem;
    grid-template-columns: repeat(4, 1fr);
    grid-column: span 4;
}

@media (min-width: 768px) {
    .donors {
        grid-template-columns: repeat(8, 1fr);
    }

    .donors-columns {
        grid-template-columns: repeat(6, 1fr);
        grid-column: 2 / 8;
    }
}

@media (min-width: 992px) {
    .donors {
        grid-template-columns: repeat(12, 1fr);
    }

    .donors-columns {
        grid-template-columns: repeat(8, 1fr);
        grid-column: 3 / 11;
    }
}

.donor {
    grid-column: span 2;
    border: 0.1rem solid var(--gris-claro);
}

.donor-image {
    width: 100%;
}


/* =================== Author page ================== */
.author-container {
    height: 28rem;
}

@media (min-width: 768px) {
    .author-container {
        height: 30rem;
    }
}

.author-profile {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 4rem 2rem 0 2rem;
    margin-top: -20rem;
    z-index: 999;
    position: relative;
}

@media (min-width: 768px) {
    .author-profile {
        margin-top: -14.5rem;
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (min-width: 992px) {
    .author-profile {
        grid-template-columns: repeat(12, 1fr);
        z-index: 9999;
        position: relative;
    }
}

.author-profile-picture {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    width: 10rem;
    max-width: 20rem;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 0.2rem solid var(--blanco);
}

@media (min-width: 768px) {
    .author-profile-picture {
        width: 18rem;
        margin-top: 1rem;
        grid-column: 6 / 8;
    }
}

@media (min-width: 992px) {
    .author-profile-picture {
        grid-column: 9 / 11;
        margin-top: 0rem;
        width: 22rem;
    }
}

.author-profile-bio {
    grid-column: 1 / 5;
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (min-width: 768px) {
    .author-profile-bio {
        margin-top: 6.5rem;
        grid-column: 2 / 4;
        grid-row: 1 / 3;
        display: block;
        text-align: start;
    }
}

@media (min-width: 992px) {
    .author-profile-bio {
        grid-column: 3 / 6;
    }
}

.author-profile-title {
    font-size: 2.3rem;
    font-weight: 400;
    color: var(--gris-oscuro);
}

.author-profile-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--negro);
    margin-bottom: 2rem;
}

@media (min-width: 992px) {
    .author-profile-title {
        font-size: 3rem;
    }

    .author-profile-text {
        font-size: 1.4rem;
    }
}


/* =================== News Detail page ================== */
.news-image {
    width: 100%;
}

.news-image,
.news-header {
    grid-column: span 4;
}

@media (min-width: 768px) {
    .news-image {
        grid-column: 2 / 4;
        height: 100%;
        object-fit: cover;
    }

    .news-header {
        grid-column: 4 / 8;
    }
}

@media (min-width: 992px) {
    .news-image {
        grid-column: 3 / 6;
    }

    .news-header {
        grid-column: 6 / 11;
    }
}

.news-lead-paragraph {
    font-size: 1.4rem;
    margin-bottom: 2rem;
}

@media (min-width: 992px) {
    .news-lead-paragraph {
        font-size: 1.6rem;
    }
}

/* =================== All News page ================== */
.search-list-header {
    grid-column: span 4;
}

@media (min-width: 768px) {
    .search-list-header {
        grid-column: 2 / 8;
    }
}

@media (min-width: 992px) {
    .search-list-header {
        grid-column: 3 / 8;
    }
}

.search-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    margin: 4rem 2rem;
    gap: 2rem;
}

@media (min-width: 768px) {
    .search-grid {
        grid-template-columns: repeat(8, 1fr);
        grid-auto-rows: auto;
    }
}

@media (min-width: 992px) {
    .search-grid {
        grid-template-columns: repeat(12, 1fr);
    }
}

.search-posts {
    grid-column: 1 / 5;
    grid-row: 3 / 4;
    grid-template-columns: repeat(4, 1fr);
    align-self: start;
}

.search-posts .post-card {
    display: block;
    transition: all .3s ease-in-out;
}

@media (min-width: 768px) {
    .search-posts {
        grid-column: 4 / 8;
        grid-row: 2 / 3;
        grid-template-columns: repeat(4, 1fr);
        padding-top: 0;
        margin-top: 0;
    }
}

@media (min-width: 992px) {
    .search-posts {
        grid-column: 5 / 11;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: max-content;
        margin-top: 0;
    }
}

.search-filter {
    grid-column: 1 / 5;
    grid-row: 2 / 3;
    align-self: start;
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--amarillo-marca);
    cursor: pointer;
}

input[type="radio"] {
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid var(--gris-oscuro);
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type="radio"]:checked {
    border: none;
    background-color: var(--amarillo-marca);
}

.label-filter {
    font-size: 1.3rem;
    color: var(--gris-oscuro);
}

@media (min-width: 768px) {
    .search-filter {
        grid-column: 2 / 4;
    }
}

@media (min-width: 992px) {
    .search-filter {
        grid-column: 3 / 5;
    }
}

.search-filter-title {
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--gris-oscuro);
    margin-top: 0;
}

#selected-filters {
    margin: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.selected-filter {
    background-color: var(--gris-claro-claro);
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: var(--gris-oscuro);
}

.selected-filter .remove-filter {
    background: none;
    border: none;
    color: var(--gris-oscuro);
    margin-left: 0.5rem;
    cursor: pointer;
}

.clear-filters-button {
    background-color: var(--gris-oscuro);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    cursor: pointer;
    margin: 2rem 0 1rem 0;
    font-size: 1.2rem;
}

#clear-filters {
    display: none;
}

.sort-by {
    grid-column: 1 / 5;
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
    align-items: end;
}

@media (min-width: 768px) {
    .sort-by {
        grid-column: 9 / 11;
        grid-row: 1 / 2;
    }
}

.dropdown-filter {
    position: relative;
}

.dropdown-arrow {
    margin-left: 0.5rem;
}

.tag.white-gray-tag.active .dropdown-arrow {
    transform: rotate(-180deg);
}

.dropdown-filter-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid var(--gris-claro);
    border-radius: 0.6rem;
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-text-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--gris-claro);
    border-radius: 0.6rem;
    margin-bottom: 1rem;
}

.dropdown-filter-menu li label {
    width: 100%;
    cursor: pointer;
}

.dropdown-filter-menu li {
    width: 100%;
    text-align: start;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: var(--gris-oscuro);
}

.dropdown-filter-menu li:first-child {
    background-color: var(--gris-claro-claro);
}

.dropdown-filter-menu li a {
    color: black;
    font-weight: 400;
    font-size: 1.2rem;
    text-transform: uppercase;
    padding: 0.5rem 1.2rem;
    text-decoration: none;
    display: block;
}

@media (min-width: 992px) {
    .dropdown-filter-menu li:hover {
        background-color: var(--gris-claro-claro);
    }
}

.main-carousel {
    margin-bottom: 4rem;
}

.carousel-cell img {
    width: auto;
    max-height: 40rem;
    transition: filter 0.3s ease;
}


/* ========== Featured Post ========== */
.featured-posts-text{
    margin-bottom: 1rem;
}

.glide {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 3rem 2rem 6rem 2rem;
}

.glide__track {
    grid-column: span 4;
}

@media (min-width: 768px) {
    .glide {
        grid-template-columns: repeat(8, 1fr);
    }

    .glide__track {
        grid-column: 2 / 8;
    }
}

@media (min-width: 992px) {
    .glide {
        grid-template-columns: repeat(12, 1fr);
    }

    .glide__track {
        grid-column: 3 / 11;
    }
}

.glide__slides {
    padding: 2rem 0;
}

.glide__bullets {
    padding-bottom: 2rem;
}

.glide__bullet {
    background-color: var(--gris-claro-claro);
    box-shadow: none;
}

.glide__bullet--active {
    background-color: var(--gris-claro);
}

@media (min-width: 992px) {
    .glide__bullet:hover, .glide__bullet:focus {
        background-color: var(--gris-claro);
        border: none;
    }
}



/* ========== Welcome Message ========== */
.welcome-message {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 6rem 2rem;
    gap: 2rem;
    background: linear-gradient(140deg, var(--gris-oscuro) 0%, var(--gris-claro) 140%);
    position: relative;
    overflow: hidden;
}

.welcome-message::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/welcome-bg-pattern.svg');
    opacity: 0.7;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
}

.welcome-info {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    z-index: 999;
}

.welcome-title {
    font-size: 2.3rem;
    font-weight: 400;
    color: var(--amarillo-marca);
    margin-bottom: 4rem;
    z-index: 999;
}

.welcome-text {
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 1.5;
    color: var(--blanco);
    z-index: 999;
}

.welcome-text:nth-child(2) {
    margin-bottom: 2rem;
}

.welcome-button {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--blanco);
    text-transform: uppercase;
    margin-top: 2rem;
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--amarillo-marca);
    border-radius: 0.6rem;
    align-self: end;
    transition: all 0.2s ease-in-out;
    z-index: 999;
}

@media (min-width: 992px) {
    .welcome-button:hover {
        background-color: var(--amarillo-marca);
        color: var(--negro);
        cursor: pointer;
    }
}

.welcome-image-container {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.welcome-image {
    width: 100%;
}

@media (min-width: 768px) {
    .welcome-message {
        grid-template-columns: repeat(8, 1fr);
    }

    .welcome-info {
        grid-column: 2 / 5;
    }

    .welcome-image-container {
        grid-column: 5 / 8;
    }
}

@media (min-width: 992px) {
    .welcome-message {
        grid-template-columns: repeat(12, 1fr);
    }

    .welcome-info {
        grid-column: 3 / 7;
    }

    .welcome-title{
        font-size: 2.8rem;
    }

    .welcome-text {
        font-size: 1.8rem;
    }

    .welcome-button {
        font-size: 1.2rem;
    }

    .welcome-image-container {
        grid-column: 7 / 11;
    }
}



/* =============== About Us ============== */
.intro-about {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    grid-template-rows: auto;
    position: relative;
    background: url('img/about-bg-img-low.jpg');
    background-size: cover;
    background-position: bottom left;
    padding: 18rem 2rem 4rem 2rem;
}

.intro-about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--verde-agua) 0%, var(--azul-oscuro) 100%);
    z-index: 1;
    mix-blend-mode: multiply;
}

.intro-about::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/about-bg-pattern.svg');
    opacity: 0.7;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
}

.intro-about-title,
.intro-about-text {
    grid-column: span 4;
    color: var(--blanco);
    position: relative;
    z-index: 999;
    width: 80%;
}

.intro-about-title {
    font-size: 2.3rem;
    font-weight: 400;
}

.intro-about-text {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .intro-about {
        grid-template-columns: repeat(8, 1fr);
    }

    .intro-about-title,
    .intro-about-text {
        grid-column: 2 / 8;
        font-size: 2.8rem;
    }

    .intro-about-title {
        font-size: 2.8rem;
    }

}

@media (min-width: 992px) {
    .intro-about {
        grid-template-columns: repeat(12, 1fr);
    }

    .intro-about-title,
    .intro-about-text  {
        grid-column: 3 / 7;
    }
}



/* ============= What We Do ============== */
.what-we-do {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 4rem 2rem;
}

.what-we-do-first,
.what-we-do-second {
    grid-column: span 4;
}

.what-we-do-title {
    font-size: 2.3rem;
    color: var(--gris-oscuro);
    font-weight: 500;
}

@media (min-width: 768px) {
    .what-we-do {
        grid-template-columns: repeat(8, 1fr);
    }

    .what-we-do-first,
    .what-we-do-second {
        grid-column: 2 / 8;
    }

    .intro-about-text {
        font-size: 1.8rem;
    }
}

@media (min-width: 992px) {
    .what-we-do {
        grid-template-columns: repeat(12, 1fr);
    }

    .what-we-do-first,
    .what-we-do-second {
        grid-column: 3 / 9;
    }

    .what-we-do-title {
        font-size: 2.8rem;
    }
}

.what-we-do-first {
    margin-bottom: 4rem;
}

.what-we-do-second {
    padding: 2rem 0;
}

.what-we-do-text {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
}

.what-we-do-text:first-of-type {
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .what-we-do-text {
        font-size: 1.8rem;
    }
}

.what-we-do-topic {
    display: flex;
    gap: 2rem;
}

.what-we-do-topic:first-of-type {
    margin-top: 4rem;
}

.what-we-do-topic-title {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--gris-oscuro);
}

.highlight-about {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column: -1 / 1;
    gap: 2rem;
    background-color: var(--verde-claro-claro);
    padding: 4rem 0;
    margin-left: -2rem;
    margin-right: -2rem;
}

.highlight-about-text {
    grid-column: span 4;
    font-size: 1.6rem;
    color: var(--gris-oscuro);
    font-weight: 300;
    line-height: 1.7;
    margin: 0 2rem;
}

@media (min-width: 768px) {
    .highlight-about {
        grid-template-columns: repeat(8, 1fr);
    }

    .highlight-about-text {
        grid-column: 2 / 8;
        font-size: 1.8rem;
    }
}

@media (min-width: 992px) {
    .highlight-about {
        grid-template-columns: repeat(12, 1fr);
    }

    .highlight-about-text {
        grid-column: 3 / 9;
    }
}



/* ============= Who We Are ============== */
.who-we-are {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 3rem 2rem;
}

@media (min-width: 768px) {
    .who-we-are {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (min-width: 992px) {
    .who-we-are {
        grid-template-columns: repeat(12, 1fr);
    }
}

.who-we-are-intro {
    grid-column: span 4;
    grid-row: 1 / 2;
}

@media (min-width: 768px) {
    .who-we-are-intro {
        grid-column: 2 / 9;
    }
}

@media (min-width: 992px) {
    .who-we-are-intro {
        grid-column: 3 / 11;
    }
}

.head-icmpd {
    grid-column: span 4;
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

@media (min-width: 768px) {
    .head-icmpd {
        grid-column: 2 / 9;
        flex-direction: row;
    }
}

@media (min-width: 992px) {
    .head-icmpd {
        grid-column: 3 / 7;
    }
}

.who-we-are-title {
    font-size: 2.3rem;
    color: var(--gris-oscuro);
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0.3rem;
}

.who-we-are-text {
    font-size: 1.6rem;
    color: var(--gris-oscuro);
    font-weight: 300;
    line-height: 1.5;
}

.head-icmpd-img {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    width: 20rem;
    max-width: 20rem;
    margin-right: 2rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 0.2rem solid var(--blanco);
    filter: grayscale(1);
}

.head-icmpd-bio {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .head-icmpd-bio {
        text-align: start;
        align-items: start;
    }
}

.head-icmpd-title {
    font-size: 2.3rem;
    color: var(--gris-oscuro);
    font-weight: 400;
    margin-bottom: 2rem;
}

.head-icmpd-text {
    font-size: 1.2rem;
    color: var(--gris-oscuro);
    font-weight: 300;
}

.contact-icmpd {
    margin-top: 1rem;
}

.link-contact-icmpd {
    position: relative;
}

.link-contact-icmpd::before {
    content: attr(data-tooltip);
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1rem;
    position: absolute;
    top: 2.4rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--gris-claro);
    color: var(--gris-oscuro);
    padding: 0.6rem 1rem;
    border-radius: 0.6rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    pointer-events: none;
    z-index: 10;
}

.link-contact-icmpd::after {
    content: '';
    position: absolute;
    top: 0.9rem;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0.8rem;
    border-style: solid;
    border-radius: 2px;
    border-color: transparent transparent var(--gris-claro) transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    pointer-events: none;
    z-index: 10;
}

@media (min-width: 992px) {
    .link-contact-icmpd:hover::before,
    .link-contact-icmpd:hover::after {
        opacity: 1;
        visibility: visible;
    }
}

.icmpd-team {
    grid-column: span 4;
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 4rem;
    border-top: 2px solid var(--blanco);
}

@media (min-width: 768px) {
    .icmpd-team {
        grid-column: 2 / 8;
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 992px) {
    .icmpd-team {
        grid-column: 3 / 11;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
    }
}

.icmpd-person {
    grid-column: span 2;
    margin: 0 auto;
    text-align: center;
}

.icmpd-person-image {
    width: 10rem;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid var(--blanco);
}

.icmpd-person-title {
    font-size: 1.6rem;
    color: var(--gris-oscuro);
    font-weight: 400;
}

.icmpd-person-organization,
.icmpd-person-role {
    font-size: 1.2rem;
    color: var(--gris-oscuro);
}

.icmpd-person-organization {
    font-weight: 700;
}