.inicio-gqr {
    margin-top: 80px;
}
.inicio-gqr__titulo::before,
.inicio-gqr__titulo-franja {
    background-color: var(--color-amarillo);
}
.inicio-gqr__titulo-triangulos {
    --color-triangulo-izquierdo: var(--color-azul-verde-oscuro);
    --color-triangulo-medio: var(--color-rojo);
    --color-triangulo-derecho: var(--color-azul-verde-oscuro);
}
.inicio-gqr__titulo-texto { color: var(--color-azul-verde-oscuro); }
.inicio-gqr__titulo-texto svg { --color-figura: var(--color-azul-verde-oscuro); }

.inicio-gqr__componentes {
    margin-top: 50px;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.inicio-gqr__componente {
    max-width: 300px;
    display: block;
    position: relative;
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.inicio-gqr__componente:hover,
.inicio-gqr__componente:focus-visible {
    transform: scale(1.05);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.inicio-gqr__componente:active {
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
    opacity: 0.5;
}
.inicio-gqr__borde-amarillo { border: 5px solid var(--color-amarillo); }
.inicio-gqr__borde-azul { border: 5px solid var(--color-azul); }
.inicio-gqr__borde-morado { border: 5px solid var(--color-violeta); }
.inicio-gqr__componente h3 {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    margin: auto;
    font-family: 'Moranga', serif;
    font-size: var(--fs-800);
    font-weight: 300;
    background-color: var(--color-blanco-hueso);
    width: 100%;
    text-align: center;
}
.inicio-gqr__titulo-investigacion {
    top: 65%;
    color: var(--color-amarillo);
}
.inicio-gqr__titulo-enseñanza {
    top: 40%;
    color: var(--color-azul);
}
.inicio-gqr__titulo-divulgacion {
    top: 15%;
    color: var(--color-violeta);
}
.inicio-gqr__componente img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}